verso una versione definitiva
This commit is contained in:
parent
eaf2c476eb
commit
5071cc4a65
3 changed files with 143 additions and 11 deletions
79
themes/maya0x17/static/theme.css
Normal file
79
themes/maya0x17/static/theme.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<title>{% block title %}{{ SITENAME }}{%endblock%} || HackIT 2020</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caesar+Dressing&family=Recursive:wght@500;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/normalize.css" />
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/skeleton.css" />
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/theme.css" />
|
||||
|
|
@ -50,8 +51,8 @@
|
|||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul></nav>
|
||||
<div class="four columns"> </div>
|
||||
</div><!-- column -->
|
||||
</div>
|
||||
<div class="four columns"> </div> <!-- column -->
|
||||
</div><!-- menu-row -->
|
||||
<div class="row" id="content-row">
|
||||
<div class="u-full-width column">
|
||||
|
|
|
|||
Loading…
Reference in a new issue