Add media kit

src/css/base/header.css

@@ -67,6 +67,10 @@
 
     @media (--up_to_M) {
       margin-bottom: var(--space-s);
+
+      & #navItemMedia {
+        display: none;
+      }
     }
     @media (--up_to_L) {
       margin-top: var(--space-m);

src/css/main.css

@@ -10,4 +10,5 @@
 @import 'sections/home.css';
 @import 'sections/podcast.css';
 @import 'sections/team.css';
+@import 'sections/media.css';
 @import 'sections/soundboard.css';

src/css/sections/media.css

@@ -0,0 +1,61 @@
+#media {
+  & .logo {
+    display: inline-block;
+    margin: var(--space-m) 0 var(--space-xl);
+    max-width: 100%;
+
+    & img {
+      width: 100%;
+    }
+  }
+
+  & .logo-square {
+    width: 9em;
+  }
+
+  & .logo-horizontal {
+    width: 21em;
+  }
+
+  & .font {
+    display: block;
+    margin: var(--space-m) 0;
+    font-size: var(--font-size-l);
+    color: inherit;
+
+    &:last-of-type {
+      margin-bottom: var(--space-xxl);
+    }
+  }
+
+  & .colors {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    list-style: none;
+    color: #FFF;
+    font-weight: var(--font-weight-bold);
+
+    & li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 6em;
+      height: 6em;
+      border-radius: 50%;
+      margin: 0 1em 1em 0;
+    }
+
+    & .orange {
+      background: var(--color-accent);
+    }
+
+    & .derweg {
+      background: var(--color-derweg);
+    }
+
+    & .interview {
+      background: var(--color-interview);
+    }
+  }
+}

src/includes/template.pug

@@ -57,6 +57,7 @@ html(lang="en")
             a.navItem(href="/podcast/" class=(navCurrent === 'podcast' && 'current')) Podcast
             a.navItem(href="/soundboard/" class=(navCurrent === 'soundboard' && 'current')) Sounds
             a.navItem(href="/team/" class=(navCurrent === 'team' && 'current')) Team
+            a.navItem#navItemMedia(href="/media/" class=(navCurrent === 'media' && 'current')) Media
             //- a.navItem(href=site.meta.shopUrl target="_blank") Shop
           button(type="button").theme
             +sprite("theme")

src/media.pug

@@ -0,0 +1,33 @@
+extends /template.pug
+
+block vars
+  - const title = 'Media'
+  - const description = 'Damit wir mal groß und berühmt werden, kannst du dieses Media Kit gerne nutzen, um allen von uns zu erzählen.'
+
+block main
+  #media.wrap
+    section
+      h1= title
+
+      h2 Logo quadratisch
+
+      a.logo.logo-square(href=assetPath("/img/einundzwanzig-square.svg") target="_blank")
+        img(src=assetPath("/img/einundzwanzig-square.svg") alt="Logo quadratisch")
+
+      h2 Logo horizontal
+
+      a.logo.logo-horizontal(href=assetPath("/img/einundzwanzig-horizontal.svg") target="_blank")
+        img(src=assetPath("/img/einundzwanzig-horizontal.svg") alt="Logo horizontal")
+
+      h2 Schriften
+
+      a.font.font-bold(href="https://www.dafont.com/the-bold-font.font" target="_blank") Logo: The Bold Font
+
+      a.font.font-inconsolata(href="https://fonts.google.com/specimen/Inconsolata" target="_blank") Copy: Inconsolata
+
+      h2 Farben
+
+      ul.colors
+        li.orange #F7931A
+        li.derweg #00B4CF
+        li.interview #151515

tasks/generate_pages.js

@@ -24,6 +24,7 @@ const renderPage = (template, out, data = {}) => {
 renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0] })
 renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes] })
 renderPage('team', 'team', { navCurrent: 'team', team, crew })
+renderPage('media', 'media', { navCurrent: 'media' })
 renderPage('soundboard', 'soundboard', { navCurrent: 'soundboard', soundboard })
 
 renderPage('category', 'podcast/news', { navCurrent: 'podcast', category: 'news', categoryName: 'News', episodes: episodes.filter(e => e.category === 'news') })