setup

add header

OLD/components/article/article.html

@@ -0,0 +1,33 @@
+<div class="component-article">
+<div class="container">
+    <div class="row">
+      <div class="col-12 col-md-10 pb-4">
+        <div class="row">
+
+          <div class="col-12 pb-4">
+            <input type="text" class="input-gray" placeholder="Cerca...">
+          </div>
+
+          <div class="col-12">
+            <img class="image" src="/images/articleHeader.png">
+          </div>
+          <div class="col-12">
+            <h2 class="title">
+              La tecnica dell'assaggio
+            </h2>
+            <span class="subtitle">
+              Come degustare un olio extravergine
+            </span>
+            <span class="text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </span>
+          </div>
+
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        <br><br>banner<br><br>
+      </div>
+    </div>
+  </div>
+</div>

OLD/components/article/article.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - article')
+
+})

OLD/components/article/article.scss

@@ -0,0 +1,41 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-article {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+
+  .image {
+    width: 100%;
+  }
+
+  .title {
+    display: block;
+    font-size: $font-30;
+    font-weight: normal;
+    padding: 15px 0;
+    margin: 0;
+    color: $olive;
+  }
+
+  .subtitle {
+    display: block;
+    font-size: $font-18;
+    font-weight: bold;
+    padding-bottom: 7px;
+    margin-bottom: 15px;
+    color: $dark-gray;
+  }
+
+  .text {
+    display: block;
+    font-size: $font-16;
+    padding-bottom: 5px;
+    color: $dark-gray;
+  }
+
+}

OLD/components/articleBox/articleBox.html

@@ -0,0 +1,7 @@
+<div class="component-articleBox">
+  <a href="/article">
+    <img class="image" src="/images/article1.png">
+    <span class="title">Titolo articolo </span>
+    <span class="marker olive"></span>
+  </a>
+</div>

OLD/components/articleBox/articleBox.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - articleBox')
+
+})

OLD/components/articleBox/articleBox.scss

@@ -0,0 +1,60 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-articleBox {
+
+  position: relative;
+  padding-bottom: 20px;
+  height: 100%;
+
+  .image {
+    width: 100%;
+    padding-bottom: 10px;
+  }
+
+  .title {
+    display: block;
+    width: 100%;
+    padding-right: 5px;
+    font-size: $font-16;
+    font-weight: 600;
+    line-height: $font-16;
+    color: $black;
+  }
+
+  .marker {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+
+    &:before {
+      position: absolute;
+      content: '\e903';
+      font-family: $icon;
+      font-size: 30px;
+      color: $white;
+    }
+    &:after {
+      position: absolute;
+      top: 4px;
+      left: 3px;
+      content: '\e903';
+      font-family: $icon;
+      font-size: 24px;
+      color: $gray;
+    }
+    &.olive {
+      &:after {color: $olive;}
+    }
+    &.gray {
+      &:after {color: $dark-gray;}
+    }
+    &.white {
+      &:after {color: $white;}
+    }
+    &.orange {
+      &:after {color: $orange;}
+    }
+  }
+
+}

OLD/components/articleBox/articleBox2.html

@@ -0,0 +1,7 @@
+<div class="component-articleBox">
+  <a href="/article">
+    <img class="image" src="/images/article2.png">
+    <span class="title">Titolo articolo test 2 </span>
+    <span class="marker gray"></span>
+  </a>
+</div>

OLD/components/articleBox/articleBox3.html

@@ -0,0 +1,7 @@
+<div class="component-articleBox">
+  <a href="/article">
+    <img class="image" src="/images/article3.png">
+    <span class="title">Titolo articolo </span>
+    <span class="marker white"></span>
+  </a>
+</div>

OLD/components/articleBox/articleBox4.html

@@ -0,0 +1,7 @@
+<div class="component-articleBox">
+  <a href="/article">
+    <img class="image" src="/images/article4.png">
+    <span class="title">Titolo articolo </span>
+    <span class="marker orange"></span>
+  </a>
+</div>

OLD/components/articles/articles.html

@@ -0,0 +1,53 @@
+<div class="component-articles">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-10">
+        <div class="row">
+
+          <div class="col-12 pb-1">
+            <input type="text" class="input-gray" placeholder="Cerca...">
+          </div>
+
+          <div class="col-12 pb-4">
+            <select class="select">
+              <option value="">Filtra</option>
+              <option value="1">Opzione 1</option>
+              <option value="2">Opzione 2</option>
+              <option value="3">Opzione 3</option>
+              <option value="4">Opzione 4</option>
+            </select>
+          </div>
+
+
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox2.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox3.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox4.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        <br><br>banner
+      </div>
+    </div>
+  </div>
+</div>

