einundzwanzig/einundzwanzig.space
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git synced 2025-12-13 16:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Dennis Reimann
2022-12-10 14:39:05 +01:00
parent 1a39b4c241
commit 4d203fed07
6 changed files with 130 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/adventskalender.pug
View File

@@ -3,10 +3,10 @@ include includes/mixins
block vars
- const pageTitle = "Adventskalender"
- const pageDescription = "🎄 Wir wünschen euch mit unserem Adventskalender bullishe All Time Highnachten! 🎅"
- const pageCard = "/img/adventskalender.png"
- const pageCard = "/img/card/adventskalender.png"
<!DOCTYPE html>
html(lang="en")
html(lang="de")
head
include includes/_head
link(href=assetPath("/css/adventskalender.css") rel="stylesheet")

167
src/css/sections/meetups.css
View File

@@ -4,97 +4,94 @@
3% { transform: scale(.75); }
}
#meetups,
#kurse {
& #map {
@media (--up_to_L) {
margin-top: var(--space-xl);
#map {
@media (--up_to_L) {
margin-top: var(--space-xl);
& img,
& .dot,
& .tooltip {
display: none;
}
}
@media (--L_and_up) {
position: relative;
margin-top: var(--space-xxl);
& h2 {
display: none;
}
& img {
display: block;
width: 100%;
opacity: .5;
}
& ul {
margin: 0;
list-style: none;
}
& li {
position: absolute;
z-index: 1;
font-size: .65rem;
&.unmapped {
display: none;
}
&.official {
color: var(--color-accent);
}
&:not(.official) {
color: var(--color-secondary);
}
& a {
color: inherit;
display: inline-block;
margin-top: .3rem;
}
& .dot {
content: '';
position: absolute;
top: .375rem;
left: -1rem;
background: radial-gradient(currentColor 0%, rgba(255, 255, 255, 0) 100%);
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
transform-origin: 50%;
border-radius: 50%;
width: .8rem;
height: .8rem;
transform: scale(.75);
animation-name: pulse;
}
}
& .tooltip {
position: absolute;
z-index: 2;
min-width: 7rem;
font-size: .65rem;
padding: var(--space-xs) var(--space-m);
background: var(--color-overlay-bg);
border-radius: var(--space-m);
}
& img,
& .dot,
& .tooltip {
display: none;
}
}
& #unmapped {
@media (--up_to_L) {
@media (--L_and_up) {
position: relative;
margin-top: var(--space-xxl);
& h2 {
display: none;
}
@media (--L_and_up) {
margin-top: var(--space-xxl);
& img {
display: block;
width: 100%;
opacity: .5;
}
& ul {
margin: 0;
list-style: none;
}
& li {
position: absolute;
z-index: 1;
font-size: .65rem;
&.unmapped {
display: none;
}
&.official {
color: var(--color-accent);
}
&:not(.official) {
color: var(--color-secondary);
}
& a {
color: inherit;
display: inline-block;
margin-top: .3rem;
}
& .dot {
content: '';
position: absolute;
top: .375rem;
left: -1rem;
background: radial-gradient(currentColor 0%, rgba(255, 255, 255, 0) 100%);
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
transform-origin: 50%;
border-radius: 50%;
width: .8rem;
height: .8rem;
transform: scale(.75);
animation-name: pulse;
}
}
& .tooltip {
position: absolute;
z-index: 2;
min-width: 7rem;
font-size: .65rem;
padding: var(--space-xs) var(--space-m);
background: var(--color-overlay-bg);
border-radius: var(--space-m);
}
}
}
#unmapped {
@media (--up_to_L) {
display: none;
}
@media (--L_and_up) {
margin-top: var(--space-xxl);
}
}

44
src/includes/mixins.pug
View File

@@ -32,6 +32,50 @@ mixin member(m)
if m.text
!=markdown(m.text)
mixin map(m)
- const filterOfficial = (list, official) => list.filter(meetup => (meetup.name.startsWith('Einundzwanzig') || meetup.name.startsWith('Einezwänzg')) === official)
- const filterUnmapped = (list) => list.filter(meetup => !meetup.top || !meetup.left)
- const style = m => m.top && m.left ? `top:${m.top}%;left:${m.left}%;` : null
- const clss = m => m.top && m.left ? null : 'unmapped'
- let j = 0
#map
h2 Einundzwanzig Meetups
ul.meetups
each m in filterOfficial(meetups, true)
li.official(class=clss(m) style=style(m))
a(href=m.url target="_blank" rel="nofollow noopener")
.dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
= m.name.replace('Einundzwanzig ', '').replace('Einezwänzg ', '')
if m.members
= ' '
small.members= `(${m.members})`
- j++
h2 Weitere Meetups
ul.meetups
each m in filterOfficial(meetups, false)
li(class=clss(m) style=style(m))
a(href=m.url target="_blank" rel="nofollow noopener")
.dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
= m.name.replace('Bitcoin ', '')
if m.members
= ' '
small.members= `(${m.members})`
- j++
img#dach(src=assetPath('/img/dach.svg') alt="DE, AT, CH")
#tooltip.tooltip(hidden)
#unmapped
h2 Weitere Meetups
ul.meetups
each m in filterUnmapped(meetups)
li(class=clss(m) style=style(m))
a(href=m.url target="_blank" rel="nofollow noopener")
= m.name
if m.members
= ' '
small.members= `(${m.members})`
mixin spende(d, trunc = false)
.spende(id=d.id)&attributes(attributes)
.inner

4
src/includes/template.pug
View File

@@ -10,7 +10,7 @@ block vars
- const themeColor = site.meta.themeColor
<!DOCTYPE html>
html(lang="en")
html(lang="de")
head
include _head
body
@@ -46,8 +46,6 @@ html(lang="en")
a(href="/team/" class=(navCurrent === 'team' && 'current')) Team
a(href="/verein/" class=(navCurrent === 'verein' && 'current')) Verein
a(href="/kontakt/" class=(navCurrent === 'kontakt' && 'current')) Kontakt
//- .navItem
//- a(href=site.meta.shopUrl target="_blank") Shop
button(type="button").theme
+sprite("theme")

44
src/meetups.pug
View File

@@ -4,11 +4,6 @@ block vars
- const title = 'Bitcoin-Meetups'
- const description = 'Eine Liste von Bitcoin-Meetups und Einundzwanzig-Treffen im D/A/CH/S/LI/LU-Raum.'
- const cardImage = '/img/card/meetups.png'
- const filterOfficial = (list, official) => list.filter(meetup => (meetup.name.startsWith('Einundzwanzig') || meetup.name.startsWith('Einezwänzg')) === official)
- const filterUnmapped = (list) => list.filter(meetup => !meetup.top || !meetup.left)
- const style = m => m.top && m.left ? `top:${m.top}%;left:${m.left}%;` : null
- const clss = m => m.top && m.left ? null : 'unmapped'
- let j = 0
block main
#meetups.wrap
@@ -27,41 +22,4 @@ block main
Die Vorlage für das Telegram-Gruppenbild findest du im [Media Kit](/media).
#map
h2 Einundzwanzig Meetups
ul.meetups
each m in filterOfficial(meetups, true)
li.official(class=clss(m) style=style(m))
a(href=m.url target="_blank" rel="nofollow noopener")
.dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
= m.name.replace('Einundzwanzig ', '').replace('Einezwänzg ', '')
if m.members
= ' '
small.members= `(${m.members})`
- j++
h2 Weitere Meetups
ul.meetups
each m in filterOfficial(meetups, false)
li(class=clss(m) style=style(m))
a(href=m.url target="_blank" rel="nofollow noopener")
.dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
= m.name.replace('Bitcoin ', '')
if m.members
= ' '
small.members= `(${m.members})`
- j++
img#dach(src=assetPath('/img/dach.svg') alt="DE, AT, CH")
#tooltip.tooltip(hidden)
#unmapped
h2 Weitere Meetups
ul.meetups
each m in filterUnmapped(meetups)
li(class=clss(m) style=style(m))
a(href=m.url target="_blank" rel="nofollow noopener")
= m.name
if m.members
= ' '
small.members= `(${m.members})`
+map(meetups)

0
static/img/adventskalender.png → static/img/card/adventskalender.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB