einundzwanzig/einundzwanzig.space
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git synced 2026-04-29 02:53:47 +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
src/css/base/elements.css
+114
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;
}
src/css/base/fonts.css
+4
View File
@@ -0,0 +1,4 @@
@font-face {
font-family: 'The Bold Font';
src: url('../fonts/theboldfont.woff2') format('woff2');
}
src/css/base/footer.css
+4
View File
@@ -0,0 +1,4 @@
.footer {
text-align: center;
font-size: var(--font-size-xs);
}
src/css/base/header.css
+119
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);
}
}
}
}
src/css/base/layout.css
+24
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);
}
src/css/base/variables.css
+61
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);
}
}
src/css/main.css
+11
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';
src/css/sections/podcast.css
+104
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%);
}
}
}
}
src/css/sections/team.css
+68
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);
}
}
}
}
src/includes/template.pug
+67
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"))
src/index.pug
+9
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/)
src/podcast.pug
+13
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)
src/team.pug
+21
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")