minor design adjustments
This commit is contained in:
parent
925d7b1255
commit
eb958d4c87
4 changed files with 76 additions and 19 deletions
|
@ -4,13 +4,25 @@ header {
|
|||
background: $background_accent_1;
|
||||
top: 0;
|
||||
box-shadow: 0px -10000px 0px 10000px $background_accent_1;
|
||||
h1 a, h1 a:hover, h1 a:link, h1 a:visited {
|
||||
font-family: $headline_font, sans-serif;
|
||||
color: $font_accent_1;
|
||||
margin: 0;
|
||||
.sitetitle {
|
||||
text-align: justify;
|
||||
display: inline-block;
|
||||
a, a:hover, a:link, a:visited {
|
||||
font-family: $headline_font, sans-serif;
|
||||
color: $font_accent_1;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
font-size: $font_size_h1;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.sitesubtitle {
|
||||
text-align: justify;
|
||||
display: inline-block;
|
||||
font-family: $subline_font, sans-serif;
|
||||
color: $font_default;
|
||||
font-weight: bold;
|
||||
font-size: $font_size_h1;
|
||||
text-decoration: none;
|
||||
font-size: $font_size_h2;
|
||||
}
|
||||
nav {
|
||||
grid-template-rows: auto 1fr auto;
|
||||
|
@ -36,7 +48,7 @@ header {
|
|||
text-decoration: none;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: $font_submenu;
|
||||
color: $font_menu;
|
||||
font-size: $font_size_default;
|
||||
|
||||
&:focus {
|
||||
|
@ -102,7 +114,7 @@ header {
|
|||
box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
|
||||
|
||||
a {
|
||||
color: $font_menu;
|
||||
color: $font_submenu;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
opacity: 0;
|
||||
|
@ -188,14 +200,29 @@ header {
|
|||
|
||||
@media (max-width: $mobile_view) {
|
||||
header {
|
||||
h1 a, h1 a:hover, h1 a:link {
|
||||
font-size: $font_size_h1_mobile;
|
||||
.sitetitle {
|
||||
margin-top: 0px;
|
||||
a, a:hover, a:link {
|
||||
font-size: $font_size_h1_mobile;
|
||||
}
|
||||
}
|
||||
.sitesubtitle {
|
||||
display: block;
|
||||
font-size: $font_size_h2_mobile;
|
||||
margin-top: 0px;
|
||||
}
|
||||
@if $show_mobile_menu == true {
|
||||
nav {
|
||||
> ul > li a,
|
||||
> ul > li .title_dropdown {
|
||||
font-size: $font_size_default_mobile;
|
||||
}
|
||||
> ul > li > a,
|
||||
> ul > li .title_dropdown {
|
||||
padding: 0.3rem 0.2rem;
|
||||
}
|
||||
ul {
|
||||
display: table;
|
||||
|
||||
}
|
||||
.dropdown {
|
||||
.dropdown__menu {
|
||||
|
@ -213,8 +240,38 @@ header {
|
|||
|
||||
@media (max-width: $tiny_view) {
|
||||
header {
|
||||
h1 a, h1 a:hover, h1 a:link {
|
||||
font-size: $font_size_h1_tiny;
|
||||
.sitetitle {
|
||||
margin-top: 0px;
|
||||
a, a:hover, a:link {
|
||||
font-size: $font_size_h1_tiny;
|
||||
}
|
||||
}
|
||||
.sitesubtitle {
|
||||
font-size: $font_size_h2_tiny;
|
||||
}
|
||||
@if $show_mobile_menu == true {
|
||||
nav {
|
||||
> ul > li a,
|
||||
> ul > li .title_dropdown {
|
||||
font-size: $font_size_default_tiny;
|
||||
}
|
||||
> ul > li > a,
|
||||
> ul > li .title_dropdown {
|
||||
padding: 0.3rem 0.2rem;
|
||||
}
|
||||
ul {
|
||||
display: table;
|
||||
}
|
||||
.dropdown {
|
||||
.dropdown__menu {
|
||||
left: 180%;
|
||||
}
|
||||
&:after {
|
||||
content: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -15,7 +15,6 @@ $font_menu: white;
|
|||
$font_submenu: white;
|
||||
$font_default_inverted: white;
|
||||
|
||||
$shadow_accent_1: rgba(0,0,0,1);
|
||||
$font_size_default: 1.3em;
|
||||
$font_size_default_large: 2.2em;
|
||||
$font_size_default_mobile: 1em;
|
||||
|
@ -37,6 +36,7 @@ $font_size_h2_pico: 0.75em;
|
|||
|
||||
$headline_font: 'EB Garamond';
|
||||
$main_font: 'Epilogue';
|
||||
$subline_font: 'Epilogue';
|
||||
|
||||
$large_min_width: 1800px;
|
||||
|
||||
|
|
|
@ -10,11 +10,10 @@ $font_accent_2: maroon;
|
|||
$font_accent_2_hover: orangered;
|
||||
$font_accent_3: orangered;
|
||||
$font_accent_4: rgb(247, 196, 24);
|
||||
$font_menu: black;
|
||||
$font_submenu: red;
|
||||
$font_submenu: black;
|
||||
$font_menu: red;
|
||||
$font_default: white;
|
||||
|
||||
$shadow_accent_1: rgba(255, 190, 14, 0.5);
|
||||
$font_size_default: 1.3em;
|
||||
$font_size_default_large: 2.2em;
|
||||
$font_size_default_mobile: 1em;
|
||||
|
@ -35,6 +34,7 @@ $font_size_h2_tiny: 0.9em;
|
|||
$font_size_h2_pico: 0.75em;
|
||||
|
||||
$headline_font: 'Mochiy Pop One';
|
||||
$subline_font: 'Lato';
|
||||
$main_font: 'Lato';
|
||||
|
||||
$large_min_width: 2200px;
|
||||
|
|
|
@ -34,11 +34,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 id="top"><a href="/">
|
||||
<h1 id="top" class="sitetitle"><a href="/">
|
||||
{%- block sitetitle -%}
|
||||
winkekatze.tv
|
||||
{%- endblock -%}
|
||||
</a></h1>
|
||||
</a></h1>
|
||||
{%- include "blocks/navigation.html" -%}
|
||||
</header>
|
||||
<div class="
|
||||
|
|
Loading…
Reference in a new issue