Folder structure and first implementation of changes...

.gitignore

@@ -2,4 +2,3 @@ spectre*/
 *.zip
 *.ttf
 *_old*
-README.md

README.md

@@ -0,0 +1,8 @@
+# _Nel cielo di Fara_ Front End Wep App...
+
+This project includes two versions of the same HTML5 app:
+
+- offline local installation (tracked by `master`)
+- online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch)
+
+Let's hope this never happens again...

credits.html

@@ -13,23 +13,21 @@
             <div class="container">
                 <div class="columns bg-white" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-12 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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>
@@ -124,6 +122,11 @@
             </section>
             <section>
                 <div class="container">
+                    <div class="columns">
+                        <div class="col-lg-2 col-sm-12 col-md-12 column">
+                            <img src="img/Prologo-Annunciazione01.jpg">
+                        </div>
+                        <div class="col-lg-2 col-sm-12 col-md-12 column ml-lg">
                             <h2>Informazioni sul sito web</h2>
                             <p class="text-bold mb-1">
                                 Titolare del Sito, Concezione, Web Design e sviluppo:
@@ -160,7 +163,8 @@
                                 essere riprodotto o utilizzato in altre pubblicazioni stampate,
                                 elettroniche o informatiche senza l'espressa autorizzazione degli autori.
                             </p>
-
+                        </div>
+                    </div>
                 </div>
             </section>
         </main>

css/main.css

@@ -14,6 +14,21 @@
 html {
     overflow-x: hidden;
 }
