From 2807e7e582cd9c7e5c99fee0faff45812b721dde Mon Sep 17 00:00:00 2001 From: Stephan Date: Sun, 21 Feb 2021 11:37:22 +0100 Subject: [PATCH] Slim header and pixel header now in full working condition. --- assets/css/style.css | 105 ++++++----- .../images/header_top_triangles_dark_blue.svg | 12 ++ templates/header_slim.html | 132 ++++++------- templates/header_with_logo.html | 178 +++++++++--------- templates/homepage.html | 2 +- 5 files changed, 229 insertions(+), 200 deletions(-) create mode 100644 assets/images/header_top_triangles_dark_blue.svg diff --git a/assets/css/style.css b/assets/css/style.css index 35cbaf86..5cfa1c34 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -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; } } diff --git a/assets/images/header_top_triangles_dark_blue.svg b/assets/images/header_top_triangles_dark_blue.svg new file mode 100644 index 00000000..a08cad29 --- /dev/null +++ b/assets/images/header_top_triangles_dark_blue.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/templates/header_slim.html b/templates/header_slim.html index 78cea5d0..6f25de3c 100644 --- a/templates/header_slim.html +++ b/templates/header_slim.html @@ -1,72 +1,72 @@ {% extends "layout.html" %} {% block header %}
- - + -
-
+
+ - -
-
-
+
    + {% for title, mapping in bag("navigation").items() %} + {% if mapping.visible|default(true) %} +
  • + + {{ title }} + + {% if mapping.list_childs %} +
      + {% set sub_menu = mapping['items'].items() %} + {% for sub_title, href in sub_menu %} +
    • + + {{ sub_title }} + +
    • + {% endfor %} +
    + {% endif %} +
  • + {% endif %} + {% endfor %} +
+ +
+
+
+
{% endblock %} diff --git a/templates/header_with_logo.html b/templates/header_with_logo.html index 06d758a6..dee2f936 100644 --- a/templates/header_with_logo.html +++ b/templates/header_with_logo.html @@ -1,95 +1,95 @@ {% extends "layout.html" %} {% block header %}
-
- - {% if '/images/wtf_logo.svg'|asseturl is defined -%} - - {%- endif %} - + + +
+
+
-
- - -
-
-
-
-
-
-
-
-
- -
- - {{ this.claim_heading }} - {{ this.claim_content }} -
-
-
- {{ this.subclaim_heading }} - {{ this.subclaim_content }} -
- - -
-
+
    + {% for title, mapping in bag("navigation").items() %} + {% if mapping.visible|default(true) %} +
  • + + {{ title }} + + {% if mapping.list_childs %} +
      + {% set sub_menu = mapping['items'].items() %} + {% for sub_title, href in sub_menu %} +
    • + + {{ sub_title }} + +
    • + {% endfor %} +
    + {% endif %} +
  • + {% endif %} + {% endfor %} +
+ + +
+
+
+
+
+
+
+
+
+ +
+ + {{ this.claim_heading }} + {{ this.claim_content }} +
+
+
+ {{ this.subclaim_heading }} + {{ this.subclaim_content }} +
+ + +
+
{% endblock %} diff --git a/templates/homepage.html b/templates/homepage.html index 95dbc480..09092361 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -1,7 +1,7 @@ {% extends "header_with_logo.html" %} {% block body %}
-
+

{{ this.title }}