diff --git a/src/css/topbar.css b/src/css/topbar.css index d58f4a5..eef7882 100644 --- a/src/css/topbar.css +++ b/src/css/topbar.css @@ -7,6 +7,7 @@ border-bottom: 1px solid var(--border); display: flex; align-items: center; + flex-wrap: nowrap; padding: 0 16px; gap: 12px; flex-shrink: 0; @@ -25,6 +26,14 @@ .logo span { color: var(--text-dim); margin: 0 5px; } .logo-sub { display: inline; } + .topbar-right { + display: flex; + align-items: center; + gap: 8px; + margin-left: auto; + flex-shrink: 0; + } + .live-dot { display: flex; align-items: center; @@ -33,7 +42,6 @@ font-family: 'Share Tech Mono', monospace; color: var(--accent-live); letter-spacing: 0.1em; - margin-left: auto; flex-shrink: 0; } .live-dot::before { @@ -117,6 +125,24 @@ border-color: var(--accent); color: var(--accent); } + .support-links { + display: flex; + gap: 4px; + flex-shrink: 0; + } + .support-link-github:hover { + border-color: var(--text); + color: var(--text); + } + .support-link-coffee { + border-color: #f6c453; + color: #f6c453; + } + .support-link-coffee:hover { + border-color: #ffd978; + color: #ffd978; + background: rgba(246, 196, 83, 0.08); + } /* ═══════════════════════════════════════════ RESPONSIVE @@ -168,7 +194,8 @@ .category-filter:hover { border-color: var(--accent2); color: var(--accent2); } .category-filter option { background: #111; color: #eee; font-family: sans-serif; } - body { overflow: hidden; } + @media (max-width: 600px) { + body { overflow: hidden; } .topbar { height: auto; @@ -179,6 +206,7 @@ .logo { font-size: 11px; } .clock { font-size: 14px; } .category-filter { max-width: 100%; } + .topbar-right { width: 100%; justify-content: space-between; } .grid-wrapper { display: none; } .mobile-view { display: block; } diff --git a/src/tpl/topbar.php b/src/tpl/topbar.php index ee54cde..edbc34d 100644 --- a/src/tpl/topbar.php +++ b/src/tpl/topbar.php @@ -62,7 +62,13 @@ foreach ($theme_files as $file) { -