changes in html to comply html5 and scss

gulpfile.babel.js

@@ -15,6 +15,16 @@ import named         from 'vinyl-named';
 import uncss         from 'uncss';
 import autoprefixer  from 'autoprefixer';
 
+// begin fontawesome
+//
+// added to have fontawesome support
+//
+gulp.task('icons', function() {
+    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
+        .pipe(gulp.dest(dist+'/assets/webfonts/'));
+});
+// end fontawesome
+
 // Load all Gulp plugins into one variable
 const $ = plugins();
 

package.json

@@ -11,7 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "foundation-sites": "^6.6.0",
-    "jquery": "^3.2.1",
+    "jquery": "^3.6.0",
     "motion-ui": "^2.0.3",
     "what-input": "^5.1.2"
   },
@@ -19,9 +19,10 @@
     "@babel/core": "^7.1.2",
     "@babel/preset-env": "^7.1.0",
     "@babel/register": "^7.0.0",
+    "@fortawesome/fontawesome-free": "^5.15.3",
     "autoprefixer": "^9.1.5",
     "babel-loader": "^8.0.4",
-    "browser-sync": "^2.10.0",
+    "browser-sync": "^2.26.14",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-clean-css": "^3.3.1",
@@ -35,11 +36,11 @@
     "gulp-sass": "^4.0.1",
     "gulp-sourcemaps": "^2.6.4",
     "gulp-terser": "^1.2.0",
-    "js-yaml": "^3.4.6",
+    "js-yaml": "^3.14.1",
-    "panini": "^1.3.0",
+    "panini": "^1.7.1",
     "rimraf": "^2.4.3",
     "style-sherpa": "^1.0.0",
-    "uncss": "^0.16.2",
+    "uncss": "^0.17.3",
     "vinyl-named": "^1.1.0",
     "webpack": "^4.20.2",
     "webpack-stream": "^5.1.1",

src/assets/scss/_settings.scss

@@ -73,7 +73,8 @@
 // ---------
 
 $global-font-size: 100%;
-$global-width: rem-calc(1200);
+//$global-width: rem-calc(1200);
+$global-width: 100vw;
 $global-lineheight: 1.5;
 
 $foundation-palette: (
@@ -505,14 +506,16 @@ $menu-margin: 0;
 $menu-nested-margin: $global-menu-nested-margin;
 $menu-items-padding: $global-menu-padding;
 $menu-simple-margin: 1rem;
-$menu-item-color-active: $white;
+$menu-item-color: $black;
+$menu-item-color-active: $anchor-color;
 $menu-item-color-alt-active: $black;
-$menu-item-background-active: get-color(primary);
+$menu-item-background-active: $white;
 $menu-icon-spacing: 0.25rem;
 $menu-state-back-compat: true;
 $menu-centered-back-compat: true;
 $menu-icons-back-compat: true;
-
+$menu-anchor-color: $black;
+$menu-anchor-color-hover: $anchor-color;
 // 24. Meter
 // ---------
 

src/assets/scss/app.scss

@@ -87,9 +87,16 @@
 //
 // 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";
+// 1. install fortawesome
-//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
+// npm install --save-dev @fortawesome/fontawesome-free
-//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
+// 2. uncomment these lines
-//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
-//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
+@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";
+// 3. add this to gulp
+// gulp.task('icons', function() {
+//    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
+//        .pipe(gulp.dest(dist+'/assets/webfonts/'));
+//  });                                                  

src/assets/scss/modules/_content.scss

@@ -0,0 +1,5 @@
+@include breakpoint(small){
+  content{
+//    @include xy-grid-container();
+  }
+}

src/assets/scss/modules/_header.scss

@@ -1,12 +1,13 @@
 @include breakpoint(small){
-  content{
+
-    @include xy-grid-container();
   header {
       @include xy-grid();
-      @include xy-gutters(0);
+      //@include xy-gutters(0);
+      //@include flex-align(spaced, middle);
       min-height: 6rem;
       main {
-       // @include xy-cell(1);
+        @include xy-cell(shrink);
+        @include flex-align(left, middle);
      }
       .site-name {
         display: none;
@@ -14,9 +15,18 @@
       .logo {
         max-width: 10rem;
       }
-      menu {
+      nav {
-      //  @include xy-cell(11);
+        @include xy-cell(auto);
+        @include flex-align(right, middle);
+        .menu, .menu-horizontal {
+          justify-content: flex-end; 
+        }
+      a, button {
+          color: $black;
+          &:hover {
+            color: $anchor-color;
+          }
+        }
       }
     }
   }
-}

src/assets/scss/modules/_hero.scss

@@ -1,18 +1,39 @@
 @include breakpoint(small){
-  hero {
+  .hero {
+//    @include xy-grid();
+//    @include xy-grid-frame(true);
     background-color: $secondary-color ;
-    slide {
+    main{
-      min-height: 20vh;
+//      @include xy-cell(12);
+//      @include xy-cell-block(true);
+//      @include xy-cell-reset(true);
+//      //@include flex-align(spaced,middle);
+      .slide {
+        @include xy-grid();
+        //min-height: 20vh;
         content {
+//          @include xy-cell(6);
           background-color: $primary-color;
           color: $white;
         }
         figure {
+//           @include xy-cell(6);
            background-color: $white;
         }
       }
+    }
     aside {
-     min-height:5vh;
+//      @include xy-cell(12);
+//      @include xy-cell-block(true);
+//      @include xy-cell-reset(true);
+      //background-color: $secondary-color;
+      nav {
+        min-height: 5rem;
+//        @include xy-grid();
+        button {
+//          @include xy-cell(4);
+        }
+      }
     }
   } 
 }

src/layouts/default.html

@@ -22,43 +22,45 @@
          <img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
        </a>
      </main>
+     <nav>
        <menu class="">
          <!-- Content -->
          <ul class="menu">
            <li><a href="#">News</a></li>
-         <li><a href="#">Collections</a></li>
+           <li><a href="#">About</a></li>
-         <li class="is-active"><a href="#">Digital kit</a></li>
+           <li><a href="#">Contact</a></li>
-         <li><a href="#">Publishing</a></li>
+           <li><a href="#">Search</a></li>
-         <li><a href="#">Documentation</a></li>
-         <li><a href="#">Info</a></li>
-         <li><a href="#">Login</a></li>
-         <li><a href="#"><i class="fi-list"></i>Search</a></li>
          </ul>
        </menu>
+     </nav>
    </header>
    
    {{> hero}}
-   <hero class="grid-y">
+   <section class="hero grid-y">
      <main class="cell small-10">
-       <slide class="grid-x">
+       <section class="slide grid-x grid-padding-x">
          <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>
+       </section>
      </main>
      <aside class="cell small-2">
-       <button type="button" class="button hollow"> search </button>
+       <nav class="grid-x grid-padding-x align-spaced align-middle">
-       <button type="button" class="button hollow"> collections </button>
+       <button type="button" class="button hollow cell-2"> search </button>
+       <button type="button" class="button hollow cell-2 "> collections </button>
+       </nav>
      </aside>
-   </hero>
+   </section>
+   <article>
      <main>
      {{> body}}
      </main>
      <aside>
      </aside>
+   </article>
    {{> footer}}
    <footer class="grid-x">
       <div class="cell small-4">