DogFatherGit
401c8f006c
URSACHE ZUERST: .feld--breit stand in DREI HTML-Dateien (wissen,
scouting, dateien) -- und war NIE im CSS definiert. Das Raster
(auto-fit, minmax(170px)) gab deshalb jedem Feld dieselbe Breite, egal
was drin steht: Der Titel war so schmal wie eine Auswahl, lange
Kategorienamen wurden abgeschnitten ("1. TikTok - Grundla"), und die
Tag-Vorschlaege stapelten sich zu einer halben Seite.
Jetzt zwoelf Spalten statt auto-fit. Damit laesst sich sagen, WIE breit
ein Feld sein soll: Titel, Beschreibung und Kategorie ueber die ganze
Zeile, Stufe/Geraet/Datum zu dritt nebeneinander. Unter 860 px zwei
Spalten, unter 560 px eine. Die Klasse ist zentral definiert, also
wirken die drei betroffenen Seiten sofort mit.
Gemessen danach: Titel/Beschreibung/Kategorie je 1058 px, die drei
kleinen je 342 px, Kategorie nicht mehr abgeschnitten.
PDF-ABLAGE statt nacktem Dateifeld. Der Browser-Knopf war abgeschnitten
("K...") und sah aus wie ein Fremdkoerper. Jetzt eine eigene Flaeche:
Klicken, Ziehen oder Tastatur. Sie markiert sich gruen, sobald eine
Datei drin ist, prueft schon im Browser auf PDF und schlaegt den
Dateinamen als Titel vor, wenn der noch leer ist.
Sie steht bewusst GANZ OBEN: Man laedt etwas hoch und beschreibt DANN,
was es ist -- nicht umgekehrt.
SCHALTER statt Kaestchen fuer "besonders wichtig". Ein Kaestchen von 17
Pixeln ist auf dem Handy kaum zu treffen und sagt nicht, was passiert.
Der Schalter ist gross, zeigt seinen Zustand in Gold (dieselbe Farbe wie
die Marke "Wichtig" spaeter) und erklaert sich in einer Zeile:
"Erscheint zusaetzlich ganz oben unter Neu & wichtig".
Tag-Vorschlaege kompakter: von zehn Zeilen auf zwei.
Geprueft: Handy ohne Ueberlauf, 0 Konsolenfehler, Dateiwahl markiert die
Flaeche und fuellt den Titel, Schalter schaltet.
317 lines
12 KiB
CSS
317 lines
12 KiB
CSS
/* ===================================================================
|
|
Wissens-Bibliothek.
|
|
|
|
Zwanzig Kategorien sind viel. Damit sie trotzdem in einem Blick
|
|
erfassbar bleiben, sind sie in sechs Welten gebuendelt, und jede Welt
|
|
hat ihre eigene Farbe. Man sucht dann nicht unter zwanzig gleichen
|
|
Kacheln, sondern erst die Welt -- und da stehen nur noch drei bis vier.
|
|
|
|
Die Farben sind gedeckt und tragen nur den Symbolring, nicht die
|
|
ganze Kachel. Zwanzig farbige Flaechen waeren ein Flickenteppich.
|
|
=================================================================== */
|
|
|
|
/* ---------- Suche und Filter ---------------------------------------------- */
|
|
|
|
.suchleiste {
|
|
display: grid; gap: 12px; margin-bottom: 30px;
|
|
padding: 16px 18px;
|
|
background: rgba(255, 255, 255, .028);
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
}
|
|
.suchleiste__feld { position: relative; display: flex; align-items: center; }
|
|
.suchleiste__lupe {
|
|
position: absolute; left: 13px; width: 17px; height: 17px;
|
|
fill: none; stroke: var(--text-still); stroke-width: 1.8; stroke-linecap: round;
|
|
pointer-events: none;
|
|
}
|
|
.suchleiste__feld input {
|
|
width: 100%; padding: 11px 14px 11px 40px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
.suchleiste__feld input:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .6);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
.suchleiste__feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
|
|
|
|
.suchleiste__filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
|
.suchleiste__filter .feld-schild { margin: 0; }
|
|
.suchleiste__filter select {
|
|
padding: 8px 11px; min-width: 118px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; font-size: .85rem;
|
|
}
|
|
.suchleiste__filter select:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .6);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
|
|
/* ---------- Bloecke -------------------------------------------------------- */
|
|
|
|
.block { margin-bottom: 34px; }
|
|
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
|
|
.block__titel {
|
|
margin: 0; font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.block__zahl {
|
|
min-width: 22px; padding: 1px 8px; text-align: center;
|
|
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
}
|
|
|
|
/* ---------- Kacheln --------------------------------------------------------- */
|
|
|
|
.kacheln {
|
|
display: grid; gap: 11px;
|
|
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
|
|
}
|
|
|
|
.kachel {
|
|
--w: var(--akzent);
|
|
position: relative; display: flex; align-items: flex-start; gap: 14px;
|
|
padding: 15px 16px;
|
|
text-decoration: none; color: var(--text);
|
|
border: 1px solid transparent; border-radius: 13px;
|
|
/* Deutlich heller als der Seitenhintergrund (#05070d) -- die Kacheln
|
|
sollen als Flaechen erkennbar sein, nicht im Dunkeln verschwinden.
|
|
Gemessen: Seite liegt bei RGB(5,7,13), die Kachel bei RGB(38,49,67) --
|
|
der erste Versuch mit (27,36,51) war zu zaghaft, da kam der sichtbare
|
|
Gewinn fast nur vom Rand. */
|
|
background:
|
|
linear-gradient(#263143, #1c2637) padding-box,
|
|
linear-gradient(150deg,
|
|
color-mix(in srgb, var(--w) 62%, transparent),
|
|
rgba(255, 255, 255, .12) 55%,
|
|
color-mix(in srgb, var(--w) 26%, transparent)) border-box;
|
|
transition: transform .16s ease, box-shadow .2s ease, background .16s ease;
|
|
}
|
|
.kachel::after {
|
|
content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 1px;
|
|
background: linear-gradient(90deg, transparent,
|
|
color-mix(in srgb, var(--w) 45%, transparent), transparent);
|
|
}
|
|
.kachel:hover {
|
|
transform: translateY(-2px);
|
|
background:
|
|
linear-gradient(#2f3b50, #232e42) padding-box,
|
|
linear-gradient(150deg, var(--w), rgba(255, 255, 255, .16) 55%,
|
|
color-mix(in srgb, var(--w) 40%, transparent)) border-box;
|
|
box-shadow: 0 8px 26px -11px color-mix(in srgb, var(--w) 90%, transparent);
|
|
}
|
|
.kachel:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
|
|
}
|
|
.kachel[data-leer="ja"] { opacity: .82; }
|
|
.kachel[data-leer="ja"]:hover { opacity: 1; }
|
|
|
|
.kachel__ring {
|
|
flex: none; display: grid; place-items: center;
|
|
width: 42px; height: 42px; border-radius: 12px;
|
|
background: color-mix(in srgb, var(--w) 22%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--w) 45%, transparent);
|
|
}
|
|
.kachel__symbol {
|
|
width: 21px; height: 21px;
|
|
fill: none; stroke: var(--w); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.kachel__text { min-width: 0; flex: 1; }
|
|
.kachel__name { display: block; font-size: .93rem; font-weight: 650; line-height: 1.3; }
|
|
.kachel__beschreibung {
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
|
overflow: hidden; margin-top: 3px;
|
|
/* War --text-still (gemessen 3,6:1 auf der neuen Flaeche) -- zu blass
|
|
fuer laufenden Text. --text-leise liegt bei 6,4:1. */
|
|
font-size: .79rem; color: var(--text-leise); line-height: 1.45;
|
|
}
|
|
.kachel__zahl {
|
|
flex: none; min-width: 26px; padding: 2px 8px; align-self: flex-start;
|
|
text-align: center; font-size: .75rem; font-weight: 700;
|
|
color: color-mix(in srgb, var(--w) 40%, #ffffff);
|
|
background: color-mix(in srgb, var(--w) 20%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--w) 40%, transparent);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* Eine Farbe je Welt -- die Reihenfolge folgt der Gliederung. */
|
|
.block[data-welt="tiktok"] .kachel { --w: #3fbdf5; }
|
|
.block[data-welt="aufbau"] .kachel { --w: #8a76ff; }
|
|
.block[data-welt="bildton"] .kachel { --w: #5fc99a; }
|
|
.block[data-welt="technik"] .kachel { --w: #e8b877; }
|
|
.block[data-welt="inhalt"] .kachel { --w: #e88fb4; }
|
|
.block[data-welt="hilfe"] .kachel { --w: #8e9cb0; }
|
|
|
|
/* ---------- Karte einer Anleitung -------------------------------------------- */
|
|
|
|
.karten { display: grid; gap: 10px; }
|
|
|
|
.pdf {
|
|
padding: 15px 17px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
transition: border-color .18s ease;
|
|
}
|
|
.pdf:hover { border-color: rgba(255, 255, 255, .18); }
|
|
.pdf[data-wichtig="ja"] {
|
|
border-color: rgba(232, 192, 125, .32);
|
|
background: rgba(232, 192, 125, .045);
|
|
}
|
|
|
|
.pdf__kopf { display: flex; gap: 14px; align-items: flex-start; }
|
|
.pdf__ring {
|
|
flex: none; display: grid; place-items: center;
|
|
width: 38px; height: 38px; border-radius: 11px;
|
|
background: rgba(63, 189, 245, .1);
|
|
border: 1px solid rgba(63, 189, 245, .24);
|
|
}
|
|
.pdf__symbol {
|
|
width: 19px; height: 19px;
|
|
fill: none; stroke: var(--akzent); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.pdf__mitte { min-width: 0; flex: 1; }
|
|
.pdf__titel { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; }
|
|
.pdf__text { margin: 4px 0 0; font-size: .86rem; color: var(--text-leise); max-width: 78ch; }
|
|
.pdf__fuss { margin: 9px 0 0; font-size: .75rem; color: var(--text-still); }
|
|
|
|
.pdf__marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
|
|
.marke-stufe, .marke-geraet, .marke-wichtig, .marke-tag {
|
|
padding: 3px 9px; border-radius: 999px;
|
|
font: inherit; font-size: .71rem; font-weight: 600;
|
|
border: 1px solid var(--rand); color: var(--text-still);
|
|
background: transparent;
|
|
}
|
|
.marke-stufe[data-stufe="einsteiger"] {
|
|
color: #5fc99a; border-color: rgba(95, 201, 154, .38); background: rgba(95, 201, 154, .1);
|
|
}
|
|
.marke-stufe[data-stufe="fortgeschritten"] {
|
|
color: #e8b877; border-color: rgba(232, 184, 119, .38); background: rgba(232, 184, 119, .1);
|
|
}
|
|
.marke-stufe[data-stufe="profi"] {
|
|
color: #e88fb4; border-color: rgba(232, 143, 180, .4); background: rgba(232, 143, 180, .1);
|
|
}
|
|
.marke-geraet { color: var(--text-leise); }
|
|
.marke-wichtig {
|
|
color: #e8c07d; border-color: rgba(232, 192, 125, .4); background: rgba(232, 192, 125, .1);
|
|
}
|
|
.marke-tag { cursor: pointer; transition: color .16s ease, border-color .16s ease; }
|
|
.marke-tag:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .42); }
|
|
|
|
.pdf__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
|
|
|
|
/* ---------- Formular ---------------------------------------------------------- */
|
|
|
|
/* ---------- Ablagefläche für die PDF ------------------------------------
|
|
Ein nacktes <input type="file"> sah aus wie ein Fremdkörper und der
|
|
Knopf wurde vom Browser abgeschnitten ("K..."). Eine eigene Fläche
|
|
nimmt auch gezogene Dateien an -- der Weg, den man ohnehin erwartet. */
|
|
|
|
.pdf-ablage {
|
|
display: grid; place-items: center; gap: 5px;
|
|
padding: 26px 20px; cursor: pointer;
|
|
border: 1px dashed rgba(255, 255, 255, .2);
|
|
border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .022);
|
|
transition: border-color .18s ease, background .18s ease;
|
|
}
|
|
.pdf-ablage:hover, .pdf-ablage:focus-visible {
|
|
outline: none;
|
|
border-color: rgba(63, 189, 245, .55);
|
|
background: rgba(63, 189, 245, .06);
|
|
}
|
|
.pdf-ablage[data-drueber="ja"] {
|
|
border-color: var(--akzent); border-style: solid;
|
|
background: rgba(63, 189, 245, .1);
|
|
}
|
|
.pdf-ablage[data-fertig="ja"] {
|
|
border-style: solid; border-color: rgba(95, 201, 154, .45);
|
|
background: rgba(95, 201, 154, .07);
|
|
}
|
|
.pdf-ablage__zeichen {
|
|
width: 26px; height: 26px;
|
|
fill: none; stroke: var(--text-still); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.pdf-ablage[data-fertig="ja"] .pdf-ablage__zeichen { stroke: #5fc99a; }
|
|
.pdf-ablage__text { margin: 0; font-size: .92rem; color: var(--text-leise); text-align: center; }
|
|
.pdf-ablage__text strong { color: var(--akzent); }
|
|
.pdf-ablage__klein { margin: 0; font-size: .77rem; color: var(--text-still); }
|
|
|
|
/* ---------- Schalter „besonders wichtig“ ---------------------------------
|
|
Ein Kästchen von 17 Pixeln ist auf dem Handy kaum zu treffen und sagt
|
|
nicht, was passiert. Der Schalter ist groß, zeigt seinen Zustand und
|
|
erklärt sich in einer Zeile. */
|
|
|
|
.schalter {
|
|
display: flex; align-items: flex-start; gap: 14px;
|
|
margin-top: 18px; padding: 14px 16px; cursor: pointer;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .022);
|
|
transition: border-color .18s ease, background .18s ease;
|
|
}
|
|
.schalter:hover { border-color: rgba(255, 255, 255, .2); }
|
|
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
|
|
.schalter__gleis {
|
|
flex: none; position: relative; width: 42px; height: 24px; margin-top: 1px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .1);
|
|
border: 1px solid var(--rand);
|
|
transition: background .2s ease, border-color .2s ease;
|
|
}
|
|
.schalter__punkt {
|
|
position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
|
|
border-radius: 50%; background: var(--text-still);
|
|
transition: transform .2s ease, background .2s ease;
|
|
}
|
|
.schalter input:checked + .schalter__gleis {
|
|
background: rgba(232, 192, 125, .3);
|
|
border-color: rgba(232, 192, 125, .6);
|
|
}
|
|
.schalter input:checked + .schalter__gleis .schalter__punkt {
|
|
transform: translateX(18px); background: #e8c07d;
|
|
}
|
|
.schalter input:focus-visible + .schalter__gleis {
|
|
box-shadow: 0 0 0 3px rgba(232, 192, 125, .28);
|
|
}
|
|
.schalter:has(input:checked) {
|
|
border-color: rgba(232, 192, 125, .35);
|
|
background: rgba(232, 192, 125, .05);
|
|
}
|
|
.schalter__text { display: grid; gap: 2px; font-size: .88rem; }
|
|
.schalter__text .leise { font-size: .79rem; }
|
|
|
|
.tag-vorschlag { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
|
|
.tag-knopf {
|
|
padding: 3px 9px; cursor: pointer; font-size: .73rem;
|
|
background: transparent; border: 1px dashed var(--rand); border-radius: 999px;
|
|
color: var(--text-still); font-family: inherit;
|
|
transition: color .16s ease, border-color .16s ease;
|
|
}
|
|
.tag-knopf:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .45); border-style: solid; }
|
|
|
|
.leer-hinweis {
|
|
display: grid; gap: 12px; justify-items: center;
|
|
padding: 34px 22px; margin-bottom: 26px; text-align: center;
|
|
color: var(--text-still); font-size: .92rem;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius);
|
|
}
|
|
.leer-hinweis p { margin: 0; max-width: 52ch; }
|
|
|
|
@media (max-width: 620px) {
|
|
.kacheln { grid-template-columns: 1fr; }
|
|
.suchleiste__filter { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; }
|
|
.suchleiste__filter .knopf-still { grid-column: 1 / -1; justify-self: start; }
|
|
.pdf__ring { display: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kachel, .pdf, .marke-tag, .tag-knopf, .pdf-ablage,
|
|
.schalter, .schalter__gleis, .schalter__punkt { transition: none; }
|
|
.kachel:hover { transform: none; }
|
|
}
|