search call with input+button appearing when filled search field

src/assets/scss/_settings.scss

@@ -108,6 +108,8 @@ $global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 $print-hrefs: true;
+$global-duration-archive: 0.3s; //duration of css transitions
+$global-bezier-archive: cubic-bezier(0, 0, 0.43, 1.49);
 
 @include add-foundation-colors;
 
@@ -305,20 +307,20 @@ $button-font-family: inherit;
 $button-font-weight: null;
 $button-font-variant: all-petite-caps;
 $button-padding: $global-padding $global-padding*3;
-$button-margin: 0;
+$button-margin: $global-margin/4;
 $button-fill: solid;
-$button-background: $primary-color;
+$button-background: $white;//$primary-color;
-$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-background-hover: scale-color($primary-color, $lightness: 95%);
-$button-color: $white;
+$button-color: $primary-color;//$white;
 $button-color-alt: $black;
 $button-radius: $global-radius-archive;
-$button-border: 1px solid transparent;
+$button-border: 2px solid $button-color;//1px solid transparent;
 $button-hollow-border-width: 2px;
 $button-sizes: (
-  tiny: 0.6rem,
+  tiny: 0.7rem,
-  small: 0.75rem,
+  small: 0.95rem,
-  default: 1.2rem,
+  default: 1.6rem,
-  large: 1.5rem,
+  large: 2.4rem,
 );
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.25;
@@ -441,7 +443,7 @@ $flexbox-responsive-breakpoints: true;
 // 20. Forms
 // ---------
 
-$fieldset-border: 1px solid $medium-gray;
+$fieldset-border: none; //1px solid $medium-gray;
 $fieldset-padding: rem-calc(20);
 $fieldset-margin: rem-calc(18 0);
 $legend-padding: rem-calc(0 3);
@@ -450,32 +452,32 @@ $helptext-color: $black;
 $helptext-font-size: rem-calc(13);
 $helptext-font-style: italic;
 $input-prefix-color: $black;
-$input-prefix-background: $light-gray;
+$input-prefix-background: none; //$light-gray;
-$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-border: none; //1px solid $medium-gray;
 $input-prefix-padding: 1rem;
 $form-label-color: $black;
 $form-label-font-size: rem-calc(14);
 $form-label-font-weight: $global-weight-normal;
 $form-label-line-height: 1.8;
 $select-background: $white;
-$select-triangle-color: $dark-gray;
+$select-triangle-color: $primary-color;
 $select-radius: $global-radius;
-$input-color: $black;
+$input-color: $primary-color;
-$input-placeholder-color: $medium-gray;
+$input-placeholder-color: scale-color($primary-color, $lightness: 60%); //$antracite-grey;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-font-weight: $global-weight-normal;
 $input-line-height: $global-lineheight;
-$input-background: $white;
+$input-background: scale-color($primary-color, $lightness: 95%);
-$input-background-focus: $white;
+$input-background-focus:  scale-color($primary-color, $lightness: 85%);
 $input-background-disabled: $light-gray;
-$input-border: 1px solid $medium-gray;
+$input-border: none; //1px solid $medium-gray;
-$input-border-focus: 1px solid $dark-gray;
+$input-border-focus: none; // 1px solid $dark-gray;
 $input-padding: $form-spacing / 2;
-$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow: none; //inset 0 1px 2px rgba($black, 0.1);
-$input-shadow-focus: 0 0 5px $medium-gray;
+$input-shadow-focus: none; //0 0 5px $medium-gray;
 $input-cursor-disabled: not-allowed;
-$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-transition: none; //box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
 $form-button-radius: $global-radius;
@@ -906,4 +908,3 @@ $grid-padding-gutters: $grid-margin-gutters;
 $grid-container-padding: $grid-padding-gutters;
 $grid-container-max: $global-width;
 $xy-block-grid-max: 8;
-

src/assets/scss/app.scss

@@ -86,6 +86,7 @@
 // Componentes
 @import "components/links";
 @import "components/featured-image";
+@import "components/forms";
 @import "components/dividers";
 @import "components/cards";
 @import "components/buttons";