OLD/components/articles/articles.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - articles')
+
+})

OLD/components/articles/articles.scss

@@ -0,0 +1,11 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-articles {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+}

components/footer/footer.html → OLD/components/footer/footer.html

@@ -1,8 +1,8 @@
 <div class="component-footer">
   <div class="container d-flex my-auto">
     <ul class="menu">
-      <li class="item mr-4">
-        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio.</b></a>
+      <li class="item mr-md-4">
+        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio</b></a>
       </li>
       <li class="item">
         <a href="/terms" class="label">Termini servizio</a>

components/footer/footer.scss → OLD/components/footer/footer.scss

@@ -4,14 +4,15 @@
 .component-footer {
   //position: absolute;
   display: flex;
-  height: $footer-height;
+  padding: 10px 0;
+  text-align: center;
   width: 100%;
   bottom: 0;
   background: $gray;
   color: $white;
 
   .menu {
-    display: flex;
+    display: block;
     height: 100%;
     width: 100%;
     list-style: none;
@@ -19,16 +20,29 @@
     padding: 0;
 
     .item {
-      display: flex;
+      display: block;
       color: $white;
       margin: auto 20px auto 0;
       font-size: $font-12;
       letter-spacing: 2px;
+      padding: 5px;
 
       .label {
         color: $white;
       }
     }
   }
+}
 
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-footer {
+    height: $footer-height;
+    .menu {
+      display: flex;
+      .item {
+        display: flex;
+        padding: 0;
+      }
+    }
+  }
 }

OLD/components/header/header.html

@@ -0,0 +1,46 @@
+<header class="component-header">
+
+  <div class="container header-wrapper">
+    <button class="hamburger hamburger--spin my-auto">
+      <span class="hamburger-box">
+        <span class="hamburger-inner"></span>
+      </span>
+    </button>
+
+    <div class="actions">
+      <button class="icon icon-user"></button>
+      <button class="icon icon-cart"><span class="qty">3</span></button>
+    </div>
+
+    <ul class="menu">
+      <li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { echo "active";}?>">
+        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
+      </li>
+      <li class="item <?php if($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
+        <a href="/buy" class="label">acquistare</a>
+      </li>
+      <li class="item <?php if($_GET['q'] == 'article' || $_GET['q'] == 'learn') { echo "active";}?>">
+        <a href="/learn" class="label">imparare</a>
+      </li>
+      <li class="item disabled">
+        <span class="label">produrre (coming soon)</span>
+      </li>
+    </ul>
+
+    <ul class="sidebar-menu">
+      <li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { echo "active";}?>">
+        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
+      </li>
+      <li class="item <?php if($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
+        <a href="/buy" class="label">acquistare</a>
+      </li>
+      <li class="item <?php if($_GET['q'] == 'article' || $_GET['q'] == 'learn') { echo "active";}?>">
+        <a href="/learn" class="label">imparare</a>
+      </li>
+      <li class="item disabled">
+        <span class="label">produrre (coming soon)</span>
+      </li>
+    </ul>
+  </div>
+
+</header>

OLD/components/header/header.js

@@ -0,0 +1,23 @@
+
+$(document).ready( () => {
+  console.log('Load component - header')
+
+  const component = $('.component-header')
+
+  const hamburger = component.find('.hamburger')
+  const menu = component.find('.sidebar-menu')
+
+  hamburger.off('.click').on('click.click', (e) => {
+    const ham = $(e.currentTarget)
+
+    ham.toggleClass('is-active')
+    console.log(ham, menu)
+
+    if(ham.hasClass('is-active')){
+      menu.addClass('active')
+    } else {
+      menu.removeClass('active')
+    }
+  })
+
+})

OLD/components/header/header.scss

