Changeset a78e051 in Klonkt for src/assets/css

Timestamp:

06/27/2026 01:03:36 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

196e1be

Parents:

0a7ba90

Message:

fix(ui): avatar placeholder opens popup + smaller wrapping source label on tiles

• views/partials/profile-header.ejs — the no-photo avatar (music-note/initial placeholder) is now a button that opens the profile-summary modal, like the photo case; the modal renders even without a photo (placeholder shown inside) + CSS for the placeholder.
• assets/css/style.css — the cirkel-feed 'van <site>' source label on grid tiles was 1.44rem (bigger than the post title) and overflowed on mobile; now .72rem, wraps to 2 lines, chain icon kept large (1.3rem) beside it. Same for the no-cover gradient variant.
• views/shell.ejs — bump style.css cache-buster v56->v57.

File:

• src/assets/css/style.css (modified) (1 diff)

src/assets/css/style.css

@@ -2396 +2396 @@
 }
 /* Bron-site (cirkel-feed): toont bij hover "van <site>" onder de titel. */
+/* Source label: small text that wraps to 2 lines if needed, with a big chain icon
+   beside it (the text was 1.44rem — bigger than the title — and overflowed on mobile). */
 .grid-tile-overlay-src {
     color: #fff; opacity: .85;
-    font-size: 1.44rem; margin-top: .2rem;
-    display: inline-flex; align-items: center;
-}
-.grid-tile-overlay-src::before { content: "⛓"; margin-right: .25rem; font-size: .9em; }
+    font-size: .72rem; line-height: 1.2; margin-top: .25rem;
+    display: flex; align-items: center; gap: .3rem; width: 100%;
+}
+.grid-tile-overlay-src::before { content: "⛓"; font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
 .grid-tile-gradient-src {
-    margin-top: .35rem; font-size: 1.44rem; opacity: .85;
+    margin-top: .35rem; font-size: .72rem; line-height: 1.2; opacity: .85;
     color: var(--ink-soft);
-    display: inline-flex; align-items: center;
-}
-.grid-tile-gradient-src::before { content: "⛓"; margin-right: .25rem; font-size: .9em; }
+    display: flex; align-items: center; gap: .3rem; width: 100%;
+}
+.grid-tile-gradient-src::before { content: "⛓"; font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
 .grid-tile-overlay strong {
     color: #fff;