Beispiel:Advent-2019.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Adventskalender 2019</title> <style> html { 

 background: #e6f2f7;

} ol { 

 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 color: black;
 max-width: 120rem;
 margin: 1rem auto;
 padding: 0 1rem;  
 counter-reset: my-awesome-counter;
 list-style: none;

} @media (min-width: 80rem) { /* 4x6 */ 

 ol {
   grid-template-columns: repeat(4, 1fr);
 }

} @media (min-width: 120rem) { /* 6x4 */ 

 ol {
   grid-template-columns: repeat(6, 1fr);
 }

} li { 

 padding: 1rem;
 border: 1px solid #c32e04;
 background: #e6f2f7; 
 counter-increment: my-awesome-counter;
 position: relative;
 min-height: 10em;
 display: flex;
 align-items: center;
 justify-content: center;

} li::before { 

 --size: 2rem;
 content: counter(my-awesome-counter);
 position: absolute;
 color: #e6f2f7; 
 font-size: calc(var(--size) * .75);
 font-weight: bold;
 right: calc(var(--size) * .25);
 top: calc(var(--size) * .25);
 line-height: var(--size);
 width: var(--size);
 height: var(--size);
 padding: calc(var(--size) * .2);
 transform: rotate(-10deg);
 background: #c32e04;
 border-radius: 50%;
 text-align: center;
 box-shadow: 1px 1px 0 #999;

}

li, li a { 

 color: transparent;
 transition: all 0.5s;
 text-decoration: none;

} li:hover, li a:hover, li a:focus { 

 color: black; 
 transition: all 0.5s;

} li a:hover, li a:focus, li.open a { 

 color: #306f91

} h1 { 

 font-size: 3rem;  
 text-align: center;
 color: #306f91;
 max-width: 120rem;
 padding: 0 1rem;
 margin: 0 auto;

}

h1 a { 

 vertical-align: -1.5rem;
 margin-right: 1rem;

} li > p, li > a.ads { 

 text-align: center;

} a.ads { 

 width: 100%;
 padding: 3rem 0;

} li h2, li p:first-child { 

 margin-top: 0;

} li p:last-child { 

 margin-bottom: 0;

} li:nth-of-type(1) { 

 order: 5;

} li:nth-of-type(4) { 

 order: 7;

} li:nth-of-type(5) { 

 order: 21;

} li:nth-of-type(6) { 

 order: 18;

} li:nth-of-type(8) { 

 order: 5;

} li:nth-of-type(9) { 

 order: 7;

} li:nth-of-type(10) { 

 order: 21;

} li:nth-of-type(12) { 

 order: 18;

} li:nth-of-type(14) { 

 order: 5;

} li:nth-of-type(16) { 

 order: 7;

} li:nth-of-type(21) { 

 order: 2;

} li:nth-of-type(22) { 

 order: 18;

} </style> <script> 

 function setOpenDays () {
   if (localStorage) {
     for (let k = 1; k < 25; k++) {
       if (localStorage.getItem('SELFday'+k)) {
         document.querySelector('li:nth-child('+k+')').classList.add('open');
       }
     }
   }
 }
 function saveTheDoor (event) {
   let elem = event.target,
       listitem = elem.closest('li'),
       list = elem.closest('ol'),
       day = Array.prototype.indexOf.call(list.children, listitem) + 1;
   listitem.classList.add('open');
   if (localStorage) {
     localStorage.setItem('SELFday'+day,'open');
   }
 }

 document.addEventListener('DOMContentLoaded', setOpenDays);
 document.addEventListener('DOMContentLoaded', function () {
   let labels = document.querySelectorAll('li:not(.open) a:not(.ads)');
   for (let label of labels) {
     label.addEventListener('click', saveTheDoor);
   }
 });

</script> </head> <body>

<a href="https://selfhtml.org"><img src="https://wiki.selfhtml.org/images/6/66/SELF-Logo-Nikolaus.svg" alt="selfHTML-Logo" width="100"></a>Adventskalender 2019

  1. <a href="https://forum.selfhtml.org/self/2019/nov/12/svg-symbol-auf-absolute-grosse-skalieren/1760050#m1760050">

    SVG skalieren

    von Gunnar Bittersmann am 13.11.2019

    Ich hab mal ein Beispiel gebaut, in welchem dasselbe Symbol zweimal in unterschiedlichen Größen verwendet wird.

    </a>
  2. <a href="https://forum.selfhtml.org/self/2018/mar/27/footer-immer-ganz-unten/1717543#m17175430">

    Feststehender Footer

    von Gunnar Bittersmann am 27.3.2018

    Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist position: sticky das Mittel der Wahl.

    </a>
  3. <a href="https://forum.selfhtml.org/self/2019/jun/22/mathematik-zur-veroffentlichung-von-version-5-der-forumssoftware/1750933#m1750933">

    Quintupelspielerereien

    von Matthias Apsel am 22.6.2019

    Aus Anlass der Veröffentlichung von V5 unseres Forums eine mathematische Spielerei.

    </a>
  4. <a href="https://forum.selfhtml.org/self/2019/jun/5/speisekarte-mit-punkte-zwischen-speisen-und-punkt-punkt-punkt-preis/1750026#m1750026">

    Speisekarte mit Punkten

    von Gunnar Bittersmann am 05.06.2019

    Eine Beschreibungsliste (description list dl), deren Elemente jeweils links und rechts zentriert und durch Punkte verbunden sind.

    </a>
  5. <a href="https://forum.selfhtml.org/self/2018/jan/7/problem-mit-css-grid/1711672#m1711672">

    Ausklappbare Navigation

    von Gunnar Bittersmann am 09.01.2018

    Eine Navigation (nav ul), die auf kleinen Viewports hinter einem Button verschwindet.

    </a>
  6. <a href="https://forum.selfhtml.org/self/2018/sep/15/text-anordnen/1732000#m1732000">

    Header links neben Text

    von Gunnar Bittersmann am 15.09.2018

    Ein Header mit einem teaser, der mit Grid links neben dem Haupttext angeordnet wird.

    </a>
  7. <a href="https://forum.selfhtml.org/self/2018/jul/26/frage-zum-wiki-artikel-border/1727371#m1727371">

    Überschrift mit Rand

    von Gunnar Bittersmann am 26.07.2018

    Eine Überschrift, deren Rand nur so lang wie der Inhalt ist → geht mit max-width: max-content

    </a>
  8. <a href="https://forum.selfhtml.org/self/2019/feb/8/mathematik-zum-wochenende/1742252#m1742252">

    Geraden in der Ebene

    von Matthias Apsel am 08.02.2018

    In wieviele Gebiete kann eine Ebene durch n Geraden geteilt werden?

    </a>
  9. <a href="https://forum.selfhtml.org/self/2018/jan/5/grafik-zerstoert-meinen-read-more-code/1711399#m1711399">

    "read-More"-Toggle

    von Gunnar Bittersmann am 05.01.2018

    Ein Umschalter, der per CSS weiteren Text / Listenelemente ein- und ausblendet.

    </a>
  10. <a href="https://forum.selfhtml.org/self/2018/sep/25/display-flex-der-standardwert-und-andere-begrifflichkeiten/1733067#m1733067">

    Flexbox-Achsen

    von Gunnar Bittersmann am 28.09.2018

    Ob die Blockachse vertikal oder horizontal ist, hängt einerseits von der Schreibrichtung (writing-mode) ab, andererseits natürlich auch von flex-direction.

    </a>
  11. <a href="https://forum.selfhtml.org/self/2018/aug/25/kalender-tagesansicht/1729983#m1729983">

    Terminkalender

    von Gunnar Bittersmann am 25.08.2018

    Ein Terminkalender mit grid, der die Termine automatisch anordnet; sich nicht überlappende Termine sind untereinander, es werden nur so viele Spalten beansprucht wie nötig.

    </a>
  12. <a href="https://forum.selfhtml.org/self/2019/oct/29/trenne-niemals-st/1759449#m1759449">

    Checkbox und Label

    von Rolf B. am 29.10.2019

    Checkboxen, die mit ihrer Beschriftung immer in einer Zeile bleiben.

    </a>
  13. <a href="https://blog.zeit.de/mathe/allgemein/freitag-13-aberglaube-mathe/">

    Freitag, der 13.

    von Christian Hesse, zeit.de

    Der längste Abstand zwischen zwei solchen Freitagen beträgt 61 Wochen - zum Beispiel von Oktober '18 bis ?

    </a>
  14. <a href="https://forum.selfhtml.org/self/2019/nov/03/tabellenspalte-bei-hover-markieren/1759706#m1759706">

    Tabellenspalten markieren

    von Gunnar Bittersmann am 4.11.2019

    Im verlinkten Thread gibt es mehrere Beispiele, wie sich Tabellenspalten bei :hover markieren lassen.

    </a>
  15. <a href="https://forum.selfhtml.org/self/2018/nov/3/programmierung-zum-wochenende/1735656#m1735656">

    Two Prisoners In Paradise

    von Matthias Apsel am 3.11.2018

    Die Gefangenen stellen sich im Kreis auf und durch fortlaufendes Abzählen wird jeder dritte wieder in die Zelle zurückgeschickt.

    </a>
  16. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Buttons_und_Schalter#Vor.C3.BCberlegungen">

    Buttons gestalten

    von Gunnar Bittersmann am 24.02.2019

    Vielleicht nicht die beste Idee, einen Button nicht aussehen zu lassen wie einen Button.

    </a>
  17. <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Zitate_interessant_gestalten#Blockzitat_mit_Zierelementen">

    Blockzitat mit Zierelementen

    von Gunnar Bittersmann am 19.01.2018

    SVG zur Hilfe! Damit kriegt man schnell zwei Linien hin und auch das Anführungszeichen dazwischen.

    </a>
  18. <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox/Feststehender_Footer#Feste_Breite_mit_flexiblem_padding">

    feste Breite mit flexiblem Padding

    von Gunnar Bittersmann am 17.12.2018

    header kann links und rechts padding haben und Flexbox sein.

    </a>
  19. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS#Alternative:_klickbare_Fl.C3.A4che_durch_Pseudoelement_vergr.C3.B6.C3.9Fern">

    klickbare Flächen vergrößern

    von Gunnar Bittersmann am 27.02.2018

    Die klickbare Fläche wird dann mit absolut positioniertem a::after-Pseudoelement auf die Größe der Box ausgedehnt werden.

    </a>
  20. <a href="https://forum.selfhtml.org/self/2019/jul/26/struktur-barrierefreier-formulare/1753845#m1753845">

    Barrierefreie Formulare

    von Gunnar Bittersmann am 26.07.2019

    Die Spec verbietet nicht details in label; details ist ja kein labelable element.

    </a>
  21. <a href="https://wiki.selfhtml.org/wiki/HTML/Web_Components/custom_elements#Listen_im_Tabellen-Look">

    Listen im Tabellen-Look

    von Gunnar Bittersmann am 30.03.2019

    Listen lassen sich wie Tabellen stylen. Custom Elements sorgen dafür, dass die Adressen untereinander stehen.

    </a>
  22. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Adventskalender">

    Adventskalender-Tutorial

    von Matthias Scharwies

    Wie baut man eigentlich so einen Adventskalender?

    </a>
  23. <a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Adventskalender">

    Adventskalender-Tutorial Teil 2

    von Matthias Apsel

    die Komfort-Variante unseres Adventskalenders mit PHP

    </a>
  24. <a href="https://blog.selfhtml.org/2019/12/24/selfhtml-bedankt-sich-fuer-spenden-im-jahr-2019/">

    SELFHTML sagt Dankeschön.

    von Matthias Apsel

    für eine Reihe von Zuwendungen und Fördermitgliedschaften

    </a>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Advent-2019.html&oldid=100199“