diff --git a/assets/css/fonts.css b/assets/css/fonts.css
index 22c2b68..efeb3c2 100644
--- a/assets/css/fonts.css
+++ b/assets/css/fonts.css
@@ -1,29 +1,3 @@
-/* lato-100 - latin */
-@font-face {
- font-family: 'Lato Thin';
- font-style: normal;
- font-weight: 100;
- src: url('../fonts/lato-v17-latin/lato-v17-latin-100.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/lato-v17-latin/lato-v17-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/lato-v17-latin/lato-v17-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/lato-v17-latin/lato-v17-latin-100.woff') format('woff'), /* Modern Browsers */
- url('../fonts/lato-v17-latin/lato-v17-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/lato-v17-latin/lato-v17-latin-100.svg#Lato') format('svg'); /* Legacy iOS */
-}
-/* lato-100italic - latin */
-@font-face {
- font-family: 'Lato Thin Italic';
- font-style: italic;
- font-weight: 100;
- src: url('../fonts/lato-v17-latin/lato-v17-latin-100italic.eot'); /* IE9 Compat Modes */
- src: local(''),
- url('../fonts/lato-v17-latin/lato-v17-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/lato-v17-latin/lato-v17-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/lato-v17-latin/lato-v17-latin-100italic.woff') format('woff'), /* Modern Browsers */
- url('../fonts/lato-v17-latin/lato-v17-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/lato-v17-latin/lato-v17-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
-}
/* lato-regular - latin */
@font-face {
font-family: 'Lato';
@@ -76,29 +50,43 @@
url('../fonts/lato-v17-latin/lato-v17-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v17-latin/lato-v17-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}
-/* lato-700italic - latin */
+
+/* noto-serif-regular - latin */
@font-face {
- font-family: 'Lato Bold Italic';
- font-style: italic;
- font-weight: 700;
- src: url('../fonts/lato-v17-latin/lato-v17-latin-700italic.eot'); /* IE9 Compat Modes */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
- url('../fonts/lato-v17-latin/lato-v17-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/lato-v17-latin/lato-v17-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/lato-v17-latin/lato-v17-latin-700italic.woff') format('woff'), /* Modern Browsers */
- url('../fonts/lato-v17-latin/lato-v17-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/lato-v17-latin/lato-v17-latin-700italic.svg#Lato') format('svg'); /* Legacy iOS */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}
-/* lato-900italic - latin */
+/* noto-serif-italic - latin */
@font-face {
- font-family: 'Lato Black Italic';
+ font-family: 'Noto Serif Italic';
font-style: italic;
- font-weight: 900;
- src: url('../fonts/lato-v17-latin/lato-v17-latin-900italic.eot'); /* IE9 Compat Modes */
+ font-weight: 400;
+ src: url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
- url('../fonts/lato-v17-latin/lato-v17-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/lato-v17-latin/lato-v17-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/lato-v17-latin/lato-v17-latin-900italic.woff') format('woff'), /* Modern Browsers */
- url('../fonts/lato-v17-latin/lato-v17-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/lato-v17-latin/lato-v17-latin-900italic.svg#Lato') format('svg'); /* Legacy iOS */
-}
\ No newline at end of file
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
+}
+/* noto-serif-700 - latin */
+@font-face {
+ font-family: 'Noto Serif Bold';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.eot'); /* IE9 Compat Modes */
+ src: local(''),
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.svg#NotoSerif') format('svg'); /* Legacy iOS */
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 693313d..c4cc6e6 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -14,46 +14,50 @@
*/
:root {
+ /* default text color */
+ --nearly-black: #333;
/* WTF Farben gemäß https://git.vebit.xyz/vebit/swag/src/branch/master/README.markdown */
--wtf-orange: #f60;
+ --wtf-light-orange: #ffcba9;
--wtf-light-blue: #2a7fff;
--wtf-dark-blue: #003380;
+ --wtf-night-blue: #00173B;
/* TODO: Grautöne üerarbeiten */;
--wtf-dark-grey: #202020;
--wtf-grey: #666;
--wtf-mid-grey: #acacac; /* Nicht im swag-Repo */
- --wtf-light-grey: #f2f2f2;
+ /*--wtf-light-grey: #f2f2f2;*/
+ --wtf-light-grey: #edefeb;
- --column-count: 4;
+ --column-count: 3;
}
body {
font-family: 'Lato', sans-serif;
font-weight: normal;
line-height: 1.4rem;
- color: #333;
+ color: var(--nearly-black);
+ background-color: var(--wtf-light-grey)
}
/* nav - Start */
-nav {
+.header__primary_nav {
width: 100%;
- background-color: var(--wtf-dark-grey);
+ grid-row: 1 / span 1;
+ grid-column: 1 / span 3;
+
display: flex;
flex-direction: row;
justify-content: flex-end;
}
-.nav__toggle {
+.primary_nav__toggle {
display: none;
height: 3.375rem;
margin-left: 1rem;
}
-.nav__toggle rect {
- fill: var(--wtf-light-grey);
-}
-
-.nav__toggle svg {
+.primary_nav__toggle svg {
margin: 0.25rem 0 0 0;
width: 2rem;
height: 2rem;
@@ -62,73 +66,91 @@ nav {
left: 0;
}
-.nav__toggle p {
- margin: 0;
+.primary_nav__toggle rect {
+ fill: var(--nearly-black);
+}
+
+.primary_nav__toggle p {
+ margin: 0.5rem 0 0 0;
padding: 0;
position: relative;
left: -0.2rem;
bottom: 0.65rem;
- color: var(--wtf-light-grey);
+ color: var(--nearly-black);
}
-.nav__navlist {
- background-color: var(--wtf-dark-grey);
+.primary_nav__navlist {
margin: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
-.nav__navitem {
- margin: 0 1.5rem;
- padding: 1rem 1rem 1rem 1.5rem;
+.primary_nav__navitem {
+ margin: 0 0.25rem;
+ padding: 0.25rem 0.25rem 0 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 1.25rem;
}
-.nav__navitem.-active {
- background-color: var(--wtf-grey);
+.primary_nav__navitem.-active .primary_nav__navlink {
+ color: var(--wtf-orange);
}
-.nav__navlink {
- color: var(--wtf-light-grey);
+.primary_nav__navitem.-last, .primary_nav__navitem.-last a {
+ margin-right: 0;
+ padding-right: 0;
}
-.nav__navlink:hover {
+.primary_nav__navlink {
+ color: var(--nearly-black);
+}
+
+.primary_nav__sub_navitem .primary_nav__navlink {
+ color: #fff;
+}
+
+.primary_nav__navlink:hover {
color: var(--wtf-mid-grey);
+ text-decoration: underline;
}
-.nav__sub_navlist {
+.primary_nav__sub_navlist {
display: none;
-
+ z-index: 20;
}
-.nav__navlist > li:hover > .nav__sub_navlist {
+.primary_nav__navlist > li:hover > .primary_nav__sub_navlist {
display: block;
- margin: 2.4rem 0 0 -0.5rem;
+ margin: 2.6rem 0 0 -0.5rem;
padding: 0;
position: absolute;
- background-color: var(--wtf-dark-grey);
+ background-color: var(--wtf-dark-blue);
+ border-left: 2px solid var(--wtf-mid-grey);
+ border-right: 2px solid var(--wtf-mid-grey);
+ border-bottom: 2px solid var(--wtf-mid-grey);
+ box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
/*
- * Gleicht zusammen mit padding von .nav__navitem die Verschiebung durch Sub-
+ * Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch Sub-
* menümarker aus.
*/
-.nav__navitem .nav__navlink {
+.primary_nav__navitem .primary_nav__navlink {
display: inline-block;
padding-right: 0.5rem;
}
/* Greift wenn Submenü vorhanden ist */
-.nav__navlist li a:first-child:nth-last-child(2) {
+.primary_nav__navlist li a:first-child:nth-last-child(2) {
padding-right: 0;
+ width: 110%;
}
/* Malt bei vorhandenem Submenü den Pfeil */
-.nav__navlist li a:first-child:nth-last-child(2):after {
+.primary_nav__navlist li a:first-child:nth-last-child(2):after {
content: "";
position: relative;
top: -0.125rem;
@@ -137,71 +159,284 @@ nav {
width: 5px;
display: inline-block;
transform: rotate(0.125turn);
- border-bottom: 3px solid var(--wtf-orange);
- border-right: 3px solid var(--wtf-orange);
+ border-bottom: 3px solid var(--nearly-black);
+ border-right: 3px solid var(--nearly-black);
}
-.nav__sub_navitem {
+.primary_nav__sub_navitem {
margin: 0;
padding: 0.5rem 0.5rem;
list-style: none;
text-align: left;
- background-color: var(--wtf-dark-grey);
- border-top: 1px solid var(--wtf-mid-grey);
+}
+
+.header__secondary_nav {
+ margin: 4.5rem 0.5rem 0 0;
+}
+
+.secondary_nav__navlist {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+
+.secondary_nav__navitem {
+ display: inline-block;
+ list-style: none;
+}
+
+.secondary_nav__navlink {
+ color: var(--nearly-black);
+}
+
+.secondary_nav__navlink:hover {
+ color: var(--wtf-mid-grey);
+ text-decoration: underline;
}
/* nav - Ende */
/* header - Start */
header {
+ background-color: var(--wtf-light-grey);
+ margin: 0 auto;
+ padding: 0;
+ max-width: 1200px;
+ display: flex;
+ flex-direction: column;
+}
+
+.header__top_box {
+ grid-row: 1 / span 1;
+ grid-column: 1 / span 5;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.header__logo_box {
+ grid-row: 1 / span 1;
+}
+
+.header__button {
+ height: 3rem;
+ margin: 1.5rem 1rem 0rem 0;
+ padding: 0.5rem 2.5rem 0.5rem 2.5rem;
+ background-color: var(--wtf-light-blue);
+ color: #fff;
+ font-size: 1.2rem;
+ border: solid #fff 3px;
+ border-radius: 2rem;
+}
+
+.header__bg_box {
+ margin-top: -0.75rem;
+ grid-row: 2 / span 1;
+ grid-column: 1 / span 5;
+
+ display: grid;
+ grid-template-rows: 46px 18px 15rem 8rem 55px 18px auto;
+ grid-template-columns: 15% 82px auto 96px 22.5%;
+ z-index: 0;
+}
+
+.bg_box__top_bar_left {
+ grid-row: 2 / span 1;
+ grid-column: 1 / span 3;
+ background-color: var(--wtf-dark-blue);
+ z-index: 5;
+}
+
+.bg_box__top_bar_middle {
+ grid-row: 1 / span 2;
+ grid-column: 4 / span 1;
+ background-image: url("../images/header_top_triangles.svg");
+ background-repeat: no-repeat;
+ z-index: 5;
+}
+
+.bg_box__top_bar_right {
+ grid-row: 1 / span 2;
+ grid-column: 5 / span 1;
+ background-color: var(--wtf-light-orange);
+ z-index: 5;
+}
+
+.bg_box__unicorns {
+ grid-row: 2 / span 6;
+ grid-column: 1 / span 5;
+ background-image: url("../images/white_unicorns.svg");
+ background-position: top 5% left 95% ;
+ background-size: auto 60%;
+ background-repeat: no-repeat;
+ z-index: 10;
+}
+
+.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;
+}
+
+.bg_box__bottom_bar_middle {
+ grid-row: 5 / span 2;
+ grid-column: 2 / span 1;
+ background-image: url("../images/header_bottom_triangles.svg");
+ background-repeat: no-repeat;
+ z-index: 5;
+}
+
+.bg_box__bottom_bar_right {
+ grid-row: 5 / span 2;
+ grid-column: 3 / span 3;
+ background-color: var(--wtf-dark-blue);
+ z-index: 5;
+}
+
+.bg_box__very_bottom_bar {
+ grid-row: 6 / span 1;
+ grid-column: 1 / span 2;
+ background-color: var(--wtf-dark-blue);
+ z-index: 5;
+}
+
+.header__claim {
+ margin: 2rem 0 0 2.5rem;
+ grid-row: 3 / span 1;
+ grid-column: 1 / span 5;
+ z-index: 15;
+}
+
+.header__claim h2 {
+ font-family: 'Noto Serif', serif;
+ font-weight: 700;
+ font-weight: normal;
+ font-size: 1.75rem;
+ line-height: 1.3em;
+ margin-top: 0.5em;
+}
+
+.header__claim h2 em {
+ color: var(--wtf-orange);
+}
+
+.header__claim h2 span {
+ display: inline-block;
+ background-color: #fff;
+ margin-top: 1px;
+ padding: 0 1rem;
+}
+
+.header__claim p, .header__sub_claim p {
+ font-family: 'Lato', sans-serif;
+ font-weight: normal;
+ line-height: 1.4rem;
+ font-size: 1.2rem;
+ line-height: 1.3em;
+ margin: 0.5em 0 0 1em;
+}
+
+.header__sub_claim {
+ grid-row: 4 / span 4;
+ grid-column: 3 / span 3;
+ /*margin: 0 2rem 1.5rem 1.5rem;*/
+ margin: 0 2rem 0 1.5rem;
+ padding: 0.5rem 1.5rem 0 1.5rem;
background-color: var(--wtf-orange);
- padding: 2.5% 5% 3% 5%;
+ z-index: 15;
display: flex;
- flex-direction: row;
- justify-content: center;
+ flex-direction: column;
+ background-color: transparent;
}
-.header__wrapper {
- display: flex;
- flex-direction: row;
- justify-content: center;
+.sub_claim__box {
+ padding: 0.5rem 1.5rem 1.5rem 1.5rem;
+ background-color: var(--wtf-orange);
}
-.header__headding {
- width: 80%;
+.sub_claim__button {
+ align-self: flex-end;
+ margin-top: -1.5rem;
+}
+
+.header__sub_claim h2 {
+ font-family: 'Noto Serif', serif;
+ font-weight: 700;
+ font-weight: normal;
+ font-size: 1.75rem;
+ line-height: 1.3em;
+}
+
+.header__sub_claim p {
+ color: #fff;
+ margin: 0.5em 0 0 0;
+}
+
+.header__sub_claim a {
+ color: #fff;
+ text-decoration: underline;
+}
+
+.header__sub_claim a:hover {
+ text-decoration: none;
}
/* header - Ende */
/* main - Start */
+main {
+ margin: 0.75rem 0 0 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+}
+
+h1 {
+ font-family: 'Noto Serif';
+ font-size: 3.5rem;
+ color: var(--wtf-orange);
+ margin: 1rem 0 2.5rem 0;
+ line-height: 1.2em;
+}
+
h2 {
- font-family: 'Lato Black';
+ font-family: 'Noto Serif';
font-size: 2rem;
line-height: 1.3em;
margin-top: 0.5em;
}
h3 {
- font-family: 'Lato Black';
+ font-family: 'Noto Serif';
font-size: 1.75rem;
line-height: 1.3em;
margin-top: 0.5em;
}
h4 {
- font-family: 'Lato Black';
+ font-family: 'Noto Serif';
font-size: 1.5rem;
line-height: 1.3em;
margin-top: 0.5em;
}
h5 {
- font-family: 'Lato Black';
+ font-family: 'Noto Serif';
font-size: 1.25rem;
line-height: 1.2em;
margin-top: 0.5em;
}
h6 {
- font-family: 'Lato Black';
+ font-family: 'Noto Serif';
font-size: 1rem;
line-height: 1.2em;
margin-top: 0.5em;
@@ -211,19 +446,19 @@ p {
margin-bottom: 0.5rem;
}
-.content__wrapper p, .content__wrapper li {
+.content__box p, .content__box li {
hyphens: auto;
}
-.content__wrapper a {
+.content__box a {
color: var(--wtf-orange);
}
-.content__wrapper a:hover {
+.content__box a:hover {
color: var(--wtf-light-blue);
}
-.content__wrapper a:visited {
+.content__box a:visited {
color: var(--wtf-dark-blue);
}
@@ -252,20 +487,30 @@ li {
}
.content {
- padding: 3% 5%;
+ padding: 1.5rem 0;
+ width: 100%;
display: flex;
- flex-direction: row;
+ flex-direction: column;
justify-content: center;
}
-.nav__wrapper, .header__wrapper, .content__wrapper, .footer__wrapper {
+.content__box {
+ margin: 0 auto;
+ padding: 0;
+}
+
+.content__inner_box {
+ margin: 0 1.5rem;
+}
+
+.nav__wrapper, .header__wrapper, .content__box, .footer__wrapper {
width: 100%;
- max-width: 2250px;
+ max-width: 1200px;
orphans: 3;
widows: 2;
}
-.content__wrapper.-columns {
+.content__box.-columns {
-webkit-column-count: var(--column-count);
-moz-column-count: var(--column-count);
column-count: var(--column-count);
@@ -277,9 +522,50 @@ li {
}
.content.-even {
- background-color: var(--wtf-dark-grey);
+ 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 */
@@ -291,16 +577,16 @@ footer {
justify-content: center;
}
-.footer__wrapper {
+.footer__wrapper, .footer__nav {
display: flex;
flex-direction: row;
justify-content: center;
+ flex-wrap: wrap;
}
.footer__navitem {
display: inline-block;
- margin: 0.2 1rem;
- padding: 0 1rem;
+ padding: 0.5rem 1rem;
}
.footer__navlink {
@@ -313,80 +599,391 @@ footer {
/* footer - Ende */
-@media screen and (max-width: 1440px) and (min-width: 1000px) {
- :root {
- --column-count: 3
+@media screen and (min-width: 1200px) {
+ .header__bg_box {
+ grid-template-columns: 15% 82px auto 96px 22.5%;
}
- .nav__navlist {
- display: flex;
- }
-
- .nav__toggle {
+ .primary_nav__members, .primary_nav__lang_switch {
display: none;
}
+
+ .primary_nav__toggle {
+ display: none;
+ }
+
+ .primary_nav__navlist {
+ display: flex !important;
+ }
}
-@media screen and (max-width: 999px) and (min-width: 605px) {
+@media screen and (min-width: 1100px) and (max-width: 1200px) {
+ .header__top_box .header__button {
+ display: auto;
+ }
+
+ .header__bg_box {
+ grid-template-columns: 15% 82px auto 96px 22.5%;
+ }
+
+ .primary_nav__members, .primary_nav__lang_switch {
+ display: none;
+ }
+
+ .primary_nav__toggle {
+ display: none;
+ }
+
+ .primary_nav__navlist {
+ display: flex !important;
+ }
+}
+
+@media screen and (max-width: 1099px) and (min-width: 910px) {
+ .header__bg_box {
+ grid-template-columns: 5% 82px auto 96px 22.5%;
+ }
+
+ .header__sub_claim {
+ margin-left: 0.5rem;
+ }
+
+ .header__top_box .header__button {
+ display: auto;
+ }
+
+ .primary_nav__members, .primary_nav__lang_switch {
+ display: none;
+ }
+
+ .primary_nav__toggle {
+ display: none;
+ }
+
+ .primary_nav__navlist {
+ display: flex !important;
+ }
+
+ .secondary_nav__navlist {
+ margin-right: 0.5rem;
+ }
+}
+
+@media screen and (max-width: 1044px) and (min-width: 960px) {
+ .header__bg_box {
+ grid-template-columns: 15% 82px auto 96px 22.5%;
+ }
+
+ .bg_box__unicorns {
+ background-image: url("../images/white_unicorns.svg");
+ background-size: auto 150%;
+ background-position: top -100px right -800px ;
+ }
+
+ .header__top_box .header__button {
+ display: auto;
+ }
+
+ .primary_nav__members, .primary_nav__lang_switch {
+ display: none;
+ }
+
+ .primary_nav__toggle {
+ display: none;
+ }
+
+ .primary_nav__navlist {
+ display: flex !important;
+ }
+
+ .secondary_nav__navlist {
+ margin-right: 0.5rem;
+ }
+}
+
+@media screen and (max-width: 959px) and (min-width: 790px) {
+ .header__bg_box {
+ grid-template-columns: 15% 82px auto 96px 22.5%;
+ }
+
+ .bg_box__unicorns {
+ background-image: url("../images/white_unicorns.svg");
+ background-size: auto 150%;
+ background-position: top -100px right -800px;
+ }
+
+ .header__claim {
+ margin: 2rem 0 0 1.5rem;
+ grid-row: 3 / span 1;
+ grid-column: 1 / span 5;
+ }
+
+ .header__sub_claim {
+ grid-column: 1 / span 5;
+ padding: 0;
+ margin: 0 1.5rem;
+ }
+
+ main {
+ margin-top: 0.75rem;
+ }
+
+ .header__top_box .header__button {
+ display: auto;
+ }
+
+ .primary_nav__members, .primary_nav__lang_switch {
+ display: none;
+ }
+
+ .primary_nav__toggle {
+ display: none;
+ }
+
+ .primary_nav__navlist {
+ display: flex !important;
+ }
+
+ .secondary_nav__navlist {
+ margin-right: 0.5rem;
+ }
+}
+
+@media screen and (max-width: 850px) and (min-width: 790px) {
:root {
--column-count: 2
}
- .nav__navlist {
- display: flex;
+ .header__bg_box {
+ grid-template-columns: 15% 82px auto 96px auto;
}
- .nav__toggle {
+ .bg_box__unicorns {
display: none;
}
+
+ .header__top_box .header__button {
+ display: auto;
+ }
+
+ .primary_nav__members, .primary_nav__lang_switch {
+ display: none;
+ }
+
+ .primary_nav__toggle {
+ display: none;
+ }
+
+ .primary_nav__navlist {
+ display: flex !important;
+ }
+
+ .secondary_nav__navlist {
+ margin-right: 0.5rem;
+ }
}
-@media screen and (max-width: 604px) {
+@media screen and (max-width: 789px) and (min-width: 596px) {
+ :root {
+ --column-count: 2
+ }
+
+ header, .header__bg_box {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ main {
+ margin: 0;
+ }
+
+ .kachel {
+ width: auto
+ }
+
+ .bg_box__top_bar_left,
+ .bg_box__top_bar_middle,
+ .bg_box__top_bar_right,
+ .bg_box__unicorns,
+ .bg_box__big_bg,
+ .bg_box__bottom_bar_left,
+ .bg_box__bottom_bar_middle,
+ .bg_box__bottom_bar_right,
+ .bg_box__very_bottom_bar {
+ display: none;
+ }
+
+ .header__claim {
+ margin: 1.5rem;
+ grid-row: 3 / span 1;
+ grid-column: 1 / span 5;
+ }
+
+ .header__sub_claim {
+ grid-column: 1 / span 5;
+ padding: 0;
+ margin: 0 1.5rem 0 1.5rem;
+ }
+
+ .sub_claim__box {
+ padding-bottom: 2.5rem;
+ }
+
+ .header__top_box .header__button {
+ display: auto;
+ }
+
+ .secondary_nav__navlist {
+ margin-right: 1rem;
+ }
+
+ .primary_nav__navlist {
+ margin-right: 1.5rem;
+ }
+
+ .primary_nav__members, .primary_nav__lang_switch {
+ display: none;
+ }
+
+ .primary_nav__toggle {
+ display: none;
+ }
+
+ .primary_nav__navlist {
+ display: flex !important;
+ }
+}
+
+@media screen and (max-width: 595px) {
:root {
--column-count: 1
}
- /* mobile nav - Start */
- nav {
- justify-content: flex-start;
+ .header__secondary_nav {
+ display: none;
}
- .nav__toggle {
+ .primary_nav__members, .primary_nav__lang_switch {
display: block;
}
- .nav__navlist {
- display: none;
- position: absolute;
- top: 3.4rem;
- left: 0;
+ header, .header__bg_box {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
- .nav__navitem {
+ .header__claim {
+ margin: 0 0.5rem 0.5rem 0.5rem;
+ grid-row: 3 / span 1;
+ grid-column: 1 / span 5;
+ }
+
+ .header__sub_claim {
+ grid-column: 1 / span 5;
+ padding: 0;
+ margin: 0 0.5rem 0.5rem 0.5rem;
+ }
+
+ .header__claim h2, .header__sub_claim h2 {
+ font-size: 2rem;
+ }
+
+ main {
+ margin-top: 0.75rem;
+ }
+
+ .kachel {
+ width: auto
+ }
+
+ .bg_box__top_bar_left,
+ .bg_box__top_bar_middle,
+ .bg_box__top_bar_right,
+ .bg_box__unicorns,
+ .bg_box__big_bg,
+ .bg_box__bottom_bar_left,
+ .bg_box__bottom_bar_middle,
+ .bg_box__bottom_bar_right,
+ .bg_box__very_bottom_bar {
+ display: none;
+ }
+
+ main {
+ margin-top: 0;
+ }
+
+ .sub_claim__box {
+ padding-bottom: 2.5rem;
+ }
+
+ /* mobile nav - Start */
+ .header__primary_nav {
+ position: absolute;
+ left: 0;
+ top: 0;
+ justify-content: flex-end;
+ }
+
+ .primary_nav__toggle {
+ display: block;
+ margin: 2.25rem 1rem 0 0;
+ }
+
+ .primary_nav__navlist {
+ display: none;
+ position: absolute;
+ top: 6.5rem;
+ right: 0;
+ z-index: 30;
+ border-top: 2px solid var(--nearly-black);
+ border-left: 2px solid var(--nearly-black);
+ border-bottom: 2px solid var(--nearly-black);
+ background-color: var(--wtf-light-grey);
+ box-shadow: 5px 0px 15px 5px rgba(0, 0, 0, 0.25);
+ }
+
+ .primary_nav__navitem {
margin: 0;
padding: 1rem 1rem 1rem 1.5rem;
display: block;
}
- .nav__sub_navlist {
+ .primary_nav__sub_navlist {
display: block;
+ background-color: transparent;
+ border: none;
+ box-shadow: none;
+ margin: 0 0 0 1rem;
}
- .nav__navlist > li:hover > .nav__sub_navlist {
- margin: 0 0 0 2rem;
+ .primary_nav__navlist > li:hover > .primary_nav__sub_navlist {
+ margin: 0 0 0 1rem;
position: static;
+ background-color: transparent;
+ border: none;
+ box-shadow: none;
}
- .nav__sub_navitem {
+ .primary_nav__sub_navitem {
margin: 0;
padding: 0.5rem 0.5rem;
list-style: none;
text-align: left;
- background-color: var(--wtf-dark-grey);
border-top: 1px solid var(--wtf-mid-grey);
}
- .nav__sub_navitem {
+
+ .primary_nav__sub_navitem {
border-top: none;
}
+
+ .primary_nav__sub_navitem .primary_nav__navlink {
+ color: var(--nearly-black)
+ }
+
+ .primary_nav__navlink:hover {
+ color: var(--wtf-light-grey);
+ }
/* mobile nav - Ende */
-}
\ No newline at end of file
+}
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100.eot b/assets/fonts/lato-v17-latin/lato-v17-latin-100.eot
deleted file mode 100644
index 3024d2d..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100.eot
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6e799e65e6816bf3f13f64ce9b668251b095d6de96c053c3b8f7662dd5af5c53
-size 21926
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100.svg b/assets/fonts/lato-v17-latin/lato-v17-latin-100.svg
deleted file mode 100644
index 1e66cd8..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100.svg
+++ /dev/null
@@ -1,429 +0,0 @@
-
-
-
-
-
-
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100.ttf b/assets/fonts/lato-v17-latin/lato-v17-latin-100.ttf
deleted file mode 100644
index 4b988c4..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a60f20b4791295b4689b62929a720f495f08ae2b389bd804e53af7b2391ca150
-size 56088
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100.woff b/assets/fonts/lato-v17-latin/lato-v17-latin-100.woff
deleted file mode 100644
index bcc78c4..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100.woff
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d1a65395b03789fda2e68d482198ac05508b7bc6686bef0444184615b46c42a4
-size 27044
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100.woff2 b/assets/fonts/lato-v17-latin/lato-v17-latin-100.woff2
deleted file mode 100644
index 7870358..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100.woff2
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6d971119a046fb86eeec343e50c680c36a72eb2df85521c8f343dc9678924398
-size 21580
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.eot b/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.eot
deleted file mode 100644
index f37647e..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.eot
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5d253effd156dfc65cd534a6d2d91aa998dfd45d661e513b5d787748736e10ba
-size 18889
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.svg b/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.svg
deleted file mode 100644
index d7646d3..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.svg
+++ /dev/null
@@ -1,442 +0,0 @@
-
-
-
-
-
-
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.ttf b/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.ttf
deleted file mode 100644
index 0635c7b..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4361990d0a17be2b81f1ff7c47ebc337673ce24a38765d66b4f43f63d949d2e7
-size 39216
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.woff b/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.woff
deleted file mode 100644
index ec7f99e..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.woff
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:854ca2acb24af4c07d9ba8cb991e60f8755f41509f79cac32b5dde9f8589dca5
-size 21920
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.woff2 b/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.woff2
deleted file mode 100644
index 5d91b34..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-100italic.woff2
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8d10280e8071d96d42984b8a0fe9eb713babef562cfe8e31bc28fbf65c46e126
-size 17024
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.eot b/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.eot
deleted file mode 100644
index 0a6627c..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.eot
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8e2a8996f63285dbaab5fb0936a3b08024e1f3fb8b152f3dc911d35065e6d924
-size 27882
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.svg b/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.svg
deleted file mode 100644
index 3e9d440..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.svg
+++ /dev/null
@@ -1,451 +0,0 @@
-
-
-
-
-
-
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.ttf b/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.ttf
deleted file mode 100644
index 165afb8..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d0bda0406cdccdcab5012e0440daff29e9a1e951cce29fb5a2aadf43faabadce
-size 62308
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.woff b/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.woff
deleted file mode 100644
index 74e95ac..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.woff
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3a5216aaa260e9f02e159f85714ccd7cd38c444876faf5383e231b405e2a61b3
-size 29920
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.woff2 b/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.woff2
deleted file mode 100644
index 74b6f32..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-700italic.woff2
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8ad012803e63980f185a7ee45c983ff2ab99b7751fc8f817f86420d620f244d9
-size 24428
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.eot b/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.eot
deleted file mode 100644
index 11ce7e2..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.eot
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1d16c6030ee64f446c10485cf4bf0ef719a18e4cf255b1919783fef5d8717f00
-size 26786
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.svg b/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.svg
deleted file mode 100644
index 9ed6901..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.svg
+++ /dev/null
@@ -1,447 +0,0 @@
-
-
-
-
-
-
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.ttf b/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.ttf
deleted file mode 100644
index fefe9c9..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:09be32a67d8298876441f4c1a9b31e86c35ee38356a398b4a37e28a211a29071
-size 57600
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.woff b/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.woff
deleted file mode 100644
index 048a468..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.woff
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7109ac378ee8e26dc7cd27c604252b6ebd8bf7b15d8703c3b2352f49aae245b5
-size 28952
diff --git a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.woff2 b/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.woff2
deleted file mode 100644
index 12f948e..0000000
--- a/assets/fonts/lato-v17-latin/lato-v17-latin-900italic.woff2
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ad68b1eebdd10516b4cd884ca26e3f2f6086efc2a025badffb5f08e7fb110807
-size 23696
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.eot b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.eot
new file mode 100644
index 0000000..c0df652
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.eot
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c6effcad3f7488cfd759ae40caa3c6d7f7d7fa90177a75240fd6fa4bd8d1007e
+size 27859
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.svg b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.svg
new file mode 100644
index 0000000..158cae7
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.svg
@@ -0,0 +1,492 @@
+
+
+
+
+
+
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.ttf b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.ttf
new file mode 100644
index 0000000..854cd70
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:56dcd0e1cf7b612715a8f4b1d48c26b127e5a69dddeaffb221147f3a3aa4082f
+size 48776
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff
new file mode 100644
index 0000000..c2740c4
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fb9708cb49ef33103f8c5eebc6170b566bfd3d1dd34dd8b0952340b889a6fb08
+size 31448
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff2 b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff2
new file mode 100644
index 0000000..652577c
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:feaad76415c6eb7fb707e31a7f0bd3da9f47a60a5c6d34cd00e2ebf0bbb6766c
+size 27344
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.eot b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.eot
new file mode 100644
index 0000000..1799d48
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.eot
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b96a9f0bade7001be567592abdf430dcec2b7c8b2fd419ffa5cc009413b9d369
+size 22774
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.svg b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.svg
new file mode 100644
index 0000000..dda09de
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.svg
@@ -0,0 +1,386 @@
+
+
+
+
+
+
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.ttf b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.ttf
new file mode 100644
index 0000000..e5ef3ab
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:55591c925ec3bc6db5efbcd8cd2d62dc79f3607765d91c2e95bef400fd13b115
+size 40052
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff
new file mode 100644
index 0000000..2319622
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d70c8a917ef93366a8abbdb8f8956855c25cdf44040ea6239188ab7ac18d25fc
+size 26232
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff2 b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff2
new file mode 100644
index 0000000..d26a95d
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:13cee72395d5b35b1f2349646c5d5457edacc58068a42f4dfd4f903a78d47470
+size 21848
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.eot b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.eot
new file mode 100644
index 0000000..856de7e
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.eot
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:61f01f3b3c55970abdd586fe6109ee9ad2ce1df530cc92f6af180db26a2df453
+size 24968
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.svg b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.svg
new file mode 100644
index 0000000..92096d5
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.svg
@@ -0,0 +1,489 @@
+
+
+
+
+
+
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.ttf b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.ttf
new file mode 100644
index 0000000..8090a98
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:00514cd62053474551340275911a59e4946bbe94c00f247ee7fe522a92e4c777
+size 43600
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff
new file mode 100644
index 0000000..b1ea425
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d399584aa6fd33b0a36fa34d0ee39c22d5080d30c8aceb2b5c4051c707a33873
+size 27712
diff --git a/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff2 b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff2
new file mode 100644
index 0000000..5cfd17a
--- /dev/null
+++ b/assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eced2a68da9eed95cc9c956e26607f9a6176500fd01cc1e41410b562b290e3ba
+size 23924
diff --git a/assets/images/cake.svg b/assets/images/cake.svg
new file mode 100644
index 0000000..b593bc1
--- /dev/null
+++ b/assets/images/cake.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
diff --git a/assets/images/header_bottom_triangles.svg b/assets/images/header_bottom_triangles.svg
new file mode 100644
index 0000000..d68d556
--- /dev/null
+++ b/assets/images/header_bottom_triangles.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/header_top_triangles.svg b/assets/images/header_top_triangles.svg
new file mode 100644
index 0000000..dc4677a
--- /dev/null
+++ b/assets/images/header_top_triangles.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/logo.svg b/assets/images/logo.svg
deleted file mode 100644
index b41f192..0000000
--- a/assets/images/logo.svg
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/assets/images/white_unicorns.svg b/assets/images/white_unicorns.svg
new file mode 100644
index 0000000..5c4665a
--- /dev/null
+++ b/assets/images/white_unicorns.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/wtf_logo.svg b/assets/images/wtf_logo.svg
new file mode 100644
index 0000000..1293245
--- /dev/null
+++ b/assets/images/wtf_logo.svg
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/js/nav_toggle.js b/assets/js/nav_toggle.js
index 29eef01..fb69f2b 100644
--- a/assets/js/nav_toggle.js
+++ b/assets/js/nav_toggle.js
@@ -1,5 +1,5 @@
-document.getElementsByClassName('nav__toggle')[0].addEventListener('click', function(){
- var nav_list = document.getElementsByClassName('nav__navlist')[0]
+document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('click', function(){
+ var nav_list = document.getElementsByClassName('primary_nav__navlist')[0]
if (nav_list.style.display === 'block') {
nav_list.style.display = 'none';
} else {
diff --git a/templates/layout.html b/templates/layout.html
index a5d4173..e6752a9 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -31,50 +31,100 @@
-
-
-
- {% for title, mapping in bag("navigation").items() %}
-
-
- {{ title }}
-
- {% if mapping.list_childs %}
-
- {% set sub_menu = mapping['items'].items() %}
- {% for sub_title, href in sub_menu %}
-
-
- {{ sub_title }}
-
-
- {% endfor %}
-
- {% endif %}
-
- {% endfor %}
-
-
-
+
+
+
+ 
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+