/* Was diese Website der LeadMark-Vorlage hinzufuegt. * * Eigene Datei und nicht assets/css/leadmark.css: die wird aus assets/scss/ * erzeugt, und wer in die Ausgabe schreibt, verliert es beim naechsten Lauf. * Eingebunden nach leadmark.css, damit diese Regeln gewinnen. * * ── Woher die Regeln kommen ─────────────────────────────────────────────── * * Alles hier stand vorher im Dokument: 5.716 style-Attribute in 365 Seiten, * bei nur 46 verschiedenen Werten. Das meiste ist Wiederholung — die * Navigationsleiste steht in jeder der 428 Seiten, mit zehn Attributen darin. * * Solange auch nur eines davon im Markup steht, muss die * Content-Security-Policy style-src 'unsafe-inline' erlauben. Damit darf auch * jeder eingeschleuste Stil wirken, und wer Stil setzen darf, baut eine Seite * um, ohne eine Zeile JavaScript auszufuehren: einen Warnhinweis unsichtbar * machen, eine Schaltflaeche unter eine andere schieben, ein Eingabefeld ueber * ein anderes legen. * * Die Zuordnung Wert -> Klasse steht in tools/entstile.py. Sie ist einmal * gelaufen und ist seitdem Dokumentation; tools/check_site.py haelt den * Zustand. * * Mehrere Werte waren Dubletten, die sich nur in Leerzeichen oder in der * Reihenfolge der Angaben unterschieden — "padding-top:140px", "padding-top: * 140px;" und "padding-top:140px;" sind dieselbe Regel, dreimal getippt. Die * fallen hier zusammen. */ /* ── Navigationsleiste ──────────────────────────────────────────────────── * 2.934 der 5.716 Attribute waren diese eine Angabe, weil die Leiste in jede * Seite kopiert wird. Ein Selektor ersetzt sie alle, ohne dass eine einzige * Zeile Markup eine Klasse mehr braucht. */ .navbar .nav-link { font-size: 16px; } /* ── Kopfbereiche ────────────────────────────────────────────────────────── */ .kopf-140 { padding-top: 140px; } .kopf-140-140 { padding-top: 140px; padding-bottom: 140px; } .kopf-120-80 { padding-top: 120px; padding-bottom: 80px; } .kopf-60 { padding-top: 60px; } /* Der Kopf der Lehrseite: abgedunkeltes Bild mit Text darauf. */ .held-lehre { background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('../imgs/teaching/placeholder.jpg') center/cover no-repeat; min-height: 300px; padding-top: 140px; } /* ── Publikationsliste ──────────────────────────────────────────────────── * Jeder Eintrag zeigt links das Titelbild, rechts die Angaben. Das Bild darf * nicht mitschrumpfen, wenn der Titel lang ist — daher flex:0 0 auto. */ .pub-bild-halt { flex: 0 0 auto; } .pub-bild { width: 140px; max-width: 35vw; height: auto; } /* Das groessere Titelbild auf der Einzelseite einer Publikation. */ .pub-bild-gross { max-width: 320px; height: auto; } /* ── Bilder und Logos ───────────────────────────────────────────────────── * Nach Hoehe benannt, weil genau das der Unterschied ist: dieselbe Regel in * fuenf Groessen, je nachdem wofuer das Logo steht. */ .logo-32 { height: 32px; vertical-align: middle; margin-right: .5rem; } .logo-40 { height: 40px; width: auto; } .logo-96 { height: 96px; width: auto; } .logo-128 { height: 128px; vertical-align: middle; margin-right: .5rem; } .logo-140 { width: 140px; max-width: 35vw; height: auto; } .logo-230 { height: 230px; object-fit: contain; margin-bottom: 15px; } .logo-hoch60 { max-height: 60px; max-width: 100%; } .bild-150 { height: 100%; object-fit: cover; max-height: 150px; cursor: pointer; transition: transform .3s ease; } .bild-200 { height: 200px; object-fit: cover; } .bild-420 { width: 100%; object-fit: cover; max-height: 420px; } .avatar-60 { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; } /* ── Kaesten und Leisten ──────────────────────────────────────────────── */ /* Die Kopfzeile einer Karte, die beim Scrollen stehen bleibt. */ .karte-kopf { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); z-index: 1000; } /* Die dunkle Hinweisleiste unter dem Seitenkopf. */ .hinweisleiste { display: flex; align-items: center; background: #333; padding: 18px 32px; border-radius: 8px; min-width: 320px; max-width: 100%; color: #fff; } .hinweis-zahl { font-size: 2.5rem; margin-right: 24px; } .hinweis-strich { border-left: 2px solid #fff; height: 40px; margin-right: 24px; } .hinweis-spalte { display: flex; flex-direction: column; align-items: flex-start; } .hinweis-titel { font-weight: 700; letter-spacing: 1px; font-size: 1.1rem; } .hinweis-text { font-size: 1rem; opacity: .8; } /* Der eingebettete Rundgang. */ .rundgang { width: 100%; height: 500px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,.1); } /* Ein Bild mit einer Ebene darueber, die keine Klicks abfaengt. */ .mit-ebene { position: relative; width: 100%; display: inline-block; } .ebene-darauf{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } /* ── Kleinteiliges ──────────────────────────────────────────────────────── */ .blank { background: none; padding: 0; } .ohne-rahmen { border: none; } .ohne-unterstrich { text-decoration: none; } .versteckt { display: none; } .mw-100 { max-width: 100%; } .mt-60 { margin-top: 60px; } .zahl-spalte { min-width: 140px; text-align: right; } .fs-90 { font-size: .9rem; } .fw-500 { font-weight: 500; } /* Die grossen Symbole auf der Startseite, in den zwei Farben der Vorlage. */ .symbol-gross { font-size: 3rem; color: #667eea; } .symbol-gross--alt { font-size: 3rem; color: #764ba2; } /* ── Aus