forked from ag_kommunikation/webseite
WIP: Pixel header now fully responsive.
Slim header most likely broken at this point.
This commit is contained in:
parent
06b89692cb
commit
155c79a1be
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ claim_heading: ## <span>Werde <em>Teilchen­beschleu­nigerIn</em></span><
|
||||
---
|
||||
claim_content: Booste Projekte mit Unterstütung von über 150 GenossInnen<br>Genossen­schaftlich & solidarisch.
|
||||
---
|
||||
subclaim_heading: ## Werkkooperative der Technikfreundinnen –<br />WTF Kooperative eG
|
||||
subclaim_heading: ## Werk­koopera­tive der Technik­freundinnen –<br />WTF Koopera­tive eG
|
||||
---
|
||||
subclaim_content:
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user