nicolo/fara-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Responsive nav (no animation...)

Browse Source
This commit is contained in:
Nicolò P 2021-08-03 19:03:27 +02:00
parent eaaa25c389
commit 499138614e
8 changed files with 148 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
css/main.css
View File

@ -74,7 +74,7 @@ header {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
bottom: 40vh; bottom: calc(100% - 60vh);
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
@ -109,6 +109,23 @@ header {
background-color: rgba(254, 254, 254, 0.25); background-color: rgba(254, 254, 254, 0.25);
} }
/* ---- Navbar ----- */ /* ---- 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 { .nav-menu {
text-align: right; text-align: right;
} }
@ -134,6 +151,20 @@ header {
vertical-align: middle; vertical-align: middle;
line-height: 2.3rem; 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 { #nav.border {
border-bottom: 1px solid rgba(204,204,204,1); border-bottom: 1px solid rgba(204,204,204,1);
} }
@ -147,10 +178,15 @@ header {
.nav-dark a:hover { .nav-dark a:hover {
color: #000; color: #000;
} }
/* #links a:hover { body.opaque::after {
color: #fff; z-index: 8;
text-decoration: none; content: '';
} */ height: 100%;
width: 100%;
background-color: rgb(26, 21, 21);
opacity: 0.7;
position: fixed;
}
/** Footer **/ /** Footer **/
footer { footer {
min-height: 5rem; min-height: 5rem;
@ -203,6 +239,14 @@ section .container ul {
section .container img { section .container img {
width: 100%; width: 100%;
} }
section.prj-logos img {
max-height: 110px;
max-width: 410px;
}
#vagg { #vagg {
padding-bottom: 2rem; padding-bottom: 2rem;
}
#potlach {
max-width: 110px;
margin: 0 25%;
} }

BIN
img/ispc_ext_large.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
img/loghi_ispc_potlach.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 63 KiB

BIN
img/logo_potlach.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
img/logo_sillabe.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 19 KiB

19
index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script> <script src="js/ui.js" type="text/javascript"></script>
<title>Nel cielo di Fara</title> <title>Nel cielo di Fara</title>
</head> </head>
@ -11,16 +12,28 @@
<header class="main-header home"> <header class="main-header home">
<div class="container"> <div class="container">
<div class="columns text-gray" id="nav"> <div class="columns text-gray" id="nav">
<div class="column col-lg-7 col-sm-2 col-md-2"> <div class="column col-lg-7 col-sm-10 col-md-2">
<img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <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>
<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="index.html" title="Torna alla home page">Home</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a> <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </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> </div>
<div id="title" class="text-center"> <div id="title" class="text-center">

56
js/ui.js
View File

@ -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 => { window.addEventListener('load', () => {
let nav = document.querySelector('#nav'); /**
let links = document.querySelector('#links'); * Show horizontal nav on mobile
*/
let menu = document.querySelector('i');
if (window.pageYOffset !== 0) { menu.addEventListener('click', () => {
nav.classList.add('bg-white', 'border'); document.querySelector('.h-nav').classList.remove('d-hide');
nav.classList.remove('text-gray'); document.querySelector('body').classList.add('opaque');
links.classList.add('nav-dark'); });
links.classList.remove('nav-light');
} let close = document.querySelector('#close-nav');
else {
nav.classList.add('text-gray'); close.addEventListener('click', () => {
nav.classList.remove('bg-white', 'border'); document.querySelector('.h-nav').classList.add('d-hide');
links.classList.add('nav-light'); document.querySelector('body').classList.remove('opaque');
links.classList.remove('nav-dark'); })
} })
});

