sticky header

components/breadcrumb/breadcrumb.html

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

components/breadcrumb/breadcrumb.js

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

components/breadcrumb/breadcrumb.scss

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

components/content/content-learn.html

@@ -0,0 +1,55 @@
+<div class="component-content">
+  <div class="container">
+
+    <div class="row"><!-- Title block -->
+      <div class="col-12 col-sm-10 col-md-6 mx-auto">
+        <h3 class="title">Due cucchiai di salute</h3>
+      </div>
+    </div>
+
+    <div class="row"><!-- Paragraph block -->
+      <div class="col-12 col-sm-10 col-md-6 mx-auto">
+        <p class="paragraph text-italic">
+          Non un semplice condimento ma un vero alimento: così va considerato l'olio extravergine d'oliva.
+          Più precisamente va considerato un <b>alimento funzionale</b>, cioè uno di quei pochi che preservano e <b>migliorano la salute</b> dell'uomo.
+        </p>
+      </div>
+    </div>
+
+    <div class="row"><!-- Image block -->
+      <div class="col-12 col-sm-12 col-md-10 mx-auto">
+        <img class="image" src="/images/learn1.png">
+      </div>
+    </div>
+
+    <div class="row"><!-- Paragraph block -->
+      <div class="col-12 col-sm-10 col-md-6 mx-auto">
+        <p class="paragraph">
+          La sua produzione non richiede altro che la spremitura delle olive: niente chimica, nessun intervento esterno se non quello meccanico, e ciò permette di conservare quel tesoro di <b>sostanze nutrienti</b> che è naturalmente presente nelle olive. Uno straordinario mix di molecole, particolarmente attive nell'olio "giovane", che da un lato protegge le cellule dall'ossidazione, contribuendo a prevenire alcuni tumori; dall'altro aiuta il cuore e la circolazione e tiene sotto controllo il colesterolo "cattivo", una delle prime cause di insorgenza di infarti e ictus.
+        </p>
+      </div>
+    </div>
+
+    <div class="row"><!-- Blockquote block -->
+      <div class="col-12 col-sm-10 col-md-8 mx-auto">
+        <blockquote class="blockquote">
+          Per beneficiarne sono sufficienti 20 grammi di olio extravergine a crudo, cioè due cucchiai al giorno, magari abbinati a pesce azzurro e verdure.
+        </blockquote>
+      </div>
+    </div>
+
+    <div class="row"><!-- Paragraph block -->
+      <div class="col-12 col-sm-10 col-md-6 mx-auto">
+        <p class="paragraph">
+          <b>Ma quali sono i maggiori principi nutritivi contenuti nell'olio extravergine?</b><br><br>
+          <b>E in che modo ciascuno di essi agisce sulla salute?</b><br><br>
+          <b>. Acido oleico</b> È il principale componente dell'olio extravergine d'oliva: ne costituisce circa il 72%. Si tratta di un acido grasso monoinsaturo omega-9 che contrasta l'ossidazione delle cellule. Inoltre ha effetti benefici sulla circolazione: contribuisce a limitare l'ipertensione e a mantenere corretti i livelli di colesterolo nel sangue. Confrontato con altri acidi grassi, quello oleico è più resistente alle alte temperature: dunque, se usato per friggere, l'olio d'oliva "libera" meno composti nocivi rispetto a oli più instabili.<br><br>
+          <b>. Acido linoleico</b> Costituisce il 7% circa dell'olio extravergine. È un acido grasso polinsaturo omega-6, essenziale per la vita umana: il nostro corpo non è in grado di produrlo da solo né di "costruirlo" a partire da altre molecole, dunque occorre assumerlo direttamente attraverso l'alimentazione. Contribuisce a mantenere in salute le membrane cellulari e favorisce la crescita delle cellule; inoltre, sembra avere un ruolo nella coagulazione del sangue e nella risposta alle infiammazioni, oltre che nel mantenere in equilibrio il colesterolo.<br><br>
+          <b>. Polifenoli</b> Sono un gruppo di sostanze organiche naturali, come i tannini e i flavonoidi, accomunati dall'avere effetti contro i radicali liberi. Nell'olio extravergine, particolarmente importanti sono l'idrossitirosolo e l'oleocantale, presenti in notevoli quantità nelle olive non ancora pienamente mature. Dal punto di vista gustativo, queste sostanze sono alla base delle sensazioni di amaro e piccante, mentre dal punto di vista nutrizionale sono potenti antiossidanti e antinfiammatori. Due cucchiai di olio extravergine soddisfano pienamente il fabbisogno quotidiano di un adulto.<br><br>
+          <b>. Vitamina E</b> Questa vitamina è detta anche "tocoferolo", dal greco tocos ("nascita") e pherein ("portare avanti"): il suo scopritore, Herbert McLean Evans, notò infatti che questo micronutriente era importante per portare a termine felicemente la gravidanza. Oggi sappiamo che combatte i radicali liberi, protegge la membrana delle cellule dall'ossidazione e favorisce il ricambio cellulare, tanto da essere considerata un importante fattore di prevenzione dal cancro. Inoltre interviene nella coagulazione sanguigna e aumenta il livello del colesterolo "buono", riducendo il rischio di trombi e placche nelle arterie. Due cucchiai di olio extravergine di oliva contengono dal 35 al 50% della dose giornaliera raccomandata, che è di 8-10 mg.
+
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

