Ok, das erste Türchen ist schon befüllt:
https://rolfrost.de/advent.html
Das habe ich soeben programmiert und das verpflichtet für die nächsten Tage ;)
PS: Gar nicht soooo schwer, eine Pixelgrafik responsive unter eine Tabelle zu legen. Der Trick besteht darin, die Breite der Tabelle mit
innerWidth zu bestimmen. Die Höhe ist dann 3/4. Und siehe da, auf dem Smartphone sieht der Kalender genauso aus wie auf dem Laptop ;)
PS: Nun direkt im CSS
table{
background-image: url("/astro/advent.jpg");
background-size: 100%;
color: blue;
font-size: x-large;
font-weight: bold;
width: calc(100vw - 68px);
height: calc((100vw - 68px)*3/4)
}
Also Breite/Höhe ohne Javascript, dann passt sich die Tabelle an den Viewport automatisch an wenn der Browser scaliert wird -- ohne die Seite neu laden zu müssen.
Und auch morgen wieder öffnen wir ein Türchen ;)
.
Last edited: 2025-12-08 21:28:26 +0100 (CET)