74
progetto.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script> <script src="js/ui.js" type="text/javascript"></script>
<title>Il progetto | Nel cielo di Fara</title> <title>Il progetto | Nel cielo di Fara</title>
</head> </head>
@ -11,16 +12,28 @@
<header class="main-header prog"> <header class="main-header prog">
<div class="container"> <div class="container">
<div class="columns text-gray" id="nav"> <div class="columns text-gray" id="nav">
<div class="column col-lg-7 col-sm-2 col-md-2"> <div class="column col-lg-7 col-sm-10 col-md-2">
<img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <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>
<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="index.html" title="Torna alla home page">Home</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a> <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </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> </div>
<div id="title" class="text-center"> <div id="title" class="text-center">
@ -31,14 +44,14 @@
<section class="odd-stripe"> <section class="odd-stripe">
<div class="container"> <div class="container">
<div class="columns"> <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" <iframe src="https://player.vimeo.com/video/464788316"
width="640" height="360" frameborder="0" allowfullscreen></iframe> width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div> </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> <h2>In sintesi</h2>
<p> <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>, <strong>modello di narrazione del territorio e dei suoi beni</strong>,
in particolare dei borghi antichi, che oggi vivono in particolare dei borghi antichi, che oggi vivono
un processo di progressivo abbandono, da veicolare tramite varie soluzioni tecnologiche. 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 La tradizionale impostazione descrittiva di itinerari e monumenti viene sostituita da
una <strong>rappresentazione drammaturgica di storie, personaggi, modi di vivere e visioni</strong> 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. 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>. ambienti di <em lang="en">Mixed Reality</em>, interventi di scenografia urbana, <em lang="en">projection mapping</em>.
</p> </p>
</div> </div>
<div class="column col-12 mt-2"> <div class="column col-12 mt-2">
<p class="mt-2"><strong>Teatro, cinema e computer grafica</strong> si fondono in questa inedita rappresentazione <p class="mt-2"><strong>Teatro, cinema e computer grafica</strong> si fondono in questa inedita
spettacolare alla quale la comunità prende parte e in essa si riconosce ma che allo rappresentazione spettacolare alla quale la comunità prende parte e in essa si riconosce,
stesso tempo diventa elemento di attrazione turistica. Gli output sono vari: ma che allo stesso tempo diventa elemento di attrazione turistica.
ambienti interattivi per tecnologie mobile, sito web, installazioni <em>site specific</em>.</p> Gli output sono vari:
ambienti interattivi per tecnologie <em>mobile</em>, sito web, installazioni <em>site specific</em>.</p>
</div> </div>
</div> </div>
</div> </div>
@ -63,7 +77,7 @@
<section> <section>
<div class="container"> <div class="container">
<div class="columns"> <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> <h2>Valore aggiunto del progetto</h2>
<ul> <ul>
<li>Un nuovo modello narrativo</li> <li>Un nuovo modello narrativo</li>
@ -74,7 +88,7 @@
<li>Valorizzazione della "prossimità"</li> <li>Valorizzazione della "prossimità"</li>
</ul> </ul>
</div> </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"> <img src="img/Prologo-Annunziazione_backst.jpg">
</div> </div>
</div> </div>
@ -86,12 +100,12 @@
<div class="col-12 mb-2"> <div class="col-12 mb-2">
<h2>Output del progetto</h2> <h2>Output del progetto</h2>
</div> </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"> <a href="https://cms.innovapatrimonio.com/" title="Vai al sito di InnovaPatrimonio">
<img src="img/sito_ip.PNG" alt="Sito di InnovaPatrimonio"> <img src="img/sito_ip.PNG" alt="Sito di InnovaPatrimonio">
</a> </a>
</div> </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 class="text-uppercase mb-0 robot-slab-b">Piattaforma web</p>
<p> <p>
Per la condivisione dei contenuti e la creazione gratuita di tour e visite guidate Per la condivisione dei contenuti e la creazione gratuita di tour e visite guidate
@ -99,20 +113,20 @@
</div> </div>
</div> </div>
<div class="columns mt-2"> <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 text-uppercase mb-0 robot-slab-b">Web app</p>
<p class="text-right"> <p class="text-right">
Generata dal sito web con i contenuti pre-caricati Generata dal sito web con i contenuti pre-caricati
</p> </p>
</div> </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"> <a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
<img src="img/webapp.PNG" alt="Web App InnovaPatrimonio"> <img src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
</a> </a>
</div> </div>
</div> </div>
</section> </section>
<section> <section class="prj-logos">
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">
<div class="col-12"> <div class="col-12">
@ -120,32 +134,32 @@
</div> </div>
</div> </div>
<div class="columns mt-lg"> <div class="columns mt-lg">
<div class="col-2"></div> <div class="col-2 col-sm-12 col-md-12"></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"> <figure class="figure">
<img class="of-hidden" src="img/logo_theorema.png" alt="THEOREMA"> <img class="of-hidden" src="img/logo_theorema.png" alt="THEOREMA">
<figcaption class="figure-caption text-center opensans">THEOREMA</figcaption> <figcaption class="figure-caption text-center opensans">THEOREMA</figcaption>
</figure> </figure>
</div> </div>
<div class="col-3 pl-2 pr-2"> <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
<a href=""> <a href="https://orpheogroup.com">
<figure class="figure"> <figure class="figure">
<img class="of-hidden" src="img/logo_orpheo.png" alt="ORPHEO"> <img class="of-hidden" src="img/logo_orpheo.png" alt="ORPHEO">
<figcaption class="figure-caption text-center opensans">ORPHEO</figcaption> <figcaption class="figure-caption text-center opensans">ORPHEO</figcaption>
</figure> </figure>
</a> </a>
</div> </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"> <figure class="figure">
<img class="of-hidden" src="img/logo_sillabe.jpg" alt="SILLABE"> <img class="of-hidden" src="img/logo_sillabe.jpg" alt="SILLABE">
<figcaption class="figure-caption text-center opensans">SILLABE</figcaption> <figcaption class="figure-caption text-center opensans">SILLABE</figcaption>
</figure> </figure>
</div> </div>
<div class="col-1"></div> <div class="col-1 col-sm-12 col-md-12"></div>
</div> </div>
<div class="columns mt-lg"> <div class="columns mt-lg">
<div class="col-3"></div> <div class="col-3 col-sm-12 col-md-12"></div>
<div class="col-4"> <div class="col-4 col-sm-12 col-md-12">
<a href="https://www.ispc.cnr.it" title="Vai al sito di CNR ISPC"> <a href="https://www.ispc.cnr.it" title="Vai al sito di CNR ISPC">
<figure class="figure"> <figure class="figure">
<img class="of-hidden" src="img/ispc_ext_large.png" alt="CNR ISPC"> <img class="of-hidden" src="img/ispc_ext_large.png" alt="CNR ISPC">
@ -153,17 +167,15 @@
</figure> </figure>
</a> </a>
</div> </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"> <a href="https://www.teatropotlach.org" title="Vai al sito del Teatro Potlach">
<figure class="figure"> <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> <figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption>
</figure> </figure>
</a> </a>
</div> </div>
<div class="col-3"> <div class="col-3 col-sm-12 col-md-12"></div>
</div>
</div> </div>
</div> </div>
</section> </section>