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

👆 Add subscribe button

Browse Source
This commit is contained in:
Dennis Reimann
2020-10-07 18:47:19 +02:00
parent e267773b0a
commit 153fddfaa0
10 changed files with 84 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -146,18 +146,53 @@ img:-moz-loading {
display: inline-block;
text-align: center;
padding: var(--space-m) var(--space-l);
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
color: #2a1801;
background-color: var(--color-accent);
text-decoration: none;
text-transform: uppercase;
border-radius: var(--space-m);
transition-property: color, background;
transition-duration: var(--transition-duration-fast);
&:hover {
@media not all and (hover: none) {
color: var(--color-neutral-0);
color: #2a1801;
background-color: var(--color-accent-highlight);
text-decoration: none;
}
}
}
.podlove-subscribe-button-iframe {
margin-top: var(--space-m);
border-radius: var(--space-m);
}
#podlove-subscribe-popup {
background-color: var(--color-overlay-bg) !important;
& #podlove-subscribe-popup-modal {
& * {
font-family: var(--font-family-base) !important;
font-weight: var(--font-weight-regular) !important;
}
& .top-bar,
& .podlove-logo,
& .device-cloud-switch,
& #podlove-subscribe-panel-podcast,
& #podlove-subscribe-panel-clients,
& #podlove-subscribe-panel-finish {
color: var(--color-body-text) !important;
background-color: var(--color-card-bg) !important;
transition-property: color, background-color;
transition-duration: var(--transition-duration-fast);
& li,
& .device-cloud-switch {
border-color: var(--color-body-bg) !important;
}
}
}
}

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

@@ -11,6 +11,7 @@
--color-neutral-90: #222;
--color-neutral-95: #1B1B1B;
--color-overlay-bg: rgba(200, 200, 200, .95);
--color-body-text: var(--color-neutral-90);
--color-body-bg: var(--color-neutral-0);
--color-card-bg: var(--color-neutral-10);
@@ -33,7 +34,7 @@
--font-family-base: 'Inconsolata', monospace;
--font-weight-normal: 400;
--font-weight-regular: 400;
--font-weight-bold: 700;
--font-size-base: 18px;
@@ -62,6 +63,7 @@
--color-body-text: var(--color-neutral-0);
--color-body-bg: var(--color-neutral-90);
--color-card-bg: var(--color-neutral-95);
--color-overlay-bg: rgba(0, 0, 0, .95);
}
@media (prefers-color-scheme: dark) {
@@ -69,5 +71,6 @@
--color-body-text: var(--color-neutral-0);
--color-body-bg: var(--color-neutral-90);
--color-card-bg: var(--color-neutral-95);
--color-overlay-bg: rgba(20, 20, 20, .95);
}
}

41
src/includes/mixins.pug
View File

@@ -43,16 +43,33 @@ mixin episodePlayer(e)
.player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")
script.
window.Einundzwanzig = {
amplitude: {
songs: [
{
"name": "#{e.titlePlain}",
"artist": "Einundzwanzig",
"album": "#{e.categoryName + (e.number ? ` #${e.number}` : '')}",
"url": "#{e.enclosure.url}",
"cover_art_url": "#{assetPath(e.image)}"
}
]
}
window.player = {
songs: [
{
"name": "#{e.titlePlain}",
"artist": "Einundzwanzig",
"album": "#{e.categoryName + (e.number ? ` #${e.number}` : '')}",
"url": "#{e.enclosure.url}",
"cover_art_url": "#{assetPath(e.image)}"
}
]
};
mixin subscribe()
script.
window.subscribe = {
title: "Einundzwanzig",
subtitle: "Der Bitcoin Podcast",
description: "#{site.meta.description}",
cover: "#{assetUrl(site.meta.cardImage)}",
feeds: [
{
type: "audio",
format: "mp3",
url: "#{site.meta.feedUrl}",
"directory-url-itunes": "#{site.meta.appleUrl}"
}
]
}
script(src="https://cdn.podlove.org/subscribe-button/javascripts/app.js" class="podlove-subscribe-button" data-language="de" data-size="big" data-json-data="subscribe" data-color=themeColor data-format="rectangle")
noscript: a.button(href=site.meta.feedUrl) Jetzt abonnieren

3
src/includes/template.pug
View File

@@ -7,7 +7,7 @@ block vars
- const pageKeywords = keywords || site.meta.keywords
- const pageCard = cardImage || site.meta.cardImage
- const pageCardSize = cardSize || 1400
- const themeColor = '#FFFFFF'
- const themeColor = site.meta.themeColor
<!DOCTYPE html>
html(lang="en")
@@ -31,7 +31,6 @@ html(lang="en")
meta(property="twitter:title" content=pageTitle)
meta(property="twitter:description" content=pageDescription)
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/inconsolata-400.woff2"))

5
src/index.pug
View File

@@ -20,6 +20,7 @@ block main
[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.
+subscribe()
section
h2 Aktuelle Episode
@@ -34,7 +35,7 @@ block main
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 target="_blank") Komm in die Gruppe!
a.button(href=site.meta.telegramUrl target="_blank") Ab in die Gruppe
section
:markdown-it(html linkify typographer)
@@ -45,4 +46,4 @@ block main
darüber abstimmen welches Bitcoin-Projekt aus Deutschland diese kostbaren Sats bekommen soll.
Wenn du also einen Shout-Out in unserem Podcast kaufst, unterstützt du damit auch ein Bitcoin Projekt.
a.button(href=site.meta.shoutoutUrl target="_blank") Sende uns einen Shout-Out
a.button(href=site.meta.shoutoutUrl target="_blank") Shout-Out senden

2
src/podcast.pug
View File

@@ -28,7 +28,7 @@ block main
= " und "
a(href=site.meta.anchorUrl) Anchor
= "."
a.button(href=site.meta.feedUrl) Jetzt abonnieren
+subscribe()
section
h2 Aktuelle Episode