src/assets/scss/components/_buttons.scss

@@ -1,5 +1,23 @@
 button,.button {
-    min-width: 20rem;
+  &:not(.large,.small,.tiny){
+    // min-width: 20rem;
+  }
+    &.primary {
+      color: $white;
+    }
+    &.success {
+      border-color: $success-color;
+    }
+    &.alert {
+      border-color: $alert-color;
+      color: $white;
+      &:hover{
+        color:$white;
+      }
+    }
+    &.secondary {
+      border-color: $secondary-color;
+    }
 }
 .hero {
   button,.button {
@@ -8,11 +26,23 @@ button,.button {
     color: $button-color-alt;
     font-size: $global-font-size*1.3;
     border-color: $button-color-alt;
-    border-radius: 4rem;
+    border-radius: $global-radius-archive*2;
-//    margin: $global-margin*2 0;
     &:hover{
       color: $anchor-color;
       border-color: $anchor-color;
     }
   }
 }
+.search {
+  .button {
+    border-color: $primary-color;
+  }
+  button.appear{
+    min-width: unset;
+    background-color: $primary-color;
+    color: $white;
+    border-radius:$global-radius-archive;
+    // padding:0;
+    border: none;
+  }
+}

src/assets/scss/components/_forms.scss

@@ -0,0 +1,29 @@
+.search{
+  .button{
+    border-color: $primary-color;
+  }
+  button.appear{
+    display:none;
+  }
+  input:not(:placeholder-shown) {
+    + button {
+      display: block;
+      z-index: 2;
+    }
+  }
+  .hollow {
+    border-color: $primary-color;
+    color: $primary-color;
+    &::after {
+    }
+    &::placeholder {
+      color: scale-color($primary-color, $lightness: -20%);
+    }
+    &:hover {
+      background-color: scale-color($primary-color, $lightness: 95%);
+    }
+    &:active {
+      background-color: scale-color($primary-color, $lightness: 85%);
+    }
+  }
+}

src/assets/scss/global/_branding.scss

@@ -12,7 +12,7 @@
     background-repeat: no-repeat;
     background-position: center;
   }
-  &.archive{
+  &.arc-hive{
     &::before {
       max-width: 10rem;
       background-image: url('../img/ARC-HIVE-logo.svg');

src/assets/scss/modules/_content.scss

@@ -8,13 +8,9 @@
     // -----------------------------
 
     h1,h2,h3,h4,h5,h6,
-    .h1,.h2,.h3,.h4,.h4,.h5,.h6,
+    .h1,.h2,.h3,.h4,.h5,.h6,
     button,.button,
-    header nav,
+    header nav {
-    
-    
-    h1,h2,h3,h4,h5,h6,
-    .h1,.h2,.h3,.h4,.h4,.h5,.h6 {
             font-variant:all-small-caps;
       a {
         color: $body-font-color;
@@ -82,9 +78,10 @@
           @include xy-cell(12);
           @include flex;
           @include flex-align(center,top);
-        }
+          padding-top: $global-padding*3;
-        @include breakpoint(small){
+          h3 {
-            padding-top: $global-padding*3;
+            line-height: $global-lineheight/1.5;
+          }
         }
       }
       main {
@@ -120,7 +117,7 @@
             }
           }
           .date {
-            height: 1rem;
+            // height: 1rem;
             padding-top: $global-padding*2;
           }
           .entry-title {
@@ -156,11 +153,12 @@
         @include xy-cell(12);
         @include flex;
         @include flex-align(center,top);
-        padding: $global-padding*3 0;
+        padding: $global-padding*2 0;
       }
       header {
+        margin-top: 2*$global-margin;
         border-top: 1px solid $body-font-color;
-        padding: $global-padding*4 0;
+        padding: $global-padding*2 0;
       }
       main {
         @include xy-grid;
@@ -311,6 +309,39 @@
         }
       }
     }
+    &.omeka {
+      border-top: none;
+      max-height: unset;
+      @include breakpoint(small){
+        .slides {
+          background-color: $secondary-color;
+          .slide {
+            flex-direction: column;
+            align-content: center;
+            align-self: center;
+            margin: $global-margin auto;
+            &:first-child {
+              color: unset;
+              background-color: unset;
+              font-variant:all-small-caps;
+            }
+            figure {
+              margin: 0 auto;
+              display:flex;
+              justify-content: center;
+            }
+          }
+        }
+      }
+      aside {
+        background-color: $white;
+        flex-direction: column;
+        align-content: center;
+        h2 {
+          margin: $global-margin;
+        }
+      }
+    }
   }
   //end hero
 

