forked from avana/sito-hackit-20
138 lines
3.3 KiB
SCSS
138 lines
3.3 KiB
SCSS
/*
|
|
* 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-crimson-sky: #d9756d;
|
|
$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-quaternary;
|
|
$c-bg-menu: adjust-color($c-bg, $lightness: -20%); //rgb(34, 34, 34);
|
|
//$c-titles: $c-primary;
|
|
$c-titles: $c-papaya;
|
|
*/
|
|
|
|
// https://coolors.co/006165-ee964b-faf0ca-c2d3cd-847e89
|
|
$c-text: #faf0ca;
|
|
$c-bg: #006165;
|
|
$c-bg-menu: adjust-color($c-bg, $lightness: -20%);
|
|
$c-titles: #ee964b;
|
|
$c-links: $c-titles;
|
|
$c-smalltitles: adjust-color($c-titles, $saturation: -15%, $lightness: -15%);
|
|
|
|
// variant 2
|
|
/*
|
|
$c-primary: $c-papaya;
|
|
$c-secondary: $c-mustard;
|
|
$c-tertiary: $c-blush;
|
|
$c-quaternary: $c-aqua;
|
|
|
|
$c-text: $c-secondary;
|
|
$c-bg: #006165; // $c-quaternary;
|
|
$c-bg-menu: adjust-color($c-bg, $lightness: -10%); //rgb(34, 34, 34);
|
|
$c-titles: $c-primary;
|
|
$c-smalltitles: adjust-color($c-titles, $saturation: -15%, $lightness: -15%);
|
|
$c-links: $c-titles;
|
|
*/
|
|
|
|
|
|
|
|
#all-wrapper {
|
|
h1,h2,h3,strong,b { color: $c-titles; }
|
|
h4,h5,h6 {
|
|
color: $c-smalltitles;
|
|
}
|
|
h1,h2,h3 {
|
|
font-family: 'Caesar Dressing', cursive;
|
|
}
|
|
strong { font-weight: 800; }
|
|
}
|
|
body {
|
|
background-color: $c-bg;
|
|
font-size: 18px;
|
|
color: $c-text;
|
|
font-family: 'Recursive', sans-serif;
|
|
line-height: 1.5em;
|
|
}
|
|
a, a:focus, a:hover, a:visited { color: $c-links; }
|
|
h1 > (a, a:focus, a:active) { color: $c-titles; }
|
|
#all-wrapper {
|
|
padding-right: 8vw;
|
|
padding-left: 2vw;
|
|
max-width: 50em;
|
|
margin: auto;
|
|
}
|
|
#menu-row {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 8vw;
|
|
background: $c-bg-menu;
|
|
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;
|
|
right: -6.5vw;
|
|
|
|
border-radius: 50%;
|
|
box-shadow: 0px 0 3vw black;
|
|
line-height: 0;
|
|
background-color: transparent;
|
|
}
|
|
#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;
|
|
/* questo filtro assurdo viene da https://codepen.io/sosuke/pen/Pjoqqp
|
|
si tratta di un modo per "convertire" il nero in un altro colore qualsiasi
|
|
*/
|
|
filter: invert(79%) sepia(8%) saturate(6176%) hue-rotate(325deg) brightness(97%) contrast(91%)
|
|
}
|
|
#header-row {
|
|
text-align: center;
|
|
h1 { margin: 0; }
|
|
a {
|
|
text-decoration: none;
|
|
font-size: 7rem; // TODO: questo va messo in una media query
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
.page-slug--index #content .entry-title { display: none; }
|
|
.translations-available {
|
|
text-align: right;
|
|
}
|
|
|
|
// TODO: media query
|
|
// TODO: de-google
|
|
// TODO: fai scss automagicamente
|