Merge branch 'fature/new_version' into develop

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/home/home.html → OLD/components/home/home.html

@@ -5,7 +5,7 @@
         <img class="drop" src="/images/drop1.png">
         <span class="title"><b>io</b>lov<b>olio</b> acquistare</span>
         <span class="subtitle"></span>
-        <button class="button button-big w-100 text-uppercase">Vai allo shop</button>
+        <a href="/buy" class="button button-big w-100 text-uppercase">Vai allo shop</a>
       </div>
       <div class="col-12 col-md-4 order-0 order-md-1">
         <img class="logo" src="/images/logo.png">

OLD/components/pdp/pdp.html

@@ -0,0 +1,41 @@
+<div class="component-pdp">
+  <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 col-sm-6 col-md-5">
+            <img class="image" src="/images/prod2.png">
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 px-3">
+            <h2 class="title">
+              Nome prodotto
+            </h2>
+            <span class="subtitle">
+              Dettagli
+            </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 class="col-12 col-sm-12 col-md-3">
+            <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>
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        <br><br>banner<br><br>
+      </div>
+    </div>
+  </div>
+</div>

OLD/components/pdp/pdp.js

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

OLD/components/pdp/pdp.scss

@@ -0,0 +1,54 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-pdp {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+
+  .image {
+    width: 100%;
+  }
+
+  .title {
+    display: block;
+    font-size: $font-30;
+    font-weight: normal;
+    padding: 0 0 30px 0;
+    margin: 0;
+  }
+
+  .subtitle {
+    display: block;
+    font-size: $font-12;
+    text-transform: uppercase;
+    padding-bottom: 7px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid $gray;
+  }
+
+  .text {
+    display: block;
+    font-size: $font-12;
+    padding-bottom: 5px;
+  }
+
+  .price {
+    display: block;
+    font-size: $font-26;
+    font-weight: normal;
+    text-align: right;
+    padding: 0 0 20px 0;
+    margin: 0;
+  }
+
+  .related {
+    background: $light-gray;
+    text-align: center;
+    margin-top: 40px;
+    height: calc(100% - 130px);
+  }
+}

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

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

OLD/components/productBox/productBox.html

@@ -0,0 +1,10 @@
+<div class="component-productBox">
+  <a href="/product">
+    <img class="image" src="/images/prod1.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto </span>
+      <span class="price">17,90 €</span>
+    </div>
+  </a>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>

components/productBox/productBox.scss → OLD/components/productBox/productBox.scss

@@ -18,6 +18,7 @@
     font-size: $font-16;
     font-weight: 600;
     line-height: $font-16;
+    color: $black;
   }
 
   .price {
@@ -27,6 +28,7 @@
     font-weight: light;
     text-align: right;
     white-space: no-wrap;
+    color: $black;
   }
 
   .add-to-cart{

OLD/components/productBox/productBox2.html

@@ -0,0 +1,10 @@
+<div class="component-productBox">
+  <a href="/product">
+    <img class="image" src="/images/prod2.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto Nome prodotto Nome prodotto </span>
+      <span class="price">170,90 €</span>
+    </div>
+  </a>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>

OLD/components/productBox/productBox3.html

@@ -0,0 +1,10 @@
+<div class="component-productBox">
+  <a href="/product">
+    <img class="image" src="/images/prod3.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto</span>
+      <span class="price">7,90 €</span>
+    </div>
+  </a>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>

OLD/components/productBox/productBox4.html

@@ -0,0 +1,10 @@
+<div class="component-productBox">
+  <a href="/product">
+    <img class="image" src="/images/prod4.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto</span>
+      <span class="price">8,90 €</span>
+    </div>
+  </a>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</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')}
+
+
+

OLD/pages/product.ejs

@@ -0,0 +1,4 @@
+${require('../components/pdp/pdp.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') { 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') { 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});
-      }
     }
   }
 }

components/productBox/productBox.html

@@ -1,8 +0,0 @@
-<div class="component-productBox">
-  <img class="image" src="/images/prod1.png">
-  <div class="d-flex">
-    <span class="title">Nome prodotto </span>
-    <span class="price">17,90 €</span>
-  </div>
-  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
-</div>

components/productBox/productBox2.html

@@ -1,8 +0,0 @@
-<div class="component-productBox">
-  <img class="image" src="/images/prod2.png">
-  <div class="d-flex">
-    <span class="title">Nome prodotto Nome prodotto Nome prodotto </span>
-    <span class="price">170,90 €</span>
-  </div>
-  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
-</div>

components/productBox/productBox3.html

@@ -1,8 +0,0 @@
-<div class="component-productBox">
-  <img class="image" src="/images/prod3.png">
-  <div class="d-flex">
-    <span class="title">Nome prodotto</span>
-    <span class="price">7,90 €</span>
-  </div>
-  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
-</div>

components/productBox/productBox4.html

@@ -1,8 +0,0 @@
-<div class="component-productBox">
-  <img class="image" src="/images/prod4.png">
-  <div class="d-flex">
-    <span class="title">Nome prodotto</span>
-    <span class="price">8,90 €</span>
-  </div>
-  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
-</div>

deploy.sh

@@ -1,11 +1,11 @@
 #!/bin/bash
 
-BASE="http://www.anesacademy.com/"
+BASE="http://2.238.194.8/iolovolio/"
 
 BASE_PARSED=$(echo $BASE | sed 's/\//\\\//g')
 
 cd public
-for f in *.html
+for f in *.php
 do
     sed -i "s/href\=\"\//href\=\"$BASE_PARSED/g" "$f"
     sed -i "s/src\=\"\//src\=\"$BASE_PARSED/g" "$f"
@@ -14,4 +14,6 @@ done
 cd ..
 
 #scp -r -i ./auth/marketmind.pem ./public/* ubuntu@18.194.83.82:/var/www/anesacademy.com/
-rsync -avz --delete -e "ssh -i ./auth/marketmind.pem" ./public/* ubuntu@18.194.83.82:/var/www/anesacademy.com/
+# rsync -avz --delete -e "ssh -i ./auth/marketmind.pem" ./public/* ubuntu@18.194.83.82:/var/www/anesacademy.com/
+rsync -avz --delete -e "ssh -p2222" ./public/* cdr@2.238.194.8:/www/iolovolio/
+# scp -r ./public/.htaccess cdr@2.238.194.8:/www/iolovolio/.htaccess

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/global.scss

@@ -4,7 +4,7 @@ body {
   font-weight: 400;
   letter-spacing: 1px;
   margin: 0;
-  color: $black;
+  color: $dark-gray;
   overflow-x: hidden;
 }
 

src/scss/main.scss

@@ -12,7 +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: '.'
+            }
+          }
         }
       ]
     },