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 */
-/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 28, 2021 */
+/* Roboto Condensed */
 @font-face {
     font-family: 'roboto_condensedbold';
     src: url('../fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
@@ -30,4 +29,37 @@
          url('../fonts/robotocondensed-regular-webfont.woff') format('woff');
     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 {
-    background-image: url(../img/fara_background.jpg);
+.main-header.home {
+    min-height: 930px;
 }
-.main-header.bg2 {
-    background-image: url(../img/fara_bg_2.jpg);
+.main-header.prog {
+    min-height: 60vh;
+    background-image: url('../img/progetto_header.jpg');
 }
-.main-header.bg3 {
-    background-image: url(../img/fara_bg_3.jpg);
+.main-header.prog::before {
+    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;
@@ -132,4 +166,43 @@ 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;
 }