new header and hero structure with scss styles

src/assets/scss/_settings.scss

@@ -65,19 +65,9 @@
 
 // 0. arcHIVE specific styles
 // ---------
-
+// global project styles
-$stone-grey: #CCCCCC;
+@import "global/colors";
-$acid-green: #69E344;
+@import "global/typography";
-$bubblegum-pink: #F096F9;
-$desert-red: #D75930;
-$mustard-yellow: #F5C042;
-$beach-blue: #5CC8D1;
-$hyperlink-blue: #0000DD;
-$bloody-red: #D32D1F;
-$mid-grey: #808080;
-$antracite-grey: #333333;
-$forest-green: #1E6041;
-$raspberry-purple: #54367B;
 
 // 1. Global
 // ---------
@@ -88,7 +78,7 @@ $global-lineheight: 1.5;
 
 $foundation-palette: (
   primary: $hyperlink-blue,
-  secondary: #E94E1B,
+  secondary: $desert-red,
   success: $acid-green,
   warning: $bloody-red,
   alert: $bloody-red,
@@ -100,7 +90,7 @@ $black: #0a0a0a;
 $white: #fefefe;
 $body-background: $white;
 $body-font-color: $black;
-$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-font-family: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 $body-antialiased: true;
 $global-margin: 1rem;
 $global-padding: 1rem;
@@ -184,7 +174,7 @@ $header-styles: (
 );
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
-$header-small-font-color: $medium-gray;
+$header-small-font-color: $dark-gray;
 $paragraph-lineheight: 1.6;
 $paragraph-margin-bottom: 1rem;
 $paragraph-text-rendering: optimizeLegibility;

src/assets/scss/app.scss

@@ -1,5 +1,6 @@
 @charset 'utf-8';
 
+// foundation styles
 @import 'settings';
 @import 'foundation';
 @import 'motion-ui';
@@ -62,3 +63,33 @@
 // Motion UI
 @include motion-ui-transitions;
 @include motion-ui-animations;
+
+// arcHIVE styles
+
+// global project styles
+@import "global/colors";
+@import "global/typography";
+
+// Modules
+@import "modules/navigation";
+@import "modules/header";
+@import "modules/hero";
+@import "modules/content";
+@import "modules/footer";
+
+// Componentes
+//@import "components/buttons";
+
+// Templates
+//@import "templates/front";
+
+// Vendors
+//
+// fontawesome as shown here:
+// https://stackoverflow.com/questions/49195144/add-font-awesome-to-gulp-project-correctly#51491927
+//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
+//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
+//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
+//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
+//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
+                                                                             

src/assets/scss/global/_colors.scss

@@ -0,0 +1,13 @@
+$stone-grey: #CCCCCC;
+$acid-green: #69E344;
+$bubblegum-pink: #F096F9;
+$desert-red: #D75930;
+$mustard-yellow: #F5C042;
+$beach-blue: #5CC8D1;
+$hyperlink-blue: #0000DD;
+$bloody-red: #D32D1F;
+$mid-grey: #808080;
+$antracite-grey: #333333;
+$forest-green: #1E6041;
+$raspberry-purple: #54367B;
+

src/assets/scss/global/_typography.scss

@@ -0,0 +1,21 @@
+@font-face {
+    font-family: 'worksans-medium';
+    src: url('../fonts/WorkSans-Medium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'worksans-mediumitalic';
+    src: url('../fonts/WorkSans-MediumItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@mixin font-worksans-medium {
+  font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: normal;
+} 
+@mixin font-worksans-mediumitalic {
+  font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: normal;
+} 

src/assets/scss/modules/_header.scss

@@ -0,0 +1,14 @@
+@include breakpoint(small){
+  header {
+    min-height: 6rem;
+    .logo {
+      max-width: 10rem;
+    }
+   slide {
+      min-height: 10rem;
+      content {
+        background-color: $primary-color;
+      }
+    }
+  }
+}

src/assets/scss/modules/_hero.scss

@@ -0,0 +1,18 @@
+@include breakpoint(small){
+  hero {
+    background-color: $secondary-color ;
+    slide {
+      min-height: 20vh;
+      content {
+        background-color: $primary-color;
+        color: $white;
+      }
+      figure {
+        background-color: $white;
+      }
+    }
+   aside {
+     min-height:5vh;
+   }
+  }
+}

src/assets/scss/modules/_navigation.scss

@@ -0,0 +1 @@
+// navigation scss

src/layouts/default.html

@@ -13,47 +13,54 @@
 
 {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
 
-  <main class="off-canvas-content" data-off-canvas-content>
+  <content class="grid-container fluid">
-   
    {{> header}}
-   <header data-sticky-container>
+   <header class="grid-x grid-padding-x">
-       <div class="title-bar" data-sticky data-options="marginTop:0;" data-top-anchor="1">
+     <main class="cell shrink">
-         <div class="title-bar-left">
+       <a href="#">
-           <a href="#">
+         <h1 class="site-name hide">arcHIVE</h1>
-             <h1 class="site-name hide">arcHIVE</h1>
+         <img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
-             <img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
+       </a>
-           </a>
+     </main>
-         </div>
+     <menu class=" cell auto align-right">
-         <div class="title-bar-right">
+       <!-- Content -->
-<button type="button" class="menu-icon show-for-small-only" data-toggle="offCanvasNestedPush">
+       <ul class="menu">
-</button>
+         <li><a href="#">News</a></li>
-<div class="off-canvas position-right is-closed" id="offCanvasNestedPush" data-off-canvas>
+         <li><a href="#">Collections</a></li>
-            <!-- Content -->
+         <li class="is-active"><a href="#">Digital kit</a></li>
-            <ul class="menu">
+         <li><a href="#">Publishing</a></li>
-              <li><a href="#">News</a></li>
+         <li><a href="#">Documentation</a></li>
-              <li><a href="#">Collections</a></li>
+         <li><a href="#">Info</a></li>
-              <li class="is-active"><a href="#">Digital kit</a></li>
+         <li><a href="#">Login</a></li>
-              <li><a href="#">Publishing</a></li>
+         <li><a href="#"><i class="fi-list"></i>Search</a></li>
-              <li><a href="#">Documentation</a></li>
+       </ul>
-              <li><a href="#">Info</a></li>
+     </menu>
-              <li><a href="#">Login</a></li>
-              <li><a href="#"><i class="fi-list"></i>Search</a></li>
-            </ul>
-</div>
-     </div>
    </header>
    
    {{> hero}}
-   <hero class="grid-x">
+   <hero class="grid-y">
-     <div class="cell small-12 ">
+     <main class="cell small-10">
-           <h1> big old hero</h1>
+       <slide class="grid-x">
-     </div>
+         <content class="cell small-6">
+          <p> big old hero</p>
+         </content>
+         <figure class="cell small-6">
+           <img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
+         </figure>
+       </slide>
+     </main>
+     <aside class="cell small-2">
+       <button type="button" class="button hollow"> search </button>
+       <button type="button" class="button hollow"> collections </button>
+     </aside>
    </hero>
-           
+   <main> 
-   {{> body}}
+     {{> body}}
-    </main>
+   </main>
-    {{> footer}}
+   <aside>
-    <footer class="grid-x">
+   </aside>
+   {{> footer}}
+   <footer class="grid-x">
       <div class="cell small-4">
         <ul class="menu">
           <li><a href="#">One</a></li>
@@ -79,7 +86,7 @@
         </ul>
       </div>
     </footer>
-
+   </content>
    <script src="{{root}}assets/js/app.js"></script>
   </div>
  </body>