@@ -0,0 +1,167 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-header {
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  height: $header-height-mobile;
+  width: 100%;
+  background: $olive;
+  color: $white;
+  z-index: 200;
+
+  .header-wrapper {
+    display: flex;
+    position: relative;
+
+    .hamburger {
+      display: flex;
+      margin-right: 20px;
+    }
+
+    .actions {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      .icon {
+        position: relative;
+        margin: 0 5px;
+        padding: 0;
+        background: none;
+        border: none;
+        color: $white;
+        font-size: $font-24;
+
+        .qty {
+          position: absolute;
+          top: -5px;
+          right: -5px;
+          height: 15px;
+          width: 15px;
+          border-radius: 50%;
+          background: $orange;
+          color: $white;
+          font-size: $font-12;
+          line-height: $font-16;
+          font-family: $font-sans;
+        }
+      }
+    }
+
+    .menu {
+      display: none;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      .item {
+        display: flex;
+        color: $white;
+        margin: auto 20px;
+        font-size: $font-20;
+        letter-spacing: 2px;
+
+        .label {
+          color: $white;
+        }
+
+        &.active {
+          border-bottom: 2px solid $white;
+        }
+
+        &.disabled {
+          .label {
+            color: $white-alpha;
+          }
+        }
+      }
+    }
+
+    .sidebar-menu {
+      position: fixed;
+      top: $header-height-mobile;
+      left: 0;
+      height: calc(100vh - #{$header-height-mobile});
+      background: $olive;
+      display: block;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      transform: translateX(-100%);
+      transition: transform .3s;
+
+      .item {
+        display: block;
+        color: $white;
+        margin: 20px;
+        font-size: $font-20;
+        letter-spacing: 2px;
+        padding: 20px;
+        border-bottom: 1px dotted $gray;
+
+        .label {
+          color: $white;
+        }
+
+        &.active {
+          //border-bottom: 2px solid $white;
+        }
+
+        &.disabled {
+          .label {
+            color: $white-alpha;
+          }
+        }
+      }
+
+      &.active {
+        transform: translateX(0%);
+      }
+    }
+  }
+}
+
+
+
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-header {
+    height: $header-height;
+
+    .header-wrapper {
+      .actions {
+        position: absolute;
+        right: 0;
+
+        .icon {
+          margin: 0 5px;
+          font-size: $font-30;
+
+          .qty {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            height: 25px;
+            width: 25px;
+            font-size: $font-20;
+            line-height: $font-24;
+          }
+        }
+      }
+
+      .menu {
+        display: flex;
+      }
+
+      .sidebar-menu {
+        top: $header-height;
+        height: calc(100vh - #{$header-height});
+      }
+    }
+  }
+}
+

components/pdp/pdp.html → OLD/components/pdp/pdp.html

@@ -26,7 +26,7 @@
             <span class="price">17,90 €</span>
             <button class="button button-black w-100">Aggiungi al carrello</button>
             <div class="related">
-              <br><br>Prodotti correlati
+              <br><br>Prodotti correlati<br><br>
             </div>
           </div>
 
@@ -34,7 +34,7 @@
         </div>
       </div>
       <div class="col-12 col-md-2 banner">
-        <br><br>banner
+        <br><br>banner<br><br>
       </div>
     </div>
   </div>

components/plp/plp.html → OLD/components/plp/plp.html

@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="col-12 col-md-2 banner">
-        <br><br>banner
+        <br><br>banner<br><br>
       </div>
     </div>
   </div>

OLD/pages/.htaccess

@@ -0,0 +1,8 @@
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^([^\.]+)$ index.php?q=$1 [NC,L]
+#
+# Rewritebase /
+# RewriteCond %{REQUEST_FILENAME} !-f
+# RewriteCond %{REQUEST_FILENAME} !-d
+# RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

OLD/pages/article.ejs

@@ -0,0 +1,5 @@
+
+ ${require('../components/article/article.html')}
+
+
+

OLD/pages/index.ejs

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="it">
+  <head>
+    <meta charset="UTF-8">
+    <title>IoLovOlio</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="description" content=".">
+    <link rel="stylesheet" href="/assets/css/styles.css">
+  </head>
+  <body>
+
+    ${require('../components/header/header.html')}
+
+
+    <?php
+      if(!$_GET['q'] || $_GET['q'] == 'home' || $_GET['q'] == 'iolovolio') {
+        @include 'home.php';
+      } else {
+    ?>
+      <main class="main-content">
+    <?php
+        @include $_GET['q'].'.php';
+    ?>
+      </main>
+    <?php
+      }
+    ?>
+
+    ${require('../components/footer/footer.html')}
+
+  </body>
+</html>

OLD/pages/learn.ejs

@@ -0,0 +1,5 @@
+
+ ${require('../components/articles/articles.html')}
+
+
+

components/breadcrumb/breadcrumb.html

@@ -0,0 +1,5 @@
+<div class="component-breadcrumb">
+    <div class="row no-gutters">
+      breadcrumb
+    </div>
+</div>

components/breadcrumb/breadcrumb.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - breadcrumb')
+
+})

