'itinerario.html' - First draft

css/fonts.css

@@ -56,6 +56,18 @@
     font-weight: normal;
     font-style: normal;
 }
+@font-face {
+    font-family: 'roboto_regular';
+    src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'roboto_medium';
+    src: url('../fonts/Roboto-Medium-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
 /* Open Sans Regular */
 @font-face {
     font-family: 'open_sansregular';

css/main.css

@@ -5,6 +5,10 @@
     --ochre: #ccac68;
     --ochre-light : #f7f4ee;
     --ochre-dark: rgba(116,102,77,1);
+    --light-dark: #333;
+    --dark: rgb(26, 21, 21);
+    --lilac: #c852ff;
+    --emerald: #067d08;
 }
 /** General utils **/
 .of-hidden {
@@ -13,12 +17,27 @@
 .pl-lg {
     padding-left: 1rem !important;
 }
+.pl-xl {
+    padding-left: 4rem !important;
+}
 .pr-lg {
     padding-right: 2rem;
 }
 .mt-lg {
     margin-top: 2rem;
 }
+.short-hr {
+    width: 3.5rem;
+    margin-left: 0;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+}
+.note {
+    font-size: 10pt;
+}
+.text-14pt {
+    font-size: 14pt;
+}
 /** Font classes **/
 .arvo {
     font-family: 'arvoregular'/*Fallback??*/;
@@ -26,12 +45,21 @@
 .roboto {
     font-family: 'roboto_condensedregular';
 }
+.roboto-reg {
+    font-family: 'roboto_regular';
+}
+.roboto-med {
+    font-family: 'roboto_medium';
+}
 .robot-slab-b {
     font-family: 'roboto_slabbold';
 }
 .roboto-slab {
     font-family: 'roboto_slabregular';
 }
+.roboto-slab-l {
+    font-family: 'roboto_slablight';
+}
 .opensans {
     font-family: 'open_sansregular';
 }
@@ -79,9 +107,19 @@ header {
     right: 0;
     top: 0;
 }
+.main-header.itin {
+    background: none;
+    min-height: 25vh;
+}
+.main-header.itin #nav {
+    color: var(--dark);
+}
 .main-header h1 {
     font-size: 3rem;
 }
+.main-header.itin h1 {
+    font-size: 36pt;
+}
 .main-header h1::after {
     max-width: 5rem;
     margin: 10px auto 0 auto;
@@ -109,22 +147,33 @@ header {
     background-color: rgba(254, 254, 254, 0.25);
 }
 /* ---- Navbar ----- */
-.h-nav {
+.side-nav {
-    min-width: 280px;
+    width: 280px;
-    padding-left: 10px;
+    opacity: 1;
+    padding-left: 5px;
     height: 100vh;
     margin: 0;
     left: 0;
     position: absolute;
     z-index: 11;
+    animation-name: slidein;
+    animation-duration: 1s;
+    transition: slidein 0.5s ease-in;
 }
-.h-nav a {
+@keyframes slidein {
+    from {
+        width: 0px;
+    }
+    to {
+        width: 280px;
+    }
+}
+.side-nav a {
     display: block;
-    color: #333;
+    color: var(--light-dark);
     text-decoration: none;
     margin-left: 30px;
     padding: 10px 0;
-    transition: ease-in 1s;
 }
 .nav-menu {
     text-align: right;
@@ -152,19 +201,45 @@ header {
     line-height: 2.3rem;
 }
 #nav i {
-    padding-top: 1.5rem;
+    padding-top: 2rem;
     vertical-align: middle;
     cursor: pointer;
     z-index: 10;
 }
 #close-nav {
-    padding: 0px;
+    padding-top: 0.7rem;
-    margin: 0px 0 20px 0;
+    padding-left: 0;
-    font-size: 1.2rem;
+    margin: 0px 0 15px 0;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 400;
     cursor: pointer;
 }
+/** From css.gg **/
+.icon-close {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    width: 35px;
+    height: 35px;
+    border: 2px solid transparent;
+    border-radius: 40px
+}
+.icon-close::after,
+.icon-close::before {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    width: 20px;
+    height: 2px;
+    background: currentColor;
+    transform: rotate(45deg);
+    border-radius: 5px;
+    top: 8px;
+    left: 1px
+}
+.icon-close::after {
+    transform: rotate(-45deg)
+}
 #nav.border {
     border-bottom: 1px solid rgba(204,204,204,1);
 }
@@ -183,7 +258,7 @@ body.opaque::after {
     content: '';
     height: 100%;
     width: 100%;
-    background-color: rgb(26, 21, 21);
+    background-color: var(--dark);
     opacity: 0.7;
     position: fixed;
 }
@@ -243,10 +318,30 @@ section.prj-logos img {
     max-height: 110px;
     max-width: 410px;
 }
+section.poi .container {
+    max-width: 1180px;
+}
+#itin-c {
+    padding-right: 12%;
+    font-size: 14pt;
+}
 #vagg {
     padding-bottom: 2rem;
 }
 #potlach {
     max-width: 110px;
     margin: 0 25%;
+}
+/** Text colors **/
+.ochre-dark {
+    color: var(--ochre-dark);
+}
+.ochre {
+    color: var(--ochre) !important;
+}
+.green {
+    color: var(--emerald);
+}
+.lilac {
+    color: var(--lilac);
 }

index.html

@@ -26,8 +26,8 @@
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </div>
-                    <nav class="d-hide h-nav bg-white opensans">
+                    <nav class="d-hide side-nav bg-white opensans">
-                        <p id="close-nav">X</p>
+                        <p id="close-nav"><i class="icon-close"></i></p>
                         <a href="index.html" title="Torna alla home page">Home</a>
                         <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>

itinerario.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="it">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <link rel="stylesheet" href="css/main.css">      
+        <link rel="stylesheet" href="css/spectre-icons.css">      
+        <script src="js/ui.js" type="text/javascript"></script>
+        <title>L'itinerario | Nel cielo di Fara</title>
+    </head>
+    <body>
+        <header class="main-header itin">
+            <div class="container">
+                <div class="columns bg-white" id="nav">
+                    <div class="column col-lg-7 col-sm-10 col-md-2">
+                        <img class="hide-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <i class="icon icon-menu show-sm"></i>
+                    </div>
+                    <div class="column col-sm-2 show-sm text-right">
+                        <img class="show-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                    </div>
+                    <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-menu" id="links">
+                        <a href="index.html" title="Torna alla home page">Home</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
+                        <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
+                        <a href="credits.html" title="Credits del progetto">Credits</a>
+                    </div>
+                    <nav class="d-hide side-nav bg-white opensans">
+                        <p id="close-nav"><i class="icon-close"></i></p>
+                        <a href="index.html" title="Torna alla home page">Home</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
+                        <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
+                        <a href="credits.html" title="Credits del progetto">Credits</a>
+                    </nav>
+                </div>
+            </div>
+            <div id="title" class="text-center">
+                <h1 class="roboto-med ochre-dark">L'itinerario</h1>
+            </div>
+        </header>
+        <main>
+            <section>
+                <div class="container">
+                    <div class="columns">
+                        <div class="column col-lg-6 col-sm-12 col-md-12 of-hidden">
+                            <img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina">                            
+                        </div>
+                        <div class="column col-lg-6 col-sm-12 col-md-12 pl-xl roboto-slab-l" id="itin-c">
+                            <h2>Il borgo storico in tappe</h2>
+                            <p>
+                                Il percorso nel borgo storico <strong>Fara in Sabina</strong> si snoda attraverso <strong>12 punti di interesse</strong> 
+                                che, all’interno, contengono due tipologie di contenuti:
+                                <ul>
+                                    <li class="lilac">
+                                        drammaturgie
+                                    </li>
+                                    <li class="green">
+                                        documentari
+                                    </li>
+                                </ul>
+                            </p>
+                            <p>
+                                Nella mappa interattiva a lato trovate i Punti di Interesse (PoI) notevoli, segnalati con le due colorazioni.
+                            </p>
+                            <p>
+                                Il percorso è libero ma viene anche suggerito un ipotetico itinerario attraverso un tracciato multicolore.
+                            </p>
+                            <p>
+                                Buona passeggiata!
+                            </p>
+                            <hr class="short-hr">
+                            <p class="note roboto-slab">
+                                L’itinerario di Fara in Sabina è stato ideato e realizzato dal <strong>CNR ISPC</strong>
+                                e dal <strong>Teatro Potlach</strong>, la realizzazione tecnica è di <strong>SD Cinematografica</strong>.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="odd-stripe poi">
+                <div class="container">
+                    <div class="columns mb-2">
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
+                            <a href="" title="Guarda il video">
+                                <img src="img/thumb_prologo.jpg" alt="Prologo">
+                            </a>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
+                            <h3 class="lilac mb-2 text-small text-italic text-bold">
+                                Prologo - Annunciazione
+                            </h3>
+                            <p class="text-small">
+                                Un angelo compare a un eremita all’inizio dei tempi, sul Monte Acuziano. 
+                                Gli annuncia che sulla collina antistante sorgerà una città 
+                                che si chiamerà Fara, dove si vivrà in pace e in armonia con la natura,
+                                in attesa di un re che farà ritorno&hellip;
+                            </p>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
+                            <a href="" title="Guarda il video del viaggiatore">
+                                <img src="img/fara_bg_3.jpg" alt="Viaggiatore #1">
+                            </a>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
+                            <h3 class="lilac mb-2 text-small text-italic text-bold">
+                                Il viaggiatore #1
+                            </h3>
+                            <p class="text-small">
+                                Un viaggiatore, arrivato a Fara Sabina, incontra una strano personaggio 
+                                che si offre di guidarlo in un viaggio attraverso il borgo che lo 
+                                porterà a riscoprire il senso  della meraviglia. 
+                                Si comincia dal teatro dove gli attori, attraverso i personaggi
+                                che hanno creato in tanti anni di spettacoli, 
+                                si stanno preparando a rappresentare la &quot;Fara invisibile&quot;. 
+                            </p>
+                        </div>
+                    </div>
+            </section>
+            <section class="poi">
+                <div class="container">
+                    <div class="columns mb-2">
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
+                            <a href="" title="Guarda il video">
+                                <img src="img/Thumbnail_Sul carattere dei faresi02.jpg" alt="Prologo">
+                            </a>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
+                            <h3 class="lilac mb-2 text-small text-italic text-bold">
+                                Sul carattere dei Faresi #2
+                            </h3>
+                            <p class="text-small">
+                                Trilussa, poeta romano ma ormai di casa qui a Fara Sabina, e Ariel, spirito del vento prestato 
+                                dalla commedia shakespeariana “La Tempesta”, si affrontano in una piazzetta. 
+                                Ariel, l’eterno spiritello sognatore è sospeso sui tetti e guarda il mondo dall’alto,
+                                osserva  la forma della città e le abitudini dei suoi abitanti, fa magie. 
+                                Trilussa ha i piedi ben piantati per terra ed esorta Ariel a scendere e prendere 
+                                contatto con il mondo.
+                            </p>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
+                            <a href="" title="Guarda il video del viaggiatore">
+                                <img src="img/Thumbnail_Piazza Forcina01.jpg" alt="Viaggiatore #1">
+                            </a>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
+                            <h3 class="lilac mb-2 text-small text-italic text-bold">
+                                Piazza Forcina #3
+                            </h3>
+                            <p class="text-small">
+                                Trilussa, accompagnato da un angelo, racconta la storia di questa piazza che si chiamava
+                                piazza Forcina per via delle prigioni che vi si affacciavano fino a dopo l’unità d’Italia.
+                                Immagina il lamento di quei poveri disgraziati a cui solo la luna teneva compagnia.
+                                Ma poi tutto è cambiato, botteghe artigiane, il trasporto pubblico... è arrivata la modernità!  
+                            </p>
+                        </div>
+                    </div>
+            </section>
+            <section class="odd-stripe poi">
+                <div class="container">
+                    <div class="columns mb-2">
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
+                            <a href="" title="Guarda il video">
+                                <img src="img/Thumbnail_Antonio.jpg" alt="Antonio">
+                            </a>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
+                            <h3 class="green mb-2 text-small text-italic text-bold">
+                                Antonio #3a
+                            </h3>
+                            <p class="text-small">
+                                Antonio è un artigiano restauratore del legno, di Fara Sabina. 
+                                La sua bottega si affaccia su Piazza Garibaldi dove lo troviamo
+                                al lavoro, allietato dal canto degli uccelli. 
+                            </p>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
+                            <a href="" title="Guarda il video">
+                                <img src="img/thumb_francesco.jpg" alt="Francesco #3b">
+                            </a>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
+                            <h3 class="green mb-2 text-small text-italic text-bold">
+                                Francesco #3b
+                            </h3>
+                            <p class="text-small">
+                                Francesco appartiene ad un'antica famiglia di Fara, 
+                                negli anni ha raccolto nella sua casa una collezione
+                                di oggetti dell’800 e del primo ‘900 che ci 
+                                raccontano una cultura ormai scomparsa. 
+                            </p>
+                        </div>
+                    </div>
+            </section>
+            <section class="poi">
+                <div class="container">
+                    <div class="columns mb-2">
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
+                            <a href="" title="Guarda il video">
+                                <img src="img/Thumbnail_Antonio.jpg" alt="I nobili di Fara">
+                            </a>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
+                            <h3 class="lilac mb-2 text-small text-italic text-bold">
+                                I Nobili di Fara #4
+                            </h3>
+                            <p class="text-small">
+                                Trilussa, accompagnata dall’angelo, racconta e mostra
+                                i molti palazzi nobiliari a Fara, appartenuti alle famiglie 
+                                romane degli Orsini, dei Farnese, dei  Barberini... 
+                                da queste potenti famiglie baronali 
+                                provenivano gli abati commendatari della vicina e 
+                                potentissima Abbazia di Farfa che hanno lasciato 
+                                la loro impronta nel borgo.  
+                            </p>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
+                            <a href="" title="Guarda il video">
+                                <img src="img/thumb_francesco.jpg" alt="Francesco #3b">
+                            </a>
+                        </div>
+                        <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
+                            <h3 class="lilac mb-2 text-small text-italic text-bold">
+                                Rocco si è svegliato #5
+                            </h3>
+                            <p class="text-small">
+                                Rocco era un abitante di Fara in Sabina morto nel 1987 e vissuto in 
+                                un momento di fervore della vita del paese e della sua comunità.
+                                Passava tutto il tempo all’osteria del paese. Ora si è appena 
+                                risvegliato dal lungo sonno e  non riconosce più la sua Fara, 
+                                tutta vuota e silenziosa. Ma Ariel compie una magia e gli mostra 
+                                il borgo popolato come era allora 
+                            </p>
+                        </div>
+                    </div>
+            </section>
+        </main>
+        <footer class="roboto">
+            <p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
+            <p><img src="img/loghi_ispc_potlach.png" class="logos" alt="Loghi ISPC Potlach"></p>
+            <p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
+        </footer>
+    </body>
+</html>

js/ui.js

@@ -39,7 +39,7 @@ if (homeRE.test(window.location.href)) {
  * Apply active class to selected link...
  * @todo Inefficient!!
  */
-window.addEventListener('load', () => {
+window.addEventListener('focus', () => {
     let navlinks = Array.from(document.querySelectorAll('#links a'));
 
     navlinks.forEach(element => {
@@ -57,25 +57,25 @@ window.addEventListener('load', () => {
  * Activate background on scroll for nav only
  * if not small screen
  */
-if (window.innerWidth >= 600) {
+window.addEventListener('scroll', event => {
-    window.addEventListener('scroll', event => {
+    let nav = document.querySelector('#nav');
-        let nav = document.querySelector('#nav');
+    let links = document.querySelector('#links');
-        let links = document.querySelector('#links');
+
-    
+    if (window.pageYOffset !== 0) {
-        if (window.pageYOffset !== 0) {
+        nav.classList.add('bg-white', 'border');
-            nav.classList.add('bg-white', 'border');
+        nav.classList.remove('text-gray');
-            nav.classList.remove('text-gray');
+        links.classList.add('nav-dark');
-            links.classList.add('nav-dark');
+        links.classList.remove('nav-light');
-            links.classList.remove('nav-light');
+    }
-        }
+    else {
-        else {
+        if (!document.querySelector('header').classList.contains('itin')) {
             nav.classList.add('text-gray');
-            nav.classList.remove('bg-white', 'border');
-            links.classList.add('nav-light');
             links.classList.remove('nav-dark');
+            links.classList.add('nav-light');
         }
-    });
+        nav.classList.remove('bg-white', 'border');
-}
+    }
+});
 
 window.addEventListener('load', () => {
     /**
@@ -84,14 +84,15 @@ window.addEventListener('load', () => {
     let menu = document.querySelector('i');
 
     menu.addEventListener('click', () => {
-        document.querySelector('.h-nav').classList.remove('d-hide');
+        document.querySelector('.side-nav').classList.remove('d-hide');
+        document.querySelector('.side-nav').classList.remove('slide-out');
         document.querySelector('body').classList.add('opaque');
     });
 
     let close = document.querySelector('#close-nav');
 
     close.addEventListener('click', () => {
-        document.querySelector('.h-nav').classList.add('d-hide');
+        document.querySelector('.side-nav').classList.add('d-hide');
         document.querySelector('body').classList.remove('opaque');
     })
 })

progetto.html

@@ -26,8 +26,8 @@
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </div>
-                    <nav class="d-hide h-nav bg-white opensans">
+                    <nav class="d-hide side-nav bg-white opensans">
-                        <p id="close-nav">X</p>
+                        <p id="close-nav"><i class="icon-close"></i></p>
                         <a href="index.html" title="Torna alla home page">Home</a>
                         <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
@@ -37,7 +37,7 @@
                 </div>
             </div>
             <div id="title" class="text-center">
-                <h1 class="arvo">Il progetto</h1>
+                <h1 class="roboto">Il progetto</h1>
             </div>
         </header>
         <main>
@@ -100,26 +100,20 @@
                         <div class="col-12 mb-2">
                             <h2>Output del progetto</h2>
                         </div>
-                        <div class="column col-lg-6 col-sm-12 col-md-12 of-hidden mt-2 pr-lg">
+                        <div class="column col-lg-6 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg">
+                            <p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Piattaforma web</p>
+                            <p class="text-left mb-2">
+                                Per la condivisione dei contenuti e la creazione gratuita di tour e visite guidate
+                            </p>
                             <a href="https://cms.innovapatrimonio.com/" title="Vai al sito di InnovaPatrimonio">
                                 <img src="img/sito_ip.PNG" alt="Sito di InnovaPatrimonio">
                             </a>
                         </div>
-                        <div class="column col-lg-6 col-sm-12 col-md-12 mt-2">
+                        <div class="column col-lg-6 col-sm-12 col-md-12 mt-2 mb-2 pr-lg">                            
-                            <p class="text-uppercase mb-0 robot-slab-b">Piattaforma web</p>
+                            <p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Web app</p>
-                            <p>
+                            <p class="text-left mb-2">
-                                Per la condivisione dei contenuti e la creazione gratuita di tour e visite guidate
-                            </p>
-                        </div>
-                    </div>
-                    <div class="columns mt-2">
-                        <div class="column col-lg-6 col-sm-12 col-md-12 mt-2 pr-lg">
-                            <p class="text-right text-uppercase mb-0 robot-slab-b">Web app</p>
-                            <p class="text-right">
                                 Generata dal sito web con i contenuti pre-caricati
                             </p>
-                        </div>
-                        <div class="column col-lg-6 col-sm-12 col-md-12 mt-2">
                             <a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
                                 <img src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
                             </a>