+/** 
+* Hack to preload background images 
+* Not working in Firefox!!
+**/
+div#preload {
+    /*display: none;*/
+    width: 0;
+    height: 0;
+    z-index: -10;
+    overflow-y: hidden;
+}
+div#preload img {
+    opacity: 0;
+    display: inline;
+}
 /** General utils **/
 .of-hidden {
     overflow: hidden;
@@ -48,9 +63,11 @@ html {
     font-size: 14pt;
 }
 video {
-    max-width: 100%;
     cursor: pointer;
 }
+#mod-cont {
+    overflow: hidden;
+}
 /** Font classes **/
 .arvo {
     font-family: 'arvoregular'/*Fallback??*/;
@@ -103,7 +120,7 @@ header {
     padding: 0;
 }
 .main-header.home {
-    min-height: 930px;
+    min-height: 80vh;
 }
 .main-header.prog {
     min-height: 60vh;
@@ -122,7 +139,7 @@ header {
 }
 .main-header.itin {
     background: none;
-    min-height: 25vh;
+    min-height: 40vh;
 }
 @media (max-width: 840px) {
     .main-header.itin {
@@ -226,15 +243,17 @@ header {
     font-weight:bold;
 }
 #nav {
-    max-height: 50px;
+    max-height: 90px;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 10;
 }
-#nav > div {
+@media (min-width: 860px) {
+    #nav {
         vertical-align: middle;
-    line-height: 2.3rem;
+        line-height: 90px;
+    }    
 }
 #nav i {
     padding-top: 2rem;
@@ -281,8 +300,9 @@ header {
     border-bottom: 1px solid rgba(204,204,204,1);
 }
 #logo {
-    max-height: 41%;
+    max-height: 55%;
-    padding: 7px 0 10px 20px;
+    padding-left: 10px;
+    padding-top: 10px;
 }
 .nav-light a:hover {
     color: #fff;
@@ -402,6 +422,7 @@ section.poi h3 {
     top: 0;
     width: 100%;    
 }
+/*****/
 canvas {
     width: 100%;
     height: 100%;

css/spectre.css

@@ -2570,7 +2570,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal:target .modal-overlay,
 .modal.active .modal-overlay {
-  background: rgba(247, 248, 249, .75);
+  background: rgba(91, 96, 100, 0.75);
   bottom: 0;
   cursor: default;
   display: block;
@@ -2597,11 +2597,14 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal.modal-lg .modal-container {
   box-shadow: none;
-  max-width: 960px;
+  /* Custom max-width*/
+  max-width: 100%;
+  max-height: 100vh;
 }
 
 .modal-container {
-  background: #fff;
+  /*background: #fff;*/
+  color: #fff;
   border-radius: .1rem;
   box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
   display: -ms-flexbox;
@@ -2619,12 +2622,12 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .modal-container .modal-header {
-  color: #303742;
+  /*color: #303742;*/
   padding: .8rem;
 }
 
 .modal-container .modal-body {
-  overflow-y: auto;
+  overflow: hidden;
   padding: .8rem;
   position: relative;
 }

index.html

@@ -13,23 +13,21 @@
             <div class="container">
                 <div class="columns text-gray" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light 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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>
@@ -37,7 +35,7 @@
             </div>
             <div id="title" class="text-center">
                 <h1 class="arvo">Nel cielo di Fara</h1>
-                <button>Entra</button>
+                <a href="itinerario.html"><button>Entra</button></a>
             </div>
         </header>
         <main></main>
@@ -46,5 +44,12 @@
             <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>
+        <div id="preload">
+            <img src="img/lp-bg/fara_bg_1.jpg" />
+            <img src="img/lp-bg/fara_bg_2.jpg" />
+            <img src="img/lp-bg/fara_bg_3.jpg" />
+            <img src="img/lp-bg/fara_bg_4.jpg" />
+            <img src="img/lp-bg/fara_bg_5.jpg" />
+        </div>
     </body>
 </html>

itinerario.html

@@ -13,23 +13,21 @@
             <div class="container">
                 <div class="columns bg-white" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>
@@ -84,7 +82,7 @@
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
                             <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_prologo.jpg" alt="Prologo">
+                                <img src="img/thumbs/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">
@@ -100,7 +98,7 @@
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
                             <a href="#open-vid" title="Guarda il video del viaggiatore">
-                                <img src="img/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
+                                <img src="img/thumbs/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -122,8 +120,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_faresi.jpg" alt="Prologo">
+                                <img src="img/thumbs/thumb_faresi.jpg" alt="Prologo">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -140,8 +138,8 @@
                             </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">
+                            <a href="#open-vid" title="Guarda il video del viaggiatore">
-                                <img src="img/thumb_piazza.jpg" alt="Viaggiatore #1">
+                                <img src="img/thumbs/thumb_piazza.jpg" alt="Viaggiatore #1">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -161,8 +159,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_antonio.jpg" alt="Antonio">
+                                <img src="img/thumbs/thumb_antonio.jpg" alt="Antonio">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -176,8 +174,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_francesco.jpg" alt="Francesco #3b">
+                                <img src="img/thumbs/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">                            
@@ -197,8 +195,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_nobili.jpg" alt="I nobili di Fara">
+                                <img src="img/thumbs/thumb_nobili.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">
@@ -216,8 +214,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_rocco.jpg" alt="Rocco si è svegliato #5">
+                                <img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato #5">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -230,7 +228,7 @@
                                 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 
+                                il borgo popolato come era allora. 
                             </p>
                         </div>
                     </div>
@@ -239,8 +237,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_alberto.jpg" alt="Alberto">
+                                <img src="img/thumbs/thumb_alberto.jpg" alt="Alberto">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -255,8 +253,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi">
+                                <img src="img/thumbs/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -264,13 +262,11 @@
                                 Disputa sui dialetti e sui saperi #6
                             </h3>
                             <p class="text-small">
-                                Trilussa intrattiene con una piccola platea in una piazzetta,
+                                Trilussa recita poesie davanti una piccola platea in una piazzetta.
-                                recitando poesie. Alberto, inizialmente seduto un po' in disparte,
+                                Alberto, inizialmente seduto un po' in disparte, mal sopporta la
-                                mal sopporta la lingua romanesca di Trilussa e improvvisamente 
+                                lingua romanesca di Trilussa e improvvisamente si accende,
-                                si accende, accusando il poeta di essere un forestiero,
+                                accusando il poeta di essere un forestiero in terra sabina.
-                                un sabotatore in terra sabina. I due intraprendono una 
+                                I due intraprendono una accesa disputa sui dialetti e sui cibi. 
-                                accesa disputa sui dialetti e sui saperi... finendo
-                                inevitabilmente per parlare di cucina. 
                             </p>
                         </div>
                     </div>
@@ -279,8 +275,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_duomo.jpg" alt="Piazza Duomo">
+                                <img src="img/thumbs/thumb_duomo.jpg" alt="Piazza Duomo">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -297,8 +293,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_loredana.jpg" alt="Loredana">
+                                <img src="img/thumbs/thumb_loredana.jpg" alt="Loredana">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -320,8 +316,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_pietro.jpg" alt="Pietro">
+                                <img src="img/thumbs/thumb_pietro.jpg" alt="Pietro">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -337,8 +333,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_castello.jpg" alt="Il castello">
+                                <img src="img/thumbs/thumb_castello.jpg" alt="Il castello">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -347,10 +343,9 @@
                             </h3>
                             <p class="text-small">
                                 Fara ha un castello di nobili origini, più volte espugnato e ricostruito.
-                                Un tempo ospitava la scuola di musica, l'ospedale, e tante attività del paese.
+                                Un tempo ospitava le tante attività del paese. Oggi è quasi in abbandono.
-                                Oggi è quasi in abbandono ma ci sono ancora dei tesori. Due imbonitori
+                                Due imbonitori convincono la popolazione ad entrare, promettendo che lì
-                                sui trampoli convincono la popolazione ad entrare nel castello,
+                                dentro potrà trovare risposta a tutti i suoi desideri.
-                                promettendo che lì dentro potrà trovare risposta a tutti i suoi desideri.
                                 Così gli abitanti cominciano a dar voce ai loro desideri, fin quando…  
                             </p>
                         </div>
@@ -360,8 +355,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_sabini.jpg" alt="I sabini ieri e oggi">
+                                <img src="img/thumbs/thumb_sabini.jpg" alt="I sabini ieri e oggi">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -377,8 +372,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_monumento.jpg" alt="Il monumento sacro">
+                                <img src="img/thumbs/thumb_monumento.jpg" alt="Il monumento sacro">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -399,8 +394,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_eva.jpg" alt="Eva">
+                                <img src="img/thumbs/thumb_eva.jpg" alt="Eva">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -417,8 +412,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_toto.jpg" alt="Toto">
+                                <img src="img/thumbs/thumb_toto.jpg" alt="Toto">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -438,8 +433,8 @@
                 <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">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_fuori.jpg" alt="Fuori Porta">
+                                <img src="img/thumbs/thumb_fuori.jpg" alt="Fuori Porta">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -455,8 +450,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_carro.jpg" alt="Il ritorno del carro">
+                                <img src="img/thumbs/thumb_carro.jpg" alt="Il ritorno del carro">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            

js/fara.js

@@ -1,35 +1,49 @@
 //use strict;
-
+/**
-export function slider(nextimage) {
+ * 'Slide' background images
+ * in landing page
+ * @todo Preload iamges?? https://stackoverflow.com/questions/3646036/preloading-images-with-javascript
+ */
+export function sliderBg()
+{
+    let nextimage = 0;
     let header = document.querySelector('header');
+    slider();
+    
+    function slider() {
+        /*** Fade in??*/
+        //opacity = 1;
 
     let images = [
-        'img/fara_background.jpg',
+            'img/lp-bg/fara_bg_1.jpg',
-        //'img/fara_bg_2.jpg',
+            'img/lp-bg/fara_bg_2.jpg',
-        'img/fara_bg_3.jpg',
+            'img/lp-bg/fara_bg_3.jpg',
-        'img/fara_bg_4.jpg',
+            'img/lp-bg/fara_bg_4.jpg',
-        'img/fara_bg_5.jpg',
+            'img/lp-bg/fara_bg_5.jpg',
-        //'img/fara_bg_6.jpg',
-        'img/fara_bg_7.jpg',
-        'img/fara_bg_8.jpg',
-        'img/fara_bg_9.jpg',
-        'img/fara_bg_10.png',
-        'img/fara_bg_11.jpg',
         ];
         
     if (nextimage >= images.length) {
         nextimage = 0;
     }
     header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
-   setTimeout(slider(nextimage), 2000);
+    setTimeout(slider, 2000);
+   }
+}
+/**
+ * @todo
+ * Simple slideshow (Credits page) 
+ */
+export function slideshow()
+{
+    // Write me...
 }
-
 /**
  * @todo
  * The canvas should be drawn into an overlay
  * container (always fullscreen)
  */
-export function interactiveMap() {
+export function interactiveMap() 
+{
     let canvas = document.createElement('canvas');
 
     let ctx = canvas.getContext('2d');
@@ -41,3 +55,148 @@ export function interactiveMap() {
         ctx.drawImage(img, 0, 0);
     }
 }
+/**
+ * Menu keys for accessibility
+ */
+export function menuKeys() 
+{
+    document.addEventListener('keypress', e => {
+        let keyCode = e.code;
+
+        if (keyCode.includes('Digit')) {
+            let numCode = keyCode.replace('Digit', '');
+
+            let menuK = {
+                '1' : 'itinerario.html',
+                '2' : 'progetto.html',
+                '3' : 'news.html',
+                '4':  'credits.html',
+            };
+
+            for (let k in menuK) {
+                if (k === numCode) 
+                    window.location.href = menuK[k];
+            }
+        }
+    });
+}
+/**
+ * Apply active class to nav links
+ * @todo Inefficient?
+ */
+export function activeNav()
+{
+    let navlinks = Array.from(document.querySelectorAll('#links a'));
+
+    navlinks.forEach(element => {
+        let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
+        
+        if (window.location.href.includes(ref)) {
+            element.setAttribute('class', 'active');
+        }
+    });
+}
+/**
+ * Show vertical nav on mobile
+ */
+export function mobileNav()
+{
+    let menu = document.querySelector('i');
+
+    if (menu) {
+        menu.addEventListener('click', () => {
+            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('.side-nav').classList.add('d-hide');
+            document.querySelector('body').classList.remove('opaque');
+        });
+    }
+}
+/**
+ * Open / close modal for videos
+ * and apply video source
+ */
+export function openVideo(a)
+{
+    /**
+    let modal = document.querySelector('#mod-vid');
+    let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
+
+     * Dynamically change video source
+     * Note naming convention...
+    if (vidLinks.length) {
+        vidLinks.forEach(a => {
+        */
+
+    let aNodes = a.childNodes;
+    // Hacky??
+    let title = a.parentElement
+        .nextElementSibling
+        .firstElementChild
+        .innerHTML
+        .trim();
+    
+    console.log(aNodes);
+    let vStr = '';
+
+    aNodes.forEach(n => {
+        if (n.src) {
+            vStr = n.src;
+            vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
+                .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
+        }
+    });
+
+    localStorage.setItem('vidURI', vStr);
+    localStorage.setItem('vidTitle', title);
+    /**
+     * Go to video page
+     */
+    window.location.href = 'video.html';
+    /* Close the modal when clicking on the
+    modal.classList.add('active');
+    document.querySelector('.modal-title').classList.add('roboto');
+    document.querySelector('.modal-title').innerHTML = title;
+    
+    let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
+    
+    close.addEventListener('click', () => {
+        modal.classList.remove('active');
+    });
+
+    *  overlay
+    overlay.addEventListener('click', () => {
+        modal.classList.remove('active');
+    })
+    */
+}
+/**
+ * Activate background on scroll for nav only
+ * if not small screen
+ */
+export function navOnScroll()
+{
+    let nav   = document.querySelector('#nav');
+    let links = document.querySelector('#links');
+
+    if (window.pageYOffset !== 0) {
+        nav.classList.add('bg-white', 'border');
+        nav.classList.remove('text-gray');
+        links.classList.add('nav-dark');
+        links.classList.remove('nav-light');
+    }
+    else {
+        if (!document.querySelector('header').classList.contains('itin')) {
+            nav.classList.add('text-gray');
+            links.classList.remove('nav-dark');
+            links.classList.add('nav-light');
+        }
+        nav.classList.remove('bg-white', 'border');
+    }
+}

js/ui.js

@@ -2,165 +2,59 @@
 
 import * as Farapp from './fara.js';
 
-let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/);
+let landing = new RegExp(/(https?:\S+\/$|index.html$)/);
 
-if (homeRE.test(window.location.href)) {
+if (landing.test(window.location.href)) {
+    window.addEventListener('load', () => {
+        Farapp.sliderBg();
+    });
+}
+
+if (!window.location.href.includes('video')) {
     document.addEventListener('readystatechange', () => {
-        let nextimage = 0;
+        Farapp.activeNav();
-        let header = document.querySelector('header');
+        Farapp.menuKeys();
-        slider();
+        Farapp.mobileNav();
-        
-        function slider() {
-            /*** Fade in??*/
-            //opacity = 1;
-
-        let images = [
-                'img/fara_background.jpg',
-                //'img/fara_bg_2.jpg',
-                'img/fara_bg_3.jpg',
-                'img/fara_bg_4.jpg',
-                'img/fara_bg_5.jpg',
-                //'img/fara_bg_6.jpg',
-                'img/fara_bg_7.jpg',
-                'img/fara_bg_8.jpg',
-                'img/fara_bg_9.jpg',
-                'img/fara_bg_10.png',
-                'img/fara_bg_11.jpg',
-            ];
-            
-        if (nextimage >= images.length) {
-            nextimage = 0;
-        }
-        header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
-        setTimeout(slider, 2000);
-       }
     });
-}
-/**
- * Apply active class to selected link...
- * @todo Inefficient!!
- */
-document.addEventListener('readystatechange', () => {
-    let navlinks = Array.from(document.querySelectorAll('#links a'));
 
-    navlinks.forEach(element => {
-        let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
-        
-        if (window.location.href.includes(ref)) {
-            element.setAttribute('class', 'active');
-        }
-        if (homeRE.test(window.location.href)) {
-            navlinks[0].setAttribute('class', 'active');
-        }
-    });
-});
-/**
- * Activate background on scroll for nav only
- * if not small screen
- */
     window.addEventListener('scroll', event => {
-    let nav = document.querySelector('#nav');
+        Farapp.navOnScroll();
-    let links = document.querySelector('#links');
-
-    if (window.pageYOffset !== 0) {
-        nav.classList.add('bg-white', 'border');
-        nav.classList.remove('text-gray');
-        links.classList.add('nav-dark');
-        links.classList.remove('nav-light');
-    }
-    else {
-        if (!document.querySelector('header').classList.contains('itin')) {
-            nav.classList.add('text-gray');
-            links.classList.remove('nav-dark');
-            links.classList.add('nav-light');
-        }
-        nav.classList.remove('bg-white', 'border');
-    }
     });
+}
 /**
-* Show horizontal nav on mobile
+ * For itinerario.html...
+ * @todo What about the interactive map?!?
  */
-document.addEventListener('readystatechange', () => {
+if (window.location.href.includes('itinerario')) {
-    let menu = document.querySelector('i');
+    let vidLinks = document.querySelectorAll('a[href="#open-vid"]');
-
+    vidLinks.forEach(a => {
-    menu.addEventListener('click', () => {
+        a.addEventListener('click', () => {
-        document.querySelector('.side-nav').classList.remove('d-hide');
+            Farapp.openVideo(a);
-        document.querySelector('.side-nav').classList.remove('slide-out');
-        document.querySelector('body').classList.add('opaque');
         });
+    })
+}
+/**
+ * For videos...
+ */
+if (window.location.href.includes('video')) {
+    document.addEventListener('readystatechange', () => {
+        let vStr = localStorage.getItem('vidURI');
+        let vidTitle = localStorage.getItem('vidTitle');
 
-    let close = document.querySelector('#close-nav');
+        console.log(vStr, vidTitle);
+        document.querySelector('h1').innerHTML = vidTitle;
+
+        let close = document.querySelector('a[title="Close"]');
 
         close.addEventListener('click', () => {
-        document.querySelector('.side-nav').classList.add('d-hide');
+            window.location.href = 'itinerario.html';
-        document.querySelector('body').classList.remove('opaque');
+        });
-    })
+
-})
-/**
- * Open / close modal for videos
- * and apply video source
- */
-window.addEventListener('load', () => {
-    let modal = document.querySelector('#mod-vid');
-    let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
-    /**
-     * Dynamically change video source
-     * Note naming convention...
-     */
-    if (vidLinks.length) {
         let source = document.querySelector('source');
         let video = source.parentNode;
-        let overlay = document.querySelector('.modal-overlay');
-
-        vidLinks.forEach(a => {
-            let aNodes = a.childNodes;
-            // Hacky??
-            let title = a.parentElement
-                .nextElementSibling
-                .firstElementChild
-                .innerHTML
-                .trim();
-    
-            a.addEventListener('click', () => {
-                aNodes.forEach(n => {
-                    if (n.src) {
-                        let vStr = n.src
-                        .substr(n.src.lastIndexOf('/')+1, n.src.length)
-                        .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
             
         source.src = `assets/video/${vStr}`;
         
         video.load();
-                    }
-                });
-                
-                modal.classList.add('active');
-                document.querySelector('.modal-title').classList.add('roboto');
-                document.querySelector('.modal-title').innerHTML = title;
-            });
-        });
-    
-        let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
-    
-        close.addEventListener('click', () => {
-            modal.classList.remove('active');
-        });
-
-        /* Close the modal when clicking on the
-        *  overlay
-        */
-       overlay.addEventListener('click', () => {
-            modal.classList.remove('active');
-       })
-    }
-});
-/**
- * Draw interactive map in canvas...
- if (window.location.href.includes('itinerario')) {
-     let mapImg = document.getElementById('map');
-
-     mapImg.addEventListener('click', () => {
-         Farapp.interactiveMap();
     });
 }
-*/

news.html

@@ -13,23 +13,21 @@
             <div class="container">
                 <div class="columns text-gray" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light 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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>

progetto.html

@@ -13,30 +13,28 @@
             <div class="container">
                 <div class="columns text-gray" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light 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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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">Il progetto</h1>
+                <h1 class="arvo">Il progetto</h1>
             </div>
         </header>
         <main>
@@ -86,12 +84,14 @@
                                 <li>Un prodotto scalabile e ripetibile</li>
                             </ul>
                         </div>
-                        <div class="column col-lg-5 col-sm-12 col-md-12" id="vagg">
+                        <div class="column col-lg-7 col-sm-12 col-md-12 of-hidden">
-                            <img src="img/Prologo-Annunziazione_backst.jpg">
+                            <iframe src="https://player.vimeo.com/video/578170143" 
+                            width="640" height="360" frameborder="0" allowfullscreen></iframe>
                         </div>
                     </div>
                 </div>
             </section>
+            <!-- Solo versione online -->
             <section class="odd-stripe">
                 <div class="container">
                     <div class="columns mb-2">
@@ -100,21 +100,19 @@
                         </div>
                         <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">
+                                <img class="mt-2" 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 mb-2 pr-lg">                            
                             <p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Web app</p>
                             <a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
-                                <img src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
+                                <img class="mt-2" src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
                             </a>
                         </div>
                     </div>
             </section>
+            <!-- Fine (versione online) -->
             <section class="prj-logos">
                 <div class="container">
                     <div class="columns mb-2">
@@ -126,21 +124,21 @@
                         <div class="col-2 col-sm-12 col-md-12"></div>
                         <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
                             <figure class="figure">
-                                <img class="of-hidden" src="img/logo_theorema.png" alt="THEOREMA">
+                                <img class="of-hidden" src="img/loghi/logo_theorema.png" alt="THEOREMA">
                                 <figcaption class="figure-caption text-center opensans">THEOREMA</figcaption>
                             </figure>
                         </div>
                         <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
                             <a href="https://orpheogroup.com">
                                 <figure class="figure">
-                                    <img class="of-hidden" src="img/logo_orpheo.png" alt="ORPHEO">
+                                    <img class="of-hidden" src="img/loghi/logo_orpheo.png" alt="ORPHEO">
                                     <figcaption class="figure-caption text-center opensans">ORPHEO</figcaption>
                                 </figure>
                             </a>
                         </div>
                         <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
                             <figure class="figure">
-                                <img class="of-hidden" src="img/logo_sillabe.jpg" alt="SILLABE">
+                                <img class="of-hidden" src="img/loghi/logo_sillabe.jpg" alt="SILLABE">
                                 <figcaption class="figure-caption text-center opensans">SILLABE</figcaption>
                             </figure>
                         </div>
@@ -159,7 +157,7 @@
                         <div class="col-2 col-sm-12 col-md-12">
                             <a href="https://www.teatropotlach.org" title="Vai al sito del Teatro Potlach">
                                 <figure class="figure">
-                                    <img class="of-hidden" src="img/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach">
+                                    <img class="of-hidden" src="img/loghi/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach">
                                     <figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption>
                                 </figure>
                             </a>

video.html

@@ -0,0 +1,30 @@
+<!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="module"></script>
+        <title>Nel cielo di Fara</title>
+    </head>
+    <body class="bg-dark">
+        <main>
+            <div class="columns">
+                <div class="column col-11">
+                    <h1 class="roboto-slab mb-2 mt-2 ml-2"></h1>
+                </div>
+                <div class="column col-1">
+                    <a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
+                </div>
+                </div>
+                <div class="container">
+                    <video class="video-responsive" controls>
+                        <source src="" type="video/mp4">
+                        Il browser non supporta i video integrati
+                    </video>
+                </div>
+            </div>
+        </main>
+    </body>
+</html>