diff --git a/css/main.css b/css/main.css
index d47d58a..23ee805 100644
--- a/css/main.css
+++ b/css/main.css
@@ -74,7 +74,7 @@ header {
content: "";
display: block;
position: absolute;
- bottom: 40vh;
+ bottom: calc(100% - 60vh);
left: 0;
right: 0;
top: 0;
@@ -109,6 +109,23 @@ header {
background-color: rgba(254, 254, 254, 0.25);
}
/* ---- Navbar ----- */
+.h-nav {
+ min-width: 280px;
+ padding-left: 10px;
+ height: 100vh;
+ margin: 0;
+ left: 0;
+ position: absolute;
+ z-index: 11;
+}
+.h-nav a {
+ display: block;
+ color: #333;
+ text-decoration: none;
+ margin-left: 30px;
+ padding: 10px 0;
+ transition: ease-in 1s;
+}
.nav-menu {
text-align: right;
}
@@ -134,6 +151,20 @@ header {
vertical-align: middle;
line-height: 2.3rem;
}
+#nav i {
+ padding-top: 1.5rem;
+ vertical-align: middle;
+ cursor: pointer;
+ z-index: 10;
+}
+#close-nav {
+ padding: 0px;
+ margin: 0px 0 20px 0;
+ font-size: 1.2rem;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-weight: 400;
+ cursor: pointer;
+}
#nav.border {
border-bottom: 1px solid rgba(204,204,204,1);
}
@@ -147,10 +178,15 @@ header {
.nav-dark a:hover {
color: #000;
}
-/* #links a:hover {
- color: #fff;
- text-decoration: none;
-} */
+body.opaque::after {
+ z-index: 8;
+ content: '';
+ height: 100%;
+ width: 100%;
+ background-color: rgb(26, 21, 21);
+ opacity: 0.7;
+ position: fixed;
+}
/** Footer **/
footer {
min-height: 5rem;
@@ -203,6 +239,14 @@ section .container ul {
section .container img {
width: 100%;
}
+section.prj-logos img {
+ max-height: 110px;
+ max-width: 410px;
+}
#vagg {
padding-bottom: 2rem;
+}
+#potlach {
+ max-width: 110px;
+ margin: 0 25%;
}
\ No newline at end of file
diff --git a/img/ispc_ext_large.png b/img/ispc_ext_large.png
index 86c3208..7c9d0e4 100644
Binary files a/img/ispc_ext_large.png and b/img/ispc_ext_large.png differ
diff --git a/img/loghi_ispc_potlach.png b/img/loghi_ispc_potlach.png
index 496a8ff..044d9cd 100644
Binary files a/img/loghi_ispc_potlach.png and b/img/loghi_ispc_potlach.png differ
diff --git a/img/logo_potlach.jpg b/img/logo_potlach.jpg
index 6125973..5b878e5 100644
Binary files a/img/logo_potlach.jpg and b/img/logo_potlach.jpg differ
diff --git a/img/logo_sillabe.jpg b/img/logo_sillabe.jpg
index e10b6d5..a546c2d 100644
Binary files a/img/logo_sillabe.jpg and b/img/logo_sillabe.jpg differ
diff --git a/index.html b/index.html
index 9ccc153..18e453e 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
<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>Nel cielo di Fara</title>
</head>
@@ -11,16 +12,28 @@
<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">
- <img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+ <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-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
+ <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-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>
+ <nav class="d-hide h-nav bg-white opensans">
+ <p id="close-nav">X</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">
diff --git a/js/ui.js b/js/ui.js
index d77e192..0afe1fe 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -53,21 +53,45 @@ window.addEventListener('load', () => {
}
});
});
+/**
+ * Activate background on scroll for nav only
+ * if not small screen
+ */
+if (window.innerWidth >= 600) {
+ window.addEventListener('scroll', event => {
+ 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 {
+ nav.classList.add('text-gray');
+ nav.classList.remove('bg-white', 'border');
+ links.classList.add('nav-light');
+ links.classList.remove('nav-dark');
+ }
+ });
+}
-window.addEventListener('scroll', event => {
- let nav = document.querySelector('#nav');
- let links = document.querySelector('#links');
+window.addEventListener('load', () => {
+ /**
+ * Show horizontal nav on mobile
+ */
+ let menu = document.querySelector('i');
- 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 {
- nav.classList.add('text-gray');
- nav.classList.remove('bg-white', 'border');
- links.classList.add('nav-light');
- links.classList.remove('nav-dark');
- }
-});
\ No newline at end of file
+ menu.addEventListener('click', () => {
+ document.querySelector('.h-nav').classList.remove('d-hide');
+ 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('body').classList.remove('opaque');
+ })
+})
\ No newline at end of file
diff --git a/progetto.html b/progetto.html
index db362cb..c3c752b 100644
--- a/progetto.html
+++ b/progetto.html
@@ -4,6 +4,7 @@
<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>Il progetto | Nel cielo di Fara</title>
</head>
@@ -11,16 +12,28 @@
<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 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-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
+ <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-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>
+ <nav class="d-hide h-nav bg-white opensans">
+ <p id="close-nav">X</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">
@@ -31,14 +44,14 @@
<section class="odd-stripe">
<div class="container">
<div class="columns">
- <div class="column col-lg-7 col-sm-12 of-hidden">
+ <div class="column col-lg-7 col-sm-12 col-md-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">
+ <div class="column col-lg-5 col-sm-12 col-md-12 pl-lg">
<h2>In sintesi</h2>
<p>
- L’obiettivo del progetto Innova Patrimonio è l’ideazione e creazione di un innovativo
+ L’obiettivo del progetto Innova Patrimonio è l’ideazione e la 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.
@@ -47,15 +60,16 @@
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,
+ 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>
+ <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 <em>mobile</em>, sito web, installazioni <em>site specific</em>.</p>
</div>
</div>
</div>
@@ -63,7 +77,7 @@
<section>
<div class="container">
<div class="columns">
- <div class="column col-lg-7 col-sm-12">
+ <div class="column col-lg-7 col-sm-12 col-md-12">
<h2>Valore aggiunto del progetto</h2>
<ul>
<li>Un nuovo modello narrativo</li>
@@ -74,7 +88,7 @@
<li>Valorizzazione della "prossimità"</li>
</ul>
</div>
- <div class="column col-lg-5 col-sm-12" id="vagg">
+ <div class="column col-lg-5 col-sm-12 col-md-12" id="vagg">
<img src="img/Prologo-Annunziazione_backst.jpg">
</div>
</div>
@@ -86,12 +100,12 @@
<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">
+ <div class="column col-lg-6 col-sm-12 col-md-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">
+ <div class="column col-lg-6 col-sm-12 col-md-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
@@ -99,20 +113,20 @@
</div>
</div>
<div class="columns mt-2">
- <div class="column col-lg-6 col-sm-12 mt-2 pr-lg">
+ <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 mt-2">
+ <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>
</div>
</div>
</section>
- <section>
+ <section class="prj-logos">
<div class="container">
<div class="columns mb-2">
<div class="col-12">
@@ -120,32 +134,32 @@
</div>
</div>
<div class="columns mt-lg">
- <div class="col-2"></div>
- <div class="col-3 pl-2 pr-2">
+ <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">
<figcaption class="figure-caption text-center opensans">THEOREMA</figcaption>
</figure>
</div>
- <div class="col-3 pl-2 pr-2">
- <a href="">
+ <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">
<figcaption class="figure-caption text-center opensans">ORPHEO</figcaption>
</figure>
</a>
</div>
- <div class="col-3 pl-2 pr-2">
+ <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">
<figcaption class="figure-caption text-center opensans">SILLABE</figcaption>
</figure>
</div>
- <div class="col-1"></div>
+ <div class="col-1 col-sm-12 col-md-12"></div>
</div>
<div class="columns mt-lg">
- <div class="col-3"></div>
- <div class="col-4">
+ <div class="col-3 col-sm-12 col-md-12"></div>
+ <div class="col-4 col-sm-12 col-md-12">
<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">
@@ -153,17 +167,15 @@
</figure>
</a>
</div>
- <div class="col-2">
+ <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">
+ <img class="of-hidden" src="img/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach">
<figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption>
</figure>
</a>
</div>
- <div class="col-3">
-
- </div>
+ <div class="col-3 col-sm-12 col-md-12"></div>
</div>
</div>
</section>