From 5071cc4a65a9472e5d54e55818b9388ad7e48599 Mon Sep 17 00:00:00 2001 From: boyska Date: Tue, 4 Aug 2020 17:43:35 +0200 Subject: [PATCH] verso una versione definitiva --- themes/maya0x17/static/theme.css | 79 +++++++++++++++++++++++++++++ themes/maya0x17/static/theme.scss | 70 +++++++++++++++++++++---- themes/maya0x17/templates/base.html | 5 +- 3 files changed, 143 insertions(+), 11 deletions(-) create mode 100644 themes/maya0x17/static/theme.css diff --git a/themes/maya0x17/static/theme.css b/themes/maya0x17/static/theme.css new file mode 100644 index 0000000..8a1e31f --- /dev/null +++ b/themes/maya0x17/static/theme.css @@ -0,0 +1,79 @@ +#all-wrapper h1, #all-wrapper h2, #all-wrapper h3, #all-wrapper strong, +#all-wrapper b { + color: #ee964b; +} +#all-wrapper h4, #all-wrapper h5, #all-wrapper h6 { + color: #c67026; +} +#all-wrapper h1, #all-wrapper h2, #all-wrapper h3 { + font-family: 'Caesar Dressing', cursive; +} +#all-wrapper strong { + font-weight: 800; +} +body { + background-color: #006165; + font-size: 18px; + color: #faf0ca; + font-family: 'Recursive', sans-serif; +} +a, a:focus, a:hover, a:visited { + color: #ee964b; +} +h1 > (a, a:focus, a:active) { + color: #ee964b; +} +#all-wrapper { + padding-left: 8vw; + max-width: 50em; +} +#menu-row { + display: none; + position: fixed; + top: 0px; + left: 8vw; + background: black; + width: 89vw; + margin-top: 8vw; + border-radius: 1em; + padding: 1em 0px; +} +#menu-row ul { + list-style: none; +} +#menu-row > .columns { + font-size: 120%; +} +#logo-div { + position: fixed; + top: 5vw; + left: -6.5vw; + border-radius: 50%; + box-shadow: 0px 0 3vw black; + line-height: 0; + background-color: transparent; +} +#logo-img { + width: 16vw; + min-height: 15vw; + filter: invert(79%) sepia(8%) saturate(6176%) hue-rotate(325deg) brightness(97%) contrast(91%); +} +#header-row { + text-align: center; +} +#header-row h1 { + margin: 0; +} +#header-row a { + text-decoration: none; + font-size: 7rem; +} +#header-row a:hover { + text-decoration: underline; +} +.page-slug--index #content .entry-title { + display: none; +} +.translations-available { + text-align: right; +} diff --git a/themes/maya0x17/static/theme.scss b/themes/maya0x17/static/theme.scss index 44ec65a..41213d9 100644 --- a/themes/maya0x17/static/theme.scss +++ b/themes/maya0x17/static/theme.scss @@ -6,7 +6,8 @@ * */ // variant 1 -$c-crimson-sky: #CF6766; +//$c-crimson-sky: #CF6766; +$c-crimson-sky: #d9756d; $c-indigo: #30415D; $c-ultramarine: #031424; $c-lightblue: #8EAEBD; @@ -24,35 +25,62 @@ $c-secondary: $c-lightblue; $c-tertiary: $c-ultramarine; $c-quaternary: $c-indigo; +/* $c-text: $c-secondary; -$c-bg: $c-tertiary; -$c-titles: $c-primary; +$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: $c-tertiary; +$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,h4,h5,h6,strong,b { color: $c-titles; font-weight: 400; } + 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; } -a, a:focus, a:hover, a:visited { color: $c-titles; } +body { background-color: $c-bg; font-size: 18px; color: $c-text; font-family: 'Recursive', sans-serif; } +a, a:focus, a:hover, a:visited { color: $c-links; } h1 > (a, a:focus, a:active) { color: $c-titles; } #all-wrapper { padding-left: 8vw; + max-width: 50em; } #menu-row { display: none; position: fixed; top: 0px; left: 8vw; - background: adjust-color($c-bg, $lightness: -50%); //rgb(34, 34, 34); + background: $c-bg-menu; width: 89vw; margin-top: 8vw; border-radius: 1em; @@ -63,11 +91,12 @@ h1 > (a, a:focus, a:active) { color: $c-titles; } #logo-div { position: fixed; top: 5vw; - left: -8vw; + left: -6.5vw; border-radius: 50%; box-shadow: 0px 0 3vw black; line-height: 0; + background-color: transparent; } #logo-img { width: 16vw; @@ -75,4 +104,27 @@ h1 > (a, a:focus, a:active) { color: $c-titles; } * 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 diff --git a/themes/maya0x17/templates/base.html b/themes/maya0x17/templates/base.html index 96b65b0..557cf16 100644 --- a/themes/maya0x17/templates/base.html +++ b/themes/maya0x17/templates/base.html @@ -4,6 +4,7 @@ {% block title %}{{ SITENAME }}{%endblock%} || HackIT 2020 + @@ -50,8 +51,8 @@ {% endfor %} {% endif %} -
 
- + +