diff --git a/css/fonts.css b/css/fonts.css index a2a8a10..e8a6cb5 100644 --- a/css/fonts.css +++ b/css/fonts.css @@ -56,6 +56,18 @@ font-weight: normal; font-style: normal; } +@font-face { + font-family: 'roboto_regular'; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'roboto_medium'; + src: url('../fonts/Roboto-Medium-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} /* Open Sans Regular */ @font-face { font-family: 'open_sansregular'; diff --git a/css/main.css b/css/main.css index 23ee805..6e20463 100644 --- a/css/main.css +++ b/css/main.css @@ -5,6 +5,10 @@ --ochre: #ccac68; --ochre-light : #f7f4ee; --ochre-dark: rgba(116,102,77,1); + --light-dark: #333; + --dark: rgb(26, 21, 21); + --lilac: #c852ff; + --emerald: #067d08; } /** General utils **/ .of-hidden { @@ -13,12 +17,27 @@ .pl-lg { padding-left: 1rem !important; } +.pl-xl { + padding-left: 4rem !important; +} .pr-lg { padding-right: 2rem; } .mt-lg { margin-top: 2rem; } +.short-hr { + width: 3.5rem; + margin-left: 0; + margin-top: 3rem; + margin-bottom: 3rem; +} +.note { + font-size: 10pt; +} +.text-14pt { + font-size: 14pt; +} /** Font classes **/ .arvo { font-family: 'arvoregular'/*Fallback??*/; @@ -26,12 +45,21 @@ .roboto { font-family: 'roboto_condensedregular'; } +.roboto-reg { + font-family: 'roboto_regular'; +} +.roboto-med { + font-family: 'roboto_medium'; +} .robot-slab-b { font-family: 'roboto_slabbold'; } .roboto-slab { font-family: 'roboto_slabregular'; } +.roboto-slab-l { + font-family: 'roboto_slablight'; +} .opensans { font-family: 'open_sansregular'; } @@ -79,9 +107,19 @@ header { right: 0; top: 0; } +.main-header.itin { + background: none; + min-height: 25vh; +} +.main-header.itin #nav { + color: var(--dark); +} .main-header h1 { font-size: 3rem; } +.main-header.itin h1 { + font-size: 36pt; +} .main-header h1::after { max-width: 5rem; margin: 10px auto 0 auto; @@ -109,22 +147,33 @@ header { background-color: rgba(254, 254, 254, 0.25); } /* ---- Navbar ----- */ -.h-nav { - min-width: 280px; - padding-left: 10px; +.side-nav { + width: 280px; + opacity: 1; + padding-left: 5px; height: 100vh; margin: 0; left: 0; position: absolute; z-index: 11; + animation-name: slidein; + animation-duration: 1s; + transition: slidein 0.5s ease-in; } -.h-nav a { +@keyframes slidein { + from { + width: 0px; + } + to { + width: 280px; + } +} +.side-nav a { display: block; - color: #333; + color: var(--light-dark); text-decoration: none; margin-left: 30px; padding: 10px 0; - transition: ease-in 1s; } .nav-menu { text-align: right; @@ -152,19 +201,45 @@ header { line-height: 2.3rem; } #nav i { - padding-top: 1.5rem; + padding-top: 2rem; 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; + padding-top: 0.7rem; + padding-left: 0; + margin: 0px 0 15px 0; font-weight: 400; cursor: pointer; } +/** From css.gg **/ +.icon-close { + box-sizing: border-box; + position: relative; + display: block; + width: 35px; + height: 35px; + border: 2px solid transparent; + border-radius: 40px +} +.icon-close::after, +.icon-close::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 20px; + height: 2px; + background: currentColor; + transform: rotate(45deg); + border-radius: 5px; + top: 8px; + left: 1px +} +.icon-close::after { + transform: rotate(-45deg) +} #nav.border { border-bottom: 1px solid rgba(204,204,204,1); } @@ -183,7 +258,7 @@ body.opaque::after { content: ''; height: 100%; width: 100%; - background-color: rgb(26, 21, 21); + background-color: var(--dark); opacity: 0.7; position: fixed; } @@ -243,10 +318,30 @@ section.prj-logos img { max-height: 110px; max-width: 410px; } +section.poi .container { + max-width: 1180px; +} +#itin-c { + padding-right: 12%; + font-size: 14pt; +} #vagg { padding-bottom: 2rem; } #potlach { max-width: 110px; margin: 0 25%; +} +/** Text colors **/ +.ochre-dark { + color: var(--ochre-dark); +} +.ochre { + color: var(--ochre) !important; +} +.green { + color: var(--emerald); +} +.lilac { + color: var(--lilac); } \ No newline at end of file diff --git a/fonts/Roboto-Medium-webfont.woff b/fonts/Roboto-Medium-webfont.woff new file mode 100644 index 0000000..5c89785 Binary files /dev/null and b/fonts/Roboto-Medium-webfont.woff differ diff --git a/fonts/Roboto-Regular-webfont.woff b/fonts/Roboto-Regular-webfont.woff new file mode 100644 index 0000000..f9a02e2 Binary files /dev/null and b/fonts/Roboto-Regular-webfont.woff differ diff --git a/img/Thumbnail_Antonio.jpg b/img/Thumbnail_Antonio.jpg new file mode 100644 index 0000000..a213c81 Binary files /dev/null and b/img/Thumbnail_Antonio.jpg differ diff --git a/img/Thumbnail_Piazza Forcina01.jpg b/img/Thumbnail_Piazza Forcina01.jpg new file mode 100644 index 0000000..37d23b1 Binary files /dev/null and b/img/Thumbnail_Piazza Forcina01.jpg differ diff --git a/img/Thumbnail_Sul carattere dei faresi02.jpg b/img/Thumbnail_Sul carattere dei faresi02.jpg new file mode 100644 index 0000000..750d55e Binary files /dev/null and b/img/Thumbnail_Sul carattere dei faresi02.jpg differ diff --git a/img/mappa.png b/img/mappa.png new file mode 100644 index 0000000..efe314e Binary files /dev/null and b/img/mappa.png differ diff --git a/img/thumb_francesco.jpg b/img/thumb_francesco.jpg new file mode 100644 index 0000000..749697b Binary files /dev/null and b/img/thumb_francesco.jpg differ diff --git a/img/thumb_prologo.jpg b/img/thumb_prologo.jpg new file mode 100644 index 0000000..0dcaf5a Binary files /dev/null and b/img/thumb_prologo.jpg differ diff --git a/index.html b/index.html index 18e453e..8e385fe 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,8 @@ News & Eventi Credits -