src/assets/scss/_settings.scss

@@ -108,8 +108,6 @@ $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;
 
@@ -307,20 +305,20 @@ $button-font-family: inherit;
 $button-font-weight: null;
 $button-font-variant: all-petite-caps;
 $button-padding: $global-padding $global-padding*3;
-$button-margin: $global-margin/4;
+$button-margin: 0;
 $button-fill: solid;
-$button-background: $white;//$primary-color;
+$button-background: $primary-color;
-$button-background-hover: scale-color($primary-color, $lightness: 95%);
+$button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $primary-color;//$white;
+$button-color: $white;
 $button-color-alt: $black;
 $button-radius: $global-radius-archive;
-$button-border: 2px solid $button-color;//1px solid transparent;
+$button-border: 1px solid transparent;
 $button-hollow-border-width: 2px;
 $button-sizes: (
-  tiny: 0.7rem,
+  tiny: 0.6rem,
-  small: 0.95rem,
+  small: 0.75rem,
-  default: 1.6rem,
+  default: 1.2rem,
-  large: 2.4rem,
+  large: 1.5rem,
 );
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.25;
@@ -443,7 +441,7 @@ $flexbox-responsive-breakpoints: true;
 // 20. Forms
 // ---------
 
-$fieldset-border: none; //1px solid $medium-gray;
+$fieldset-border: 1px solid $medium-gray;
 $fieldset-padding: rem-calc(20);
 $fieldset-margin: rem-calc(18 0);
 $legend-padding: rem-calc(0 3);
@@ -452,32 +450,32 @@ $helptext-color: $black;
 $helptext-font-size: rem-calc(13);
 $helptext-font-style: italic;
 $input-prefix-color: $black;
-$input-prefix-background: none; //$light-gray;
+$input-prefix-background: $light-gray;
-$input-prefix-border: none; //1px solid $medium-gray;
+$input-prefix-border: 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: $primary-color;
+$select-triangle-color: $dark-gray;
 $select-radius: $global-radius;
-$input-color: $primary-color;
+$input-color: $black;
-$input-placeholder-color: scale-color($primary-color, $lightness: 60%); //$antracite-grey;
+$input-placeholder-color: $medium-gray;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-font-weight: $global-weight-normal;
 $input-line-height: $global-lineheight;
-$input-background: scale-color($primary-color, $lightness: 95%);
+$input-background: $white;
-$input-background-focus:  scale-color($primary-color, $lightness: 85%);
+$input-background-focus: $white;
 $input-background-disabled: $light-gray;
-$input-border: none; //1px solid $medium-gray;
+$input-border: 1px solid $medium-gray;
-$input-border-focus: none; // 1px solid $dark-gray;
+$input-border-focus: 1px solid $dark-gray;
 $input-padding: $form-spacing / 2;
-$input-shadow: none; //inset 0 1px 2px rgba($black, 0.1);
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
-$input-shadow-focus: none; //0 0 5px $medium-gray;
+$input-shadow-focus: 0 0 5px $medium-gray;
 $input-cursor-disabled: not-allowed;
-$input-transition: none; //box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
 $form-button-radius: $global-radius;
@@ -908,3 +906,4 @@ $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,7 +86,6 @@
 // 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,23 +1,5 @@
 button,.button {
-  &:not(.large,.small,.tiny){
+    min-width: 20rem;
-    // 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 {
@@ -26,23 +8,11 @@ button,.button {
     color: $button-color-alt;
     font-size: $global-font-size*1.3;
     border-color: $button-color-alt;
-    border-radius: $global-radius-archive*2;
+    border-radius: 4rem;
+//    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

@@ -1,29 +0,0 @@
-.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;
   }
-  &.arc-hive{
+  &.archive{
     &::before {
       max-width: 10rem;
       background-image: url('../img/ARC-HIVE-logo.svg');

src/assets/scss/modules/_content.scss

@@ -8,9 +8,13 @@
     // -----------------------------
     
     h1,h2,h3,h4,h5,h6,
-    .h1,.h2,.h3,.h4,.h5,.h6,
+    .h1,.h2,.h3,.h4,.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;
@@ -78,10 +82,9 @@
           @include xy-cell(12);
           @include flex;
           @include flex-align(center,top);
-          padding-top: $global-padding*3;
+        }
-          h3 {
+        @include breakpoint(small){
-            line-height: $global-lineheight/1.5;
+            padding-top: $global-padding*3;
-          }
         }
       }
       main {
@@ -117,7 +120,7 @@
             }
           }
           .date {
-            // height: 1rem;
+            height: 1rem;
             padding-top: $global-padding*2;
           }
           .entry-title {
@@ -153,12 +156,11 @@
         @include xy-cell(12);
         @include flex;
         @include flex-align(center,top);
-        padding: $global-padding*2 0;
+        padding: $global-padding*3 0;
       }
       header {
-        margin-top: 2*$global-margin;
         border-top: 1px solid $body-font-color;
-        padding: $global-padding*2 0;
+        padding: $global-padding*4 0;
       }
       main {
         @include xy-grid;
@@ -309,39 +311,6 @@
         }
       }
     }
-    &.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,5 +33,6 @@
 
    </content>
    <script src="{{root}}assets/js/app.js"></script>
+  </div>
  </body>
 </html>

src/layouts/omeka.html

@@ -1,35 +0,0 @@
-{{!-- 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,3 +7,4 @@
       {{> section-partners}}
       {{> section-breaker}}
       {{> section-collections}}
+

src/pages/omeka-index.html

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

src/partials/footer.html

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

src/partials/header.html

@@ -1,5 +1,5 @@
      <main class="">
-       <a href="/" role="banner" class="site-brand arc-hive">
+       <a href="#" role="banner" class="site-brand">
          <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="omeka-index.html">Omeka</a></li>
+           <li><a href="#">About</a></li>
-           <li><a href="styleguide.html">StyleGuide</a></li>
+           <li><a href="#">Contact</a></li>
-           <li><a href="kitchensink.html">KitchenSink</a></li>
+           <li><a href="#">Search</a></li>
          </ul>
        </menu>
      </nav>

src/partials/search-field.html

@@ -1,7 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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>