diff --git a/src/css/base/fonts.css b/src/css/base/fonts.css index cbb4e9e8e29..d8d9591ea52 100644 --- a/src/css/base/fonts.css +++ b/src/css/base/fonts.css @@ -14,3 +14,9 @@ font-stretch: 100%; src: url('../fonts/inconsolata-700.woff2') format('woff2'); } + +@font-face { + font-family: 'TheBoldFont'; + font-style: normal; + src: url('../fonts/theboldfont.woff2') format('woff2'); +} diff --git a/src/css/base/variables.css b/src/css/base/variables.css index 9c3b47c89ff..4d07cdf5923 100644 --- a/src/css/base/variables.css +++ b/src/css/base/variables.css @@ -42,6 +42,7 @@ --transition-duration-slow: 1.5s; --font-family-base: 'Inconsolata', monospace; + --font-family-bold: 'TheBoldFont', monospace; --font-weight-regular: 400; --font-weight-bold: 700; @@ -52,13 +53,16 @@ --font-size-l: 1.25rem; --font-size-xl: 1.75rem; --font-size-xxl: 2.25rem; + --font-size-xxxl: 4rem; @media (--up_to_M) { --font-size-base: 16px; + --font-size-xxxl: 2.25rem; --wrap-padding-horizontal: var(--space-l); } @media (--M_to_L) { --font-size-base: 18px; + --font-size-xxxl: 3.5rem; --wrap-padding-horizontal: var(--space-xl); } @media (--L_and_up) { diff --git a/src/gesundes-geld.pug b/src/gesundes-geld.pug new file mode 100644 index 00000000000..5e7c7e91d5d --- /dev/null +++ b/src/gesundes-geld.pug @@ -0,0 +1,61 @@ +include includes/mixins + +block vars + - const pageTitle = "Bitcoin ist gesundes Geld" + - const pageDescription = "Bitcoin? Ja, Bitcoin! Hinter Bitcoin verbirgt sehr weit mehr als du vielleicht denkst." + - const pageCard = "/img/card/gesundes-geld.jpg" + + +html(lang="de" data-theme="custom") + head + include includes/_head + link(href=assetPath("/css/gesundes-geld.css") rel="stylesheet") + body + main.main + #gesundes-geld.wrap + section + header + .circle + h1 + strong ₿itcoin + = " ist #gesundesgeld" + h2 Gesundes Geld
Bessere Welt + + .lead + img#mcgenesis-1(src=assetPath("/img/gesundes-geld/mcgenesis-1.svg")) + div + p + strong Bitcoin? Ja, Bitcoin! + p Hinter Bitcoin verbirgt sehr weit mehr als du vielleicht denkst. + + .text + :markdown-it(html linkify typographer) + ### Schön, dass du unseren Plakaten gefolgt bist! + + Wir leben in turbulenten Zeiten und auf Grund der hohen Inflation spielt das Thema Geld für immer mehr Menschen eine bedeutende Rolle in ihrem Alltag. + Deshalb haben wir diese Plakat-Aktion am heutigen 03.01.2023 gestartet, denn heute feiert Bitcoin seinen 14. Geburtstag. + + Bitcoin? Ja, Bitcoin! + Hinter Bitcoin verbirgt sehr weit mehr als du vielleicht denkst. + Bei Bitcoin geht es um Themen wie: + - Ökonomie und Geldpolitik (Was ist Geld eigentlich? Warum wird alles immer teurer?) + - Gesellschaft (z.B. raus aus der Konsumgesellschaft, Wohlstand für alle) + - Technische Themen (Blockchain, Kryptographie und Co) + +
+ + Im kompletten deutschsprachigen Raum entstehen seit einiger Zeit "Meet-Ups". + In den regionalen Gruppen tauscht man sich über diese und andere Themen via Telegram oder meist auch einmal monatlich bei einem Stammtisch vor Ort aus. + Der Austausch ist völlig unentgeltlich und keiner will dir irgendetwas verkaufen oder gar "andrehen". + Wir sind einfach ganz normale Leute. 😀 + + Du hast Lust mehr über Geld und all seine Facetten zu erfahren? + Dann trete deiner regionalen "Einundzwanzig-Community" bei. + Suche einfach ein Meet-Up in deiner Umgebung und schon findest du interessierte Leute und interessante Gesprächspartner. + + PS: Bitcoin ist begrenzt und daher nicht von Staaten oder Notenbanken inflationierbar. + Es wird niemals mehr als 21 Millionen Bitcoin geben. + Daher auch der Name "[Einundzwanzig](/)" 😉 + + +map(meetups, true) + include includes/_footer diff --git a/static/css/gesundes-geld.css b/static/css/gesundes-geld.css new file mode 100644 index 00000000000..d133817144d --- /dev/null +++ b/static/css/gesundes-geld.css @@ -0,0 +1,109 @@ +:root { + --color-body-text: #000; + --color-body-bg: #e9dfd3; + --color-yellow: #fdb318; + --color-accent: #e87905; + --color-accent-highlight: #f0881b; +} + +body { + overflow-x: hidden; +} + +.main { + padding-top: var(--space-xl); +} + +#gesundes-geld header { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-l); + margin-bottom: 5rem; +} + +#gesundes-geld header .circle { + position: absolute; + z-index: -10; + width: 200vw; + height: 100vw; + left: calc(50% - 100vw); + bottom: calc(var(--space-xxl) * -1); +} + +#gesundes-geld header .circle::before { + content: ''; + height: 100%; + width: 100%; + border-radius: 50%; + position: absolute; + background-color: var(--color-yellow); +} + +#gesundes-geld h1 { + color: var(--color-body-text); + font-size: var(--font-size-l); + margin: 0 auto; + padding: 0 var(--space-m) var(--space-l); + border-bottom: 1px solid var(--color-body-text); + text-align: center; +} + +#gesundes-geld h2 { + font-family: var(--font-family-bold); + font-size: var(--font-size-xxxl); + margin: var(--space-s) auto 0; + color: var(--color-body-text); + text-align: center; + line-height: 1; +} + +#gesundes-geld .lead { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-xxl); + font-size: var(--font-size-xl); + color: var(--color-neutral-75); + margin-bottom: 4rem; +} + +#gesundes-geld .lead div { + max-width: 12em; +} + +@media screen and (max-width: 599px) { + #gesundes-geld .lead { + gap: var(--space-xl); + font-size: var(--font-size-m); + } +} + +@media screen and (min-width: 600px) and (max-width: 839px) { + #gesundes-geld .lead { + gap: var(--space-xl); + font-size: var(--font-size-l); + } +} + +#gesundes-geld .lead img { + width: 25vw; +} + +#gesundes-geld .text h3 { + font-size: var(--font-size-l); + color: var(--color-neutral-75); + margin-bottom: var(--space-l); + text-align: center; + line-height: 1.25; +} + +#gesundes-geld .text p:last-child { + color: var(--color-neutral-75); +} + +#gesundes-geld #unmapped { + display: none; +} diff --git a/static/img/card/gesundes-geld.jpg b/static/img/card/gesundes-geld.jpg new file mode 100644 index 00000000000..8d5975a459b Binary files /dev/null and b/static/img/card/gesundes-geld.jpg differ diff --git a/static/img/gesundes-geld/mcgenesis-1.svg b/static/img/gesundes-geld/mcgenesis-1.svg new file mode 100644 index 00000000000..751422048c8 --- /dev/null +++ b/static/img/gesundes-geld/mcgenesis-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/gesundes-geld/mcgenesis-2.svg b/static/img/gesundes-geld/mcgenesis-2.svg new file mode 100644 index 00000000000..f5f6af4a383 --- /dev/null +++ b/static/img/gesundes-geld/mcgenesis-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/gesundes-geld/mcgenesis-3.svg b/static/img/gesundes-geld/mcgenesis-3.svg new file mode 100644 index 00000000000..a72d0a2b58a --- /dev/null +++ b/static/img/gesundes-geld/mcgenesis-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/gesundes-geld/mcgenesis-4.svg b/static/img/gesundes-geld/mcgenesis-4.svg new file mode 100644 index 00000000000..c3cdff96237 --- /dev/null +++ b/static/img/gesundes-geld/mcgenesis-4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js index 3c386e7a934..50a87735d08 100644 --- a/tasks/generate_pages.js +++ b/tasks/generate_pages.js @@ -49,6 +49,7 @@ renderPage('verein', 'verein', { navCurrent: 'verein' }) renderPage('kontakt', 'kontakt', { navCurrent: 'kontakt' }) renderPage('datenschutz', 'datenschutz', { navCurrent: 'datenschutz' }) renderPage('adventskalender', 'adventskalender', { adventskalender }) +renderPage('gesundes-geld', 'gesundes-geld', { meetups: meetupsSorted }) renderPage('category', 'podcast/news', { navCurrent: 'podcast', category: 'news', categoryName: 'News', episodes: episodes.filter(e => e.category === 'news') }) renderPage('category', 'podcast/interviews', { navCurrent: 'podcast', category: 'interview', categoryName: 'Interviews', episodes: episodes.filter(e => e.category === 'interview') })