Update events

src/css/base/elements.css

@@ -232,3 +232,43 @@ img:-moz-loading {
     }
   }
 }
+
+.ytEmbed {
+  display: block;
+  position: relative;
+  margin: var(--space-l) 0 var(--space-xl);
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  padding-bottom: 56.25%;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: cover;
+  background-color: var(--color-card-bg);
+}
+
+.ytEmbed:before {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center;
+  background-size: auto;
+  background-size: 64px 64px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  opacity: 0.8;
+  transition: all var(--transition-duration-fast) ease-out;
+  content: '';
+  cursor: pointer;
+}
+
+.ytEmbed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
+.ytEmbed iframe[src] {
+  display: block;
+}

src/events.pug

@@ -11,8 +11,22 @@ block main
       h1= title
       p= description
 
-      :markdown-it(html linkify typographer)
+      ul
-        - 18. Juni 2022: [Satoshis Beach](/events/satoshis-beach-2022)
+        li
-        - 27.-29. Mai 2022: [Bitcoin im Ländle](/events/bitcoin-im-laendle-2022)
+          = "18. Juni 2022: "
-        - 18.-20. Februar 2022: [Satoshis Bleibe](/events/satoshis-bleibe-2022)
+          a(href="/events/satoshis-beach-2022") Satoshis Beach
-        - 06.-08. August 2021: [Bitcoin Zitadelle](https://bitcoin-zitadelle.de/)
+        li
+          = "11. Juni 2022: "
+          a(href="/events/sommerfest-hodler-heide-2022") Sommerfest in der Hodler Heide
+        li
+          = "27.-29. Mai 2022: "
+          a(href="/events/bitcoin-im-laendle-2022") Bitcoin im Ländle
+
+      h2 Vergangene Events
+      ul
+        li
+          = "18.-20. Februar 2022: "
+          a(href="/events/satoshis-bleibe-2022") Satoshis Bleibe
+        li
+          = "06.-08. August 2021: "
+          a(href="https://bitcoin-zitadelle.de/" rel="nofollow noopener" target="_blank") Bitcoin Zitadelle

src/events/bitcoin-im-laendle-2022.pug

@@ -16,9 +16,9 @@ block main
         **Freitag, 27.05.2022 bis Sonntag, 29.05.2022**
 
         [Hotel Princess Plochingen](https://hotel-princess.de/)
-
+        <br>
         Widdumstraße 3 (direkt am Banhof)
-
+        <br>
         73207 Plochingen
 
         Organisiert durch [Einundzwanzig Stuttgart](https://einundzwanzig-stuttg.art/)

src/events/satoshis-beach-2022.pug

@@ -3,7 +3,7 @@ extends /template.pug
 block vars
   - const title = 'Satoshis Beach 2022'
   - const description = 'Samstag, 18.06.2022 — Seaside Beach Baldeney'
-  - const cardImage = '/img/events/satoshis-bleibe-2022.png'
+  - const cardImage = '/img/events/satoshis-beach-2022.png'
 
 block main
   #events.wrap
@@ -15,14 +15,12 @@ block main
 
         ** Samstag, 18.06.2022 **
 
-        Seaside Beach Baldeney
+        [Seaside Beach Baldeney](https://seaside-beach.de/)
-        
+        <br>
         Freiherr-vom-Stein-Straße 384
-        
+        <br>
         45133 Essen
 
-        [https://seaside-beach.de/](https://seaside-beach.de/)
-
         ## Das Einundzwanzig NRW Meetup
 
         Die lokalen Einundzwanzig Gruppen in NRW sind im digitalen Alltag untereinander gut vernetzt und besuchen sich gegenseitig auf Ihren Meetings. Immer häufiger kam der Wunsch auf, sich einmal in größerer Runde persönlich zu treffen und kennenzulernen 🤗 Eine Sommerparty am See soll es sein, mit allem, was wichtig ist im Gepäck: Barbecue, Bier, Baden und ausgiebigen Bitcointalks bei hoffentlich praller Sonne. Für die Aktiven gibt es auf dem Gelände einen See, StandUp-Paddling, Bogenschießen, Volleyball uvm. Pack die Badehose ein und komm vorbei - wir freuen uns auf Dich! 🌴
@@ -33,8 +31,8 @@ block main
 
         No speakers, no workshops - just a good time! ☀️
 
-        Es soll ein schöner Tag mit allen NRW Plebs werden, an dem unsere Community noch näher zusammenrückt - aber auch aus dem Umland sind alle Bitcoiner herzlichst willkommen! 
+        Es soll ein schöner Tag mit allen NRW Plebs werden, an dem unsere Community noch näher zusammenrückt - aber auch aus dem Umland sind alle Bitcoiner herzlichst willkommen!
-        
+
         ## Tickets
 
         ** 45,- EUR pro Person - Lightning⚡️only! **
@@ -49,7 +47,7 @@ block main
 
         ## Ticketverkauf
 
-        Die Tickets könnt ihr bei den Organisatoren erwerben, die ihr über Telegram kontaktieren könnt. 
+        Die Tickets könnt ihr bei den Organisatoren erwerben, die ihr über Telegram kontaktieren könnt.
 
         - [gmblr247](https://t.me/gmblr247)
         - [Altbierjupp](https://t.me/Altbierjupp)
@@ -57,10 +55,10 @@ block main
         - [systemling32](https://t.me/systemling32)
         - [selfkant_blitz](https://t.me/selfkant_blitz)
         - [Sambal_Oelek](https://t.me/Sambal_Oelek)
-      
+
 
         Tickets nur solange der Vorrat reicht! Nach erfolgreicher Zahlung erhaltet ihr Zugang zur Satoshis' Beach Telegram-Gruppe
 
         Aktuelle Informationen zu der Veranstaltung und den NRW Meetups findet ihr auf unserem Twitter-Account: (https://twitter.com/einundzwanzigNW)
-        
+
         Wir freuen uns auf ganz viel Sonne ☀️, viele Plebs und einen regen Austausch mit euch 🤙

src/events/satoshis-bleibe-2022.pug

@@ -15,14 +15,12 @@ block main
 
         **Freitag, 18.02.2022 bis Sonntag, 20.02.2022**
 
-        Alte Kirche Bernkastel-Wehlen
+        [Alte Kirche Bernkastel-Wehlen](https://www.bleibe.de/kirche.html)
-
+        <br>
         Brückenstraße 15
-
+        <br>
         54470 Bernkastel-Wehlen
 
-        [https://www.bleibe.de/kirche.html](https://www.bleibe.de/kirche.html)
-
         ## Philosophie
 
         Bitcoin verbindet. Aus diesem Grund haben wir uns entschlossen, dieses besondere Meetup zu veranstalten und diesen Namen gewählt. In **Satoshis Bleibe** ist jeder willkommen, sei es kompletter Bitcoin-Neuling oder jahrzehntelanger Bitcoin-Bulle. **Satoshis Bleibe** ist das, was **wir** draus machen.

src/events/sommerfest-hodler-heide-2022.pug

@@ -0,0 +1,45 @@
+extends /template.pug
+
+block vars
+  - const title = 'Sommerfest in der Hodler Heide 2022'
+  - const description = 'Samstag, 11.06.2022 — Der Schafstall, Handeloh'
+  - const cardImage = 'https://img.youtube.com/vi/F71BT5es1aM/hqdefault.jpg'
+
+block main
+  #events.wrap
+    section
+      h1= title
+
+      :markdown-it(html linkify typographer)
+        ## Datum und Location
+
+        **Samstag, 11.06.2022, ab 12:00 Uhr**
+
+        [Der Schafstall](https://der-schafstall.de/)
+        <br>
+        Am Büsenbach 35
+        <br>
+        21256 Handeloh
+
+        ## Das Einundzwanzig Norddeutschland Meetup
+
+        Wir möchten Euch herzlich zu einem Sommerfest in der schönen Lüneburger Heide einladen.
+        Bei diesem Fest wird es viele Gelegenheiten geben sich zum Thema Bitcoin zu bilden, Bitcoin anzufassen und mit Bitcoin zu bezahlen.
+
+        Alles zwanglos und mit viel Spaß. Dazu wird natürlich die leckere Verpflegung von unserem Gastgeber "[Der Schafstall](https://der-schafstall.de/)".
+
+        Es wird ein Fest für die ganze Familie und mit viel Spaß, aber seht selbst.
+
+        <a href="https://www.youtube.com/watch?v=F71BT5es1aM" data-id="F71BT5es1aM" class="ytEmbed" style="background-image:url(https://img.youtube.com/vi/F71BT5es1aM/hqdefault.jpg);">
+        <iframe title="YouTube" data-src="https://www.youtube-nocookie.com/embed/F71BT5es1aM?&amp;autoplay=1&amp;autohide=1&amp;modestbranding=1&amp;color=white&amp;rel=0" allow="autoplay;encrypted-media;picture-in-picture" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+        </a>
+
+        ## Anmeldung
+
+        Es gibt keine Tickets, der Eintritt ist frei und jeder ist willkommen.
+
+        Zum Abschätzen der Teilnehmeranzahl benötigen wir allerdings eure Hilfe:
+        Lasst uns auf der [Anmeldung](https://nuudel.digitalcourage.de/6sLVDIciMEVA8Wfa) einfach kurz wissen, mit wie vielen Leuten ihr am Sommerfest teilnehmt.
+
+        Besucht uns auch gerne in der Einundzwanzig Meetup Norddeutschland [Telegram-Gruppe](http://norden.einundzwanzig.space)
+        oder folgt uns auf [Twitter](https://twitter.com/EinundzwanzigN).

static/js/main.js

@@ -95,4 +95,16 @@ document.addEventListener("DOMContentLoaded", () => {
       link.parentNode.parentNode.classList.add('expanded')
     })
   })
+
+  // Video
+  document.querySelectorAll('.ytEmbed').forEach(video => {
+    video.addEventListener('click', e => {
+      e.preventDefault()
+      const lazyAttr = 'data-src'
+      const iframe = e.target.querySelector(`iframe[${lazyAttr}]`)
+      if (iframe) {
+        const src = iframe.setAttribute('src', iframe.getAttribute(lazyAttr))
+      }
+    })
+  })
 })

tasks/generate_pages.js

@@ -39,6 +39,7 @@ renderPage('soundboard', 'soundboard', { navCurrent: 'soundboard', soundboard })
 renderPage('events', 'events', { navCurrent: 'events' })
 renderPage('events/satoshis-bleibe-2022', 'events/satoshis-bleibe-2022', { navCurrent: 'events'})
 renderPage('events/bitcoin-im-laendle-2022', 'events/bitcoin-im-laendle-2022', { navCurrent: 'events' })
+renderPage('events/sommerfest-hodler-heide-2022', 'events/sommerfest-hodler-heide-2022', { navCurrent: 'events'})
 renderPage('events/satoshis-beach-2022', 'events/satoshis-beach-2022', { navCurrent: 'events'})
 renderPage('verein', 'verein', { navCurrent: 'verein' })
 renderPage('kontakt', 'kontakt', { navCurrent: 'kontakt' })