progetto.html - first draft

css/fonts.css

@@ -1,5 +1,5 @@
 /**** Self-hosted fonts with free license ****/
-
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */
 /* Arvo Regular */
 @font-face {
     font-family: 'arvoregular';
@@ -8,8 +8,7 @@
     font-weight: normal;
     font-style: normal;
 }
-/* Roboto */
+/* Roboto Condensed */
-/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 28, 2021 */
 @font-face {
     font-family: 'roboto_condensedbold';
     src: url('../fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
@@ -31,3 +30,36 @@
     font-weight: normal;
     font-style: normal;
 }
+/* Roboto Slab */
+@font-face {
+    font-family: 'roboto_slablight';
+    src: url('../fonts/RobotoSlab-Light-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'roboto_slabbold';
+    src: url('../fonts/RobotoSlab-Bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'roboto_slabregular';
+    src: url('../fonts/RobotoSlab-Regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+/* Roboto */
+@font-face {
+    font-family: 'roboto_bold';
+    src: url('../fonts/Roboto-Bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+/* Open Sans Regular */
+@font-face {
+    font-family: 'open_sansregular';
+    src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}

css/main.css

@@ -1,6 +1,24 @@
 @import url(spectre.css);
 @import url(fonts.css);
 
+:root {
+    --ochre: #ccac68;
+    --ochre-light : #f7f4ee;
+    --ochre-dark: rgba(116,102,77,1);
+}
+/** General utils **/
+.of-hidden {
+    overflow: hidden;
+}
+.pl-lg {
+    padding-left: 1rem !important;
+}
+.pr-lg {
+    padding-right: 2rem;
+}
+.mt-lg {
+    margin-top: 2rem;
+}
 /** Font classes **/
 .arvo {
     font-family: 'arvoregular'/*Fallback??*/;
@@ -8,6 +26,15 @@
 .roboto {
     font-family: 'roboto_condensedregular';
 }
+.robot-slab-b {
+    font-family: 'roboto_slabbold';
+}
+.roboto-slab {
+    font-family: 'roboto_slabregular';
+}
+.opensans {
+    font-family: 'open_sansregular';
+}
 /****** Custom rules ******/
 body {
     height: 100%;
@@ -26,7 +53,6 @@ header {
     background-attachment: fixed; 
     background-repeat: no-repeat;
     width: 100%;
-    min-height: 930px;
     color: #fff;
     display: flex;
     align-items: center;
@@ -35,21 +61,24 @@ header {
     margin: 0;
     padding: 0;
 }
-/* .main-header.bg1 {
+.main-header.home {
-    background-image: url(../img/fara_background.jpg);
+    min-height: 930px;
 }
-.main-header.bg2 {
+.main-header.prog {
-    background-image: url(../img/fara_bg_2.jpg);
+    min-height: 60vh;
+    background-image: url('../img/progetto_header.jpg');
 }
-.main-header.bg3 {
+.main-header.prog::before {
-    background-image: url(../img/fara_bg_3.jpg);
+    background-color: rgba(33,33,33,1);
+    opacity: 0.5;
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 40vh;
+    left: 0;
+    right: 0;
+    top: 0;
 }
-.main-header.bg4 {
-    background-image: url(../img/fara_bg_4.jpg);
-}
-.main-header.bg5 {
-    background-image: url(../img/fara_bg_5.jpg);
-} */
 .main-header h1 {
     font-size: 3rem;
 }
@@ -57,13 +86,14 @@ header {
     max-width: 5rem;
     margin: 10px auto 0 auto;
     min-height: 0.4rem;
-    background-color: #ccac68;
+    background-color: var(--ochre);
     content: '';
     display: block;
 }
 #title {
     flex: none;
     min-width: 50%;
+    z-index: 8;
 }
 #title button {
     min-width: 80%;
@@ -98,11 +128,15 @@ header {
     position: fixed;
     top: 0;
     width: 100%;
+    z-index: 10;
 }
 #nav > div {
     vertical-align: middle;
     line-height: 2.3rem;
 }
+#nav.border {
+    border-bottom: 1px solid rgba(204,204,204,1);
+}
 #logo {
     max-height: 41%;
     padding: 7px 0 10px 20px;
@@ -133,3 +167,42 @@ footer p {
 .logos {
     max-height: 70px;
 }
+/*** Section stripes ***/
+.odd-stripe {
+    background-color: var(--ochre-light);
+}
+section .container {
+    padding-top: 1.5rem;
+    font-family: 'roboto_slablight', sans-serif;
+    line-height: 1.3rem;
+    font-size: 12pt;
+}
+@media (min-width: 1280px) {
+    section .container {
+        width: 1280px;
+    }
+}
+@media (max-width: 1280px) {
+    section .container {
+        width: 85%;
+    }
+}
+section .container a {
+    text-decoration: none;
+}
+section .container h2 {
+    color: var(--ochre-dark);
+    font-family: 'roboto_bold';
+    font-size: 26pt;
+}
+section .container ul {
+    list-style-type: square;
+    margin-left: 0;
+    margin-top: 2rem;
+}
+section .container img {
+    width: 100%;
+}
+#vagg {
+    padding-bottom: 2rem;
+}

css/spectre.css

@@ -3256,7 +3256,7 @@ a.text-error:visited {
   background: #fff;
   color: #333 !important;
 }
-
+/** End custom **/
 .bg-secondary {
   background: #f1f1fc !important;
 }

index.html

@@ -4,11 +4,11 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <link rel="stylesheet" href="css/main.css">      
-        <script src="js/ui.js" type="module"></script>
+        <script src="js/ui.js" type="text/javascript"></script>
         <title>Nel cielo di Fara</title>
     </head>
     <body>
-        <header class="main-header bg1">
+        <header class="main-header home">
             <div class="container">
                 <div class="columns text-gray" id="nav">
                     <div class="column col-lg-7 col-sm-2 col-md-2">

js/fara.js

@@ -1,16 +1,25 @@
 //use strict;
 
-export {Farapp};
+export function slider(nextimage) {
+    let header = document.querySelector('header');
 
-const Farapp = {
+    let images = [
-    slider : /*** Fade in??*/ function (element, nextimage) {
+        'img/fara_background.jpg',
-       //opacity = 1;
+        //'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) {
+    if (nextimage >= images.length) {
        nextimage = 0;
    }
-       element.style = 
+   header.setAttribute('style', 'background-image : url("' +images[nextimage++] + '");');
-           'background-image : url("' +images[nextimage++] + '");';
+   setTimeout(slider(nextimage), 2000);
-       setTimeout(slider, 2000);
-   }
 }

js/ui.js

@@ -1,16 +1,17 @@
 //use strict;
-import { Farapp } from "./fara.js";
 
-window.addEventListener('load', () => {
+//import * as Farapp from './fara.js';
-    let navlinks = Array.from(document.querySelectorAll('#links a'));
+let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/);
 
-    navlinks.forEach(element => {
+if (homeRE.test(window.location.href)) {
-        let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
+    window.addEventListener('load', () => {
+        let nextimage = 0;
+        let header = document.querySelector('header');
+        slider();
         
-        if (window.location.href.includes(ref) || element.href.includes('index.html')) {
+        function slider() {
-            element.setAttribute('class', 'active');
+            /*** Fade in??*/
-        }
+            //opacity = 1;
-    });
 
         let images = [
                 'img/fara_background.jpg',
@@ -25,11 +26,32 @@ window.addEventListener('load', () => {
                 'img/fara_bg_10.png',
                 'img/fara_bg_11.jpg',
             ];
-    let nextimage = 0;
-    let header = document.querySelector('header');
             
-    Farapp.slider(header, nextimage);
+            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!!
+ */
+window.addEventListener('load', () => {
+    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');
+        }
+    });
 });
 
 window.addEventListener('scroll', event => {
@@ -37,14 +59,14 @@ window.addEventListener('scroll', event => {
     let links = document.querySelector('#links');
 
     if (window.pageYOffset !== 0) {
-        nav.classList.add('bg-white');
+        nav.classList.add('bg-white', 'border');
         nav.classList.remove('text-gray');
         links.classList.add('nav-dark');
         links.classList.remove('nav-light');
     }
     else {
         nav.classList.add('text-gray');
-        nav.classList.remove('bg-white');
+        nav.classList.remove('bg-white', 'border');
         links.classList.add('nav-light');
         links.classList.remove('nav-dark');
     }

progetto.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="it">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <link rel="stylesheet" href="css/main.css">      
+        <script src="js/ui.js" type="text/javascript"></script>
+        <title>Il progetto | Nel cielo di Fara</title>
+    </head>
+    <body>
+        <header class="main-header prog">
+            <div class="container">
+                <div class="columns text-gray" id="nav">
+                    <div class="column col-lg-7 col-sm-2 col-md-2">
+                        <img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                    </div>
+                    <div class="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="news.html" title="Leggi news ed eventi">News & Eventi</a>
+                        <a href="credits.html" title="Credits del progetto">Credits</a>
+                    </div>
+                </div>
+            </div>
+            <div id="title" class="text-center">
+                <h1 class="arvo">Il progetto</h1>
+            </div>
+        </header>
+        <main>
+            <section class="odd-stripe">
+                <div class="container">
+                    <div class="columns">
+                        <div class="column col-lg-7 col-sm-12 of-hidden">
+                            <iframe src="https://player.vimeo.com/video/464788316" 
+                            width="640" height="360" frameborder="0" allowfullscreen></iframe>
+                        </div>
+                        <div class="column col-lg-5 col-sm-12 pl-lg">
+                            <h2>In sintesi</h2>
+                            <p>
+                                L’obiettivo del progetto Innova Patrimonio è l’ideazione e creazione di un innovativo 
+                                <strong>modello di narrazione del territorio e dei suoi beni</strong>, 
+                                in particolare dei borghi antichi, che oggi vivono 
+                                un processo di progressivo abbandono, da veicolare tramite varie soluzioni tecnologiche.
+                            </p>
+                            <p>
+                                La tradizionale impostazione descrittiva di itinerari e monumenti viene sostituita da 
+                                una <strong>rappresentazione drammaturgica di storie, personaggi, modi di vivere e visioni</strong> 
+                                che costituiscono i caratteri irriducibili e unici della vita profonda di un borgo. 
+                                A quest’anima nascosta danno forma recitazioni attoriali, ricostruzioni virtuali, 
+                                ambienti di <em lang="en">Mixed Reality</em>, interventi di scenografia urbana, <em lang="en">projection mapping</em>. 
+                            </p>
+                        </div>
+                        <div class="column col-12 mt-2">
+                            <p class="mt-2"><strong>Teatro, cinema e computer grafica</strong> si fondono in questa inedita rappresentazione 
+                            spettacolare alla quale la comunità prende parte e in essa si riconosce ma che allo
+                            stesso tempo diventa elemento di attrazione turistica. Gli output sono vari: 
+                            ambienti interattivi per tecnologie mobile, sito web, installazioni <em>site specific</em>.</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <div class="container">
+                    <div class="columns">
+                        <div class="column col-lg-7 col-sm-12">
+                            <h2>Valore aggiunto del progetto</h2>
+                            <ul>
+                                <li>Un nuovo modello narrativo</li>
+                                <li>Raccontare luoghi noti con occhi nuovi</li>
+                                <li>La tecnologia aiuta a rendere visibile lo straordinario</li>
+                                <li>Tecnologia ad alta usabilità</li>
+                                <li>Un prodotto scalabile e ripetibile</li>
+                                <li>Valorizzazione della "prossimità"</li>
+                            </ul>
+                        </div>
+                        <div class="column col-lg-5 col-sm-12" id="vagg">
+                            <img src="img/Prologo-Annunziazione_backst.jpg">
+                         </div>
+                    </div>
+                </div>
+            </section>
+            <section class="odd-stripe">
+                <div class="container">
+                    <div class="columns mb-2">
+                        <div class="col-12 mb-2">
+                            <h2>Output del progetto</h2>
+                        </div>
+                        <div class="column col-lg-6 col-sm-12 of-hidden mt-2 pr-lg">
+                            <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 mt-2">
+                            <p class="text-uppercase mb-0 robot-slab-b">Piattaforma web</p>
+                            <p>
+                                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 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 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>
+                        </div>
+                    </div>
+            </section>
+            <section>
+                <div class="container">
+                    <div class="columns mb-2">
+                        <div class="col-12">
+                            <h2>Partner del progetto</h2>
+                        </div>
+                    </div>
+                    <div class="columns mt-lg">
+                        <div class="col-2"></div>
+                        <div class="col-3 pl-2 pr-2">
+                            <figure class="figure">
+                                <img class="of-hidden" src="img/logo_theorema.png" alt="THEOREMA">
+                                <figcaption class="figure-caption text-center opensans">THEOREMA</figcaption>
+                            </figure>
+                        </div>
+                        <div class="col-3 pl-2 pr-2">
+                            <a href="">
+                                <figure class="figure">
+                                    <img class="of-hidden" src="img/logo_orpheo.png" alt="ORPHEO">
+                                    <figcaption class="figure-caption text-center opensans">ORPHEO</figcaption>
+                                </figure>
+                            </a>
+                        </div>
+                        <div class="col-3 pl-2 pr-2">
+                            <figure class="figure">
+                                <img class="of-hidden" src="img/logo_sillabe.jpg" alt="SILLABE">
+                                <figcaption class="figure-caption text-center opensans">SILLABE</figcaption>
+                            </figure>
+                        </div>
+                        <div class="col-1"></div>
+                    </div>
+                    <div class="columns mt-lg">
+                        <div class="col-3"></div>
+                        <div class="col-4">
+                            <a href="https://www.ispc.cnr.it" title="Vai al sito di CNR ISPC">
+                                <figure class="figure">
+                                    <img class="of-hidden" src="img/ispc_ext_large.png" alt="CNR ISPC">
+                                    <figcaption class="figure-caption text-center opensans">CNR ISPC</figcaption>
+                                </figure>
+                            </a>
+                        </div>
+                        <div class="col-2">
+                            <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">
+                                    <figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption>
+                                </figure>
+                            </a>
+                        </div>
+                        <div class="col-3">
+
+                        </div>
+                    </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>