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

🎉 Initial setup

Browse Source 
🎉 Initial setup

Setup deployment
This commit is contained in:
Dennis Reimann
2020-10-03 21:49:25 +02:00
commit 0202e858e6
55 changed files with 11718 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/css/base/elements.css Normal file
View File

@@ -0,0 +1,114 @@
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
vertical-align: baseline;
@media (prefers-reduced-motion: reduce) {
animation: none !important;
transition: none !important;
}
}
html {
height: 100%;
line-height: 1.5;
font-family: var(--font-family-base);
font-size: var(--font-size-base);
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
display: flex;
flex-direction: column;
height: 100%;
color: var(--color-body-text);
background-color: var(--color-body-bg);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-head);
line-height: 1.05;
& a {
color: currentColor;
text-decoration: none !important;
}
}
h1 {
font-size: var(--font-size-xxxl);
}
h2 {
font-size: var(--font-size-xxl);
}
h3 {
font-size: var(--font-size-xl);
}
h4, h5, h6 {
font-size: var(--font-size-m);
}
a {
outline: 0;
color: inherit;
text-decoration: underline;
transition-property: background, color;
transition-duration: var(--transition-duration-fast);
&:hover {
@media not all and (hover: none) {
color: var(--color-accent);
text-decoration: underline;
}
}
& svg {
transition-property: background, color;
transition-duration: var(--transition-duration-fast);
}
}
p {
margin-bottom: var(--space-l);
}
ul {
margin-left: var(--space-m);
margin-bottom: var(--space-l);
}
p,
ul {
& + h2 {
margin-top: var(--space-xl);
}
& + h3,
& + h4,
& + h5,
& + h6 {
margin-top: var(--space-l);
}
}
img:-moz-loading {
visibility: hidden;
}
[aria-hidden="true"] {
display: none;
}

4
src/css/base/fonts.css Normal file
View File

@@ -0,0 +1,4 @@
@font-face {
font-family: 'The Bold Font';
src: url('../fonts/theboldfont.woff2') format('woff2');
}

4
src/css/base/footer.css Normal file
View File

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

119
src/css/base/header.css Normal file
View File

@@ -0,0 +1,119 @@
.header {
/* position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10; */
color: var(--color-body-text);
background-color: var(--color-body-bg);
@media (--up_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);
}
@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);
}
& .wrap {
@media (--L_and_up) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
}
& .brand {
display: inline-block;
margin-right: var(--space-xl);
}
& .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;
}
}
& .nav {
position: relative;
top: 3px;
left: -1px;
display: flex;
flex: 1;
@media (--up_to_L) {
margin-top: var(--space-m);
}
@media (--L_and_up) {
margin-top: var(--space-l);
}
& 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 {
display: flex;
align-items: center;
@media (--L_and_up) {
margin-left: auto;
}
& a,
& svg {
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);
}
}
& a + a {
margin-left: var(--space-l);
}
}
}
}

24
src/css/base/layout.css Normal file
View File

@@ -0,0 +1,24 @@
.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);
}
}
.main {
flex: 1;
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}

61
src/css/base/variables.css Normal file
View File

@@ -0,0 +1,61 @@
@custom-media --up_to_M screen and (max-width: 599px);
@custom-media --up_to_L screen and (max-width: 839px);
@custom-media --M_to_L screen and (min-width: 600px) and (max-width: 839px);
@custom-media --M_and_up screen and (min-width: 600px);
@custom-media --L_and_up screen and (min-width: 840px);
:root {
--color-neutral-0: #fff;
--color-neutral-10: #ddd;
--color-neutral-90: #222;
--color-body-text: var(--color-neutral-90);
--color-body-bg: var(--color-neutral-0);
--color-accent: #f7931a;
--color-derweg: #00B4CF;
--color-interview: #151515;
--space-xs: .125rem;
--space-s: .25rem;
--space-m: .5rem;
--space-l: 1rem;
--space-xl: 2rem;
--space-xxl: 4rem;
--transition-duration-fast: 0.25s;
--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;
--font-size-xs: .7rem;
--font-size-s: .85rem;
--font-size-m: 1rem;
--font-size-l: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-xxl: 2.5rem;
--font-size-xxxl: 4rem;
}
:root[data-theme="dark"] {
--color-body-text: var(--color-neutral-0);
--color-body-bg: var(--color-neutral-90);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-body-text: var(--color-neutral-0);
--color-body-bg: var(--color-neutral-90);
}
}

