Changeset 5e3be97 in Klonkt

Timestamp:

06/26/2026 01:56:02 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

1ecbf71

Parents:

9e5438e

Message:

style(fedi-tabs): full-width back button, centered tabs, no scrollbar (wrap)

Big full-width 'back to site' at the top; tabs centered and wrap onto multiple rows on
narrow screens instead of horizontal-scrolling (removes the scrollbar).

File:

• src/views/partials/fedi-tabs.ejs (modified) (2 diffs)

src/views/partials/fedi-tabs.ejs

@@ -21 +21 @@
 <style>
 .fedi-bar { margin: 0 0 1.25rem; }
-.fedi-bar-back { margin: 0 0 1rem; }
-.fedi-tabs { display: flex; gap: .1rem; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
+/* Big, full-width "back to site" button at the top of the Fediverse section. */
+.fedi-bar-back { display: block; width: 100%; box-sizing: border-box; text-align: center; margin: 0 0 1rem; padding: .7rem 1rem; }
+/* Tabs centered, wrap onto multiple rows on narrow screens (no scrollbar). */
+.fedi-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .25rem;
   border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
-.fedi-tabs::-webkit-scrollbar { height: 4px; }
-.fedi-tab { flex: 0 0 auto; padding: .55rem .85rem; white-space: nowrap; text-decoration: none;
+.fedi-tab { padding: .55rem .85rem; white-space: nowrap; text-decoration: none;
   color: var(--ink-soft, #888); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
 .fedi-tab:hover { color: var(--ink, #000); }
@@ -31 +32 @@
 .fedi-tab-badge { display: inline-block; min-width: 1.15em; padding: 0 .3em; border-radius: 999px;
   background: var(--accent, #e8b04b); color: #fff; font-size: .68rem; line-height: 1.5; text-align: center; vertical-align: middle; }
-@media (max-width: 520px) { .fedi-tab { padding: .55rem .7rem; font-size: .92rem; } }
+@media (max-width: 520px) { .fedi-tab { padding: .55rem .6rem; font-size: .92rem; } }
 </style>