einundzwanzig/einundzwanzig.space
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git synced 2025-12-13 16:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

🛠 Layout and content updates

Browse Source
This commit is contained in:
Dennis Reimann
2020-10-06 15:44:14 +02:00
parent 4e10a39a27
commit d217db5ad8
32 changed files with 484 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
content/meta.json
View File

@@ -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/"
}

4
content/team.json
View File

@@ -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"
},
{

21
src/category.pug
View File

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

27
src/css/base/elements.css
View File

@@ -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);
letter-spacing: -0.04em;
line-height: 1.05;
line-height: 1;
color: var(--color-secondary);
& 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;
}

17
src/css/base/fonts.css
View File

@@ -1,19 +1,16 @@
/* https://google-webfonts-helper.herokuapp.com/fonts/inconsolata?subsets=latin */
@font-face {
font-family: 'The Bold Font';
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-family: 'Inconsolata';
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');
}

16
src/css/base/footer.css
View File

@@ -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;
}
}

150
src/css/base/header.css
View File

@@ -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);
}
@nest body.topbar & {
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
}
@media (--up_to_L) {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
@nest body.topbar.topbar--appear & {
opacity: 1;
transition-property: opacity;
transition-duration: var(--transition-duration-fast);
@nest body.topbar & {
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
}
}
& a {
@@ -38,93 +41,94 @@
}
& .wrap {
@media (--L_and_up) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
}
& .brand {
display: inline-block;
margin-right: var(--space-xl);
flex-direction: column;
align-items: center;
}
& .logo {
display: block;
@media (--up_to_M) {
height: 27px;
width: 300px;
}
@media (--M_to_L) {
height: 45px;
width: 500px;
}
@media (--L_and_up) {
height: 63px;
width: 700px;
}
width: 100%;
height: var(--logo-height);
max-width: 840px;
max-height: 76px;
}
& .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 {
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 {
& nav {
display: flex;
align-items: center;
@media (--L_and_up) {
margin-left: auto;
& a {
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) {
height: calc(var(--font-size-l) - 0.2rem);
width: calc(var(--font-size-l) - 0.2rem);
}
@media (--L_and_up) {
height: calc(var(--font-size-xl) - 0.2rem);
width: calc(var(--font-size-xl) - 0.2rem);
& svg {
height: .8em;
width: .8em;
display: block;
}
}
& 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);
}
}
}

40
src/css/base/layout.css
View File

@@ -1,41 +1,31 @@
.wrap {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
@media (--up_to_M) {
padding-left: var(--space-l);
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);
}
padding-left: var(--wrap-padding-horizontal);
padding-right: var(--wrap-padding-horizontal);
max-width: calc(840px + var(--wrap-padding-horizontal) * 2);
}
.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 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
& .lead {
& section {
margin-bottom: var(--space-xxl);
}
}

19
src/css/base/variables.css
View File

@@ -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-head: var(--font-family-base);
--font-family-base: 'Inconsolata', monospace;
--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"] {

1
src/css/main.css
View File

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

33
src/css/sections/home.css Normal file
View File

@@ -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;
}
}
}

148
src/css/sections/podcast.css
View File

