Slim header and pixel header now in full working condition.

This commit is contained in:
Stephan 2021-02-21 11:37:22 +01:00
parent 691c456a44
commit 2807e7e582
5 changed files with 229 additions and 200 deletions

View File

@ -249,19 +249,19 @@ header {
margin-top: -0.75rem;
display: grid;
grid-template-rows: 46px 18px 0rem 1rem 55px 18px auto;
grid-template-rows: 46px 18px;
grid-template-columns: 15% 82px auto 96px 22.5%;
z-index: 0;
}
.bg_box__top_bar_left {
.bg_box__top_bar_left, .slim_box__top_bar_left {
grid-row: 2 / span 1;
grid-column: 1 / span 3;
background-color: var(--wtf-light-blue);
z-index: 5;
}
.bg_box__top_bar_middle {
.bg_box__top_bar_middle, .slim_box__top_bar_middle {
grid-row: 1 / span 2;
grid-column: 4 / span 1;
background-image: url("../images/header_top_triangles.svg");
@ -269,13 +269,21 @@ header {
z-index: 5;
}
.bg_box__top_bar_right {
.slim_box__top_bar_middle {
background-image: url("../images/header_top_triangles_dark_blue.svg");
}
.bg_box__top_bar_right, .slim_box__top_bar_right {
grid-row: 1 / span 2;
grid-column: 5 / span 1;
/* background-color: var(--wtf-light-orange); */
background-color: transparent;
z-index: 5;
}
.slim_box__top_bar_right {
background-color: var(--wtf-dark-blue);
}
.bg_box__unicorns {
grid-row: 2 / span 6;
grid-column: 1 / span 5;
@ -289,14 +297,12 @@ header {
.bg_box__big_bg {
grid-row: 3 / span 2;
grid-column: 1 / span 5;
/* background-color: var(--wtf-light-orange); */
z-index: 5;
}
.bg_box__bottom_bar_left {
grid-row: 5 / span 1;
grid-column: 1 / span 3;
/* background-color: var(--wtf-light-orange); */
z-index: 5;
}
@ -362,7 +368,6 @@ header {
.header__sub_claim {
grid-row: 4 / span 4;
grid-column: 3 / span 3;
/*margin: 0 2rem 1.5rem 1.5rem;*/
margin: 1rem 2rem -3rem 1.5rem;
padding: 0.5rem 1.5rem 0 1.5rem;
background-color: var(--wtf-orange);
@ -415,7 +420,7 @@ header {
/* main - Start */
main {
margin: 0.75rem 0 0 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
@ -523,8 +528,12 @@ li {
padding: 0;
}
.content__inner_box.-logo_header {
margin: 3.5rem 1.5rem 0 1.5rem;
}
.content__inner_box {
margin: 2.5rem 1.5rem 0 1.5rem;
margin: -0.5rem 1.5rem 0 1.5rem;
}
.nav__wrapper, .header__wrapper, .content__box, .footer__wrapper {
@ -583,12 +592,6 @@ footer {
/* footer - Ende */
@media screen and (min-width: 1200px) {
/*
.header__bg_box {
grid-template-columns: 15% 82px auto 96px 22.5%;
}
*/
.primary_nav__members, .primary_nav__lang_switch {
display: none;
}
@ -600,6 +603,10 @@ footer {
.primary_nav__navlist {
display: flex !important;
}
.content__inner_box {
margin: -0.5rem 1.5rem 0 1.5rem;
}
}
@media screen and (min-width: 1100px) and (max-width: 1200px) {
@ -622,6 +629,10 @@ footer {
.primary_nav__navlist {
display: flex !important;
}
.content__inner_box {
margin: -0.5rem 1.5rem 0 1.5rem;
}
}
@media screen and (max-width: 1099px) and (min-width: 910px) {
@ -654,7 +665,7 @@ footer {
}
.content__inner_box {
margin-top: 2.5rem;
margin: -0.5rem 1.5rem 0 1.5rem;
}
}
@ -688,6 +699,10 @@ footer {
.secondary_nav__navlist {
margin-right: 0.5rem;
}
.content__inner_box {
margin: -0.5rem 1.5rem 0 1.5rem;
}
}
@media screen and (max-width: 959px) and (min-width: 790px) {
@ -710,18 +725,9 @@ footer {
.header__sub_claim {
grid-column: 1 / span 5;
padding: 0;
/*margin: 0 1.5rem;*/
margin: 2rem 1.5rem -3rem 1.5rem;
}
.content__inner_box {
margin-top: 2.5rem;
}
main {
margin-top: 0.75rem;
}
.header__top_box .header__button {
display: auto;
}
@ -741,6 +747,10 @@ footer {
.secondary_nav__navlist {
margin-right: 0.5rem;
}
.content__inner_box {
margin: -0.5rem 1.5rem 0 1.5rem;
}
}
@media screen and (max-width: 850px) and (min-width: 790px) {
@ -775,10 +785,6 @@ footer {
.secondary_nav__navlist {
margin-right: 0.5rem;
}
.content__inner_box {
margin: 2.5rem 1.5rem 0 1.5rem;
}
}
@media screen and (max-width: 789px) and (min-width: 596px) {
@ -786,7 +792,7 @@ footer {
--column-count: 2
}
header, .header__bg_box {
header, .header__bg_box, .header__slim_box {
display: flex;
flex-direction: column;
justify-content: center;
@ -796,10 +802,6 @@ footer {
background-image: none;
}
main {
margin: 0;
}
.bg_box__top_bar_left,
.bg_box__top_bar_middle,
.bg_box__top_bar_right,
@ -812,6 +814,15 @@ footer {
display: none;
}
.slim_box__top_bar_left {
margin-top: 1rem;
height: 1.125rem;
}
.slim_box__top_bar_middle, .slim_box__top_bar_right {
display: none;
}
.header__claim {
margin: 1.2rem 1.5rem 0 1.5rem;
grid-row: 3 / span 1;
@ -862,7 +873,7 @@ footer {
display: flex !important;
}
.content__inner_box {
.content__inner_box.-logo_header {
margin: -0.5rem 1.5rem 0 1.5rem;
}
}
@ -884,7 +895,7 @@ footer {
display: block;
}
header, .header__bg_box {
header, .header__bg_box, .header__slim_box {
display: flex;
flex-direction: column;
justify-content: center;
@ -894,6 +905,10 @@ footer {
background-image: none;
}
.header__slim_box {
margin-top: -3rem;
}
.header__claim {
margin: 0.5rem 0.5rem 0 0.5rem;
grid-row: 3 / span 1;
@ -921,10 +936,6 @@ footer {
font-size: 2rem;
}
main {
margin-top: 0.75rem;
}
.bg_box__top_bar_left,
.bg_box__top_bar_middle,
.bg_box__top_bar_right,
@ -937,8 +948,14 @@ footer {
display: none;
}
main {
margin-top: 0;
.slim_box__top_bar_left {
grid-column: 1 / span 5;
margin-top: 3rem;
height: 1.125rem;
}
.slim_box__top_bar_middle, .slim_box__top_bar_right {
display: none;
}
.sub_claim__box {
@ -1014,7 +1031,7 @@ footer {
}
/* mobile nav - Ende */
.content__inner_box {
.content__inner_box.-logo_header {
margin: -0.5rem 1.5rem 0 1.5rem;
}
}

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 96 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-1137,0)">
<g>
<g id="blue-corner" serif:id="blue corner" transform="matrix(1,0,0,1,-93,-106)">
<path d="M1257.2,152L1230,170L1230,152L1257.2,152Z" style="fill:#2a7fff;"/>
</g>
<path id="top-right-triangle" serif:id="top right triangle" d="M1233,0L1233,64L1137,64" style="fill:#003380;"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 854 B

View File

@ -65,8 +65,8 @@
{% endfor %}
</ul>
</nav>
<!-- background for header box - start -->
<div class="bg_box__top_bar_left"></div>
<div class="bg_box__top_bar_middle"></div>
<div class="bg_box__top_bar_right"></div>
<div class="slim_box__top_bar_left"></div>
<div class="slim_box__top_bar_middle"></div>
<div class="slim_box__top_bar_right"></div>
</div>
{% endblock %}

View File

@ -24,7 +24,7 @@
</nav>
</div>
<div class="header__bg_box">
<nav class="header__primary_nav">
<nav class="header__primary_nav -logo_header">
<div class="primary_nav__toggle">
<svg viewBox="0 0 100 80" width="32" height="32">
<rect width="100" height="15"></rect>

View File

@ -1,7 +1,7 @@
{% extends "header_with_logo.html" %}
{% block body %}
<div class="content__box">
<div class="content__inner_box">
<div class="content__inner_box -logo_header">
<h1>{{ this.title }}</h1>
</div>
</div>