Changeset dee7f02 in Klonkt


Ignore:
Timestamp:
06/26/2026 03:03:03 PM (2 months ago)
Author:
Robin Genis <roboburr@…>
Branches:
main
Children:
7ca3ffc
Parents:
474a5ed
Message:

style(fedi): remove the extra tab headroom + reduce wrapper top margin

Reverted the fedi-tabs top margin/mobile safe-area I'd added (the masthead already
clears the iOS notch via its own safe-area padding), and reduced the 5 fediverse page
wrappers' top margin 2rem -> 1rem. Less headroom on desktop/Android/iOS.

Location:
src/views
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • src/views/pages/authorize-interaction.ejs

    r474a5ed rdee7f02  
    118118
    119119<style>
    120   .auth-interact { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
     120  .auth-interact { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
    121121  .auth-interact-title { margin: 0 0 1rem; }
    122122  .auth-interact-meta { color: var(--ink-soft, #888); margin: 0 0 .75rem; }

  • src/views/pages/blocks.ejs

    r474a5ed rdee7f02  
    2727
    2828<style>
    29   .bl-wrap { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
     29  .bl-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
    3030  .bl-title { margin: 0 0 .25rem; }
    3131  .bl-lead { color: var(--ink-soft, #888); margin: 0 0 1.25rem; }

  • src/views/pages/fedi-notifications.ejs

    r474a5ed rdee7f02  
    3131
    3232<style>
    33   .nt-wrap { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
     33  .nt-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
    3434  .fedi-back { margin: 0 0 1.25rem; }
    3535  .nt-title { margin: 0 0 1.25rem; }

  • src/views/pages/following.ejs

    r474a5ed rdee7f02  
    4141
    4242<style>
    43   .tl-wrap { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
     43  .tl-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
    4444  .tl-title { margin: 0 0 .25rem; }
    4545  .tl-lead { color: var(--ink-soft, #888); margin: 0 0 1.25rem; }

  • src/views/pages/timeline.ejs

    r474a5ed rdee7f02  
    6363
    6464<style>
    65   .tl-wrap { max-width: 640px; margin: 2rem auto 3rem; padding: 0 1rem; }
     65  .tl-wrap { max-width: 640px; margin: 1rem auto 3rem; padding: 0 1rem; }
    6666  .tl-title { margin: 0 0 .15rem; font-size: clamp(1.5rem, 4vw, 1.8rem); }
    6767  .tl-lead { color: var(--ink-soft, #888); margin: 0 0 1.5rem; }

  • src/views/partials/fedi-tabs.ejs

    r474a5ed rdee7f02  
    1919<style>
    2020/* All 5 tabs share the width equally and always fit (truncate with ellipsis if needed). */
    21 .fedi-tabs { display: flex; margin: 1.25rem 0 1.5rem;
     21.fedi-tabs { display: flex; margin: 0 0 1.25rem;
    2222  border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
    2323.fedi-tab { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    … …  
    3030.fedi-tab-badge { flex: 0 0 auto; min-width: 1.15em; padding: 0 .3em; border-radius: 999px;
    3131  background: var(--accent, #e8b04b); color: #fff; font-size: .66rem; line-height: 1.5; text-align: center; }
    32 /* Mobile: no extra headroom — only the iOS safe-area inset to clear the notch. */
    33 @media (max-width: 767px) { .fedi-tabs { margin-top: env(safe-area-inset-top, 0px); } }
    3432@media (max-width: 520px) { .fedi-tab { padding: .55rem .25rem; font-size: .82rem; } }
    3533@media (max-width: 380px) { .fedi-tab { font-size: .74rem; } }
Note: See TracChangeset for help on using the changeset viewer.