vv01f/wtf-webseite
0
0
Fork 0
forked from ag_kommunikation/webseite
Code Issues Pull Requests Projects Releases Wiki Activity

WIP: Slim header according to topio

Browse Source 
Broken below 789px responsive magic missing.
This commit is contained in:
Stephan 2021-03-02 22:40:11 +01:00
parent ef6179a326
commit 7a9c287e46
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
assets/css/style.css
View File

@ -248,6 +248,10 @@ header {
.header__slim_box { .header__slim_box {
margin-top: -0.75rem; margin-top: -0.75rem;
padding-bottom: 6em;
background-image: url("../images/wtf-header-bg.jpg");
background-repeat: no-repeat;
background-size: cover;
display: grid; display: grid;
grid-template-rows: 46px 18px; grid-template-rows: 46px 18px;
@ -271,7 +275,7 @@ header {
} }
.slim_box__top_bar_middle { .slim_box__top_bar_middle {
background-image: url("../images/header_top_triangles_dark_blue.svg"); background-image: url("../images/header_top_triangles.svg");
} }
.bg_box__top_bar_right, .slim_box__top_bar_right { .bg_box__top_bar_right, .slim_box__top_bar_right {
@ -281,10 +285,6 @@ header {
z-index: 5; z-index: 5;
} }
.slim_box__top_bar_right {
background-color: var(--wtf-dark-blue);
}
.bg_box__unicorns { .bg_box__unicorns {
grid-row: 2 / span 6; grid-row: 2 / span 6;
grid-column: 1 / span 5; grid-column: 1 / span 5;
@ -295,6 +295,17 @@ header {
z-index: 10; z-index: 10;
} }
.slim_box__unicorns {
grid-row: 1 / span 2;
grid-column: 1 / span 5;
background-image: url("../images/translucent_unicorns.svg");
background-position: top 1rem left 95% ;
background-size: auto 115%;
background-repeat: no-repeat;
z-index: 10;
margin-bottom: -6em;
}
.bg_box__big_bg { .bg_box__big_bg {
grid-row: 3 / span 2; grid-row: 3 / span 2;
grid-column: 1 / span 5; grid-column: 1 / span 5;

1
templates/header_slim.html
View File

@ -68,5 +68,6 @@
<div class="slim_box__top_bar_left"></div> <div class="slim_box__top_bar_left"></div>
<div class="slim_box__top_bar_middle"></div> <div class="slim_box__top_bar_middle"></div>
<div class="slim_box__top_bar_right"></div> <div class="slim_box__top_bar_right"></div>
<div class="slim_box__unicorns"></div>
</div> </div>
{% endblock %} {% endblock %}