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

🛠 Podcast and Team pages

Browse Source
This commit is contained in:
Dennis Reimann
2020-10-05 14:51:06 +02:00
parent b2ed9bfb76
commit 7507cd5249
19 changed files with 261 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,46 +38,55 @@ h4,
h5,
h6 {
font-family: var(--font-family-head);
letter-spacing: 0.04em;
line-height: 1.05;
& a {
color: currentColor;
color: inherit;
text-decoration: none !important;
}
}
h1 {
font-size: var(--font-size-xxxl);
}
h2 {
font-size: var(--font-size-xxl);
}
h3 {
h2 {
font-size: var(--font-size-xl);
}
h3 {
font-size: var(--font-size-l);
}
h4, h5, h6 {
font-size: var(--font-size-m);
}
a {
outline: 0;
color: inherit;
text-decoration: underline;
transition-property: background, color;
color: var(--color-accent);
text-decoration: none;
transition-property: color;
transition-duration: var(--transition-duration-fast);
&.plain {
color: inherit;
}
&:hover {
@media not all and (hover: none) {
color: var(--color-accent);
text-decoration: underline;
color: var(--color-accent-highlight);
text-decoration: none;
&.plain {
color: var(--color-accent);
}
}
}
& svg {
transition-property: background, color;
transition-property: color;
transition-duration: var(--transition-duration-fast);
}
}
@@ -87,7 +96,7 @@ p {
}
ul {
margin-left: var(--space-m);
margin-left: 1rem;
margin-bottom: var(--space-l);
}
@@ -112,3 +121,21 @@ img:-moz-loading {
[aria-hidden="true"] {
display: none;
}
.button {
display: inline-block;
text-align: center;
padding: var(--space-m) var(--space-l);
color: var(--color-neutral-0);
background-color: var(--color-accent);
text-decoration: none;
border-radius: var(--space-m);
&:hover {
@media not all and (hover: none) {
color: var(--color-neutral-0);
background-color: var(--color-accent-highlight);
text-decoration: none;
}
}
}

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

@@ -1,4 +1,5 @@
.footer {
text-align: center;
font-size: var(--font-size-xs);
color: var(--color-secondary);
}

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

@@ -26,6 +26,17 @@
transition-duration: var(--transition-duration-fast);
}
& a {
color: var(--color-body-text);
&:hover {
@media not all and (hover: none) {
color: var(--color-accent);
text-decoration: none;
}
}
}
& .wrap {
@media (--L_and_up) {
display: flex;

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

@@ -21,4 +21,14 @@
flex: 1;
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
& h1,
& h2 {
margin-bottom: var(--space-l);
color: var(--color-secondary);
}
& .lead {
margin-bottom: var(--space-xxl);
}
}

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

@@ -6,14 +6,19 @@
:root {
--color-neutral-0: #fff;
--color-neutral-10: #ddd;
--color-neutral-10: #f6f6f6;
--color-neutral-50: #888;
--color-neutral-90: #222;
--color-neutral-95: #1B1B1B;
--color-body-text: var(--color-neutral-90);
--color-body-bg: var(--color-neutral-0);
--color-card-bg: var(--color-neutral-10);
--color-accent: #f7931a;
--color-accent-highlight: #dd7901;
--color-derweg: #00B4CF;
--color-interview: #151515;
--color-secondary: var(--color-neutral-50);
--space-xs: .125rem;
--space-s: .25rem;
@@ -26,16 +31,12 @@
--transition-duration-medium: 0.75s;
--transition-duration-slow: 1.5s;
--border-radius: 16px;
--opacity-text: 0.7;
--font-family-base: sans-serif;
--font-family-head: 'The Bold Font', var(--font-family-base);
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-size-base: 18px;
@@ -43,7 +44,7 @@
--font-size-s: .85rem;
--font-size-m: 1rem;
--font-size-l: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-xl: 1.75rem;
--font-size-xxl: 2.5rem;
--font-size-xxxl: 4rem;
}
@@ -51,11 +52,13 @@
:root[data-theme="dark"] {
--color-body-text: var(--color-neutral-0);
--color-body-bg: var(--color-neutral-90);
--color-card-bg: var(--color-neutral-95);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-body-text: var(--color-neutral-0);
--color-body-bg: var(--color-neutral-90);
--color-card-bg: var(--color-neutral-95);
}
}

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

@@ -1,104 +1,78 @@
#updates {
position: relative;
padding-top: 120px;
#podcast {
}
@media (--M_and_up) {
padding-bottom: 180px;
.episodes {
display: grid;
grid-gap: var(--space-xl);
grid-template-columns: 1fr;
margin: 0;
list-style: none;
@media (--up_to_L) {
grid-template-columns: 1fr;
}
& h3 {
@media (--up_to_M) {
font-size: 36px;
margin-bottom: var(--space-l);
}
@media (--M_and_up) {
font-size: 48px;
margin-bottom: var(--space-xl);
}
}
& .update + .update {
margin-top: var(--space-xxl);
}
&:after {
display: inline-block;
content: '';
position: absolute;
left: -65px;
bottom: -80px;
z-index: -1;
background-image: url(../img/bg/updates.svg);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: contain;
max-width: 55%;
width: 369px;
height: 344px;
@media (--up_to_M) {
display: none;
}
@media (--L_and_up) {
grid-template-columns: 1fr 1fr;
}
}
.update {
display: block;
text-decoration: none !important;
.episodeItem {
margin: 0;
background-color: var(--color-card-bg);
border-radius: var(--space-l);
@media (--up_to_M) {
padding: var(--space-l);
}
@media (--M_and_up) {
display: flex;
align-items: center;
max-width: 53em;
transition-property: background, border, transform;
transition-duration: var(--transition-duration-fast);
padding: var(--space-xl);
}
& .image {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-neutral-90);
box-shadow: 0px 100px 80px rgba(12, 11, 24, 0.15), 0px 41.7776px 33.4221px rgba(12, 11, 24, 0.107828), 0px 22.3363px 17.869px rgba(12, 11, 24, 0.0894161), 0px 12.5216px 10.0172px rgba(12, 11, 24, 0.075), 0px 6.6501px 5.32008px rgba(12, 11, 24, 0.0605839), 0px 2.76726px 2.21381px rgba(12, 11, 24, 0.0421718);
border: 3px solid var(--color-neutral-90);
border-radius: var(--space-l);
& a {
display: flex;
}
& .media {
margin-right: var(--space-l);
& a,
& img {
max-width: 80%;
max-height: 80%;
}
display: block;
border-radius: var(--space-s);
@media (--up_to_M) {
width: 100%;
height: 195px;
margin-bottom: 25px;
}
@media (--M_and_up) {
flex: 1 0 42.5%;
height: 275px;
margin-right: 25px;
}
}
& h4 {
margin-bottom: 15px;
@media (--up_to_M) {
font-size: var(--font-size-xl);
}
}
& p {
opacity: var(--opacity-text);
color: var(--color-body-text) !important;
}
&:hover {
& .image {
@media not all and (hover: none) {
border-color: var(--color-accent);
background-image: linear-gradient(45deg, #1A136E 29.26%, #0D0AB7 92.45%);
@media (--up_to_M) {
height: 60px;
width: 60px;
}
@media (--M_and_up) {
height: 100px;
width: 100px;
}
}
}
& .meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-family: var(--font-family-head);
/* color: var(--color-secondary); */
}
& .content {
flex: 1;
& > *:last-child {
margin-bottom: 0;
}
}
& h3 {
margin-top: var(--space-s);
font-family: var(--font-family-base);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-m);
line-height: 1.2;
}
}

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

@@ -1,7 +1,7 @@
#team {
& .members {
display: grid;
grid-gap: var(--space-xxl);
grid-gap: var(--space-xl);
margin: 0;
list-style: none;
@@ -18,37 +18,26 @@
& .member {
margin: 0;
text-align: center;
background-color: var(--color-card-bg);
border-radius: var(--space-l);
padding: var(--space-xl);
& img {
display: block;
display: inline-block;
border-radius: 50%;
@media (--up_to_L) {
height: 87px;
width: 87px;
}
@media (--L_and_up) {
height: 112px;
width: 112px;
}
height: 100px;
width: 100px;
}
& h4 {
margin-top: var(--space-m);
font-size: 21px;
}
& a {
font-size: var(--font-size-xs);
text-decoration: none;
text-transform: uppercase;
& h2 {
margin-top: var(--space-l);
margin-bottom: var(--space-m);
font-size: var(--font-size-xl);
}
& p {
margin: var(--space-s) 0 var(--space-l);
font-size: var(--font-size-s);
opacity: var(--opacity-text);
max-width: 30em;
margin-bottom: var(--space-l);
overflow-wrap: anywhere;
}

24
src/includes/mixins.pug Normal file
View File

@@ -0,0 +1,24 @@
mixin sprite(id)
svg(role="img" title=id)&attributes(attributes)
use(xlink:href=`${assetPath("/img/sprite.svg")}#${id}`)
mixin episodeItem(e)
article.episodeItem&attributes(attributes)
a.plain(href=e.anchor)
.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
mixin episodeDetails(e)
article.episodeDetails&attributes(attributes)
.media
a(href=e.anchor)
img(src=e.image alt=e.title loading="lazy")
.content
h3: a(href=e.anchor)=e.title
p=formatDate(e.date)
!=e.content

6
src/includes/template.pug
View File

@@ -1,3 +1,5 @@
include mixins
block vars
- const pageTitle = title ? `${title} · ${site.title}` : site.meta.title
@@ -6,10 +8,6 @@ block vars
- const pageCard = cardImage || site.meta.cardImage
- const themeColor = '#FFFFFF'
mixin sprite(id)
svg(role="img" title=id)&attributes(attributes)
use(xlink:href=`${assetPath("/img/sprite.svg")}#${id}`)
<!DOCTYPE html>
html(lang="en")
head

23
src/podcast.pug
View File

@@ -1,13 +1,18 @@
extends /template.pug
block main
section
:markdown-it(html linkify typographer)
# Podcast
Content
section#podcast
.lead
h1 Podcast
:markdown-it(html linkify typographer)
Du findest unsere Episoden auf den üblichen Plattformen wie
[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
- [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)
- [Anchor](https://anchor.fm/einundzwanzig)
- [RSS](https://anchor.fm/s/d8d3c38/podcast/rss)
h2 Alle Episoden
.episodes
each e in episodes
+episodeItem(e)

17
src/team.pug
View File

@@ -2,20 +2,21 @@ extends /template.pug
block main
section#team
h1 Team
ul.members
each m in team
.lead
h1 Team
ul.members(data-shuffle)
each m in shuffle(team)
li.member
img(src=(assetPath(m.image)) alt=m.name loading="lazy")
h4=m.name
p(style=(m.name.startsWith('Arik') ? 'word-break:break-all;' : null))=m.text
h2=m.name
!=renderMarkdown(m.text)
.links
if m.twitter
a(href=(m.twitter.startsWith('https://') ? m.twitter : `https://twitter.com/${m.twitter}`) target="_blank" title=`${m.name} on 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(href=(m.github.startsWith('https://') ? m.github : `https://github.com/${m.github}`) target="_blank" title=`${m.name} on 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(href=m.url target="_blank")
a.plain(href=m.url target="_blank")
+sprite("url")