From 84fe3bb850811c3e03a7776fc5b25b9f08e01beb Mon Sep 17 00:00:00 2001 From: Stephan Date: Mon, 1 Feb 2021 21:35:06 +0100 Subject: [PATCH] Layout auf aktuelle Version gehoben. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ist noch nicht so weit, wie das Layout von Hand (Members Button/Link, Sprachumschalter, keine Kacheln), aber das Grundlayout ist schon mal drin. Als sinnvoller Commit ist das hier auch zu groß, aber die einzelnen Schritte leben im Layout-Repo. Der Fokus hier wird die Integration in Lektor sein und das passiert dann wieder in überschaubaren Häppchen. --- assets/css/fonts.css | 80 +- assets/css/style.css | 787 +++++++++++++++--- .../lato-v17-latin/lato-v17-latin-100.eot | 3 - .../lato-v17-latin/lato-v17-latin-100.svg | 429 ---------- .../lato-v17-latin/lato-v17-latin-100.ttf | 3 - .../lato-v17-latin/lato-v17-latin-100.woff | 3 - .../lato-v17-latin/lato-v17-latin-100.woff2 | 3 - .../lato-v17-latin-100italic.eot | 3 - .../lato-v17-latin-100italic.svg | 442 ---------- .../lato-v17-latin-100italic.ttf | 3 - .../lato-v17-latin-100italic.woff | 3 - .../lato-v17-latin-100italic.woff2 | 3 - .../lato-v17-latin-700italic.eot | 3 - .../lato-v17-latin-700italic.svg | 451 ---------- .../lato-v17-latin-700italic.ttf | 3 - .../lato-v17-latin-700italic.woff | 3 - .../lato-v17-latin-700italic.woff2 | 3 - .../lato-v17-latin-900italic.eot | 3 - .../lato-v17-latin-900italic.svg | 447 ---------- .../lato-v17-latin-900italic.ttf | 3 - .../lato-v17-latin-900italic.woff | 3 - .../lato-v17-latin-900italic.woff2 | 3 - .../noto-serif-v9-latin-700.eot | 3 + .../noto-serif-v9-latin-700.svg | 492 +++++++++++ .../noto-serif-v9-latin-700.ttf | 3 + .../noto-serif-v9-latin-700.woff | 3 + .../noto-serif-v9-latin-700.woff2 | 3 + .../noto-serif-v9-latin-italic.eot | 3 + .../noto-serif-v9-latin-italic.svg | 386 +++++++++ .../noto-serif-v9-latin-italic.ttf | 3 + .../noto-serif-v9-latin-italic.woff | 3 + .../noto-serif-v9-latin-italic.woff2 | 3 + .../noto-serif-v9-latin-regular.eot | 3 + .../noto-serif-v9-latin-regular.svg | 489 +++++++++++ .../noto-serif-v9-latin-regular.ttf | 3 + .../noto-serif-v9-latin-regular.woff | 3 + .../noto-serif-v9-latin-regular.woff2 | 3 + assets/images/cake.svg | 7 + assets/images/header_bottom_triangles.svg | 16 + assets/images/header_top_triangles.svg | 14 + assets/images/logo.svg | 66 -- assets/images/white_unicorns.svg | 39 + assets/images/wtf_logo.svg | 96 +++ assets/js/nav_toggle.js | 4 +- templates/layout.html | 136 ++- templates/multisection.html | 6 +- 46 files changed, 2401 insertions(+), 2070 deletions(-) delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100.eot delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100.svg delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100.ttf delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100.woff delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100.woff2 delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100italic.eot delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100italic.svg delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100italic.ttf delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100italic.woff delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-100italic.woff2 delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-700italic.eot delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-700italic.svg delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-700italic.ttf delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-700italic.woff delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-700italic.woff2 delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-900italic.eot delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-900italic.svg delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-900italic.ttf delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-900italic.woff delete mode 100644 assets/fonts/lato-v17-latin/lato-v17-latin-900italic.woff2 create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.eot create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.svg create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.ttf create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-700.woff2 create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.eot create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.svg create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.ttf create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-italic.woff2 create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.eot create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.svg create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.ttf create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff create mode 100644 assets/fonts/noto-serif-v9-latin/noto-serif-v9-latin-regular.woff2 create mode 100644 assets/images/cake.svg create mode 100644 assets/images/header_bottom_triangles.svg create mode 100644 assets/images/header_top_triangles.svg delete mode 100644 assets/images/logo.svg create mode 100644 assets/images/white_unicorns.svg create mode 100644 assets/images/wtf_logo.svg 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 @@ - -
-
-

- - +
+
+ + -

+
+ + +
+ + +
+
+
+
+
+
+
+
+
+ +
+ +

+ Werde Teilchen­beschleu­nigerIn
+ in der chaosnahen Genossenschaft. +

+

+ Booste Projekte mit Unterstütung von 150 GenossInnen
+ Genossen­schaftlich & solidarisch. +

+
+
+
+

+ Genossenschaft zur Erschließung neuer
+ Betätigungs­formen in der Informations­technologie. +

+

+ Wir halten Mitglieder und Interessierte durch regelmäßige Rundmails, Beiträge im Wiki und unseren Podcast auf dem Laufenden.
+ Unseren Podcast findest du auf vebit.xyz/podcast. +

+
+ + +
@@ -86,7 +136,7 @@