|
|
@@ -0,0 +1,78 @@
|
|
|
+/*
|
|
|
+ * palette da 4 colori che pare abbiano un che di maya:
|
|
|
+ * Crimson sky (#CF6766),Indigo (#30415D), Ultramarine (#031424) e Light Blue (#8EAEBD);
|
|
|
+ * oppureuna palette forse veramente troppo colorata e accesa:
|
|
|
+ * Papaya (#E24E42), Mustard(#E9B000), Blush (#EB6E80) e Aqua (#008F95).
|
|
|
+ * */
|
|
|
+
|
|
|
+// variant 1
|
|
|
+$c-crimson-sky: #CF6766;
|
|
|
+$c-indigo: #30415D;
|
|
|
+$c-ultramarine: #031424;
|
|
|
+$c-lightblue: #8EAEBD;
|
|
|
+
|
|
|
+// variant 2
|
|
|
+$c-papaya: #E24E42;
|
|
|
+$c-mustard: #E9B000;
|
|
|
+$c-blush: #EB6E80;
|
|
|
+$c-aqua: #008F95;
|
|
|
+
|
|
|
+
|
|
|
+// variant 1
|
|
|
+$c-primary: $c-crimson-sky;
|
|
|
+$c-secondary: $c-lightblue;
|
|
|
+$c-tertiary: $c-ultramarine;
|
|
|
+$c-quaternary: $c-indigo;
|
|
|
+
|
|
|
+$c-text: $c-secondary;
|
|
|
+$c-bg: $c-tertiary;
|
|
|
+$c-titles: $c-primary;
|
|
|
+
|
|
|
+// variant 2
|
|
|
+$c-primary: $c-papaya;
|
|
|
+$c-secondary: $c-mustard;
|
|
|
+$c-tertiary: $c-blush;
|
|
|
+$c-quaternary: $c-aqua;
|
|
|
+
|
|
|
+$c-text: $c-secondary;
|
|
|
+$c-bg: $c-tertiary;
|
|
|
+$c-titles: $c-primary;
|
|
|
+
|
|
|
+#all-wrapper {
|
|
|
+ h1,h2,h3,h4,h5,h6,strong,b { color: $c-titles; font-weight: 400; }
|
|
|
+}
|
|
|
+body { background-color: $c-bg; font-size: 18px; color: $c-text; }
|
|
|
+a, a:focus, a:hover, a:visited { color: $c-titles; }
|
|
|
+h1 > (a, a:focus, a:active) { color: $c-titles; }
|
|
|
+#all-wrapper {
|
|
|
+ padding-left: 8vw;
|
|
|
+}
|
|
|
+#menu-row {
|
|
|
+ display: none;
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 8vw;
|
|
|
+ background: adjust-color($c-bg, $lightness: -50%); //rgb(34, 34, 34);
|
|
|
+ width: 89vw;
|
|
|
+ margin-top: 8vw;
|
|
|
+ border-radius: 1em;
|
|
|
+ padding: 1em 0px;
|
|
|
+ ul { list-style: none; }
|
|
|
+ > .columns { font-size: 120%; }
|
|
|
+}
|
|
|
+#logo-div {
|
|
|
+ position: fixed;
|
|
|
+ top: 5vw;
|
|
|
+ left: -8vw;
|
|
|
+
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0px 0 3vw black;
|
|
|
+ line-height: 0;
|
|
|
+}
|
|
|
+#logo-img {
|
|
|
+ width: 16vw;
|
|
|
+ /* alloca una dimensione approssimativa prima del rendering
|
|
|
+ * non sappiamo la dimensione esatta, ma con min-height possiamo indicargli che è circa-quadrata
|
|
|
+ * */
|
|
|
+ min-height: 15vw;
|
|
|
+}
|
