ag_kommunikation/webseite
6
4
Fork 5
Code Issues 18 Pull Requests 1 Projects Releases Activity

WIP: Pixel header (not fully responsive yet)

Browse Source
This commit is contained in:
Stephan 2021-02-20 14:55:43 +01:00
parent 9ea5c69ea6
commit 06b89692cb
4 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/style.css
View File

@ -50,6 +50,8 @@ body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
background-color: var(--wtf-light-grey);
} }
.primary_nav__toggle { .primary_nav__toggle {
@ -231,11 +233,13 @@ header {
.header__bg_box { .header__bg_box {
margin-top: -0.75rem; margin-top: -0.75rem;
grid-row: 2 / span 1;
grid-column: 1 / span 5; background-image: url("../images/pixel_bg_lila.png");
background-repeat: no-repeat;
background-size: cover;
display: grid; display: grid;
grid-template-rows: 46px 18px 15rem 8rem 55px 18px auto; grid-template-rows: 46px 18px 12rem 8.5rem 55px 18px auto;
grid-template-columns: 15% 82px auto 96px 22.5%; grid-template-columns: 15% 82px auto 96px 22.5%;
z-index: 0; z-index: 0;
} }
@ -252,7 +256,7 @@ header {
.bg_box__top_bar_left { .bg_box__top_bar_left {
grid-row: 2 / span 1; grid-row: 2 / span 1;
grid-column: 1 / span 3; grid-column: 1 / span 3;
background-color: var(--wtf-dark-blue); background-color: var(--wtf-light-blue);
z-index: 5; z-index: 5;
} }
@ -267,7 +271,7 @@ header {
.bg_box__top_bar_right { .bg_box__top_bar_right {
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 5 / span 1; grid-column: 5 / span 1;
background-color: var(--wtf-light-blue); /* background-color: var(--wtf-light-orange); */
z-index: 5; z-index: 5;
} }
@ -276,7 +280,7 @@ header {
grid-column: 1 / span 5; grid-column: 1 / span 5;
background-image: url("../images/white_unicorns.svg"); background-image: url("../images/white_unicorns.svg");
background-position: top 5% left 95% ; background-position: top 5% left 95% ;
background-size: auto 60%; background-size: auto 65%;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 10; z-index: 10;
} }
@ -284,16 +288,14 @@ header {
.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;
background-color: var(--wtf-light-blue); /* background-color: var(--wtf-light-orange); */
background-image: url("../images/header_background.svg");
background-repeat: repeat;
z-index: 5; z-index: 5;
} }
.bg_box__bottom_bar_left { .bg_box__bottom_bar_left {
grid-row: 5 / span 1; grid-row: 5 / span 1;
grid-column: 1 / span 3; grid-column: 1 / span 3;
background-color: var(--wtf-lila); /* background-color: var(--wtf-light-orange); */
z-index: 5; z-index: 5;
} }
@ -353,14 +355,14 @@ header {
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.3em; line-height: 1.3em;
margin: 0.5em 0 0 1em; margin: 0.5em 0 0 1em;
color: white; color: #ebebeb;
} }
.header__sub_claim { .header__sub_claim {
grid-row: 4 / span 4; grid-row: 4 / span 4;
grid-column: 3 / span 3; grid-column: 3 / span 3;
/*margin: 0 2rem 1.5rem 1.5rem;*/ /*margin: 0 2rem 1.5rem 1.5rem;*/
margin: 0 2rem 0 1.5rem; margin: 1rem 2rem -3rem 1.5rem;
padding: 0.5rem 1.5rem 0 1.5rem; padding: 0.5rem 1.5rem 0 1.5rem;
background-color: var(--wtf-orange); background-color: var(--wtf-orange);
z-index: 15; z-index: 15;
@ -621,9 +623,11 @@ footer {
/* footer - Ende */ /* footer - Ende */
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
/*
.header__bg_box { .header__bg_box {
grid-template-columns: 15% 82px auto 96px 22.5%; grid-template-columns: 15% 82px auto 96px 22.5%;
} }
*/
.primary_nav__members, .primary_nav__lang_switch { .primary_nav__members, .primary_nav__lang_switch {
display: none; display: none;

18
assets/images/header_bottom_triangles.svg
View File

@ -1,14 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 82 55" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:serif="http://www.serif.com/"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<g transform="translate(-218 -477)"> <svg width="100%" height="100%" viewBox="0 0 82 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="translate(-251 -106)"> <g transform="matrix(1,0,0,1,-376,-477)">
<g id="bottom-left-corner" transform="translate(93 106)" serif:id="bottom left corner"> <g>
<path d="m458 477h-82v55l82-55z" fill="#60f"/> <g id="bottom-left-corner" serif:id="bottom left corner">
</g> <path d="M458,532L458,477L376,532L458,532Z" style="fill:rgb(0,51,128);"/>
<g transform="translate(93 106)" serif:id="bottom left corner">
<path d="m458 532v-55l-82 55h82z" fill="#003380"/>
</g> </g>
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 707 B

17
assets/images/header_top_triangles.svg
View File

@ -1,11 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 96 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:serif="http://www.serif.com/"><title>WTF Layout</title><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>WTF Layout</dc:title><cc:license rdf:resource="MIT License"/><dc:creator><cc:Agent><dc:title>L3D &lt;l3d@c3woc.de&gt;</dc:title></cc:Agent></dc:creator></cc:Work></rdf:RDF></metadata> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<g transform="translate(-979)"> <svg width="100%" height="100%" viewBox="0 0 96 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="translate(-158)"> <g transform="matrix(1,0,0,1,-979,0)">
<g id="blue-corner" transform="translate(-93 -106)" serif:id="blue corner"> <g transform="matrix(1,0,0,1,-251,-106)">
<path d="m1257.2 152-27.17 18v-18h27.17z" fill="#003380"/> <g id="blue-corner" serif:id="blue corner">
<path d="M1257.2,152L1230.03,170L1230.03,152L1257.2,152Z" style="fill:#2a7fff;"/>
</g> </g>
<path id="top-right-triangle" d="m1233 0v64h-96" fill="#2a7fff" serif:id="top right triangle"/> </g>
<g transform="matrix(1,0,0,1,979,0)">
<path d="M0,0L0,46L27.2,46L96,0L0,0Z" style="fill:#ebebeb;"/>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 869 B

BIN
assets/images/pixel_bg_lila.png (Stored with Git LFS) Normal file
View File

Binary file not shown.