components/content/content.html

@@ -0,0 +1,55 @@
+<div class="component-content">
+  <div class="container">
+
+    <div class="row"><!-- Title block -->
+      <div class="col-12 col-sm-10 col-md-6 mx-auto">
+        <h3 class="title">Due cucchiai di salute</h3>
+      </div>
+    </div>
+
+    <div class="row"><!-- Paragraph block -->
+      <div class="col-12 col-sm-10 col-md-6 mx-auto">
+        <p class="paragraph text-italic">
+          Non un semplice condimento ma un vero alimento: così va considerato l'olio extravergine d'oliva.
+          Più precisamente va considerato un <b>alimento funzionale</b>, cioè uno di quei pochi che preservano e <b>migliorano la salute</b> dell'uomo.
+        </p>
+      </div>
+    </div>
+
+    <div class="row"><!-- Image block -->
+      <div class="col-12 col-sm-12 col-md-10 mx-auto">
+        <img class="image" src="/images/learn1.png">
+      </div>
+    </div>
+
+    <div class="row"><!-- Paragraph block -->
+      <div class="col-12 col-sm-10 col-md-6 mx-auto">
+        <p class="paragraph">
+          La sua produzione non richiede altro che la spremitura delle olive: niente chimica, nessun intervento esterno se non quello meccanico, e ciò permette di conservare quel tesoro di <b>sostanze nutrienti</b> che è naturalmente presente nelle olive. Uno straordinario mix di molecole, particolarmente attive nell'olio "giovane", che da un lato protegge le cellule dall'ossidazione, contribuendo a prevenire alcuni tumori; dall'altro aiuta il cuore e la circolazione e tiene sotto controllo il colesterolo "cattivo", una delle prime cause di insorgenza di infarti e ictus.
+        </p>
+      </div>
+    </div>
+
+    <div class="row"><!-- Blockquote block -->
+      <div class="col-12 col-sm-10 col-md-8 mx-auto">
+        <blockquote class="blockquote">
+          Per beneficiarne sono sufficienti 20 grammi di olio extravergine a crudo, cioè due cucchiai al giorno, magari abbinati a pesce azzurro e verdure.
+        </blockquote>
+      </div>
+    </div>
+
+    <div class="row"><!-- Paragraph block -->
+      <div class="col-12 col-sm-10 col-md-6 mx-auto">
+        <p class="paragraph">
+          <b>Ma quali sono i maggiori principi nutritivi contenuti nell'olio extravergine?</b><br><br>
+          <b>E in che modo ciascuno di essi agisce sulla salute?</b><br><br>
+          <b>. Acido oleico</b> È il principale componente dell'olio extravergine d'oliva: ne costituisce circa il 72%. Si tratta di un acido grasso monoinsaturo omega-9 che contrasta l'ossidazione delle cellule. Inoltre ha effetti benefici sulla circolazione: contribuisce a limitare l'ipertensione e a mantenere corretti i livelli di colesterolo nel sangue. Confrontato con altri acidi grassi, quello oleico è più resistente alle alte temperature: dunque, se usato per friggere, l'olio d'oliva "libera" meno composti nocivi rispetto a oli più instabili.<br><br>
+          <b>. Acido linoleico</b> Costituisce il 7% circa dell'olio extravergine. È un acido grasso polinsaturo omega-6, essenziale per la vita umana: il nostro corpo non è in grado di produrlo da solo né di "costruirlo" a partire da altre molecole, dunque occorre assumerlo direttamente attraverso l'alimentazione. Contribuisce a mantenere in salute le membrane cellulari e favorisce la crescita delle cellule; inoltre, sembra avere un ruolo nella coagulazione del sangue e nella risposta alle infiammazioni, oltre che nel mantenere in equilibrio il colesterolo.<br><br>
+          <b>. Polifenoli</b> Sono un gruppo di sostanze organiche naturali, come i tannini e i flavonoidi, accomunati dall'avere effetti contro i radicali liberi. Nell'olio extravergine, particolarmente importanti sono l'idrossitirosolo e l'oleocantale, presenti in notevoli quantità nelle olive non ancora pienamente mature. Dal punto di vista gustativo, queste sostanze sono alla base delle sensazioni di amaro e piccante, mentre dal punto di vista nutrizionale sono potenti antiossidanti e antinfiammatori. Due cucchiai di olio extravergine soddisfano pienamente il fabbisogno quotidiano di un adulto.<br><br>
+          <b>. Vitamina E</b> Questa vitamina è detta anche "tocoferolo", dal greco tocos ("nascita") e pherein ("portare avanti"): il suo scopritore, Herbert McLean Evans, notò infatti che questo micronutriente era importante per portare a termine felicemente la gravidanza. Oggi sappiamo che combatte i radicali liberi, protegge la membrana delle cellule dall'ossidazione e favorisce il ricambio cellulare, tanto da essere considerata un importante fattore di prevenzione dal cancro. Inoltre interviene nella coagulazione sanguigna e aumenta il livello del colesterolo "buono", riducendo il rischio di trombi e placche nelle arterie. Due cucchiai di olio extravergine di oliva contengono dal 35 al 50% della dose giornaliera raccomandata, che è di 8-10 mg.
+
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

components/content/content.js

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

components/content/content.scss

@@ -0,0 +1,41 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-content {
+  padding-top: $header-height-mobile + 150px;
+
+  .title {
+    @include font-style($font-serif, 'regular', $font-52);
+    color: $olive-dark;
+    padding: 30px 0;
+    margin: 0;
+  }
+
+  .paragraph {
+    @include font-style($font-sans, 'regular', $font-22);
+    color: $gray;
+    padding: 30px 0;
+    margin: 0;
+  }
+
+  .blockquote {
+    @include font-style($font-serif, 'regular-italic', $font-30);
+    color: $gray;
+    padding: 50px 0;
+    margin: 0;
+    text-align: center;
+  }
+
+  .image {
+    width: 100%;
+    padding: 30px 0;
+  }
+}
+
+
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-content {
+    padding-top: $header-height + 150px;
+  }
+}

components/header/header.html

@@ -1,3 +1,7 @@
+<?php
+  $section_label = 'conoscere';
+?>
+
 <header class="component-header">
 
   <div class="container header-wrapper">
@@ -34,7 +38,6 @@
   </div>
 
   <?php
-    @include('components/breadcrumb/breadcrumb.php');
+    @include('components/sectionHeader/sectionHeader.php');
   ?>
-
 </header>

components/header/header.js

