🛠 Layout and content updates

content/meta.json

@@ -4,5 +4,7 @@
   "keywords": "Bitcoin,Podcast,Lightning Network",
   "themeColor": "#FFFFFF",
   "cardImage": "img/card.png",
-  "twitter": "_einundzwanzig_"
+  "twitterUrl": "https://twitter.com/_einundzwanzig_",
+  "telegramUrl": "https://t.me/einundzwanzigpodcast",
+  "shoutoutUrl": "https://tallyco.in/s/zfxqtu/"
 }

content/team.json

@@ -17,7 +17,7 @@
     "name": "Fab",
     "twitter": "fabthefoxx",
     "url": "http://fabthefox.com",
-    "text": "The Fox 🦊 verbreitet mit seinem Verlag Aprycot das Bitcoin-Wissen und ist der Wirt hinter der [Media-Theke](https://aprycot.media/thek/) 📙",
+    "text": "The Fox 🦊 verbreitet mit seinem Verlag Aprycot das Bitcoin-Wissen und ist der Wirt an der [Media-Theke](https://aprycot.media/thek/) 📙",
     "image": "/img/team/fab.jpg"
   },
   {
@@ -25,7 +25,7 @@
     "twitter": "dennisreimann",
     "github": "dennisreimann",
     "url": "https://d11n.net",
-    "text": "Mag Open Source und [BTCPay Server](https://btcpayserver.org/) 💚 und schreibt lieber Software als Texte über sich 👨🏻‍💻",
+    "text": "Mag Open Source und [BTCPay Server](https://btcpayserver.org/) 💚 und schreibt lieber Software als Texte über sich selbst 👨🏻‍💻",
     "image": "/img/team/dennis.png"
   },
   {

src/category.pug

@@ -3,15 +3,16 @@ extends /template.pug
 block main
   - const current = episodes.shift()
 
-  section#podcast
+  #podcast.wrap
-    h1.centered= categoryName
+    section
-
+      h1= categoryName
-    h2.centered Aktuelle Episode
+      h2 Aktuelle Episode
       .current
-      +episodePlayer(current).centered
+        +episodePlayer(current)
 
     if episodes.length
-      h2.centered Weitere Episoden
+      section
+        h2 Weitere Episoden
         .episodes
           each e in episodes
             +episodeItem(e)

src/css/base/elements.css

@@ -15,7 +15,7 @@
 
 html {
   height: 100%;
-  line-height: 1.5;
+  line-height: 1.45;
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   scroll-behavior: smooth;
@@ -29,6 +29,8 @@ body {
   height: 100%;
   color: var(--color-body-text);
   background-color: var(--color-body-bg);
+  transition-property: color, background;
+  transition-duration: var(--transition-duration-fast);
 }
 
 h1,
@@ -37,9 +39,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-family-head);
+  line-height: 1;
-  letter-spacing: -0.04em;
+  color: var(--color-secondary);
-  line-height: 1.05;
 
   & a {
     color: inherit;
@@ -114,10 +115,28 @@ ul {
   }
 }
 
+pre,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
 img:-moz-loading {
   visibility: hidden;
 }
 
+::-webkit-progress-value {
+  background-color: var(--color-accent);
+}
+
+::-ms-fill {
+  background-color: var(--color-accent);
+}
+
+::-moz-progress-bar {
+  background-color: var(--color-accent);
+}
+
 [aria-hidden="true"] {
   display: none;
 }

src/css/base/fonts.css

@@ -1,19 +1,16 @@
+/* https://google-webfonts-helper.herokuapp.com/fonts/inconsolata?subsets=latin */
 @font-face {
-  font-family: 'The Bold Font';
+  font-family: 'Inconsolata';
-  src: url('../fonts/theboldfont.woff2') format('woff2');
-}
-
-/* https://google-webfonts-helper.herokuapp.com/fonts/noto-sans?subsets=cyrillic,cyrillic-ext,latin */
-@font-face {
-  font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 400;
-  src: url('../fonts/noto-sans-400.woff2') format('woff2');
+  font-stretch: 100%;
+  src: url('../fonts/inconsolata-400.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'Noto Sans';
+  font-family: 'Inconsolata';
   font-style: normal;
   font-weight: 700;
-  src: url('../fonts/noto-sans-700.woff2') format('woff2');
+  font-stretch: 100%;
+  src: url('../fonts/inconsolata-700.woff2') format('woff2');
 }

src/css/base/footer.css

@@ -2,4 +2,20 @@
   text-align: center;
   font-size: var(--font-size-xs);
   color: var(--color-secondary);
+  background-color: var(--color-card-bg);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-fast);
+  padding: var(--space-m) 0;
+
+  & .wrap {
+    @media (--M_and_up) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+
+  & p {
+    margin-bottom: 0;
+  }
 }

src/css/base/header.css

@@ -1,29 +1,32 @@
 .header {
-  /* position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10; */
   color: var(--color-body-text);
   background-color: var(--color-body-bg);
+  transition-property: color, background-color, box-shadow;
+  transition-duration: var(--transition-duration-fast);
 
-  @media (--up_to_L) {
+  @media (--up_to_M) {
+    padding-top: var(--space-l);
+    padding-bottom: var(--space-m);
+  }
+  @media (--M_to_L) {
     padding-top: var(--space-l);
     padding-bottom: var(--space-l);
   }
   @media (--L_and_up) {
     padding-top: var(--space-xl);
-    padding-bottom: var(--space-xl);
+    padding-bottom: var(--space-l);
   }
 
+  @media (--up_to_L) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+
     @nest body.topbar & {
       box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
     }
-
-  @nest body.topbar.topbar--appear & {
-    opacity: 1;
-    transition-property: opacity;
-    transition-duration: var(--transition-duration-fast);
   }
 
   & a {
@@ -38,93 +41,94 @@
   }
 
   & .wrap {
-    @media (--L_and_up) {
+    flex-direction: column;
-      display: flex;
+    align-items: center;
-      flex-wrap: wrap;
-      align-items: flex-end;
-    }
-  }
-
-  & .brand {
-    display: inline-block;
-    margin-right: var(--space-xl);
   }
 
   & .logo {
     display: block;
-
+    width: 100%;
-    @media (--up_to_M) {
+    height: var(--logo-height);
-      height: 27px;
+    max-width: 840px;
-      width: 300px;
+    max-height: 76px;
-    }
-    @media (--M_to_L) {
-      height: 45px;
-      width: 500px;
-    }
-    @media (--L_and_up) {
-      height: 63px;
-      width: 700px;
-    }
   }
 
   & .nav {
-    position: relative;
-    top: 3px;
-    left: -1px;
     display: flex;
-    flex: 1;
+    align-self: flex-start;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 5.75%;
+    line-height: 1;
 
-    @media (--up_to_L) {
+    @media (--up_to_M) {
       margin-top: var(--space-m);
+      font-size: var(--font-size-l);
+    }
+    @media (--M_to_L) {
+      margin-top: var(--space-m);
+      font-size: var(--font-size-xl);
     }
     @media (--L_and_up) {
       margin-top: var(--space-l);
+      font-size: var(--font-size-xxl);
     }
 
-    & a {
+    & nav {
-      text-decoration: none;
-
-      &.navItem {
-        text-transform: uppercase;
-        letter-spacing: -0.04em;
-        font-weight: var(--font-weight-bold);
-        margin-right: var(--space-l);
-        line-height: 1;
-
-        @media (--up_to_L) {
-          font-size: var(--font-size-l);
-        }
-        @media (--L_and_up) {
-          font-size: var(--font-size-xl);
-        }
-      }
-    }
-
-    & .social {
       display: flex;
       align-items: center;
 
-      @media (--L_and_up) {
+      & a {
-        margin-left: auto;
+        text-transform: uppercase;
+        font-weight: var(--font-weight-bold);
+        cursor: pointer;
+
+        &.current {
+          color: var(--color-accent);
         }
+      }
+
+      & > a + a {
+        margin-left: var(--space-l);
+      }
+    }
+
+    & .more {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
 
       & a,
-      & svg {
+      & button{
         display: inline-block;
 
-        @media (--up_to_L) {
+        & svg {
-          height: calc(var(--font-size-l) - 0.2rem);
+          height: .8em;
-          width: calc(var(--font-size-l) - 0.2rem);
+          width: .8em;
-        }
+          display: block;
-        @media (--L_and_up) {
-          height: calc(var(--font-size-xl) - 0.2rem);
-          width: calc(var(--font-size-xl) - 0.2rem);
         }
       }
 
-      & a + a {
+      & > * + * {
         margin-left: var(--space-l);
       }
     }
   }
 }
+
+.theme {
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  border: 0;
+  outline: 0;
+
+  &:hover {
+    @media not all and (hover: none) {
+      color: var(--color-accent);
+    }
+  }
+}

src/css/base/layout.css

@@ -1,41 +1,31 @@
 .wrap {
-  max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
-
+  padding-left: var(--wrap-padding-horizontal);
-  @media (--up_to_M) {
+  padding-right: var(--wrap-padding-horizontal);
-    padding-left: var(--space-l);
+  max-width: calc(840px + var(--wrap-padding-horizontal) * 2);
-    padding-right: var(--space-l);
-  }
-  @media (--M_to_L) {
-    padding-left: var(--space-xl);
-    padding-right: var(--space-xl);
-  }
-  @media (--L_and_up) {
-    padding-left: var(--space-xxl);
-    padding-right: var(--space-xxl);
-  }
 }
 
 .main {
   flex: 1;
-  padding-top: var(--space-xxl);
   padding-bottom: var(--space-xxl);
 
-  & h1,
+  @media (--up_to_L) {
+    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.75);
+  }
+  @media (--L_and_up) {
+    padding-top: var(--space-xl);
+  }
+
+  & h1 {
+    display: none;
+  }
+
   & h2 {
     margin-bottom: var(--space-l);
-    color: var(--color-secondary);
-    max-width: 20em;
   }
 
-  & .centered {
+  & section {
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  & .lead {
     margin-bottom: var(--space-xxl);
   }
 }

src/css/base/variables.css

@@ -6,7 +6,7 @@
 
 :root {
   --color-neutral-0: #fff;
-  --color-neutral-10: #f6f6f6;
+  --color-neutral-10: #f9f9f9;
   --color-neutral-50: #888;
   --color-neutral-90: #222;
   --color-neutral-95: #1B1B1B;
@@ -24,15 +24,14 @@
   --space-s: .25rem;
   --space-m: .5rem;
   --space-l: 1rem;
-  --space-xl: 2rem;
+  --space-xl: 1.75rem;
   --space-xxl: 3rem;
 
   --transition-duration-fast: 0.25s;
   --transition-duration-medium: 0.75s;
   --transition-duration-slow: 1.5s;
 
-  --font-family-base: 'Noto Sans', sans-serif;
+  --font-family-base: 'Inconsolata', monospace;
-  --font-family-head: var(--font-family-base);
 
   --font-weight-normal: 400;
   --font-weight-bold: 700;
@@ -45,6 +44,18 @@
   --font-size-xl: 1.75rem;
   --font-size-xxl: 2.5rem;
   --font-size-xxxl: 4rem;
+
+  @media (--up_to_M) {
+    --wrap-padding-horizontal: var(--space-l);
+  }
+  @media (--M_to_L) {
+    --wrap-padding-horizontal: var(--space-xl);
+  }
+  @media (--L_and_up) {
+    --wrap-padding-horizontal: var(--space-xxl);
+  }
+
+  --logo-height: calc((100vw - var(--wrap-padding-horizontal) * 2) / 134 * 12);
 }
 
 :root[data-theme="dark"] {

src/css/main.css

@@ -7,5 +7,6 @@
 @import 'base/footer.css';
 
 /* Sections */
+@import 'sections/home.css';
 @import 'sections/podcast.css';
 @import 'sections/team.css';

src/css/sections/home.css

@@ -0,0 +1,33 @@
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+.ticker {
+  overflow: hidden;
+  background: var(--color-card-bg);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-fast);
+  margin: -15px 0 var(--space-xl);
+  padding: var(--space-m) 0;
+
+  & .inner {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    animation-name: marquee;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    font-size: var(--font-size-s);
+
+    @media (--up_to_M) {
+      animation-duration: 10s;
+    }
+    @media (--M_to_L) {
+      animation-duration: 20s;
+    }
+    @media (--L_and_up) {
+      animation-duration: 30s;
+    }
+  }
+}

src/css/sections/podcast.css

@@ -3,7 +3,7 @@
     display: inline-flex;
     flex-wrap: wrap;
     list-style: none;
-    margin: 0 0 var(--space-xxl) 0;
+    margin: 0;
 
     & li {
       margin: 0 var(--space-m) var(--space-m) 0;
@@ -13,7 +13,7 @@
       display: inline-block;
       text-align: center;
       padding: var(--space-s) var(--space-l);
-      color: var(--color-secondary);
+      color: var(--color-body-text);
       text-decoration: none;
       border-radius: var(--space-xl);
       border: 1px solid var(--color-secondary);
@@ -54,8 +54,10 @@
 
 .episodeItem {
   margin: 0;
-  background-color: var(--color-card-bg);
   border-radius: var(--space-l);
+  background-color: var(--color-card-bg);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-fast);
 
   @media (--up_to_M) {
     padding: var(--space-l);
@@ -66,6 +68,12 @@
 
   & a {
     display: flex;
+
+    &:hover .meta {
+      @media not all and (hover: none) {
+        color: inherit;
+      }
+    }
   }
 
   & .media {
@@ -91,8 +99,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    font-family: var(--font-family-head);
+    color: var(--color-secondary);
-    /* color: var(--color-secondary); */
   }
 
   & .content {
@@ -102,90 +109,105 @@
       margin-bottom: 0;
     }
   }
-
-  & h3 {
-    margin-top: var(--space-s);
-    font-family: var(--font-family-base);
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-m);
-    line-height: 1.2;
-  }
 }
 
 .player {
+  display: flex;
   border-radius: var(--space-m);
   overflow: hidden;
+
+  @media (--up_to_M) {
+    flex-direction: column;
     min-width: 300px;
-  max-width: 480px;
+    max-width: 400px;
+  }
+  @media (--M_and_up) {
+  }
 }
 
 .player__cover {
   display: block;
-  width:100%
+
+  @media (--up_to_M) {
+    width: 100%;
   }
+  @media (--M_and_up) {
+    width: 25%;
+  }
+}
+
 .player__bottom {
+  flex: 1;
   color: var(--color-body-text);
   background-color: var(--color-card-bg);
-  padding-bottom: var(--space-l);
+  transition-property: color, background-color;
+  transition-duration: var(--transition-duration-fast);
 }
+
 .player__progress {
   display: block;
-  background-color: rgba(255,255,255,.25);
+  background-color: var(--color-secondary);
   appearance:none;
   width: 100%;
   height: var(--space-m);
-  margin-bottom: var(--space-m);
   cursor:pointer;
   border:none
 }
-.player__progress[value] {
+
-    -webkit-appearance: none;
-}
-.player__progress::-webkit-progress-bar{
-  background-color: var(--color-secondary);
-}
-.player__progress::-moz-progress-bar,
-.player__progress::-webkit-progress-value {
-  background-color: var(--color-accent);
-}
 .player__time {
   display: flex;
   justify-content: space-between;
-  margin:.5em 0 .75em;
+  padding: var(--space-m) var(--space-l);
-  padding:0 .5em;
+  color: var(--color-secondary);
-  opacity:.5;
   font-size: var(--font-size-s);
 }
-.player__current-time{
+
-  margin-left:var(--space-m);
-}
-.player__duration{
-  margin-right:var(--space-m);
-}
 .player__controls {
   display: flex;
   align-items: center;
-  margin-top: var(--space-m);
+  padding: var(--space-m) var(--space-l) var(--space-l);
-  padding: 0 var(--space-l);
 }
+
 .player__button {
   width: 70px;
   height: 70px;
   margin-right: var(--space-l);
-  background-size:cover;
+  cursor: pointer;
-  background-repeat:no-repeat;
-  cursor:pointer
 }
-.player__button.amplitude-paused{
+
-  background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIHN0cm9rZT0iIzQyNDM1RiIgY3g9IjM2LjUiIGN5PSIzNi41IiByPSIzNi41Ii8+PHBhdGggZD0iTTQ3LjYzIDM1LjhMMjcuNjQgMjMuNDNjLTEuNDYtLjk2LTIuNjUtLjI2LTIuNjUgMS41NlY0OWMwIDEuODEgMS4xOSAyLjUyIDIuNjUgMS41Nkw0Ny42MyAzOC4ycy43LS41LjctMS4yLS43LTEuMi0uNy0xLjJ6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+)
+.player__button svg {
+  width: 100%;
+  height: 100%;
 }
-.player__button.amplitude-playing{
+
-  background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIHN0cm9rZT0iIzQyNDM1RiIgY3g9IjM2LjUiIGN5PSIzNi41IiByPSIzNi41Ii8+PHBhdGggZD0iTTMwLjUyIDIzSDI2LjJBMi4yIDIuMiAwIDAgMCAyNCAyNS4ydjIzLjZjMCAxLjIxLjk4IDIuMiAyLjIgMi4yaDQuMzJhMi4yIDIuMiAwIDAgMCAyLjE5LTIuMlYyNS4yYTIuMiAyLjIgMCAwIDAtMi4xOS0yLjJ6TTQ2LjkgMjNoLTQuMzJhMi4yIDIuMiAwIDAgMC0yLjE5IDIuMnYyMy42YzAgMS4yMS45OCAyLjIgMi4xOSAyLjJoNC4zM2EyLjIgMi4yIDAgMCAwIDIuMTktMi4yVjI1LjJjMC0xLjIxLS45OC0yLjItMi4yLTIuMnoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4=)
+.player__button__icon--play,
+.player__button__icon--pause {
+  display: none;
+  color: var(--color-secondary);
+
+  &:hover {
+    @media not all and (hover: none) {
+      color: var(--color-accent);
     }
+  }
+}
+
+.player__button.amplitude-paused .player__button__icon--pause,
+.player__button.amplitude-playing .player__button__icon--play {
+  display: block;
+}
+
 .player__info {
   flex: 1;
   text-align: left;
+
+  & a:hover .player__album {
+    @media not all and (hover: none) {
+      color: inherit;
     }
+  }
+}
+
 .player__album {
   color: var(--color-secondary);
 }

src/css/sections/team.css

@@ -8,20 +8,18 @@
     @media (--up_to_M) {
       grid-template-columns: 1fr;
     }
-    @media (--M_to_L) {
+    @media (--M_and_up) {
       grid-template-columns: 1fr 1fr;
     }
-    @media (--L_and_up) {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
   }
 
   & .member {
     margin: 0;
-    text-align: center;
-    background-color: var(--color-card-bg);
-    border-radius: var(--space-l);
     padding: var(--space-xl);
+    border-radius: var(--space-l);
+    background-color: var(--color-card-bg);
+    transition-property: background-color;
+    transition-duration: var(--transition-duration-fast);
 
     & img {
       display: inline-block;
@@ -30,23 +28,41 @@
       width: 100px;
     }
 
-    & h2 {
+    & header {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
       margin-top: var(--space-l);
-      margin-bottom: var(--space-m);
+    }
+
+    & h2 {
       font-size: var(--font-size-xl);
+      margin: 0 var(--space-l) var(--space-l) 0;
     }
 
     & p {
-      margin-bottom: var(--space-l);
+      margin-bottom: 0;
-      overflow-wrap: anywhere;
     }
 
     & .links {
-      & a,
+      display: flex;
+      margin-bottom: var(--space-l);
+
+      & a {
+        color: var(--color-secondary);
+
+        &:hover {
+          @media not all and (hover: none) {
+            color: var(--color-accent);
+          }
+        }
+      }
+
       & svg {
-        display: inline-block;
+        display: block;
-        height: 28px;
+        height: var(--font-size-l);
-        width: 28px;
+        width: var(--font-size-l);
       }
 
       & a + a {

src/episode.pug

@@ -1,7 +1,8 @@
 extends /template.pug
 
 block main
-  section#episode
+  #episode.wrap
+    section
       h1= episode.titlePlain
 
       +episodePlayer(episode)

src/includes/mixins.pug

@@ -4,14 +4,14 @@ mixin sprite(id)
 
 mixin episodeItem(e)
   article.episodeItem&attributes(attributes)
-    a.plain(href=`/podcast/${e.slug}`)
+    a.plain(href=`/podcast/${e.slug}/`)
       .media
         img(src=e.image alt=e.title loading="lazy")
       .content
         .meta
           span= e.categoryName + (e.number ? ` #${e.number}` : '')
           time(datetime=e.date)= e.block || formatDate(e.date)
-        h3=e.titlePlain
+        .title=e.titlePlain
 
 mixin episodePlayer(e)
   .player.player--single&attributes(attributes)
@@ -34,8 +34,10 @@ mixin episodePlayer(e)
 
       .player__controls
         .player__button.amplitude-play-pause(data-amplitude-main-play-pause="true" id="play-pause")
+          +sprite("pause").player__button__icon--pause
+          +sprite("play").player__button__icon--play
         .player__info
-          a.plain(href=`/podcast/${e.slug}`)
+          a.plain(href=`/podcast/${e.slug}/`)
             .player__album(data-amplitude-song-info="album" data-amplitude-main-song-info="true")
             .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")
 

src/includes/template.pug

@@ -31,37 +31,50 @@ html(lang="en")
     meta(property="twitter:image" content=assetUrl(pageCard))
     meta(name="msapplication-TileColor" content=themeColor)
     meta(name="theme-color" content=themeColor)
-    link(rel="preload" as="font" crossorigin href=assetPath("/fonts/noto-sans-400.woff2"))
+    link(rel="preload" as="font" crossorigin href=assetPath("/fonts/inconsolata-400.woff2"))
-    link(rel="preload" as="font" crossorigin href=assetPath("/fonts/noto-sans-700.woff2"))
+    link(rel="preload" as="font" crossorigin href=assetPath("/fonts/inconsolata-700.woff2"))
-    link(rel="apple-touch-icon" href=assetPath("/img/einundzwanzig-square.svg"))
+    link(rel="apple-touch-icon" href=assetPath("/img/favicon/apple-touch-icon.png"))
-    link(rel="icon" href=assetPath("/img/einundzwanzig-square.svg"))
+    link(rel="icon" href=assetPath("/img/favicon/favicon.svg"))
     link(rel="manifest" href="/site.webmanifest")
     link(rel="mask-icon" href=assetPath("/img/favicon/safari-pinned-tab.svg") color=themeColor)
     link(rel="stylesheet" href=assetPath("/css/main.css"))
+    script(src=assetPath("/js/amplitude.js") defer)
+    script(src=assetPath("/js/main.js"))
     title= pageTitle
+    noscript
+      style.
+        .theme { display: none; }
   body
     header.header#header
       .wrap
         a(href="/").brand
           +sprite("logo-horizontal").logo
-        nav.nav
+        .nav
-          a.navItem(href="/podcast" sclass=(navCurrent === 'podcast' && 'current')) Podcast
+          nav
-          a.navItem(href="/team" class=(navCurrent === 'team' && 'current')) Team
+            a.navItem(href="/podcast/" class=(navCurrent === 'podcast' && 'current')) Podcast
-          .social
+            a.navItem(href="/team/" class=(navCurrent === 'team' && 'current')) Team
-            a.twitter(href="https://twitter.com/_einundzwanzig_" target="_blank" title="Twitter")
+          .more
+            a.twitter(href=site.meta.twitterUrl target="_blank" title="Twitter")
               +sprite("twitter")
-            a.telegram(href="https://t.me/einundzwanzigpodcast" target="_blank" title="Telegram")
+            a.telegram(href=site.meta.telegramUrl target="_blank" title="Telegram")
               +sprite("telegram")
+            button(type="button").theme
+              +sprite("theme")
 
     #header-anchor
 
     main.main
-      .wrap
       block main
 
     footer#footer.footer
       .wrap
-        p Craig Wright is a fraud.
+        p
-
+          = "Folge uns auf "
-    script(src=assetPath("/js/amplitude.js") defer)
+          a(href=site.meta.twitterUrl target="_blank") Twitter
-    script(src=assetPath("/js/main.js") defer)
+          = " und "
+          a(href=site.meta.telegramUrl target="_blank") komm in die Gruppe
+          |!
+        p
+          | Made with 💛 by
+          = " "
+          a(href="https://d11n.net" target="_blank") d11n.

src/index.pug

@@ -1,8 +1,49 @@
 extends /template.pug
 
 block main
+  - const ticker = "Toximalistisches Infotainment für bullishe Bitcoiner +++ Sende uns einen Shout-Out: 50.000 Sats und du bist dabei +++ Alpenzitadelle läuft, wir spielen Hosp oder top! +++ Sei kein Holger, lass einen Vollknoten laufen! +++ Sei kein Vollknoten, komm in die Gruppe ! +++ Markus, ist bester Mann des Monats +++ "
+  .ticker
+    .inner
+      pre= ticker
+      pre= ticker
+      pre= ticker
+
+  .wrap
     section
-    .lead.centered
       :markdown-it(html linkify typographer)
-      - [Shoutouts](https://tallyco.in/s/zfxqtu/)
+        # Einundzwanzig, der Bitcoin Podcast
-    a.button(href="https://t.me/einundzwanzigpodcast") Komm in die Gruppe!
+
+        ## Toximalistisches Infotainment für bullishe Bitcoiner
+
+        [Bitcoin](https://bitcoin.org/bitcoin.pdf), und sonst nichts.
+        Einmal die Woche sitzen die Jungs zusammen und besprechen die aktuellen Geschehnisse in Bitcoin und der Welt.
+
+        [Wir](/team/) bringen dir die [News](/podcast/news/) der Woche, sowie zusätzlich [Interviews](/podcast/interviews/) und
+        die besten Artikel als [Lesestunde](/podcast/lesestunde/).
+        Außerdem erfährst du in [Der Weg](/podcast/der-weg/) wie andere Leute zu Bitcoin gekommen sind.
+
+    section
+      h2 Aktuelle Episode
+      .current
+        +episodePlayer(currentEpisode)
+
+    section
+      :markdown-it(html linkify typographer)
+        ## Komm in die Gruppe!
+
+        Mit unserer Telegram-Gruppe bieten wir dir ein Shitcoin-freies Refugium: Mit etwa 300 Gleichgesinnten
+        sprechen wir dort nicht über den Preis, Altcoins oder sonstige unwichtigen Dinge. In unserer Gruppe
+        findest du News, Informationen und bekommst praktische Ratschläge zu technischen Themen.
+
+      a.button(href=site.meta.telegramUrl) Komm in die Gruppe!
+
+    section
+      :markdown-it(html linkify typographer)
+        ## Sei laut, shout out!
+
+        Wenn du möchtest, dass wir im Podcast deinen "Shoutout" vorlesen, dann bist du mit 50.000 Sats dabei!
+        Wir sammeln alle Einnahmen bis die 1.000.000 Sats voll sind. Dann lassen wir in unserer Telegram-Gruppe
+        darüber abstimmen welches Bitcoin-Projekt aus Deutschland diese kostbaren Sats bekommen soll.
+        Wenn du also einen Shoutout in unserem Podcast kaufst, unterstützt du damit auch ein Bitcoin Projekt.
+
+      a.button(href=site.meta,shoutoutUrl) Sende uns einen Shout-Out

src/podcast.pug

@@ -3,32 +3,33 @@ extends /template.pug
 block main
   - const current = episodes.shift()
 
-  section#podcast
+  #podcast.wrap
-    .lead.centered
+    section
-      h1.centered Podcast
+      h1 Podcast
       :markdown-it(html linkify typographer)
         Du findest uns auf
         [Spotify](https://open.spotify.com/show/10408JFbE1n8MexfrBv33r),
         [Apple Podcasts](https://podcasts.apple.com/de/podcast/einundzwanzig-der-bitcoin-podcast/id1488229907),
         [Overcast](https://overcast.fm/itunes1488229907/einundzwanzig-der-bitcoin-podcast) und
         [Anchor](https://anchor.fm/einundzwanzig).
-      a.button(href="https://anchor.fm/s/d8d3c38/podcast/rss") Abonnieren / RSS
+      a.button(href="https://anchor.fm/s/d8d3c38/podcast/rss") Jetzt abonnieren
 
-    .centered
+    section
-      h2.centered Kategorien
+      h2 Kategorien
       ul.categories
-        li: a(href="/podcast/news") News
+        li: a(href="/podcast/news/") News
-        li: a(href="/podcast/interviews") Interviews
+        li: a(href="/podcast/interviews/") Interviews
-        li: a(href="/podcast/lesestunde") Lesestunde
+        li: a(href="/podcast/lesestunde/") Lesestunde
-        li: a(href="/podcast/der-weg") Der Weg
+        li: a(href="/podcast/der-weg/") Der Weg
-        li: a(href="/podcast/verschiedenes") Verschiedenes
+        li: a(href="/podcast/verschiedenes/") Verschiedenes
-
+    section
-    h2.centered Aktuelle Episode
+      h2 Aktuelle Episode
       .current
-      +episodePlayer(current).centered
+        +episodePlayer(current)
 
     if episodes.length
-      h2.centered Weitere Episoden
+      section
+        h2 Weitere Episoden
         .episodes
           each e in episodes
             +episodeItem(e)

src/team.pug

@@ -1,21 +1,23 @@
 extends /template.pug
 
 block main
-  section#team
+  #team.wrap
-    h1.centered Team
+    section
+      h1 Team
       ul.members(data-shuffle)
         each m in shuffle(team)
           li.member
-          img(src=(assetPath(m.image)) alt=m.name loading="lazy")
+            img(src=assetPath(m.image) alt=m.name loading="lazy")
+            header
               h2=m.name
-          !=renderMarkdown(m.text)
               .links
                 if m.twitter
-              a.plain(href=(m.twitter.startsWith('https://') ? m.twitter : `https://twitter.com/${m.twitter}`) target="_blank" title=`${m.name} on Twitter`)
+                  a(href=(m.twitter.startsWith('https://') ? m.twitter : `https://twitter.com/${m.twitter}`) target="_blank" title=`${m.name} on Twitter`)
                     +sprite("twitter")
                 if m.github
-              a.plain(href=(m.github.startsWith('https://') ? m.github : `https://github.com/${m.github}`) target="_blank" title=`${m.name} on GitHub`)
+                  a(href=(m.github.startsWith('https://') ? m.github : `https://github.com/${m.github}`) target="_blank" title=`${m.name} on GitHub`)
                     +sprite("github")
                 if m.url
-              a.plain(href=m.url target="_blank")
+                  a(href=m.url target="_blank")
                     +sprite("url")
+            !=renderMarkdown(m.text)

static/js/main.js

@@ -1,23 +1,24 @@
 const shuffle = arr => { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * i); const temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; }; return arr }
 
+// Theme Switch
+const COLOR_MODES = ["light", "dark"]
+const THEME_ATTR = "data-theme"
+const STORE_ATTR = "theme"
+const systemColorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? COLOR_MODES[1] : COLOR_MODES[0]
+const userColorMode = window.localStorage.getItem(STORE_ATTR)
+const initialColorMode = COLOR_MODES.includes(userColorMode) ? userColorMode : systemColorMode
+
+const setColorMode = mode => {
+  if (COLOR_MODES.includes(mode)) {
+    window.localStorage.setItem(STORE_ATTR, mode)
+    document.documentElement.setAttribute(THEME_ATTR, mode)
+  }
+}
+
+setColorMode(initialColorMode)
+
 document.addEventListener("DOMContentLoaded", () => {
-  const $body = document.body
-  const $headerAnchor = document.getElementById('header-anchor')
-
   // Topbar
-  const topbarClass = 'topbar'
-  const topbarAppearClass = 'topbar--appear'
-  const addTopbar = () => {
-    $body.classList.add(topbarClass)
-    window.setTimeout(() => {
-      $body.classList.add(topbarAppearClass)
-    }, 25)
-  }
-  const removeTopbar = () => {
-    $body.classList.remove(topbarClass)
-    $body.classList.remove(topbarAppearClass)
-  }
-
   if (
     "IntersectionObserver" in window &&
     "IntersectionObserverEntry" in window &&
@@ -25,14 +26,10 @@ document.addEventListener("DOMContentLoaded", () => {
   ) {
     const headerObserver = new IntersectionObserver(entries => {
       const { boundingClientRect: { y, height } } = entries[0]
-      if (Math.abs(y) > height) {
+      const fn = Math.abs(y) > height ? 'add' : 'remove'
-        addTopbar()
+      document.body.classList[fn]('topbar')
-      } else {
-        removeTopbar()
-      }
     })
-
+    headerObserver.observe(document.getElementById('header-anchor'))
-    headerObserver.observe($headerAnchor)
   }
 
   // List shuffling
@@ -44,7 +41,7 @@ document.addEventListener("DOMContentLoaded", () => {
   })
 
   // Player
-  if (window.Einundzwanzig.amplitude && window.Amplitude) {
+  if (window.Einundzwanzig && window.Einundzwanzig.amplitude && window.Amplitude) {
     window.Amplitude.init(window.Einundzwanzig.amplitude)
 
     document.querySelector('.player__progress').addEventListener('click', function (e) {
@@ -53,4 +50,14 @@ document.addEventListener("DOMContentLoaded", () => {
       window.Amplitude.setSongPlayedPercentage((parseFloat(x) / parseFloat(this.offsetWidth)) * 100)
     })
   }
+
+  // Theme Switch
+  document.querySelectorAll(".theme").forEach(function (link) {
+    link.addEventListener("click", function (e) {
+      e.preventDefault()
+      const current = document.documentElement.getAttribute(THEME_ATTR) || COLOR_MODES[0]
+      const mode = current === COLOR_MODES[0] ? COLOR_MODES[1] : COLOR_MODES[0]
+      setColorMode(mode)
+    });
+  });
 })

tasks/generate_pages.js

@@ -19,9 +19,9 @@ const renderPage = (template, out, data = {}) => {
   writeFileSync(dst, rendered)
 }
 
-renderPage('index', 'index', { navCurrent: 'index' })
+renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0] })
-renderPage('team', 'team', { navCurrent: 'team', team })
 renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes] })
+renderPage('team', 'team', { navCurrent: 'team', team })
 
 renderPage('category', 'podcast/news', { navCurrent: 'podcast', categoryName: 'News', episodes: episodes.filter(e => e.category === 'news') })
 renderPage('category', 'podcast/interviews', { navCurrent: 'podcast', categoryName: 'Interviews', episodes: episodes.filter(e => e.category === 'interview') })