11
src/css/main.css Normal file
View File

@@ -0,0 +1,11 @@
/* Base */
@import 'base/variables.css';
@import 'base/fonts.css';
@import 'base/elements.css';
@import 'base/layout.css';
@import 'base/header.css';
@import 'base/footer.css';
/* Sections */
@import 'sections/podcast.css';
@import 'sections/team.css';

104
src/css/sections/podcast.css Normal file
View File

@@ -0,0 +1,104 @@
#updates {
position: relative;
padding-top: 120px;
@media (--M_and_up) {
padding-bottom: 180px;
}
& 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;
}
}
}
.update {
display: block;
text-decoration: none !important;
@media (--M_and_up) {
display: flex;
align-items: center;
max-width: 53em;
transition-property: background, border, transform;
transition-duration: var(--transition-duration-fast);
}
& .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);
& img {
max-width: 80%;
max-height: 80%;
}
@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%);
}
}
}
}

68
src/css/sections/team.css Normal file
View File

@@ -0,0 +1,68 @@
#team {
& .members {
display: grid;
grid-gap: var(--space-xxl);
margin: 0;
list-style: none;
@media (--up_to_M) {
grid-template-columns: 1fr;
}
@media (--M_to_L) {
grid-template-columns: 1fr 1fr;
}
@media (--L_and_up) {
grid-template-columns: 1fr 1fr 1fr;
}
}
& .member {
margin: 0;
& img {
display: block;
border-radius: 50%;
@media (--up_to_L) {
height: 87px;
width: 87px;
}
@media (--L_and_up) {
height: 112px;
width: 112px;
}
}
& h4 {
margin-top: var(--space-m);
font-size: 21px;
}
& a {
font-size: var(--font-size-xs);
text-decoration: none;
text-transform: uppercase;
}
& p {
margin: var(--space-s) 0 var(--space-l);
font-size: var(--font-size-s);
opacity: var(--opacity-text);
max-width: 30em;
overflow-wrap: anywhere;
}
& .links {
& a,
& svg {
display: inline-block;
height: 28px;
width: 28px;
}
& a + a {
margin-left: var(--space-m);
}
}
}
}

67
src/includes/template.pug Normal file
View File

@@ -0,0 +1,67 @@
block vars
- const pageTitle = title ? `${title} · ${site.title}` : site.meta.title
- const pageDescription = description || site.meta.description
- const pageKeywords = keywords || site.meta.keywords
- 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
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible" content="ie=edge")
meta(name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover")
meta(name="keywords" content=pageKeywords)
meta(name="description" content=pageDescription)
meta(property="og:locale" content="de_DE")
meta(property="og:site_name" content=site.title)
meta(property="og:title" content=pageTitle)
meta(property="og:description" content=pageDescription)
meta(property="og:type" content="website")
meta(property="og:image" content=assetUrl(pageCard, "http"))
meta(property="og:image:secure_url" content=assetUrl(pageCard))
meta(property="og:image:width" content=1402)
meta(property="og:image:height" content=1402)
meta(property="twitter:card" content="summary")
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/theboldfont.woff2"))
link(rel="apple-touch-icon" href=assetPath("/img/einundzwanzig-square.svg"))
link(rel="icon" href=assetPath("/img/einundzwanzig-square.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"))
title= pageTitle
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")
+sprite("twitter")
a.telegram(href="https://t.me/einundzwanzigpodcast" target="_blank" title="Telegram")
+sprite("telegram")
#header-anchor
main.main
.wrap
block main
footer#footer.footer
.wrap
p Craig Wright is a fraud.
script(src=assetPath("/js/main.js"))

9
src/index.pug Normal file
View File

@@ -0,0 +1,9 @@
extends /template.pug
block main
section
:markdown-it(html linkify typographer)
# Start
Content
- [Shoutouts](https://tallyco.in/s/zfxqtu/)

13
src/podcast.pug Normal file
View File

@@ -0,0 +1,13 @@
extends /template.pug
block main
section
:markdown-it(html linkify typographer)
# Podcast
Content
- [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)

21
src/team.pug Normal file
View File

@@ -0,0 +1,21 @@
extends /template.pug
block main
section#team
h1 Team
ul.members
each m in 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
.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")