@@ -10,9 +10,7 @@ $(document).ready( () => {
 
   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')){
       menuContainer.addClass('active')
@@ -23,4 +21,16 @@ $(document).ready( () => {
     }
   })
 
+  $(window).scroll(() => {
+    const sectionHeader = $('.component-sectionHeader')
+    const top = $(window).scrollTop()
+    if(top > 1) {
+      component.addClass('sticky')
+      sectionHeader.addClass('sticky')
+    } else {
+      component.removeClass('sticky')
+      sectionHeader.removeClass('sticky')
+    }
+  })
+
 })

components/header/header.scss

@@ -5,7 +5,6 @@
   position: fixed;
   top: 0;
   left: 0;
-  min-height: $header-height-mobile;
   width: 100%;
   background: $white;
   color: $black;
@@ -14,30 +13,34 @@
   .header-wrapper {
     display: flex;
     position: relative;
+    transition: min-height .4s;
     min-height: $header-height-mobile;
 
     .logo {
       position: absolute;
       top: 50%;
       left: 50%;
-      height: 70px;
+      height: 100%;
+      max-height: 70px;
+      margin: auto 0;
+      transition: max-height .4s;
       transform: translate(-50%, -50%);
     }
 
     .hamburger {
       position: absolute;
-      top: 45px;
+      top: 20px;
       right: 20px;
     }
 
     .menu-container {
-      margin: 100px 0 20px auto;
+      margin: 60px 0 20px auto;
 
       .menu-label {
         //display: none;
         position: absolute;
         right: 35px;
-        top: 80px;
+        top: 60px;
         opacity: 0;
         transition: transform .4s, right .4s, opacity .4s;
         transform-origin: right;
@@ -48,6 +51,7 @@
           @include font-style($font-serif, 'regular', $font-18);
           color: $brown;
           transition: font-size .4s;
+          -webkit-backface-visibility: hidden;
         }
       }
 
@@ -55,6 +59,7 @@
         text-align: right;
         display: none;
         opacity: 0;
+        padding-top: 20px;
         transition: opacity .4s;
 
         .item {
@@ -73,7 +78,7 @@
 
       &.active {
         .menu-label {
-          opacity: 1;
+          opacity: 1 !important;
           transform: rotate(0deg);
           right: 20px;
           .label {
@@ -88,6 +93,20 @@
       }
     }
   }
+
+  &.sticky {
+    .header-wrapper {
+      min-height: $header-height-mobile-sticky;
+      .logo {
+        max-height: 50px;
+      }
+      .menu-container {
+        .menu-label {
+          opacity: 0;
+        }
+      }
+    }
+  }
 }
 
 
@@ -95,9 +114,11 @@
 
 @media (min-width: map-get($grid-breakpoints, 'md')) {
   .component-header {
-    min-height: $header-height;
     .header-wrapper {
       min-height: $header-height;
+      .logo {
+        //max-height: $header-height;
+      }
       .menu-container {
         .menu-label {
           //display: block;
@@ -105,6 +126,11 @@
         }
       }
     }
+    &.sticky {
+      .header-wrapper {
+        min-height: $header-height-sticky;
+      }
+    }
   }
 }
 

components/sectionHeader/sectionHeader.html

@@ -0,0 +1,3 @@
+<div class="component-sectionHeader">
+  <h2 class="label"><?= $section_label;?></label>
+</div>

components/sectionHeader/sectionHeader.js

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

components/sectionHeader/sectionHeader.scss

@@ -0,0 +1,59 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-sectionHeader {
+  position: relative;
+  width: 100%;
+  background: $white;
+  background-image: url(/images/pattern.png);
+  background-size: auto 100px;
+  background-repeat: repeat-x;
+  background-position: center top;
+  height: 60px;
+  transition: height .4s;
+
+  &:before {
+    position: absolute;
+    content: '';
+    width: 500px;
+    height: 1px;
+    border-bottom: 1px solid $white;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .label {
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 50%;
+    height: 50px;
+    line-height: 40px;
+    transform: translate(-50%, -50%);
+    color: $white;
+    background: $brown;
+    padding: 0 10px;
+    margin: 0;
+    @include font-style($font-serif, 'regular', $font-46);
+    transition: height .4s, font-size .4s, line-height .4s;
+  }
+
+  &.sticky {
+    height: 40px;
+
+    .label {
+      height: 30px;
+      font-size: $font-24;
+      line-height: 26px;
+    }
+
+  }
+
+}
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-sectionHeader {
+    //margin-top: $header-height;
+  }
+}

pages/index.ejs

@@ -11,20 +11,14 @@
 
     ${require('../components/header/header.html')}
 
+    <main class="main-content">
 
-    <?php
-      if(!$_GET['q'] || $_GET['q'] == 'home' || $_GET['q'] == 'iolovolio') {
-        @include 'home.php';
-      } else {
-    ?>
-      <main class="main-content">
-    <?php
+      <?php
         @include $_GET['q'].'.php';
-    ?>
-      </main>
-    <?php
-      }
-    ?>
+      ?>
+
+    </main>
+
 
 
   </body>

pages/learn.ejs

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

src/scss/global.scss

@@ -4,6 +4,7 @@ body {
   font-weight: 400;
   letter-spacing: 1px;
   margin: 0;
+  background: $light-gray;
   color: $dark-gray;
   overflow-x: hidden;
 }
@@ -93,6 +94,10 @@ button {
   text-transform: uppercase;
 }
 
+.text-italic {
+  font-style: italic;
+}
+
 .w-100 {
   width: 100% !important;
 }
@@ -116,20 +121,12 @@ button {
 
 .main-content {
 
-  min-height: calc(100vh - #{$footer-height});
-  padding: $header-height-mobile 10px 0 10px;
+  min-height: calc(100vh - #{$header-height-mobile});
 
   @media (min-width: map-get($grid-breakpoints, 'md')) {
-    padding: $header-height 40px 0 40px;
+    min-height: 150vh;//calc(100vh - #{$header-height});
   }
 
-  &.container-fluid {
-    &.full-width {
-      padding-left: 0;
-      padding-right: 0;
-      overflow-x: hidden;
-    }
-  }
 
   section {
     margin: 50px auto;

src/scss/main.scss

@@ -12,14 +12,5 @@
 @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";
+@import "./components/sectionHeader/sectionHeader.scss";
+@import "./components/content/content.scss";

src/scss/variables.scss

@@ -36,8 +36,8 @@ $icon: 'icomoon';
 
 $black:       #000;
 $white:       #fff;
-$gray:        #686868;
-$light-gray:  #f0efec;
+$gray:        #808080;
+$light-gray:  #F5F2F0;
 $dark-gray:   #393939;
 
 $olive:       #86876f;
@@ -64,6 +64,8 @@ $hamburger-active-hover-opacity: $olive-dark;
 
 $header-height: 200px;
 $header-height-mobile: 110px;
+$header-height-sticky: 60px;
+$header-height-mobile-sticky: 60px;
 $footer-height: 40px;
 
 /* Font-size variables */

webpack.config.js

@@ -127,6 +127,12 @@ module.exports = (env) => {
           use: ['url-loader?limit=100000']
         },
 
+        // IMAGES
+        {
+          test: /\.(jpg|jpeg|png)$/,
+          use: ['url-loader?limit=100000']
+        },
+
         // HTML
         {
           test: /\.html$/i,