<main lang="de">
<h1>Adventskalender</h1>
<ul>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://www.htmhell.dev/adventcalendar/" target="adventcalendars" lang="en" style="background: white">
<img src="https://bittersmann.de/talks/adventskalender/assets/htmhell-logo.svg" alt="HTMHell Advent Calendar" width="210" height="197" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://forum.selfhtml.org/advent/2023" target="adventcalendars" lang="de" style="background: white">
<img src="https://src.selfhtml.org/logo/selfhtml-wiki-q-nico.png" alt="SELFHTML-Adventskalender" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://calendar.perfplanet.com/2023/" target="adventcalendars" lang="en" style="background: white">
<img src="https://calendar.perfplanet.com/wp-content/themes/wpc2/wpclogo.png" alt="Web Performance Calendar" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://adventjs.dev/" target="adventcalendars" lang="en" style="background: url('https://bittersmann.de/talks/adventskalender/assets/adventjs-background.jpg') center/calc(100% - 1rem)">
<img src="https://bittersmann.de/talks/adventskalender/assets/adventjs.jpg" alt="AdventJS" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://12daysofweb.dev/" target="adventcalendars" lang="en" style="background: #9eedf7">
<img src="https://bittersmann.de/talks/adventskalender/assets/12daysofweb.png" alt="12 Days of Web" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a></a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://www.htmhell.dev/adventcalendar/" target="adventcalendars" lang="en" style="background: white">
<img src="https://bittersmann.de/talks/adventskalender/assets/htmhell-logo.svg" alt="HTMHell Advent Calendar" width="210" height="197" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://forum.selfhtml.org/advent/2023" target="adventcalendars" lang="en" style="background: white">
<img src="https://src.selfhtml.org/logo/selfhtml-wiki-q-nico.png" alt="SELFHTML-Adventskalender" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://calendar.perfplanet.com/2023/" target="adventcalendars" lang="en" style="background: white">
<img src="https://calendar.perfplanet.com/wp-content/themes/wpc2/wpclogo.png" alt="Web Performance Calendar" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://adventjs.dev/" target="adventcalendars" lang="en" style="background: url('https://bittersmann.de/talks/adventskalender/assets/adventjs-background.jpg') center/calc(100% - 1rem)">
<img src="https://bittersmann.de/talks/adventskalender/assets/adventjs.jpg" alt="AdventJS" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://12daysofweb.dev/" target="adventcalendars" lang="en" style="background: #9eedf7">
<img src="https://bittersmann.de/talks/adventskalender/assets/12daysofweb.png" alt="12 Days of Web" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://24ways.org/" target="adventcalendars" lang="en" style="background: #e4e5eb">
<img src="https://adrianroselli.com/wp-content/uploads/2010/12/24ways.gif" alt="24 ways" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://www.24a11y.com/" target="adventcalendars" lang="en" style="background: white">
<img src="https://bittersmann.de/talks/adventskalender/assets/24accessibility.png" alt="24 Accessibility" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://www.uxmas.com/" target="adventcalendars" lang="en" style="background: #7a1560">
<img src="https://www.uxmas.com/assets/img/uxmas-logo.svg" alt="UXmas" />
</a>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="http://webkrauts.de/serien/adventskalender/2015" target="adventcalendars" lang="de" style="background: #DDD url('https://bittersmann.de/talks/adventskalender/assets/webkrauts_background.png')">
<img src="https://bittersmann.de/talks/adventskalender/assets/webkrauts.png" alt="Webkrauts-Adventskalender" />
</a>
</li>
<li>
<button disabled=""></button>
</li>
<li>
<button disabled=""></button>
</li>
<li>
<button disabled=""></button>
</li>
<li>
<button disabled=""></button>
</li>
<li>
<button disabled=""></button>
</li>
<li>
<button disabled=""></button>
</li>
<li>
<button disabled=""></button>
</li>
<li>
<button disabled=""></button>
</li>
<li>
<button aria-expanded="false">
<span class="visually-hidden">Tür</span>
</button>
<a href="https://adrianroselli.com/2023/12/web-development-advent-calendars-for-2023.html" target="adventcalendars" lang="en" style="background: #efefef">
<img src="https://bittersmann.de/talks/adventskalender/assets/web-advent-calendars.png" alt="Web Development Advent Calendars for 2023" />
</a>
</li>
</ul>
<footer>
Foto:
<a href="https://unsplash.com/de/@anniespratt?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Annie Spratt</a>
auf
<a href="https://unsplash.com/de/fotos/zwei-schwarz-weisse-vw-kafer-miniaturen-mit-ladung-oben-drauf-4s4dN2TA4bg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
</footer>
</main>
html {
height: 100vh;
background: url(https://images.unsplash.com/photo-1573648953114-ce9f86515a3d?q=80&w=3174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) center/cover;
font-family: 'Luminari', 'Bodoni 72', 'Georgia', serif;
font-variant-numeric: lining-nums proportional-nums;
--hsl: 30deg 80% 90%;
color: hsl(var(--hsl));
}
h1 {
position: fixed;
inset: auto 0 55vh;
text-align: center;
text-indent: -0.25em;
color: hsl(var(--hsl) / 0.8);
font-family: 'Luminari', 'Apple Chancery', 'Bodoni 72', 'Georgia', serif;
font-weight: normal;
font-size: clamp(6.66vw, 3.5rem, 10vw);
line-height: 0;
text-shadow: 0 0 .2em black;
}
ul {
list-style: none;
position: fixed;
inset: 0;
margin: 0;
padding: clamp(1rem, 4vmin, 2rem);
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: clamp(1rem, 4vmin, 2rem);
@media (aspect-ratio < 1) {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
}
}
li {
position: relative;
button {
position: absolute;
inset: 0;
width: 100%;
background-color: transparent;
border: thin dashed hsl(var(--hsl) / 0.6);
font: inherit;
color: inherit;
&::after {
content: counter(list-item);
position: absolute;
inset: auto 0 0 auto;
font-size: 1.2em;
padding: 0.5rem;
}
}
a {
display: none;
position: absolute;
inset: 0;
padding: 0.5rem;
button[aria-expanded="true"] ~ & {
background: #DDD url('https://bittersmann.de/talks/adventskalender/assets/webkrauts_background.png');
display: flex;
justify-content: center;
align-items: center;
}
}
:is(img, svg) {
max-width: 100%;
max-height: 100%;
}
}
.site-logo__heaven {
display: none;
}
footer {
position: fixed;
right: 0;
bottom: 0;
padding: 0.5em;
writing-mode: vertical-rl;
scale: -1;
text-orientation: sideways;
color: hsl(var(--hsl) / 0.4);
a {
color: inherit;
text-decoration: inherit;
}
}
/* from https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
// Fisher-Yates shuffle
Array.prototype.shuffle = function () {
for (let i = this.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[this[i], this[j]] = [this[j], this[i]];
}
};
// fill array with numbers from 1 to 24
const days = Array.from({length: 24}, (element, index) => index);
days.shuffle();
const liElements = document.querySelectorAll('li');
liElements.forEach((element, index) => {
element.style.order = days[index];
});
document.documentElement.addEventListener('click', event => {
const button = event.target.closest('button');
if (button) {
button.setAttribute('aria-expanded', 'true');
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.