in der Seite — dasselbe Zugestaendnis wie * .fenster im Urlaub: ein Element AUSSERHALB von gibt es in HTML * nicht, und die beiden Pseudo-Elemente von sind vergeben. * =========================================================================== * * WO DIE BAENDER LIEGEN — in Pixeln vom UNTEREN Rand, wie im Urlaubsmodus. * Der Baer sitzt mit den Fuessen bei window.innerHeight - 30 (menu.html, * groundY), also in festem Abstand. Prozentbaender wuerden ihn auf einem * hohen Bildschirm in den Himmel setzen. * * Horizont 230 / 168 px <- dort beginnt das Schneefeld * Tatra dahinter, ragt darueber hinaus * Beskiden auf dem Horizont * Tannen im Feld, vor den Beskiden * Nahes Feld 120 → 0 / 88 → 0 * Saum die untersten 63 / 46 px * * VIER TIEFEN, KEINE VERLAEUFE AUF DEN FORMEN. Alles ist flach: jede Flaeche * eine Farbe, jede Kante hart. Rundungen und Schattierungen an Stamm oder * Grat sahen nach Plastik aus — Tiefe kommt hier allein daraus, dass * Fernes blasser und flacher ist als Nahes. */ /* -------------------------------------------------- Himmel + Feld, am Tag */ html.winter { background: linear-gradient(180deg, #b8c8dd 0%, #ccd8e6 42%, /* Dunst zum Horizont hin, sonst steht das Feld wie ausgeschnitten. */ #dfe6ee calc(100% - 230px), /* Horizont — die Kante MUSS hart sein, sonst wird Himmel zu Feld. */ #eef2f8 calc(100% - 230px), #e4eaf4 calc(100% - 120px), /* Das nahe Feld ist etwas kaelter und satter: was naeher ist, ist kraeftiger. */ #dae2ef calc(100% - 120px), #ccd6e6 100%); background-attachment: fixed; } /* Bei Nacht bleiben die Farben der SEITE die der Nacht (nacht.css), nur draussen wird es dunkel. Genau wie im Urlaubsmodus. */ html.winter.nacht { background: linear-gradient(180deg, #141c38 0%, #1d2747 40%, #3a476b calc(100% - 230px), /* Schnee bei Nacht ist nicht grau, sondern blau — er nimmt das Himmelslicht auf. Deshalb hier heller als der Himmel darueber. */ #cbd2e6 calc(100% - 230px), #bac2da calc(100% - 120px), #aeb7d2 calc(100% - 120px), #a1aac9 100%); background-attachment: fixed; } /* Und der bekommt keinen mehr. Ohne diese Zeile malte der Pfirsich-Verlauf der Seite ueber alles auf negativem z-index. */ html.winter body { background: none !important; } /* ================================================================ Die Ferne Die Tatra: spitze, steile Grate mit Schneefeldern in den Rinnen. Sie steht HINTER dem Horizont und ragt darueber hinaus — deshalb liegt ihr Boden tiefer als ihre Hoehe, der Rest wird vom Feld verdeckt. Eine Kachel BREITER als der Bildschirm und in EINER Zeichnung: was zusammengehoert, gehoert in ein Bild (die Lehre aus landschaft.css). Hier zieht nichts vorbei — Berge stehen. */ html.winter::before { content: ""; position: fixed; left: 0; right: 0; bottom: 228px; height: 232px; z-index: -4; pointer-events: none; background-repeat: repeat-x; background-size: 1120px 232px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='170' preserveAspectRatio='none'%3E%3Cpath d='M0 132 L44 84 L68 106 L104 42 L132 78 L156 58 L188 110 L220 70 L240 92 L278 22 L308 76 L330 54 L360 104 L390 74 L414 98 L452 34 L482 84 L506 62 L538 110 L568 78 L590 100 L628 28 L660 82 L684 60 L716 108 L746 76 L770 98 L800 118 L820 132 L820 170 L0 170 Z' fill='%238fa0be'/%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M104 42 L88 76 L95 70 L101 82 L107 68 L114 78 L120 70 Z'/%3E%3Cpath d='M104 42 L114 92 L120 80 L126 96 L130 84 Z'/%3E%3Cpath d='M278 22 L258 66 L266 58 L274 74 L282 56 L292 70 L300 58 Z'/%3E%3Cpath d='M278 22 L290 84 L297 70 L304 90 L309 76 Z'/%3E%3Cpath d='M452 34 L434 74 L441 66 L448 82 L456 64 L465 76 L472 66 Z'/%3E%3Cpath d='M628 28 L610 70 L618 62 L625 80 L633 60 L642 74 L650 62 Z'/%3E%3Cpath d='M628 28 L640 88 L647 74 L654 92 L659 80 Z'/%3E%3C/g%3E%3C/svg%3E"); } html.winter.nacht::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='170' preserveAspectRatio='none'%3E%3Cpath d='M0 132 L44 84 L68 106 L104 42 L132 78 L156 58 L188 110 L220 70 L240 92 L278 22 L308 76 L330 54 L360 104 L390 74 L414 98 L452 34 L482 84 L506 62 L538 110 L568 78 L590 100 L628 28 L660 82 L684 60 L716 108 L746 76 L770 98 L800 118 L820 132 L820 170 L0 170 Z' fill='%233a4569'/%3E%3Cg fill='%23c9d3ea'%3E%3Cpath d='M104 42 L88 76 L95 70 L101 82 L107 68 L114 78 L120 70 Z'/%3E%3Cpath d='M104 42 L114 92 L120 80 L126 96 L130 84 Z'/%3E%3Cpath d='M278 22 L258 66 L266 58 L274 74 L282 56 L292 70 L300 58 Z'/%3E%3Cpath d='M278 22 L290 84 L297 70 L304 90 L309 76 Z'/%3E%3Cpath d='M452 34 L434 74 L441 66 L448 82 L456 64 L465 76 L472 66 Z'/%3E%3Cpath d='M628 28 L610 70 L618 62 L625 80 L633 60 L642 74 L650 62 Z'/%3E%3Cpath d='M628 28 L640 88 L647 74 L654 92 L659 80 Z'/%3E%3C/g%3E%3C/svg%3E"); } /* ============================================================== Die Naehe Die Beskiden: runde, bewaldete Ruecken mit kleinem Tannenkamm. Blasser als die Tannen im Feld, kraeftiger als die Tatra dahinter. */ html.winter::after { content: ""; position: fixed; left: 0; right: 0; bottom: 206px; height: 142px; z-index: -3; pointer-events: none; background-repeat: repeat-x; background-size: 990px 142px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='104' preserveAspectRatio='none'%3E%3Cpath d='M0 62 Q40 38 84 56 Q124 72 168 46 Q210 24 254 50 Q296 74 340 52 Q382 32 426 56 Q468 80 512 54 Q554 32 598 56 Q640 80 684 56 Q706 44 720 60 L720 104 L0 104 Z' fill='%23566b52'/%3E%3C/svg%3E"); } html.winter.nacht::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='104' preserveAspectRatio='none'%3E%3Cpath d='M0 62 Q40 38 84 56 Q124 72 168 46 Q210 24 254 50 Q296 74 340 52 Q382 32 426 56 Q468 80 512 54 Q554 32 598 56 Q640 80 684 56 Q706 44 720 60 L720 104 L0 104 Z' fill='%231a2340'/%3E%3C/svg%3E"); } /* ============================================================== Das Feld Ein

in jeder Seite. Es traegt zwei Dinge: .winter-feld::before drei Tannen im Feld (malt zuerst) .winter-feld::after der Schneesaum (malt darueber) Die Reihenfolge ergibt sich aus ::before vor ::after — der Saum liegt vor den Stammfuessen, wie Schnee, der sich anhaeuft. */ .winter-feld { display: none; } html.winter .winter-feld { display: block; position: fixed; inset: 0; z-index: -2; pointer-events: none; } /* ---- Die Tannen ---- Keine glatten Dreiecke: gestufte Astkraenze mit haengenden Spitzen und ein Stamm. Ein Dreieck ist ein Berg, eine Tanne hat Zacken. Die Zeichnung ist 390 breit (ein Handy). Am Rechner wird sie zur Kachel, damit aus drei Tannen eine Baumgruppe wird und nicht drei Tannen in der Bildmitte. */ html.winter .winter-feld::before { content: ""; position: fixed; left: 0; right: 0; bottom: 173px; height: 205px; pointer-events: none; background-repeat: repeat-x; background-size: 534px 205px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='150' preserveAspectRatio='none'%3E%3Cg fill='%234a3a2a'%3E%3Crect x='51' y='136' width='4' height='14'/%3E%3Crect x='296' y='140' width='8' height='10'/%3E%3Crect x='343' y='132' width='6' height='18'/%3E%3C/g%3E%3Cpath d='M53 60 L47 80 L49 76 L42 99 L46 95 L37 118 L43 114 L33 138 L73 138 L63 114 L69 118 L60 95 L64 99 L57 76 L59 80 Z' fill='%233f5a40'/%3E%3Cpath d='M300 8 L291 36 L294 32 L284 64 L289 60 L277 92 L285 88 L271 118 L281 114 L265 142 L335 142 L319 114 L329 118 L315 88 L323 92 L311 60 L316 64 L306 32 L309 36 Z' fill='%233f5a40'/%3E%3Cpath d='M346 44 L339 66 L341 62 L333 90 L337 86 L327 112 L333 108 L322 134 L370 134 L359 108 L365 112 L355 86 L359 90 L351 62 L353 66 Z' fill='%23476348'/%3E%3Cpath d='M300 8 L292 32 L296 28 L300 32 L304 28 L308 32 Z M300 40 L288 66 L294 61 L300 66 L306 61 L312 66 Z' fill='%23ffffff'/%3E%3Cpath d='M53 60 L46 78 L49 74 L53 78 L57 74 L60 78 Z' fill='%23ffffff'/%3E%3Cpath d='M346 44 L338 64 L342 60 L346 64 L350 60 L354 64 Z' fill='%23f2f6ff'/%3E%3C/svg%3E"); } html.winter.nacht .winter-feld::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='150' preserveAspectRatio='none'%3E%3Cg fill='%23141b30'%3E%3Crect x='51' y='136' width='4' height='14'/%3E%3Crect x='296' y='140' width='8' height='10'/%3E%3Crect x='343' y='132' width='6' height='18'/%3E%3C/g%3E%3Cpath d='M53 60 L47 80 L49 76 L42 99 L46 95 L37 118 L43 114 L33 138 L73 138 L63 114 L69 118 L60 95 L64 99 L57 76 L59 80 Z' fill='%231b2440'/%3E%3Cpath d='M300 8 L291 36 L294 32 L284 64 L289 60 L277 92 L285 88 L271 118 L281 114 L265 142 L335 142 L319 114 L329 118 L315 88 L323 92 L311 60 L316 64 L306 32 L309 36 Z' fill='%231b2440'/%3E%3Cpath d='M346 44 L339 66 L341 62 L333 90 L337 86 L327 112 L333 108 L322 134 L370 134 L359 108 L365 112 L355 86 L359 90 L351 62 L353 66 Z' fill='%23202a49'/%3E%3Cpath d='M300 8 L292 32 L296 28 L300 32 L304 28 L308 32 Z M300 40 L288 66 L294 61 L300 66 L306 61 L312 66 Z' fill='%23c9d2e8'/%3E%3Cpath d='M53 60 L46 78 L49 74 L53 78 L57 74 L60 78 Z' fill='%23c9d2e8'/%3E%3Cpath d='M346 44 L338 64 L342 60 L346 64 L350 60 L354 64 Z' fill='%23bcc6de'/%3E%3C/svg%3E"); } /* ---- Der Schneesaum ---- Eine Verwehung am unteren Rand, quer ueber die ganze Breite gezogen (preserveAspectRatio='none'). Sie deckt die Stammfuesse ab und gibt dem Baeren etwas, worin er sitzt. */ html.winter .winter-feld::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 63px; pointer-events: none; background-repeat: no-repeat; background-size: 100% 63px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='46' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q40 9 78 17 Q120 27 160 15 Q200 7 244 18 Q286 28 326 16 Q358 8 390 17 L390 46 L0 46 Z' fill='%23ffffff'/%3E%3C/svg%3E"); } html.winter.nacht .winter-feld::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='46' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q40 9 78 17 Q120 27 160 15 Q200 7 244 18 Q286 28 326 16 Q358 8 390 17 L390 46 L0 46 Z' fill='%23dde3f2'/%3E%3C/svg%3E"); } /* ============================================================ Keine Sterne Wenn es schneit, ist der Himmel zu. Sterne durch eine Schneedecke waeren falsch — und zwei Leinwaende uebereinander waeren auch zwei Mal Rechnen. nacht.js darf seine Leinwand behalten, sie wird nur nicht gezeigt. */ html.winter #nachthimmel { display: none !important; } /* Der Verlauf am unteren Rand ist fuer den Pfirsich gemacht und laege sonst als rosa Schleier auf dem Schnee. Ganz weg soll er nicht: ein wenig Dunkel unten gibt dem Feld Tiefe. */ html.winter .ground-fade { background: linear-gradient(180deg, transparent, rgba(120, 132, 168, .22)) !important; } html.winter.nacht .ground-fade { background: linear-gradient(180deg, transparent, rgba(120, 132, 168, .30)) !important; } /* ====================================== Falls doch beide Klassen zusammen Vorkommen soll das nicht: der Server gibt `winter` nur heraus, wenn kein Urlaub geschaltet ist, das Schnipsel im setzt es nur im else-Zweig, und der Probierschalter im Eck-Menue fragt ebenfalls nach. Drei Riegel. Zwei Ebenen brauchen trotzdem eine Ansage, und zwar genau die, die NICHT in den Wettstreit kommen: Berge und Ferne teilen sich html::before und html::after, dort entscheidet die Reihenfolge im (nachgemessen — mit beiden Klassen kommt die Landschaft heraus, nicht die Tatra). Das Feld und die Flocken haben dagegen eigene Selektoren und laegen einfach obendrauf: drei Tannen und ein Schneesaum vor einem Sommerhang. */ html.urlaub .winter-feld, html.urlaub #schneefall { display: none !important; } /* ================================================================ Am Handy Ein Handy ist hoch und schmal. Dieselben Baender waeren dort ein riesiger Himmel ueber einem Feld, das den halben Bildschirm einnimmt. Also alles auf 0,73 — genau der Faktor, mit dem auch die Kacheln kleiner werden, und derselbe wie in landschaft.css. Horizont 230 → 168, Feldkante 120 → 88. Eigene Zeichnungen braucht es dafuer nicht: preserveAspectRatio='none' zieht sie mit. ================================================================ */ @media (max-width: 700px) { html.winter { background: linear-gradient(180deg, #b8c8dd 0%, #ccd8e6 38%, #dfe6ee calc(100% - 168px), #eef2f8 calc(100% - 168px), #e4eaf4 calc(100% - 88px), #dae2ef calc(100% - 88px), #ccd6e6 100%); background-attachment: fixed; } html.winter.nacht { background: linear-gradient(180deg, #141c38 0%, #1d2747 40%, #3a476b calc(100% - 168px), #cbd2e6 calc(100% - 168px), #bac2da calc(100% - 88px), #aeb7d2 calc(100% - 88px), #a1aac9 100%); background-attachment: fixed; } html.winter::before { bottom: 166px; height: 170px; background-size: 820px 170px; } html.winter::after { bottom: 150px; height: 104px; background-size: 720px 104px; } /* Am Handy passt die Zeichnung genau: 390 breit, kein Wiederholen. So stehen die drei Tannen dort, wo sie entworfen wurden. */ html.winter .winter-feld::before { bottom: 126px; height: 150px; background-repeat: no-repeat; background-size: 390px 150px; } html.winter .winter-feld::after { height: 46px; background-size: 100% 46px; } }