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

Update home page

Browse Source
This commit is contained in:
Nicolò P 2021-07-29 15:36:07 +02:00
parent 8a8269718d
commit 01cc8fff4d
4 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/fonts.css
View File

@ -12,22 +12,22 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 28, 2021 */ /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 28, 2021 */
@font-face { @font-face {
font-family: 'roboto_condensedbold'; font-family: 'roboto_condensedbold';
src: url('robotocondensed-bold-webfont.woff2') format('woff2'), src: url('../fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
url('robotocondensed-bold-webfont.woff') format('woff'); url('../fonts/robotocondensed-bold-webfont.woff2') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'roboto_condenseditalic'; font-family: 'roboto_condenseditalic';
src: url('robotocondensed-italic-webfont.woff2') format('woff2'), src: url('../fonts/robotocondensed-italic-webfont.woff2') format('woff2'),
url('robotocondensed-italic-webfont.woff') format('woff'); url('../fonts/robotocondensed-italic-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'roboto_condensedregular'; font-family: 'roboto_condensedregular';
src: url('robotocondensed-regular-webfont.woff2') format('woff2'), src: url('../fonts/robotocondensed-regular-webfont.woff2') format('woff2'),
url('robotocondensed-regular-webfont.woff') format('woff'); url('../fonts/robotocondensed-regular-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

16
css/main.css
View File

@ -13,6 +13,7 @@ body {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
scroll-behavior: smooth;
} }
main { main {
flex: 1 0 auto; flex: 1 0 auto;
@ -22,6 +23,7 @@ main {
header { header {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; width: 100%;
min-height: 930px; min-height: 930px;
@ -55,10 +57,12 @@ header {
min-width: 50%; min-width: 50%;
} }
#title button { #title button {
min-width: 100%; min-width: 80%;
background-color: transparent;
color: #fff; color: #fff;
border: none; background-color: transparent;
border: 1px solid #fff;
border-radius: 4px;
padding: 3px 0;
font-size: 0.9rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
} }
@ -68,7 +72,7 @@ header {
} }
#nav { #nav {
max-height: 50px; max-height: 50px;
position: absolute; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
} }
@ -78,13 +82,13 @@ header {
} }
#logo { #logo {
max-height: 41%; max-height: 41%;
padding: 7px 0 5px 20px; padding: 7px 0 10px 20px;
} }
#links { #links {
text-align: right; text-align: right;
} }
#links a { #links a {
color: #eee; color: inherit;
padding: 10px; padding: 10px;
font-size: 0.85rem; font-size: 0.85rem;
text-decoration: none; text-decoration: none;

8
css/spectre.css
View File

@ -3169,7 +3169,7 @@ a.text-secondary:visited {
} }
.text-gray { .text-gray {
color: #bcc3ce !important; color: #eee !important;
} }
a.text-gray:focus, a.text-gray:focus,
@ -3251,6 +3251,12 @@ a.text-error:visited {
color: #fff; color: #fff;
} }
/** Custom **/
.bg-white {
background: #fff;
color: #333 !important;
}
.bg-secondary { .bg-secondary {
background: #f1f1fc !important; background: #f1f1fc !important;
} }

33
index.html
View File

@ -10,22 +10,22 @@
<body> <body>
<header class="main-header bg1"> <header class="main-header bg1">
<div class="container"> <div class="container">
<div class="columns" id="nav"> <div class="columns text-gray" id="nav">
<div class="column col-7"> <div class="column col-7">
<img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
</div> </div>
<div class="column col-5" id="links"> <div class="column col-5" 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>
</div> </div>
</div> </div>
<div id="title"> <div id="title" class="text-center">
<h1 class="arvo text-center">Nel cielo di Fara</h1> <h1 class="arvo">Nel cielo di Fara</h1>
<button class="text-center">Entra</button> <button>Entra</button>
</div> </div>
</header> </header>
<main></main> <main></main>
@ -36,7 +36,7 @@
</body> </body>
<!-- MOOOVE AWAAAAAYY --> <!-- MOOOVE AWAAAAAYY -->
<script type="text/javascript"> <script type="text/javascript">
window.addEventListener('load', function () { window.addEventListener('load', () => {
let navlinks = document.querySelector('#links').children; let navlinks = document.querySelector('#links').children;
Array.from(navlinks).forEach(element => { Array.from(navlinks).forEach(element => {
@ -46,5 +46,18 @@
} }
}); });
}); });
window.addEventListener('scroll', event => {
let nav = document.querySelector('#nav');
if (window.pageYOffset !== 0) {
nav.classList.add('bg-white');
nav.classList.remove('text-gray');
}
else {
nav.classList.add('text-gray');
nav.classList.remove('bg-white');
}
})
</script> </script>
</html> </html>