123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- /*
- * 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).
- * */
- @import 'media-queries.scss';
- // 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;
- */
- body {
- margin-top: 3rem;
- 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;
- h1,h2,h3,strong,b { color: $c-titles; }
- h4,h5,h6 {
- color: $c-smalltitles;
- }
- h1,h2,h3 {
- font-family: 'Caesar Dressing', Helvetica, cursive;
- }
- strong { font-weight: 800; }
- }
- #logo-div {
- position: fixed;
- top: 5vw;
- left: -6.5vw;
- border-radius: 50%;
- box-shadow: 0px 0 1.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;
- @include gt-sm {
- font-size: 6rem;
- }
- @include sm {
- font-size: 4.5rem;
- }
- @include lt-sm {
- font-size: 3rem;
- }
- font-weight: normal;
- &:hover {
- text-decoration: underline;
- }
- }
- }
- .page-slug--index #content .entry-title { display: none; }
- .translations-available {
- text-align: right;
- }
- code {
- background-color: #333;
- border: 1px solid #888;
- border-radius: 0.4em;
- }
- // BEGIN menu
- #menu-row {
- display: none;
- position: fixed;
- z-index: 20;
- top: 3em;
- left: 8vw;
- background: $c-bg-menu;
- width: 89vw;
- margin-top: 8vw;
- border-radius: 1em;
- padding: 1em 0px;
- ul { list-style: none; }
- font-size: 120%;
- > div {
- max-width: 15em;
- text-align: center;
- margin: auto;
- }
- }
- #overlay {
- display: block;
- position: fixed;
- left: 0;
- top: 0;
- background-color: rgba(0,0,0,0.5);
- overflow-x: hidden;
- transition: 0.3s;
- width: 100%;
- height: 0;
- z-index: 3;
- }
- #menu-noscript-row {
- margin: auto;
- max-width: 60em;
- nav {
- font-size: 110%;
- font-weight: bold;
- font-family: 'Caesar Dressing', Helvetica, cursive;
- text-align: center;
- ul { list-style: none; }
- li { display: inline; padding-right: 3em;}
- }
- }
- // END menu
- .news > #content { // pagina news
- #posts-list { list-style: none; }
- .published { text-align: right; font-size: 80%; }
- }
- // Contenta, 朱莉娅 酷 ?
- #talk-maschio-femmina-palle .caps { font-variant-caps: all-small-caps; }
|