components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,8 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-breadcrumb {
+  width: 100%;
+  background: $brown;
+  height: 100px;
+}

components/header/header.html

@@ -1,46 +1,40 @@
 <header class="component-header">
 
   <div class="container header-wrapper">
-    <button class="hamburger hamburger--spin my-auto">
+
+    <img class="logo" src="/images/logoHeader.png">
+
+    <button class="hamburger hamburger--spring my-auto">
       <span class="hamburger-box">
         <span class="hamburger-inner"></span>
       </span>
     </button>
 
-    <div class="actions">
-      <button class="icon icon-user"></button>
-      <button class="icon icon-cart"><span class="qty">3</span></button>
-    </div>
-
-    <ul class="menu">
-      <li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { echo "active";}?>">
-        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
-      </li>
-      <li class="item <?php if($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
-        <a href="/buy" class="label">acquistare</a>
-      </li>
-      <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
-        <a href="/learn" class="label">imparare</a>
-      </li>
-      <li class="item disabled">
-        <span class="label">produrre (coming soon)</span>
-      </li>
-    </ul>
-
-    <ul class="sidebar-menu">
-      <li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { echo "active";}?>">
-        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
-      </li>
-      <li class="item <?php if($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
-        <a href="/buy" class="label">acquistare</a>
-      </li>
-      <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
-        <a href="/learn" class="label">imparare</a>
-      </li>
-      <li class="item disabled">
-        <span class="label">produrre (coming soon)</span>
-      </li>
-    </ul>
+
+    <nav class="menu-container">
+      <span class="menu-label">
+        <a href="/iolovolio" class="label">iolovolio</b></a>
+      </span>
+
+      <ul class="menu">
+        <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
+          <a href="/learn" class="label">conoscere</a>
+        </li>
+        <li class="item <?php if($_GET['q'] == 'produce') { echo "active";}?>">
+          <a href="/produce" class="label">produrre</a>
+        </li>
+        <li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
+          <a href="/buy" class="label">acquistare</a>
+        </li>
+        <li class="item <?php if($_GET['q'] == 'recount') { echo "active";}?>">
+          <a href="/recount" class="label">raccontare</a>
+        </li>
+      </ul>
+    </nav>
   </div>
 
+  <?php
+    @include('components/breadcrumb/breadcrumb.php');
+  ?>
+
 </header>

components/header/header.js