@@ -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;
min-width: 300px;
max-width: 480px;
@media (--up_to_M) {
flex-direction: column;
min-width: 300px;
max-width: 400px;
}
@media (--M_and_up) {
}
}
.player__cover{
display:block;
width:100%
.player__cover {
display: block;
@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{
.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:0 .5em;
opacity:.5;
.player__time {
display: flex;
justify-content: space-between;
padding: var(--space-m) var(--space-l);
color: var(--color-secondary);
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;
.player__controls {
display: flex;
align-items: center;
margin-top: var(--space-m);
padding: 0 var(--space-l);
padding: var(--space-m) var(--space-l) var(--space-l);
}
.player__button{
width:70px;
height:70px;
margin-right:var(--space-l);
background-size:cover;
background-repeat:no-repeat;
cursor:pointer
.player__button {
width: 70px;
height: 70px;
margin-right: var(--space-l);
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__info{
flex:1;
.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);
.player__album {
color: var(--color-secondary);
}

46
src/css/sections/team.css
View File

@@ -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);
overflow-wrap: anywhere;
margin-bottom: 0;
}
& .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;
height: 28px;
width: 28px;
display: block;
height: var(--font-size-l);
width: var(--font-size-l);
}
& a + a {

11
src/episode.pug
View File

@@ -1,10 +1,11 @@
extends /template.pug
block main
section#episode
h1= episode.titlePlain
#episode.wrap
section
h1= episode.titlePlain
+episodePlayer(episode)
+episodePlayer(episode)
.content
!=episode.content
.content
!=episode.content

8
src/includes/mixins.pug
View File

@@ -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")

45
src/includes/template.pug
View File

@@ -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/noto-sans-700.woff2"))
link(rel="apple-touch-icon" href=assetPath("/img/einundzwanzig-square.svg"))
link(rel="icon" href=assetPath("/img/einundzwanzig-square.svg"))
link(rel="preload" as="font" crossorigin href=assetPath("/fonts/inconsolata-400.woff2"))
link(rel="preload" as="font" crossorigin href=assetPath("/fonts/inconsolata-700.woff2"))
link(rel="apple-touch-icon" href=assetPath("/img/favicon/apple-touch-icon.png"))
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
a.navItem(href="/podcast" sclass=(navCurrent === 'podcast' && 'current')) Podcast
a.navItem(href="/team" class=(navCurrent === 'team' && 'current')) Team
.social
a.twitter(href="https://twitter.com/_einundzwanzig_" target="_blank" title="Twitter")
.nav
nav
a.navItem(href="/podcast/" class=(navCurrent === 'podcast' && 'current')) Podcast
a.navItem(href="/team/" class=(navCurrent === 'team' && 'current')) Team
.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
block main
footer#footer.footer
.wrap
p Craig Wright is a fraud.
script(src=assetPath("/js/amplitude.js") defer)
script(src=assetPath("/js/main.js") defer)
p
= "Folge uns auf "
a(href=site.meta.twitterUrl target="_blank") Twitter
= " und "
a(href=site.meta.telegramUrl target="_blank") komm in die Gruppe
|!
p
| Made with 💛 by
= " "
a(href="https://d11n.net" target="_blank") d11n.

51
src/index.pug
View File

@@ -1,8 +1,49 @@
extends /template.pug
block main
section
.lead.centered
:markdown-it(html linkify typographer)
- [Shoutouts](https://tallyco.in/s/zfxqtu/)
a.button(href="https://t.me/einundzwanzigpodcast") Komm in die Gruppe!
- 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
:markdown-it(html linkify typographer)
# Einundzwanzig, der Bitcoin Podcast
## 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

39
src/podcast.pug
View File

@@ -3,32 +3,33 @@ extends /template.pug
block main
- const current = episodes.shift()
section#podcast
.lead.centered
h1.centered Podcast
#podcast.wrap
section
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
h2.centered Kategorien
section
h2 Kategorien
ul.categories
li: a(href="/podcast/news") News
li: a(href="/podcast/interviews") Interviews
li: a(href="/podcast/lesestunde") Lesestunde
li: a(href="/podcast/der-weg") Der Weg
li: a(href="/podcast/verschiedenes") Verschiedenes
h2.centered Aktuelle Episode
.current
+episodePlayer(current).centered
li: a(href="/podcast/news/") News
li: a(href="/podcast/interviews/") Interviews
li: a(href="/podcast/lesestunde/") Lesestunde
li: a(href="/podcast/der-weg/") Der Weg
li: a(href="/podcast/verschiedenes/") Verschiedenes
section
h2 Aktuelle Episode
.current
+episodePlayer(current)
if episodes.length
h2.centered Weitere Episoden
.episodes
each e in episodes
+episodeItem(e)
section
h2 Weitere Episoden
.episodes
each e in episodes
+episodeItem(e)

38
src/team.pug
View File

@@ -1,21 +1,23 @@
extends /template.pug
block main
section#team
h1.centered Team
ul.members(data-shuffle)
each m in shuffle(team)
li.member
img(src=(assetPath(m.image)) alt=m.name loading="lazy")
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`)
+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`)
+sprite("github")
if m.url
a.plain(href=m.url target="_blank")
+sprite("url")
#team.wrap
section
h1 Team
ul.members(data-shuffle)
each m in shuffle(team)
li.member
img(src=assetPath(m.image) alt=m.name loading="lazy")
header
h2=m.name
.links
if m.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(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(href=m.url target="_blank")
+sprite("url")
!=renderMarkdown(m.text)

BIN
static/fonts/inconsolata-400.woff2 Normal file
View File

Binary file not shown.

BIN
static/fonts/inconsolata-700.woff2 Normal file
View File

Binary file not shown.

BIN
static/fonts/noto-sans-400.woff2
View File

Binary file not shown.

BIN
static/fonts/noto-sans-700.woff2
View File

Binary file not shown.

BIN
static/fonts/theboldfont.woff2
View File

Binary file not shown.

1
static/img/einundzwanzig-horizontal.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

2
static/img/einundzwanzig-square.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
static/img/favicon/favicon-16x16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 975 B

BIN
static/img/favicon/favicon-32x32.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

1
static/img/favicon/favicon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

5
static/img/sprite.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 20 KiB

55
static/js/main.js
View File

@@ -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) {
addTopbar()
} else {
removeTopbar()
}
const fn = Math.abs(y) > height ? 'add' : 'remove'
document.body.classList[fn]('topbar')
})
headerObserver.observe($headerAnchor)
headerObserver.observe(document.getElementById('header-anchor'))
}
// 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)
});
});
})

4
tasks/generate_pages.js
View File

@@ -19,9 +19,9 @@ const renderPage = (template, out, data = {}) => {
writeFileSync(dst, rendered)
}
renderPage('index', 'index', { navCurrent: 'index' })
renderPage('team', 'team', { navCurrent: 'team', team })
renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0] })
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') })