search call with input+button appearing when filled search field

src/assets/scss/_settings.scss

@@ -72,7 +72,7 @@
 // 1. Global
 // ---------
 
-$global-font-size:100%; 
+$global-font-size:100%;
 $global-width: 100vw;
 $global-lineheight: 1.5;
 
@@ -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-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $white;
+$button-background: $white;//$primary-color;
+$button-background-hover: scale-color($primary-color, $lightness: 95%);
+$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,
-  small: 0.75rem,
-  default: 1.2rem,
-  large: 1.5rem,
+  tiny: 0.7rem,
+  small: 0.95rem,
+  default: 1.6rem,
+  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-border: 1px solid $medium-gray;
+$input-prefix-background: none; //$light-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-placeholder-color: $medium-gray;
+$input-color: $primary-color;
+$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-focus: $white;
+$input-background: scale-color($primary-color, $lightness: 95%);
+$input-background-focus:  scale-color($primary-color, $lightness: 85%);
 $input-background-disabled: $light-gray;
-$input-border: 1px solid $medium-gray;
-$input-border-focus: 1px solid $dark-gray;
+$input-border: none; //1px solid $medium-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-focus: 0 0 5px $medium-gray;
+$input-shadow: none; //inset 0 1px 2px rgba($black, 0.1);
+$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

@@ -69,7 +69,7 @@
 // global project styles
 
 @import "global/wp-overrides"; //errors
-@import "global/wp-admin";  //errors 
+@import "global/wp-admin";  //errors
 @import "global/typography";
 @import "global/gutenberg";
 @import "global/colors";
@@ -86,6 +86,7 @@
 // Componentes
 @import "components/links";
 @import "components/featured-image";
+@import "components/forms";
 @import "components/dividers";
 @import "components/cards";
 @import "components/buttons";
@@ -111,4 +112,4 @@
 // gulp.task('icons', function() {
 //    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
 //        .pipe(gulp.dest(dist+'/assets/webfonts/'));
-//  });                                                  
+//  });

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;
-//    margin: $global-margin*2 0;
+    border-radius: $global-radius-archive*2;
     &: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

@@ -1,20 +1,16 @@
   //content {
-    
+
     // general styles
     //----------------
     //
-    // mods on fonts and typography 
+    // mods on fonts and typography
     // not in foundation variables
     // -----------------------------
-    
+
     h1,h2,h3,h4,h5,h6,
-    .h1,.h2,.h3,.h4,.h4,.h5,.h6,
+    .h1,.h2,.h3,.h4,.h5,.h6,
     button,.button,
-    header nav,
-    
-    
-    h1,h2,h3,h4,h5,h6,
-    .h1,.h2,.h3,.h4,.h4,.h5,.h6 {
+    header nav {
             font-variant:all-small-caps;
       a {
         color: $body-font-color;
@@ -30,7 +26,7 @@
        }
       }
     }
-    
+
     //
     // main block
     //--------------
@@ -73,7 +69,7 @@
     //
     // news category
     //--------------
-    
+
     .news,.news-category {
       @include xy-grid;
       header,main,aside {
@@ -82,9 +78,10 @@
           @include xy-cell(12);
           @include flex;
           @include flex-align(center,top);
-        }
-        @include breakpoint(small){
-            padding-top: $global-padding*3;
+          padding-top: $global-padding*3;
+          h3 {
+            line-height: $global-lineheight/1.5;
+          }
         }
       }
       main {
@@ -120,7 +117,7 @@
             }
           }
           .date {
-            height: 1rem;
+            // height: 1rem;
             padding-top: $global-padding*2;
           }
           .entry-title {
@@ -128,7 +125,7 @@
              line-height: 0.7;
              font-size: $global-font-size*1.5;
           }
-          
+
         }
       }
       aside {
@@ -149,18 +146,19 @@
     //
     // collections category
     //--------------
-    
+
     .collections-list {
       @include xy-grid;
       header,main,aside {
         @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;
@@ -182,7 +180,7 @@
     // end news category
 
     //
-    // partners 
+    // partners
     // for big announcemnts
     //---------------------
 
@@ -229,14 +227,14 @@
           width: 100vw;
           margin: 0;
           .textwidget {
-            padding: $global-padding * 2; 
+            padding: $global-padding * 2;
           }
         }
         @include breakpoint(medium){
           .textwidget {
             max-width: 50rem;
             margin:auto;
-            padding: $global-padding * 2; 
+            padding: $global-padding * 2;
             font-size: $global-font-size*1.3;
           }
         }
@@ -256,19 +254,19 @@
           }
           .textwidget {
             font-size: $global-font-size*1.2;
-            padding: $global-padding * 2; 
+            padding: $global-padding * 2;
           }
         }
         @include breakpoint(xlarge){
           .textwidget {
             font-size: $global-font-size*1.3;
-            padding: $global-padding*3; 
+            padding: $global-padding*3;
           }
         }
         @include breakpoint(xxlarge){
           .textwidget {
             font-size: $global-font-size*1.6;
-            padding: $global-padding*3; 
+            padding: $global-padding*3;
           }
         }
         &:first-child {
@@ -311,7 +309,40 @@
         }
       }
     }
-  } 
+    &.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

@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="{{root}}assets/css/app.css">
   </head>
 <body>
-   
+
   <content class="">
 
      <header>
@@ -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="#">About</a></li>
-           <li><a href="#">Contact</a></li>
-           <li><a href="#">Search</a></li>
+           <li><a href="/">News</a></li>
+           <li><a href="omeka-index.html">Omeka</a></li>
+           <li><a href="styleguide.html">StyleGuide</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>