@@ -5,18 +5,21 @@ $(document).ready( () => {
   const component = $('.component-header')
 
   const hamburger = component.find('.hamburger')
-  const menu = component.find('.sidebar-menu')
+  const menuContainer = component.find('.menu-container')
+  const menu = menuContainer.find('.menu')
 
   hamburger.off('.click').on('click.click', (e) => {
     const ham = $(e.currentTarget)
-
+    console.log('toggle')
     ham.toggleClass('is-active')
     console.log(ham, menu)
 
     if(ham.hasClass('is-active')){
-      menu.addClass('active')
+      menuContainer.addClass('active')
+      menu.slideDown()
     } else {
-      menu.removeClass('active')
+      menuContainer.removeClass('active')
+      menu.slideUp()
     }
   })
 

components/header/header.scss

@@ -3,123 +3,88 @@
 
 .component-header {
   position: fixed;
-  display: flex;
   top: 0;
   left: 0;
-  height: $header-height-mobile;
+  min-height: $header-height-mobile;
   width: 100%;
-  background: $olive;
-  color: $white;
+  background: $white;
+  color: $black;
   z-index: 200;
 
   .header-wrapper {
     display: flex;
     position: relative;
+    min-height: $header-height-mobile;
 
-    .hamburger {
-      display: flex;
-      margin-right: 20px;
+    .logo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      height: 70px;
+      transform: translate(-50%, -50%);
     }
 
-    .actions {
+    .hamburger {
       position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-
-      .icon {
-        position: relative;
-        margin: 0 5px;
-        padding: 0;
-        background: none;
-        border: none;
-        color: $white;
-        font-size: $font-24;
-
-        .qty {
-          position: absolute;
-          top: -5px;
-          right: -5px;
-          height: 15px;
-          width: 15px;
-          border-radius: 50%;
-          background: $orange;
-          color: $white;
-          font-size: $font-12;
-          line-height: $font-16;
-          font-family: $font-sans;
-        }
-      }
+      top: 45px;
+      right: 20px;
     }
 
-    .menu {
-      display: none;
-      list-style: none;
-      margin: 0;
-      padding: 0;
+    .menu-container {
+      margin: 100px 0 20px auto;
 
-      .item {
-        display: flex;
-        color: $white;
-        margin: auto 20px;
-        font-size: $font-20;
-        letter-spacing: 2px;
+      .menu-label {
+        //display: none;
+        position: absolute;
+        right: 35px;
+        top: 80px;
+        opacity: 0;
+        transition: transform .4s, right .4s, opacity .4s;
+        transform-origin: right;
+        transform: rotate(-90deg);
+        -webkit-backface-visibility: hidden;
 
         .label {
-          color: $white;
+          @include font-style($font-serif, 'regular', $font-18);
+          color: $brown;
+          transition: font-size .4s;
         }
+      }
 
-        &.active {
-          border-bottom: 2px solid $white;
-        }
+      .menu {
+        text-align: right;
+        display: none;
+        opacity: 0;
+        transition: opacity .4s;
+
+        .item {
+          padding: 0 5px;
 
-        &.disabled {
           .label {
-            color: $white-alpha;
+            @include font-style($font-serif, 'regular', $font-18);
+            color: $olive-dark;
           }
-        }
-      }
-    }
-
-    .sidebar-menu {
-      position: fixed;
-      top: $header-height-mobile;
-      left: 0;
-      height: calc(100vh - #{$header-height-mobile});
-      background: $olive;
-      display: block;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      transform: translateX(-100%);
-      transition: transform .3s;
-
-      .item {
-        display: block;
-        color: $white;
-        margin: 20px;
-        font-size: $font-20;
-        letter-spacing: 2px;
-        padding: 20px;
-        border-bottom: 1px dotted $gray;
-
-        .label {
-          color: $white;
-        }
 
-        &.active {
-          //border-bottom: 2px solid $white;
+          &:first-of-type {
+            padding-top: 5px;
+          }
         }
+      }
 
-        &.disabled {
+      &.active {
+        .menu-label {
+          opacity: 1;
+          transform: rotate(0deg);
+          right: 20px;
           .label {
-            color: $white-alpha;
+            font-size:$font-14;
           }
         }
-      }
 
-      &.active {
-        transform: translateX(0%);
+        .menu {
+          opacity: 1;
+        }
+
       }
     }
   }
@@ -130,37 +95,15 @@
 
 @media (min-width: map-get($grid-breakpoints, 'md')) {
   .component-header {
-    height: $header-height;
-
+    min-height: $header-height;
     .header-wrapper {
-      .actions {
-        position: absolute;
-        right: 0;
-
-        .icon {
-          margin: 0 5px;
-          font-size: $font-30;
-
-          .qty {
-            position: absolute;
-            top: -15px;
-            right: -15px;
-            height: 25px;
-            width: 25px;
-            font-size: $font-20;
-            line-height: $font-24;
-          }
+      min-height: $header-height;
+      .menu-container {
+        .menu-label {
+          //display: block;
+          opacity: 1;
         }
       }
-
-      .menu {
-        display: flex;
-      }
-
-      .sidebar-menu {
-        top: $header-height;
-        height: calc(100vh - #{$header-height});
-      }
     }
   }
 }

package.json

@@ -16,42 +16,42 @@
   "author": "Dslak",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "autoprefixer": "^9.7.6",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.10",
+    "autoprefixer": "^10.1.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
     "base-href-webpack-plugin": "^2.0.0",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.5.3",
     "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^3.5.1",
+    "css-loader": "^5.0.1",
     "es6-promise-promise": "^1.0.0",
-    "eslint": "^6.0.1",
-    "eslint-config-google": "^0.13.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-prettier": "^3.1.0",
-    "extract-loader": "^3.1.0",
-    "file-loader": "^4.0.0",
-    "glob": "^7.1.4",
+    "eslint": "^7.15.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.2.0",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "glob": "^7.1.6",
     "hamburgers": "^1.1.3",
-    "html-loader": "^0.5.5",
+    "handlebars": "^4.7.6",
+    "html-loader": "^1.3.2",
     "html-webpack-plugin": "^3.2.0",
-    "http-server": "^0.12.1",
-    "jquery": "^3.4.1",
-    "mini-css-extract-plugin": "^0.7.0",
+    "http-server": "^0.12.3",
+    "jquery": "^3.5.1",
+    "mini-css-extract-plugin": "^1.3.3",
     "minimist": "^1.2.5",
-    "node-sass": "^4.12.0",
-    "nodemon": "^1.19.1",
-    "popper.js": "^1.15.0",
-    "postcss-loader": "^3.0.0",
-    "prettier": "^1.18.2",
-    "sass-loader": "^7.1.0",
-    "url-loader": "^2.0.1",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.9",
-    "webpack-notifier": "^1.8.0"
+    "node-sass": "^5.0.0",
+    "nodemon": "^2.0.6",
+    "popper.js": "^1.16.1",
+    "postcss-loader": "^4.1.0",
+    "prettier": "^2.2.1",
+    "sass-loader": "^10.1.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^4.2.0",
+    "webpack-notifier": "^1.12.0"
   }
 }

pages/index.ejs

@@ -26,7 +26,6 @@
       }
     ?>
 
-    ${require('../components/footer/footer.html')}
 
   </body>
 </html>

src/scss/fonts.scss

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&family=Open+Sans:300,400,500,700&display=swap');

src/scss/main.scss

@@ -12,8 +12,14 @@
 @import "../scss/forms.scss";
 
 @import "./components/header/header.scss";
+/*
 @import "./components/footer/footer.scss";
 @import "./components/home/home.scss";
 @import "./components/plp/plp.scss";
 @import "./components/productBox/productBox.scss";
 @import "./components/pdp/pdp.scss";
+@import "./components/article/article.scss";
+@import "./components/articles/articles.scss";
+@import "./components/articleBox/articleBox.scss";
+*/
+@import "./components/breadcrumb/breadcrumb.scss";

src/scss/variables.scss

@@ -30,8 +30,8 @@ $container-max-widths: (
   xl: 1560px
 );
 
-$font-serif: 'Source Sans Pro';
-$font-sans: 'Source Sans Pro';
+$font-serif: 'DM Serif Display';
+$font-sans: 'Open Sans';
 $icon: 'icomoon';
 
 $black:       #000;
@@ -41,7 +41,10 @@ $light-gray:  #f0efec;
 $dark-gray:   #393939;
 
 $olive:       #86876f;
+$olive-dark:  #383920;
 $orange:      #ddb279;
+$brown:       #92704F;
+
 
 $white-alpha: rgba(255, 255, 255, 0.5);
 $black-alpha: rgba(0, 0, 0, 0.5);
@@ -49,19 +52,19 @@ $black-alpha: rgba(0, 0, 0, 0.5);
 //Hamburgers settings
 $hamburger-padding-x           : 0;
 $hamburger-padding-y           : 6px;
-$hamburger-layer-width         : 35px;
-$hamburger-layer-height        : 1px;
+$hamburger-layer-width         : 30px;
+$hamburger-layer-height        : 3px;
 $hamburger-layer-spacing       : 8px;
-$hamburger-layer-color         : $white;
+$hamburger-layer-color         : $olive-dark;
 $hamburger-layer-border-radius : 0;
 $hamburger-hover-opacity       : 1;
-$hamburger-active-layer-color  : $white;
-$hamburger-active-hover-opacity: $white;
+$hamburger-active-layer-color  : $olive-dark;
+$hamburger-active-hover-opacity: $olive-dark;
 
 
-$header-height: 120px;
-$header-height-mobile: 50px;
-$footer-height: 30px;
+$header-height: 200px;
+$header-height-mobile: 110px;
+$footer-height: 40px;
 
 /* Font-size variables */
 $font-6: 0.375rem;      /* 6px */

webpack.config.js

@@ -6,6 +6,7 @@ const fs = require('fs')
 const WebpackNotifierPlugin = require('webpack-notifier')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const Handlebars = require('handlebars')
 
 const basePath = './'
 const pagesPath = path.join(__dirname, './pages')
@@ -128,14 +129,17 @@ module.exports = (env) => {
 
         // HTML
         {
-          test: /.*\.html?$/,
-          use: {
-            loader: 'html-loader',
-            options: {
-              attrs: ['link:href', 'script:src', 'img:src'],
-              interpolate: true,
-            },
-          },
+          test: /\.html$/i,
+          loader: 'html-loader',
+          options: {
+            attributes: {
+              list: [
+                { tag: 'img', attribute: 'data-src', type: 'src'},
+                { tag: 'img', attribute: 'data-srcset', type: 'srcset'}
+              ],
+              root: '.'
+            }
+          }
         }
       ]
     },