diff --git a/content/adventskalender.json b/content/adventskalender.json new file mode 100644 index 00000000000..8ec5bf42651 --- /dev/null +++ b/content/adventskalender.json @@ -0,0 +1,23 @@ +[ + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {} +] diff --git a/package-lock.json b/package-lock.json index 24f260874a7..47566ed5001 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "node-file-rev": "1.1.4", "npm-run-all": "4.1.5", "onchange": "7.1.0", - "postcss": "8.4.1", + "postcss": "8.4.4", "postcss-calc": "8.0.0", "postcss-cli": "9.0.2", "postcss-custom-media": "8.0.0", @@ -3129,9 +3129,9 @@ } }, "node_modules/postcss": { - "version": "8.4.1", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.1.tgz", - "integrity": "sha512-WqLs/TTzXdG+/A4ZOOK9WDZiikrRaiA+eoEb/jz2DT9KUhMNHgP7yKPO8vwi62ZCsb703Gwb7BMZwDzI54Y2Ag==", + "version": "8.4.4", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz", + "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==", "dev": true, "dependencies": { "nanoid": "^3.1.30", @@ -7460,9 +7460,9 @@ } }, "postcss": { - "version": "8.4.1", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.1.tgz", - "integrity": "sha512-WqLs/TTzXdG+/A4ZOOK9WDZiikrRaiA+eoEb/jz2DT9KUhMNHgP7yKPO8vwi62ZCsb703Gwb7BMZwDzI54Y2Ag==", + "version": "8.4.4", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz", + "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==", "dev": true, "requires": { "nanoid": "^3.1.30", diff --git a/package.json b/package.json index 19546ee02aa..305c899a82f 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "node-file-rev": "1.1.4", "npm-run-all": "4.1.5", "onchange": "7.1.0", - "postcss": "8.4.1", + "postcss": "8.4.4", "postcss-calc": "8.0.0", "postcss-cli": "9.0.2", "postcss-custom-media": "8.0.0", diff --git a/src/adventskalender.pug b/src/adventskalender.pug new file mode 100644 index 00000000000..2f7d605f0dc --- /dev/null +++ b/src/adventskalender.pug @@ -0,0 +1,40 @@ +include includes/mixins + +block vars + - const pageTitle = "Adventskalender" + - const pageDescription = "🎄 Wir wünschen euch mit unserem Adventskalender bullishe All Time Highnachten! 🎅" + + +html(lang="en") + head + include includes/_head + link(href=assetPath("/css/adventskalender.css") rel="stylesheet") + body + main.main + p + | Wir wünschen euch bullishe + br + | All Time Highnachten! 🎅 + #tree.tree + each i in Array.from({ length: 21 }, (_, i) => i) + - const [block, url] = Object.entries(adventskalender[i])[0] || [] + ul.cube + li + li + li + if block && url + a(href=url rel="nofollow noopener" target="_blank")!= block.slice(0, 3) + "
" + block.slice(3) + li + ul.cube.logo + li + li + li: a(href="/"): +sprite("logo-square").logo + li + p + = "Danke " + a(href="https://twitter.com/validblock") @validblock + br + = " für den schönen Baum! 🎄" + script(src=assetPath("/js/adventskalender.js")) + + include includes/_footer diff --git a/src/css/base/elements.css b/src/css/base/elements.css index 63f679b2001..9a1eecd30ff 100644 --- a/src/css/base/elements.css +++ b/src/css/base/elements.css @@ -19,6 +19,7 @@ html { font-family: var(--font-family-base); font-size: var(--font-size-base); scroll-behavior: smooth; + text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/src/css/base/footer.css b/src/css/base/footer.css index a29dec9570a..b5f953725e3 100644 --- a/src/css/base/footer.css +++ b/src/css/base/footer.css @@ -11,6 +11,7 @@ @media (--L_and_up) { display: flex; flex-wrap: wrap; + align-items: center; justify-content: space-between; & p { diff --git a/src/css/base/header.css b/src/css/base/header.css index 03da9e8de64..9830b22920a 100644 --- a/src/css/base/header.css +++ b/src/css/base/header.css @@ -1,3 +1,20 @@ +.notice { + position: relative; + background: var(--color-card-bg); + transition-property: background-color; + transition-duration: var(--transition-duration-fast); + padding: var(--space-m) 0; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; + + @media (--up_to_L) { + margin-top: calc(var(--logo-height) + var(--space-xxl) * 1.65);; + margin-bottom: calc((var(--logo-height) + var(--space-xxl) * 1.65) * -.75); + } +} + .header { background-color: var(--color-body-bg); transition-property: color, background-color, box-shadow; diff --git a/src/css/base/snow.css b/src/css/base/snow.css new file mode 100644 index 00000000000..f8e33a2015c --- /dev/null +++ b/src/css/base/snow.css @@ -0,0 +1,473 @@ +.snowflake { + --size: 1vw; + width: var(--size); + height: var(--size); + background: white; + border-radius: 50%; + position: fixed; + z-index: 30000; + top: -5vh; +} + +@keyframes snowfall { + 0% { + transform: translate3d(var(--left-ini), 0, 0); + } + 100% { + transform: translate3d(var(--left-end), 102vh, 0); + } +} +.snowflake:nth-child(1) { + --size: 0.4vw; + --left-ini: 5vw; + --left-end: 0vw; + left: 54vw; + animation: snowfall 8s linear infinite; + animation-delay: -6s; +} + +.snowflake:nth-child(2) { + --size: 0.4vw; + --left-ini: -9vw; + --left-end: -9vw; + left: 64vw; + animation: snowfall 12s linear infinite; + animation-delay: -2s; +} + +.snowflake:nth-child(3) { + --size: 0.8vw; + --left-ini: 7vw; + --left-end: 5vw; + left: 86vw; + animation: snowfall 6s linear infinite; + animation-delay: -9s; +} + +.snowflake:nth-child(4) { + --size: 0.8vw; + --left-ini: -6vw; + --left-end: 2vw; + left: 66vw; + animation: snowfall 10s linear infinite; + animation-delay: -1s; +} + +.snowflake:nth-child(5) { + --size: 0.6vw; + --left-ini: 7vw; + --left-end: 7vw; + left: 10vw; + animation: snowfall 9s linear infinite; + animation-delay: -7s; +} + +.snowflake:nth-child(6) { + --size: 0.8vw; + --left-ini: 1vw; + --left-end: 7vw; + left: 91vw; + animation: snowfall 12s linear infinite; + animation-delay: -10s; +} + +.snowflake:nth-child(7) { + --size: 1vw; + --left-ini: 1vw; + --left-end: 3vw; + left: 35vw; + animation: snowfall 7s linear infinite; + animation-delay: -3s; +} + +.snowflake:nth-child(8) { + --size: 0.2vw; + --left-ini: 8vw; + --left-end: 7vw; + left: 65vw; + animation: snowfall 6s linear infinite; + animation-delay: -9s; +} + +.snowflake:nth-child(9) { + --size: 0.8vw; + --left-ini: 2vw; + --left-end: 0vw; + left: 7vw; + animation: snowfall 15s linear infinite; + animation-delay: -10s; +} + +.snowflake:nth-child(10) { + --size: 0.4vw; + --left-ini: 4vw; + --left-end: 8vw; + left: 2vw; + animation: snowfall 12s linear infinite; + animation-delay: -10s; +} + +.snowflake:nth-child(11) { + --size: 0.8vw; + --left-ini: 10vw; + --left-end: -5vw; + left: 4vw; + animation: snowfall 14s linear infinite; + animation-delay: -5s; +} + +.snowflake:nth-child(12) { + --size: 0.6vw; + --left-ini: -3vw; + --left-end: -4vw; + left: 68vw; + animation: snowfall 12s linear infinite; + animation-delay: -7s; +} + +.snowflake:nth-child(13) { + --size: 0.4vw; + --left-ini: -9vw; + --left-end: 10vw; + left: 75vw; + animation: snowfall 15s linear infinite; + animation-delay: -9s; +} + +.snowflake:nth-child(14) { + --size: 0.6vw; + --left-ini: 3vw; + --left-end: -9vw; + left: 18vw; + animation: snowfall 6s linear infinite; + animation-delay: -2s; +} + +.snowflake:nth-child(15) { + --size: 0.4vw; + --left-ini: 7vw; + --left-end: 4vw; + left: 31vw; + animation: snowfall 12s linear infinite; + animation-delay: -8s; +} + +.snowflake:nth-child(16) { + --size: 0.6vw; + --left-ini: -7vw; + --left-end: 7vw; + left: 73vw; + animation: snowfall 13s linear infinite; + animation-delay: -6s; +} + +.snowflake:nth-child(17) { + --size: 0.2vw; + --left-ini: -5vw; + --left-end: -3vw; + left: 48vw; + animation: snowfall 14s linear infinite; + animation-delay: -6s; +} + +.snowflake:nth-child(18) { + --size: 0.2vw; + --left-ini: 0vw; + --left-end: -4vw; + left: 43vw; + animation: snowfall 12s linear infinite; + animation-delay: -7s; +} + +.snowflake:nth-child(19) { + --size: 0.4vw; + --left-ini: 3vw; + --left-end: 10vw; + left: 19vw; + animation: snowfall 12s linear infinite; + animation-delay: -9s; +} + +.snowflake:nth-child(20) { + --size: 0.2vw; + --left-ini: 2vw; + --left-end: -5vw; + left: 47vw; + animation: snowfall 6s linear infinite; + animation-delay: -9s; +} + +.snowflake:nth-child(21) { + --size: 1vw; + --left-ini: 1vw; + --left-end: -6vw; + left: 16vw; + animation: snowfall 11s linear infinite; + animation-delay: -2s; +} + +.snowflake:nth-child(22) { + --size: 0.4vw; + --left-ini: -3vw; + --left-end: 9vw; + left: 20vw; + animation: snowfall 11s linear infinite; + animation-delay: -10s; +} + +.snowflake:nth-child(23) { + --size: 1vw; + --left-ini: 3vw; + --left-end: 3vw; + left: 58vw; + animation: snowfall 13s linear infinite; + animation-delay: -4s; +} + +.snowflake:nth-child(24) { + --size: 0.8vw; + --left-ini: -3vw; + --left-end: 3vw; + left: 11vw; + animation: snowfall 11s linear infinite; + animation-delay: -1s; +} + +.snowflake:nth-child(25) { + --size: 0.6vw; + --left-ini: 0vw; + --left-end: 0vw; + left: 35vw; + animation: snowfall 11s linear infinite; + animation-delay: -9s; +} + +.snowflake:nth-child(26) { + --size: 0.6vw; + --left-ini: 9vw; + --left-end: 8vw; + left: 60vw; + animation: snowfall 12s linear infinite; + animation-delay: -5s; +} + +.snowflake:nth-child(27) { + --size: 1vw; + --left-ini: -2vw; + --left-end: 8vw; + left: 6vw; + animation: snowfall 11s linear infinite; + animation-delay: -10s; +} + +.snowflake:nth-child(28) { + --size: 0.6vw; + --left-ini: 10vw; + --left-end: 1vw; + left: 21vw; + animation: snowfall 6s linear infinite; + animation-delay: -7s; +} + +.snowflake:nth-child(29) { + --size: 1vw; + --left-ini: 10vw; + --left-end: -8vw; + left: 13vw; + animation: snowfall 14s linear infinite; + animation-delay: -1s; +} + +.snowflake:nth-child(30) { + --size: 0.4vw; + --left-ini: -4vw; + --left-end: -5vw; + left: 95vw; + animation: snowfall 12s linear infinite; + animation-delay: -8s; +} + +.snowflake:nth-child(31) { + --size: 1vw; + --left-ini: 0vw; + --left-end: 3vw; + left: 92vw; + animation: snowfall 11s linear infinite; + animation-delay: -8s; +} + +.snowflake:nth-child(32) { + --size: 1vw; + --left-ini: 7vw; + --left-end: 10vw; + left: 59vw; + animation: snowfall 10s linear infinite; + animation-delay: -10s; +} + +.snowflake:nth-child(33) { + --size: 0.8vw; + --left-ini: 4vw; + --left-end: -2vw; + left: 1vw; + animation: snowfall 7s linear infinite; + animation-delay: -9s; +} + +.snowflake:nth-child(34) { + --size: 0.2vw; + --left-ini: -9vw; + --left-end: 4vw; + left: 75vw; + animation: snowfall 10s linear infinite; + animation-delay: -4s; +} + +.snowflake:nth-child(35) { + --size: 0.2vw; + --left-ini: -9vw; + --left-end: 6vw; + left: 47vw; + animation: snowfall 6s linear infinite; + animation-delay: -6s; +} + +.snowflake:nth-child(36) { + --size: 0.2vw; + --left-ini: -6vw; + --left-end: -2vw; + left: 50vw; + animation: snowfall 8s linear infinite; + animation-delay: -3s; +} + +.snowflake:nth-child(37) { + --size: 0.4vw; + --left-ini: 9vw; + --left-end: -6vw; + left: 15vw; + animation: snowfall 7s linear infinite; + animation-delay: -7s; +} + +.snowflake:nth-child(38) { + --size: 1vw; + --left-ini: -9vw; + --left-end: -3vw; + left: 94vw; + animation: snowfall 10s linear infinite; + animation-delay: -7s; +} + +.snowflake:nth-child(39) { + --size: 0.6vw; + --left-ini: 1vw; + --left-end: 8vw; + left: 29vw; + animation: snowfall 14s linear infinite; + animation-delay: -8s; +} + +.snowflake:nth-child(40) { + --size: 1vw; + --left-ini: -1vw; + --left-end: 1vw; + left: 59vw; + animation: snowfall 13s linear infinite; + animation-delay: -6s; +} + +.snowflake:nth-child(41) { + --size: 0.4vw; + --left-ini: -4vw; + --left-end: -3vw; + left: 48vw; + animation: snowfall 13s linear infinite; + animation-delay: -3s; +} + +.snowflake:nth-child(42) { + --size: 0.4vw; + --left-ini: 1vw; + --left-end: 8vw; + left: 92vw; + animation: snowfall 15s linear infinite; + animation-delay: -9s; +} + +.snowflake:nth-child(43) { + --size: 0.4vw; + --left-ini: 5vw; + --left-end: 9vw; + left: 45vw; + animation: snowfall 9s linear infinite; + animation-delay: -5s; +} + +.snowflake:nth-child(44) { + --size: 1vw; + --left-ini: 1vw; + --left-end: 6vw; + left: 76vw; + animation: snowfall 12s linear infinite; + animation-delay: -5s; +} + +.snowflake:nth-child(45) { + --size: 0.2vw; + --left-ini: 9vw; + --left-end: -7vw; + left: 13vw; + animation: snowfall 14s linear infinite; + animation-delay: -4s; +} + +.snowflake:nth-child(46) { + --size: 0.4vw; + --left-ini: 1vw; + --left-end: -7vw; + left: 72vw; + animation: snowfall 9s linear infinite; + animation-delay: -5s; +} + +.snowflake:nth-child(47) { + --size: 1vw; + --left-ini: 0vw; + --left-end: -2vw; + left: 22vw; + animation: snowfall 13s linear infinite; + animation-delay: -4s; +} + +.snowflake:nth-child(48) { + --size: 0.8vw; + --left-ini: -5vw; + --left-end: -2vw; + left: 83vw; + animation: snowfall 10s linear infinite; + animation-delay: -5s; +} + +.snowflake:nth-child(49) { + --size: 0.6vw; + --left-ini: -2vw; + --left-end: 1vw; + left: 85vw; + animation: snowfall 9s linear infinite; + animation-delay: -1s; +} + +.snowflake:nth-child(50) { + --size: 1vw; + --left-ini: -6vw; + --left-end: -4vw; + left: 26vw; + animation: snowfall 9s linear infinite; + animation-delay: -3s; +} + +/* added small blur every 6 snowflakes*/ +.snowflake:nth-child(6n) { + filter: blur(1px); +} diff --git a/src/css/main.css b/src/css/main.css index f8cd82c0454..46efe69937d 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -15,3 +15,5 @@ @import 'sections/media.css'; @import 'sections/spenden.css'; @import 'sections/soundboard.css'; + +@import 'base/snow.css'; diff --git a/src/includes/_footer.pug b/src/includes/_footer.pug new file mode 100644 index 00000000000..daa93b59e88 --- /dev/null +++ b/src/includes/_footer.pug @@ -0,0 +1,36 @@ +each i in Array.from({ length: 50 }, (_, i) => i) + div(class="snowflake") + +footer#footer.footer + .wrap + if site.block + p + | Aktualisiert um + = " " + a(href=`https://www.blockstream.info/block-height/${site.block}`) + time(datetime=site.date)= site.block + |. + p.social + a(href=site.meta.twitterUrl rel="me nofollow noopener" target="_blank" title="Twitter") + +sprite("twitter") + a(href=site.meta.telegramUrl rel="me nofollow noopener" target="_blank" title="Telegram") + +sprite("telegram") + a(href=site.meta.youtubeUrl rel="me nofollow noopener" target="_blank" title="YouTube") + +sprite("youtube") + a(href=site.meta.instagramUrl rel="me nofollow noopener" target="_blank" title="Instagram") + +sprite("instagram") + a(href=site.meta.sphinxUrl rel="me nofollow noopener" target="_blank" title="Sphinx") + +sprite("sphinx") + a(href=site.meta.mastodonUrl rel="me nofollow noopener" target="_blank" title="Mastodon") + +sprite("mastodon") + a(href=site.meta.soundcloudUrl rel="me nofollow noopener" target="_blank" title="Soundcloud") + +sprite("soundcloud") + p + a(href="/kontakt/") Kontakt + = " · " + a(href="/datenschutz/") Datenschutz + = " · " + | Made with 💛 by + = " " + a(href="https://d11n.net" target="_blank" rel="nofollow noopener") d11n + |. diff --git a/src/includes/_head.pug b/src/includes/_head.pug new file mode 100644 index 00000000000..69f06e1a74c --- /dev/null +++ b/src/includes/_head.pug @@ -0,0 +1,37 @@ +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) +if pageCard + meta(property="og:image" content=assetUrl(pageCard, "http")) + meta(property="og:image:secure_url" content=assetUrl(pageCard)) + meta(property="og:image:width" content=pageCardSize) + meta(property="og:image:height" content=pageCardSize) +block og + meta(property="og:type" content="website") +meta(property="twitter:card" content="summary") +meta(property="twitter:title" content=pageTitle) +meta(property="twitter:description" content=pageDescription) +if pageCard + 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/inconsolata-400.woff2")) +link(rel="preload" as="font" crossorigin href=assetPath("/fonts/inconsolata-700.woff2")) +link(rel="apple-touch-icon" href=assetPath("/img/favicon/apple-touch-icon.png")) +link(rel="icon" href=assetPath("/img/favicon/favicon.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")) +link(rel="alternate" type="application/rss+xml" title="Podcast Feed" href=site.meta.publicFeedUrl) +script(src=assetPath("/js/player.js") defer) +script(src=assetPath("/js/main.js")) +title= pageTitle +noscript + style. + .theme { display: none; } diff --git a/src/includes/template.pug b/src/includes/template.pug index 0c543a9e0fc..1bcfb5c9fc9 100644 --- a/src/includes/template.pug +++ b/src/includes/template.pug @@ -12,42 +12,13 @@ block vars 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:image" content=assetUrl(pageCard, "http")) - meta(property="og:image:secure_url" content=assetUrl(pageCard)) - meta(property="og:image:width" content=pageCardSize) - meta(property="og:image:height" content=pageCardSize) - block og - meta(property="og:type" content="website") - 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/inconsolata-400.woff2")) - link(rel="preload" as="font" crossorigin href=assetPath("/fonts/inconsolata-700.woff2")) - link(rel="apple-touch-icon" href=assetPath("/img/favicon/apple-touch-icon.png")) - link(rel="icon" href=assetPath("/img/favicon/favicon.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")) - link(rel="alternate" type="application/rss+xml" title="Podcast Feed" href=site.meta.publicFeedUrl) - script(src=assetPath("/js/player.js") defer) - script(src=assetPath("/js/main.js")) - title= pageTitle - noscript - style. - .theme { display: none; } + include _head body + .notice + .wrap + = "🎄 Wir wünschen euch mit unserem " + a(href="/adventskalender/") Adventskalender + = " bullishe All Time Highnachten! 🎅" header.header#header .wrap a(href="/").brand @@ -82,36 +53,4 @@ html(lang="en") main.main block main - footer#footer.footer - .wrap - if site.block - p - | Aktualisiert um - = " " - a(href=`https://www.blockstream.info/block-height/${site.block}`) - time(datetime=site.date)= site.block - |. - p.social - a(href=site.meta.twitterUrl rel="me nofollow noopener" target="_blank" title="Twitter") - +sprite("twitter") - a(href=site.meta.telegramUrl rel="me nofollow noopener" target="_blank" title="Telegram") - +sprite("telegram") - a(href=site.meta.youtubeUrl rel="me nofollow noopener" target="_blank" title="YouTube") - +sprite("youtube") - a(href=site.meta.instagramUrl rel="me nofollow noopener" target="_blank" title="Instagram") - +sprite("instagram") - a(href=site.meta.sphinxUrl rel="me nofollow noopener" target="_blank" title="Sphinx") - +sprite("sphinx") - a(href=site.meta.mastodonUrl rel="me nofollow noopener" target="_blank" title="Mastodon") - +sprite("mastodon") - a(href=site.meta.soundcloudUrl rel="me nofollow noopener" target="_blank" title="Soundcloud") - +sprite("soundcloud") - p - a(href="/kontakt/") Kontakt - = " · " - a(href="/datenschutz/") Datenschutz - = " · " - | Made with 💛 by - = " " - a(href="https://d11n.net" target="_blank" rel="nofollow noopener") d11n - |. + include _footer diff --git a/static/css/adventskalender.css b/static/css/adventskalender.css new file mode 100644 index 00000000000..bb191ea360f --- /dev/null +++ b/static/css/adventskalender.css @@ -0,0 +1,207 @@ +html { + -webkit-text-size-adjust: none; + touch-action: manipulation; +} + +body { + background: radial-gradient(ellipse at bottom, var(--color-neutral-90) 0%, var(--color-neutral-95) 100%); + background-attachment: fixed; + color: var(--color-neutral-10); +} + +html, +body{ + min-height: 100%; +} + +main { + display: flex; + align-items: center; + justify-content: center; +} + +:after, +:before, +a, +body, +div, +html, +main, +ul { + margin: 0; + border: 0; + padding: 0; + box-sizing: border-box; +} + +.main { + max-width: 100%; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + flex: 1 0 auto; + padding: var(--space-xxl) 0; +} + +.main p { + font-size: 1rem; + margin: var(--space-xxl) var(--space-l); + text-align: center; +} + +.tree { + width: 377px; + height: 437px; + position: relative; + flex: 0 0 437px; +} + +.cube { + --size: 44px; + --space: calc(var(--size) / 3); + width: var(--size); + height: var(--size); + position: absolute; + left: 6px; + transform-style: preserve-3d; + transition: all 0.25s ease-in-out; + transform: rotateX(-21deg) rotateY(-21deg) rotateZ(0deg); + z-index: 1; +} +.cube li:nth-child(1) { + transform: rotateX(90deg) translateX(0) translateY(0) translateZ(calc(var(--size) / 2)); +} +.cube li:nth-child(2) { + transform: rotateY(-90deg) translateX(0) translateY(0) translateZ(calc(var(--size) / 2)); +} +.cube li:nth-child(3) { + transform: translateX(0) translateY(0) translateZ(calc(var(--size) / 2)); + background: #377e22; + color: #FFF; + display: flex; + justify-content: center; + align-items: center; + font-size: 11px; +} +.cube li:nth-child(4) { + transform: rotateY(90deg) translateX(0) translateY(0) translateZ(calc(var(--size) / 2)); + background: #123e04; +} +.cube:nth-child(1) { + top: 0; +} +.cube:nth-child(2), .cube:nth-child(3) { + top: calc(var(--size) + var(--space)); +} +.cube:nth-child(4), .cube:nth-child(5), .cube:nth-child(6) { + top: calc((var(--size) + var(--space)) * 2); +} +.cube:nth-child(7), .cube:nth-child(8), .cube:nth-child(9), .cube:nth-child(10) { + top: calc((var(--size) + var(--space)) * 3); +} +.cube:nth-child(11), .cube:nth-child(12), .cube:nth-child(13), .cube:nth-child(14), .cube:nth-child(15) { + top: calc((var(--size) + var(--space)) * 4); +} +.cube:nth-child(16), .cube:nth-child(17), .cube:nth-child(18), .cube:nth-child(19), .cube:nth-child(20), .cube:nth-child(21) { + top: calc((var(--size) + var(--space)) * 5); +} +.cube:nth-child(1) { + left: calc((var(--size) + var(--space)) * 3); +} +.cube:nth-child(2) { + left: calc((var(--size) + var(--space)) * 2.5); +} +.cube:nth-child(3) { + left: calc((var(--size) + var(--space)) * 3.5); +} +.cube:nth-child(4) { + left: calc((var(--size) + var(--space)) * 2); +} +.cube:nth-child(5) { + left: calc((var(--size) + var(--space)) * 3); +} +.cube:nth-child(6) { + left: calc((var(--size) + var(--space)) * 4); +} +.cube:nth-child(7) { + left: calc((var(--size) + var(--space)) * 1.5); +} +.cube:nth-child(8) { + left: calc((var(--size) + var(--space)) * 2.5); +} +.cube:nth-child(9) { + left: calc((var(--size) + var(--space)) * 3.5); +} +.cube:nth-child(10) { + left: calc((var(--size) + var(--space)) * 4.5); +} +.cube:nth-child(11) { + left: calc((var(--size) + var(--space)) * 1); +} +.cube:nth-child(12) { + left: calc((var(--size) + var(--space)) * 2); +} +.cube:nth-child(13) { + left: calc((var(--size) + var(--space)) * 3); +} +.cube:nth-child(14) { + left: calc((var(--size) + var(--space)) * 4); +} +.cube:nth-child(15) { + left: calc((var(--size) + var(--space)) * 5); +} +.cube:nth-child(16) { + left: calc((var(--size) + var(--space)) * .5); +} +.cube:nth-child(17) { + left: calc((var(--size) + var(--space)) * 1.5); +} +.cube:nth-child(18) { + left: calc((var(--size) + var(--space)) * 2.5); +} +.cube:nth-child(19) { + left: calc((var(--size) + var(--space)) * 3.5); +} +.cube:nth-child(20) { + left: calc((var(--size) + var(--space)) * 4.5); +} +.cube:nth-child(21) { + left: calc((var(--size) + var(--space)) * 5.5); +} +.cube li { + position: absolute; + transition: all 0.5s ease-in-out; + width: 100%; + height: 100%; + overflow: hidden; + background: #1e6608; +} +.cube li a { + color: #FFF !important; + font-weight: var(--font-weight-bold); +} + +.logo { + --size: 72px; + padding: 7px; + color: #FFF; + left: calc((var(--size) + var(--space)) * 1.65); + top: 333px; + z-index: 0; +} +.logo li { + background: #53320B; +} +.logo li:nth-child(3) { + background: #683F0D; +} +.logo li:nth-child(4) { + background: #4A2B04; +} +.logo svg { + width: 63px; + height: 63px; + display: block; +} diff --git a/static/js/adventskalender.js b/static/js/adventskalender.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/js/main.js b/static/js/main.js index c1a8308eaa6..ae2939edc65 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -43,12 +43,15 @@ document.addEventListener("DOMContentLoaded", () => { "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype ) { - const headerObserver = new IntersectionObserver(entries => { - const { boundingClientRect: { y, height } } = entries[0] - const fn = Math.abs(y) > height ? 'add' : 'remove' - document.body.classList[fn]('topbar') - }) - headerObserver.observe(document.getElementById('header-anchor')) + const headerAnchor = document.getElementById('header-anchor') + if (headerAnchor) { + const headerObserver = new IntersectionObserver(entries => { + const { boundingClientRect: { y, height } } = entries[0] + const fn = Math.abs(y) > height ? 'add' : 'remove' + document.body.classList[fn]('topbar') + }) + headerObserver.observe(headerAnchor) + } } // List shuffling diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js index e30ea8893d4..1e6349ccbc1 100644 --- a/tasks/generate_pages.js +++ b/tasks/generate_pages.js @@ -11,6 +11,7 @@ const team = require('../content/team.json') const crew = require('../content/crew.json') const meetups = require('../content/meetups.json') const soundboard = require('../content/soundboard.json') +const adventskalender = require('../content/adventskalender.json') const renderPage = (template, out, data = {}) => { const file = resolve(__dirname, '..', `src/${template}.pug`) @@ -36,6 +37,7 @@ renderPage('events/satoshis-bleibe-2022', 'events/satoshis-bleibe-2022', { navCu renderPage('verein', 'verein', { navCurrent: 'verein' }) renderPage('kontakt', 'kontakt', { navCurrent: 'kontakt' }) renderPage('datenschutz', 'datenschutz', { navCurrent: 'datenschutz' }) +renderPage('adventskalender', 'adventskalender', { adventskalender }) 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') })