Kalendarz adwentowy

Trochę przez ostatnie 2 lata zardzewiałem, więc wpadłem na szalony pomysł, który mógłby pomóc mi się na nowo rozruszać: stworzyć kalendarz adwentowy!

Pomysł

Pomysł jest dość prosty: publikować jeden post dziennie na blogu od 1 do 24 grudnia. Ale nie zakładam, że będą to długie, ambitne artykuły, jak np. ostatnie zabawy z Cosmic UI. Jasne, może jeden czy dwa takie teksty się pojawią. Niemniej większość będzie pewnie krótsza, opisująca jakieś ciekawe API czy inną JS-ową ciekawostkę. Na pewno będę chciał też trochę posiedzieć w swoich projektach (i dokończyć czasomierze), więc takie rzeczy również się pojawią. Przynajmniej raz chcę też zahaczyć o temat dostępności.

Innymi słowy: 24 grudnia blog powinien powiększyć się o 24 artykuły. Taki jest plan. Można obstawiać, kiedy się wysypię po drodze.

Kalendarz adwentowy

Natomiast trudno robić kalendarz adwentowy bez kalendarza adwentowego. Można się nim także pobawić na Codepenie:

Nie będę ukrywał, że zainspirowałem się kalendarzem adwentowym HTMHell. Tam też poszczególne wpisy są reprezentowane jako prostokątne karty z numerkami. Każda karta się odwraca po najechaniu. Jednak w HTMHell na odwrocie karty też jest tylko numer dnia. Ja z kolei umieściłem tam tytuł wpisu.

Sam układ kalendarza jest oparty o CSS grida.

.advent-calendar {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 10rem, 1fr ) ); /* 1 */
	gap: 1rem; /* 2 */
}

Ustawiłem kolumny (1) w taki sposób, by zajmowały dostępną przestrzeń, dbając przy tym by każdy element miał szerokość między 10rem a resztą dostępnej przestrzeni. Do tego dorzuciłem 1rem odstępu między elementami (2).

Z kolei same karty kalendarza nie mają sztywno określonych rozmiarów. Zamiast tego zastosowałem aspect-ratio do określenia proporcji:

.advent-item {
	aspect-ratio: 1;
}

Dzięki temu elementy zawsze są kwadratami.

Dorzuciłem też eksperymentalną ciekawostkę, dzięki której elementy kalendarza są w losowej kolejności – ale tylko w eksperymentalnej wersji Safari:

.advent-item {
	order: random(1, 24);
}

Funkcja random() losuje wartość (liczbową, tak jak tutaj, lub w konkretnej jednostce, np. rem, px czy deg) z podanego zakresu.

Z kolei do obracania kart po najechaniu użyłem techniki flip card. Natomiast ich tło wygenerowałem w narzędziu CSS Stripes Generator. W tym momencie to chyba jedyne miejsce w całym kodzie bloga, które używa sztywnych kolorów zamiast zmiennych CSS.

Przy kartach jest jeszcze jedna eksperymentalna ciekawostka, działająca z kolei tylko w eksperymentalnym Chrome’ie:

.flip-card__title {
	text-grow: consistent font-size 4rem;
}

Właściwość text-grow pozwala skalować tekst wewnątrz kontenera tak, aby zajmował jak najwięcej dostępnej przestrzeni, ale nie przekraczał określonego maksymalnego rozmiaru fonta. W naszym przykładzie tekst będzie rozszerzany, dopóki będzie miejsce lub nie osiągnie on wielkości 4rem.

Kolejnym ciekawym rozwiązaniem są… numerki. Mimo zastosowania elementu ol, postanowiłem ukryć jego numerowanie w CSS-ie i wykorzystać liczniki. Dzięki temu mogłem wyświetlić numerek jako przednią stronę karty i użyć go w animacji.

Do tego dorzuciłem zagnieżdżanie (bo czemu nie) oraz nowy sposób centrowania elementów w pionie w elementach blokowych. I oto jest: najbardziej przeinżynierowany kalendarz adwentowy w webdevowej blogosferze!

Zapraszam do wspólnej zabawy i mam nadzieję, że dojedziemy do końca w komplecie 🎄.