diff --git a/content/meta.json b/content/meta.json index ada64037e09..928c26d4d15 100644 --- a/content/meta.json +++ b/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/" } diff --git a/content/team.json b/content/team.json index 636af96e6e9..0dd8e86ee7d 100644 --- a/content/team.json +++ b/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" }, { diff --git a/src/category.pug b/src/category.pug index e2c89030e06..eae8766dbe0 100644 --- a/src/category.pug +++ b/src/category.pug @@ -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) diff --git a/src/css/base/elements.css b/src/css/base/elements.css index 718fa29a041..266c1868541 100644 --- a/src/css/base/elements.css +++ b/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); - 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; } diff --git a/src/css/base/fonts.css b/src/css/base/fonts.css index 7e4abd33560..cbb4e9e8e29 100644 --- a/src/css/base/fonts.css +++ b/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'; - 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'); } diff --git a/src/css/base/footer.css b/src/css/base/footer.css index a713845cfb2..aec969a6d6e 100644 --- a/src/css/base/footer.css +++ b/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; + } } diff --git a/src/css/base/header.css b/src/css/base/header.css index 2413bd9519a..280f135e375 100644 --- a/src/css/base/header.css +++ b/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); } - @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); + } + } +} diff --git a/src/css/base/layout.css b/src/css/base/layout.css index c3c1b95c72e..0c4894abbe2 100644 --- a/src/css/base/layout.css +++ b/src/css/base/layout.css @@ -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); } } diff --git a/src/css/base/variables.css b/src/css/base/variables.css index c0a73decc09..1e05932f212 100644 --- a/src/css/base/variables.css +++ b/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-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"] { diff --git a/src/css/main.css b/src/css/main.css index 1c318c12732..b154d0aa0e6 100644 --- a/src/css/main.css +++ b/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'; diff --git a/src/css/sections/home.css b/src/css/sections/home.css new file mode 100644 index 00000000000..e871d0a4acb --- /dev/null +++ b/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; + } + } +} diff --git a/src/css/sections/podcast.css b/src/css/sections/podcast.css index b9755564f4a..de79f6386c6 100644 --- a/src/css/sections/podcast.css +++ b/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; - 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); } diff --git a/src/css/sections/team.css b/src/css/sections/team.css index 5e9ae3247dc..8ebb516b44a 100644 --- a/src/css/sections/team.css +++ b/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); - 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 { diff --git a/src/episode.pug b/src/episode.pug index 5464727866d..f8ffbf4852c 100644 --- a/src/episode.pug +++ b/src/episode.pug @@ -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 diff --git a/src/includes/mixins.pug b/src/includes/mixins.pug index 997c3dde937..bbfa9c9e275 100644 --- a/src/includes/mixins.pug +++ b/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") diff --git a/src/includes/template.pug b/src/includes/template.pug index 81847a71ec0..7768153569e 100644 --- a/src/includes/template.pug +++ b/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/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. diff --git a/src/index.pug b/src/index.pug index c137ecf9fa2..bcda607f9e0 100644 --- a/src/index.pug +++ b/src/index.pug @@ -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 diff --git a/src/podcast.pug b/src/podcast.pug index e825f674150..423af72674b 100644 --- a/src/podcast.pug +++ b/src/podcast.pug @@ -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) diff --git a/src/team.pug b/src/team.pug index 5b2ae524eb3..29a927087ad 100644 --- a/src/team.pug +++ b/src/team.pug @@ -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) diff --git a/static/fonts/inconsolata-400.woff2 b/static/fonts/inconsolata-400.woff2 new file mode 100644 index 00000000000..fc6dc70e6a1 Binary files /dev/null and b/static/fonts/inconsolata-400.woff2 differ diff --git a/static/fonts/inconsolata-700.woff2 b/static/fonts/inconsolata-700.woff2 new file mode 100644 index 00000000000..fc6dc70e6a1 Binary files /dev/null and b/static/fonts/inconsolata-700.woff2 differ diff --git a/static/fonts/noto-sans-400.woff2 b/static/fonts/noto-sans-400.woff2 deleted file mode 100644 index b97dce06f4f..00000000000 Binary files a/static/fonts/noto-sans-400.woff2 and /dev/null differ diff --git a/static/fonts/noto-sans-700.woff2 b/static/fonts/noto-sans-700.woff2 deleted file mode 100644 index 3bd0b602f4a..00000000000 Binary files a/static/fonts/noto-sans-700.woff2 and /dev/null differ diff --git a/static/fonts/theboldfont.woff2 b/static/fonts/theboldfont.woff2 deleted file mode 100644 index 0e8c9ff8c19..00000000000 Binary files a/static/fonts/theboldfont.woff2 and /dev/null differ diff --git a/static/img/einundzwanzig-horizontal.svg b/static/img/einundzwanzig-horizontal.svg deleted file mode 100644 index ac1bc7daba4..00000000000 --- a/static/img/einundzwanzig-horizontal.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/img/einundzwanzig-square.svg b/static/img/einundzwanzig-square.svg index 709a7750e31..8dd1beb234f 100644 --- a/static/img/einundzwanzig-square.svg +++ b/static/img/einundzwanzig-square.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/static/img/favicon/favicon-16x16.png b/static/img/favicon/favicon-16x16.png deleted file mode 100644 index b83dff5d732..00000000000 Binary files a/static/img/favicon/favicon-16x16.png and /dev/null differ diff --git a/static/img/favicon/favicon-32x32.png b/static/img/favicon/favicon-32x32.png deleted file mode 100644 index 1d1990c8fd0..00000000000 Binary files a/static/img/favicon/favicon-32x32.png and /dev/null differ diff --git a/static/img/favicon/favicon.svg b/static/img/favicon/favicon.svg new file mode 100644 index 00000000000..8dd1beb234f --- /dev/null +++ b/static/img/favicon/favicon.svg @@ -0,0 +1 @@ + diff --git a/static/img/sprite.svg b/static/img/sprite.svg index d1f543e4bd0..3c7c9892304 100644 --- a/static/img/sprite.svg +++ b/static/img/sprite.svg @@ -1,9 +1,12 @@ - + + + + diff --git a/static/js/main.js b/static/js/main.js index 4ecb6beb833..d4952dce05c 100644 --- a/static/js/main.js +++ b/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) { - 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) + }); + }); }) diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js index 38d5d5c0be3..8b0995efb4e 100644 --- a/tasks/generate_pages.js +++ b/tasks/generate_pages.js @@ -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') })