src/layouts/default.html

@@ -33,6 +33,5 @@
 
    </content>
    <script src="{{root}}assets/js/app.js"></script>
-  </div>
  </body>
 </html>

src/layouts/omeka.html

@@ -0,0 +1,35 @@
+{{!-- This is the base layout for your project, and will be used on every page unless specified. --}}
+
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>arcHIVE html/css development</title>
+    <link rel="stylesheet" href="{{root}}assets/css/app.css">
+  </head>
+<body>
+
+  <content class="">
+
+     <header>
+       {{> header}}
+     </header>
+     {{> section-hero-omeka}}
+     <article>
+       <main>
+         {{> body}}
+       </main>
+       <aside>
+       </aside>
+     </article>
+
+     <footer>
+       {{> footer}}
+     </footer>
+
+   </content>
+   <script src="{{root}}assets/js/app.js"></script>
+ </body>
+</html>

src/pages/index.html

@@ -7,4 +7,3 @@
       {{> section-partners}}
       {{> section-breaker}}
       {{> section-collections}}
-

src/pages/omeka-index.html

@@ -0,0 +1,5 @@
+---
+layout: omeka
+---
+
+      {{> section-collections-latest}}

src/partials/footer.html

@@ -1,7 +1,7 @@
 
   <footer class="">
     <section class="subsection">
-      <aside class="site-brand archive">
+      <aside class="site-brand arc-hive">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="">
          <h1 class="site-name">
             <?php bloginfo( 'name' ); ?>
@@ -59,4 +59,3 @@
       </aside>
     </section>
   </footer>
-

src/partials/header.html

@@ -1,5 +1,5 @@
      <main class="">
-       <a href="#" role="banner" class="site-brand">
+       <a href="/" role="banner" class="site-brand arc-hive">
          <h1 class="site-name">arcHIVE</h1>
          <h2 class="site-description">an integrative digital bio-art platform</h2>
        </a>
@@ -8,10 +8,10 @@
        <menu class="">
          <!-- Content -->
          <ul class="menu">
-           <li><a href="#">News</a></li>
+           <li><a href="/">News</a></li>
-           <li><a href="#">About</a></li>
+           <li><a href="omeka-index.html">Omeka</a></li>
-           <li><a href="#">Contact</a></li>
+           <li><a href="styleguide.html">StyleGuide</a></li>
-           <li><a href="#">Search</a></li>
+           <li><a href="kitchensink.html">KitchenSink</a></li>
          </ul>
        </menu>
      </nav>

src/partials/search-field.html

@@ -0,0 +1,7 @@
+<form class="search">
+  <label>Search</label>
+  <div class="input-group">
+    <input type="text" placeholder="search" class="input-group-field" />
+    <button type="submit">Go</button>    
+  </div>
+</form>

src/partials/section-hero-omeka.html

@@ -0,0 +1,21 @@
+<section class="hero omeka">
+  <main class="slides">
+    <section class="slide">
+        <p>ARC-HIVE is a curatorial space that gathers artworks that work in the continuum of biomateriality, from DNA, proteins, and cells to full organisms. They can be manipulation, modification or (re)creation of life and living processes.</p>
+        <figure>
+          <img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
+        </figure>
+    </section>
+  </main>
+  <aside>
+    <h2>collections</h2>
+
+<!-- https://codepen.io/liamj/pen/vYYLGZj -->
+    <form class="search">
+      <div class="input-group">
+        <input type="text" placeholder="search" class="input-group-field button hollow" />
+        <button class="appear button" type="submit">Go</button>
+      </div>
+    </form>
+  </aside>
+</section>