Beitragskarten reagieren auf Zeiger und Tastatur
Umut: "es gibt keinen Mausover-Effekt, das fehlt". Am Original nachgemessen und uebernommen: die Karte hebt sich um 8px mit weichem Schatten, das Bild zieht auf 1,06 auf, darueber blendet ein Hinweis ein. Die Bewegung steht vollstaendig hinter der Bewegungsschranke - wer weniger Bewegung eingestellt hat, bekommt keine, sieht den Hinweis aber trotzdem. Alles haengt zusaetzlich an :focus-within, damit der Effekt nicht nur Mausbenutzern gehoert. Der Hinweis ist fuer Vorlesesoftware ausgeblendet, weil der Titel darunter zum selben Ziel fuehrt. Ausserdem: der Leuchteffekt trug noch das Gruen der Vorlage statt der Akzentfarbe der Website. Geprueft: 391 Tests unter PHP 8.2 und 8.4, Editortest, Browserpruefung, axe ohne Verstoss. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5f23194760
commit
1b164f4c86
5 files changed
+83
-2
No files matched your search
@@ -23,7 +23,7 @@ p{hyphens:auto}
|
||||
/* Posts */
|
||||
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
|
||||
.post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}.post-card>.post-body{display:grid;gap:10px;padding:20px 22px 22px}
|
||||
.post-image{display:block}.post-image img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0;display:block;background:var(--ink)}
|
||||
.post-image{display:block;position:relative;overflow:hidden}.post-view{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 55%,transparent);color:#fff;font-weight:700;font-size:15px;letter-spacing:.4px;opacity:0}.post-card:hover .post-view,.post-card:focus-within .post-view{opacity:1}.post-image img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0;display:block;background:var(--ink)}
|
||||
.kant h1 mark,.kant h2 mark,.kant h3 mark{background:transparent;color:var(--accent);padding:0}
|
||||
.kant .post-card h3{margin:0;font-size:19px;font-weight:800;line-height:1.12;color:var(--ink);letter-spacing:-.2px}
|
||||
.post-card h3 a{text-decoration:none}
|
||||
|
||||
Reference in new issue
Block a user