From 155c79a1be641af3ef1b8eb5c73bb1cd0dda5cfc Mon Sep 17 00:00:00 2001 From: Stephan Date: Sat, 20 Feb 2021 16:03:03 +0100 Subject: [PATCH] WIP: Pixel header now fully responsive. Slim header most likely broken at this point. --- assets/css/style.css | 127 +++++++++++++++++++++---------------------- content/contents.lr | 2 +- 2 files changed, 62 insertions(+), 67 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index b4c9b36..9495505 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -523,7 +523,7 @@ li { } .content__inner_box { - margin: 0 1.5rem; + margin: 2.5rem 1.5rem 0 1.5rem; } .nav__wrapper, .header__wrapper, .content__box, .footer__wrapper { @@ -548,47 +548,6 @@ li { background-color: var(--wtf-night-blue); color: var(--wtf-light-grey); } - -.content__inner_kachel_box { - margin: 0 1.5rem; - display: flex; - flex-direction: row; - justify-content: flex-start; - justify-content: space-between; - flex-wrap: wrap; -} - -.kachel { - padding: 1rem; - margin: 1rem; - width: 41%; - min-width: 120px; - display: flex; - flex-direction: column; - justify-content: center; -} - -.kachel__icon { - background-color: #fff; - width: 105px; - height: 85px; - border-radius: 50px; - padding-top: 15px; - text-align: center; - align-self: center; -} - -.kachel__icon.-light_grey { - background-color: var(--wtf-light-grey); -} - -.kachel__icon.-orange { - background-color: var(--wtf-orange); -} - -.kachel__icon.-light_blue { - background-color: var(--wtf-light-blue); -} /* main - Ende */ /* footer - Start */ @@ -692,6 +651,10 @@ footer { .secondary_nav__navlist { margin-right: 0.5rem; } + + .content__inner_box { + margin-top: 2.5rem; + } } @media screen and (max-width: 1044px) and (min-width: 960px) { @@ -702,7 +665,7 @@ footer { .bg_box__unicorns { background-image: url("../images/white_unicorns.svg"); background-size: auto 150%; - background-position: top -100px right -800px ; + background-position: top -100px right -580px; } .header__top_box .header__button { @@ -734,7 +697,7 @@ footer { .bg_box__unicorns { background-image: url("../images/white_unicorns.svg"); background-size: auto 150%; - background-position: top -100px right -800px; + background-position: top -100px right -630px; } .header__claim { @@ -746,7 +709,12 @@ footer { .header__sub_claim { grid-column: 1 / span 5; padding: 0; - margin: 0 1.5rem; + /*margin: 0 1.5rem;*/ + margin: 2rem 1.5rem -3rem 1.5rem; + } + + .content__inner_box { + margin-top: 2.5rem; } main { @@ -806,6 +774,10 @@ 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) { @@ -819,12 +791,12 @@ footer { justify-content: center; } - main { - margin: 0; + .header__bg_box { + background-image: none; } - .kachel { - width: auto + main { + margin: 0; } .bg_box__top_bar_left, @@ -840,9 +812,19 @@ footer { } .header__claim { - margin: 1.5rem; + margin: 1.2rem 1.5rem 0 1.5rem; grid-row: 3 / span 1; grid-column: 1 / span 5; + background: var(--wtf-dark-blue); + } + + .header__claim h2 span { + padding: 0 1.5rem; + } + + .header__claim p { + margin: 0; + padding: 1.5rem; } .header__sub_claim { @@ -850,11 +832,6 @@ footer { padding: 0; margin: 0 1.5rem 0 1.5rem; } - .header__claim p { - background: var(--wtf-dark-blue); - margin: 30px 0 -30px 0; - padding: 30px; - } .sub_claim__box { padding-bottom: 2.5rem; @@ -883,6 +860,10 @@ footer { .primary_nav__navlist { display: flex !important; } + + .content__inner_box { + margin: -0.5rem 1.5rem 0 1.5rem; + } } @media screen and (max-width: 595px) { @@ -894,6 +875,10 @@ footer { display: none; } + .header__primary_nav { + background-color: transparent; + } + .primary_nav__members, .primary_nav__lang_switch { display: block; } @@ -904,10 +889,25 @@ footer { justify-content: center; } + .header__bg_box { + background-image: none; + } + .header__claim { - margin: 0 0.5rem 0.5rem 0.5rem; + margin: 0.5rem 0.5rem 0 0.5rem; grid-row: 3 / span 1; grid-column: 1 / span 5; + background: var(--wtf-dark-blue); + } + + .header__claim h2 span { + padding: 0 1.5rem; + } + + .header__claim p { + margin: 0; + padding: 1.5rem; + background: var(--wtf-dark-blue); } .header__sub_claim { @@ -919,20 +919,11 @@ footer { .header__claim h2, .header__sub_claim h2 { font-size: 2rem; } - .header__claim p { - background: var(--wtf-dark-blue); - margin: 25px 0 -20px 0; - padding: 20px; - } main { margin-top: 0.75rem; } - .kachel { - width: auto - } - .bg_box__top_bar_left, .bg_box__top_bar_middle, .bg_box__top_bar_right, @@ -1018,7 +1009,11 @@ footer { } .primary_nav__navlink:hover { - color: var(--wtf-light-grey); + color: var(--wtf-mid-grey); } /* mobile nav - Ende */ + + .content__inner_box { + margin: -0.5rem 1.5rem 0 1.5rem; + } } diff --git a/content/contents.lr b/content/contents.lr index d8cd064..1ba1afa 100644 --- a/content/contents.lr +++ b/content/contents.lr @@ -6,7 +6,7 @@ claim_heading: ## Werde Teilchen­beschleu­nigerIn< --- claim_content: Booste Projekte mit Unterstütung von über 150 GenossInnen
Genossen­schaftlich & solidarisch. --- -subclaim_heading: ## Werkkooperative der Technikfreundinnen –
WTF Kooperative eG +subclaim_heading: ## Werk­koopera­tive der Technik­freundinnen –
WTF Koopera­tive eG --- subclaim_content: