dancingCycle/webseite
0
0
Fork 0
forked from ag_kommunikation/webseite
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: Pixel header now fully responsive.

Browse Source 
Slim header most likely broken at this point.
This commit is contained in:
Stephan 2021-02-20 16:03:03 +01:00
parent 06b89692cb
commit 155c79a1be
2 changed files with 62 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
assets/css/style.css
View File

@ -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;
}
}

2
content/contents.lr
View File

@ -6,7 +6,7 @@ claim_heading: ## <span>Werde <em>Teilchen&shy;beschleu&shy;nigerIn</em></span><
---
claim_content: Booste Projekte mit Unterstütung von über 150 GenossInnen<br>Genossen&shy;schaftlich & solidarisch.
---
subclaim_heading: ## Werkkooperative der Technikfreundinnen –<br />WTF Kooperative eG
subclaim_heading: ## Werk&shy;koopera&shy;tive der Technik&shy;freundinnen –<br />WTF Koopera&shy;tive eG
---
subclaim_content: