/* Hintergrund und Schriftart */ @font-face { font-family:"Open Sans"; src:local("Open Sans"), url("OpenSans-VariableFont_wdth,wght.ttf"); } body { font-family:"Open Sans",sans-serif; font-weight:370; margin:0.2em; max-width:90em; hyphens:auto; text-align:justify; /** Deaktiviere den "text inflation" Algorithmus auf mobilen Browsern im "desktop" Modus */ -webkit-text-size-adjust: none; text-size-adjust:none; } /* Platz für die linke Spalte freihalten */ main { margin-left:16.5em; } /* Linke Spalte für die Haupt-Navigation */ div.links { float:left; width:20em; font-size:80%; text-align:left; } /* Rechte Seitenleiste für Bilder, Gliederung, Randnotizen. */ aside { float:right; width:25%; max-width:20em; font-size:80%; margin-left:1em; text-align:left; } /* Bilder */ img { margin:0.2em; width:26em; max-width:99%; } a img { border:0; } /* Bilder in der Seitenleiste zentriert */ aside img { display:block; margin:auto; } /* Mein Logo, der Schmetterling */ img.logo { width:60%; } /* Überschriften */ h1 { margin-top:0.5em; font-size:175%; text-align:left; } h2 { font-size:150%; text-align:left; } h3 { font-size:125%; text-align:left; } h4 { font-size:100%; text-align:left; } /* Tabellen */ table { border-collapse:collapse; margin-top:0.5em; margin-bottom:0.5em; } td { border:1px solid #808080; padding:0.3em; text-align:left; } th { border:1px solid #808080; padding:0.3em; background-color:#F0F0F0; text-align:left; } th sup { font-weight: normal; } /* Listen */ li { text-align:left; } /* Gelber Kasten für Quelltexte */ div.code { overflow:auto; background-color:#F5F6CE; margin-top:0.5em; margin-bottom:0.8em; border-style:solid; border-width:1px; border-color:#000000; font-family:monospace; font-size:90%; padding-top:0; padding-bottom:0; padding-left:0.3em; padding-right:0.3em; border-radius:0.5em; hyphens:manual; text-align: left; } /* Hervorhebung in Quelltexten */ div.code b { background-color:#FCFC00; font-weight:bold; } /* Fußnoten */ ol.footnote { font-size:80%; padding-left: 2em; } ol.footnote::before { content: "________________________________"; } /* Vorformatierten Text notfalls mit Scrollbalken */ pre { overflow:auto; } /* Steuert den Google Übersetzer, absichtlich leer */ .notranslate {} /* Grauer Kasten */ div.kasten { background-color:#C0C0C0; padding:0.3em; font-weight:bold; margin-bottom:1em; border-radius:0.5em; } div.kasten a { text-decoration:none; } div.kasten a:hover { background-color:#808080; } div.kasten p { background-color:#F0F0F0; padding:0.5em; margin:0; font-weight:normal; border-radius:0.5em; } /* Navigationsliste */ nav { background-color:#C0C0C0; padding:0.3em; font-weight:bold; margin-bottom:1em; border-radius:0.5em; } nav ul { list-style:none; background-color:#F0F0F0; padding:0.3em; margin:0; font-weight:normal; border-radius:0.3em; text-align: left; } nav ul ul { padding-top:0; padding-bottom:0; padding-left:1em; padding-right:0; } nav li { margin-top:0.3em; margin-bottom:0.3em; list-style:none; } nav a { display:block; text-decoration:none; color:black; border-style:none; outline-style:none; } nav a:hover { background-color:#808080; } /* Das Javascript hebt die aktive Seite in der Navigation hervor */ nav a.active { color:purple; } /* Sachen die nur auf kleinem Display sichtbar sein sollen */ .only_small { display:none; } /* Sachen die nur auf großem Display sichtbar sein sollen */ .only_large { display:none; } /* Zusätzliche Dekorationen für große Displays (PC) */ @media only screen and (min-width:70em) { /* Mit Hintergrundbild, der Inhalt zentriert */ body { background-image:url(pcb2.png); background-repeat:repeat; margin:auto; padding:0.5em; } /* Weißes Blatt mit runden Ecken */ main { background-color:white; padding-left:1em; padding-right:1em; padding-top:0.1em; padding-bottom:0.2em; border-radius:0.5em; margin-bottom:2em; } /* Die linke Spalte fixieren und mit eigendem Scrollbalken versehen */ div.links { position:fixed; } div.links nav ul { max-height:92vh; overflow-y:auto; } /* Sachen die nur auf großen Displays sichtbar sein sollen */ .only_large { display:initial; } } /* Ausnahmen für kleine Displays (Tablets) */ @media only screen and (max-width:60em) { /* Die linke Spalte mit der Navigation ausblenden, aber nicht auf der Startseite */ div.links:not(.startpage) { display:none; } /* Den ganzen Bildschirm ohne Rand ausnutzen */ main:not(.startpage) { margin: 0; } /* Sachen die nur auf kleinem Display ohne Navigation sichtbar sein sollen */ .only_small { display:initial; } } /* Ausnahmen für sehr kleine Displays (Smartphones) */ @media only screen and (max-width:40em) { /* Die Navigation auf der Startseite erscheint über dem Text in ganzer Display-Breite und groß für dicke Finger */ div.links.startpage { display:initial; float:none; font-size:100%; } /* Den ganzen Bildschirm ohne Rand ausnutzen */ main { margin: 0; } /* Font der rechten Seitenleiste sehr klein */ aside { font-size:60%; } } /* Ausnahmen für Drucker */ @media only print { /* Seitenränder */ @page { margin-left:2.5cm; margin-right:2cm; margin-top:1.5cm; margin-bottom:1.5cm; } /* Etwas kleinere Schrift als normal */ body { font-size:10pt; } /* Linke Spalte wird ausgeblendet */ div.links { display:none; } main { margin:0; } /* Keine Scrollbalken und kein farbiger Hintergrund in Quelltexten */ div.code { overflow:hidden; background:none; } /* Kasten ohne Hintergrundfarbe, dafür aber mit Rahmen */ div.kasten { border:1px solid black; background-color:transparent; } /* Navigation und Gliederung ausblenden */ nav { display:none; } /* Navigation und Gliederung ohne Hintergrundfarbe, dafür aber mit Rahmen nav { border:1px solid black; background-color:transparent; } */ /* Links nicht hervorheben */ a { text-decoration:none; color:currentcolor; } /* URL hinter Links schreiben */ a:after { content:" (" attr(href) ") "; font-weight:normal; } /* In der Navigation sollen die URLs aber nicht gedruckt werden. */ nav a:after { content:""; } /* Bei anklickbaren Bildern soll die URL nicht gedruckt werden. Kann nicht jeder Browser */ a:has(> img):after { content:""; } /* Links, deren URL nicht gedruckt werden soll. */ a.noprint:after { content:""; } /* Andere Sachen, die nicht gedruckt werden sollen */ :not(a).noprint { display:none; } /* Seitenwechsel */ .neueSeite { clear: all; page-break-before: always; } }