thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish header sizing + refined Inter kicker tags

Browse Source 
- Header logo sized up to read clearly (54px desktop / 46px mobile, bars to match).
- Self-host Inter (variable, latin) — no external font calls — and use it for
  the category tags as uppercase Light (300) kickers with tight tracking, for a
  clean, polished label feel.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-01 20:30:20 +00:00
parent 0887b4b888
commit 773b2f79fe
4 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ArticleCard.svelte
+3 -2
View File
@@ -79,10 +79,11 @@
}
.body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; }
.tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.66rem; }
.tag {
background: var(--accent); color: #fff; border-radius: 999px;
padding: 2px 9px; font-weight: 600; text-transform: capitalize;
padding: 3px 11px 2px; font-family: var(--label); font-weight: 300;
text-transform: uppercase; letter-spacing: 0.055em;
}
.tag.soft { background: var(--accent-soft); color: var(--accent-deep); }
/* Source on its own line below the tags, left-justified, for uniformity. */
frontend/src/lib/components/Header.svelte
+4 -4
View File
@@ -34,10 +34,10 @@
/* a whisper of warmth under the bar */
box-shadow: 0 1px 0 rgba(40, 38, 28, 0.02);
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.bar { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: inline-flex; align-items: center; }
.logo { height: 34px; width: auto; display: block; }
.logo { height: 54px; width: auto; display: block; }
.utils { display: flex; gap: 6px; }
.utils button {
@@ -52,8 +52,8 @@
/* On phones the utilities live in the bottom tab bar ("You") instead. */
@media (max-width: 720px) {
.bar { height: 58px; justify-content: center; }
.bar { height: 66px; justify-content: center; }
.utils { display: none; }
.logo { height: 29px; }
.logo { height: 46px; }
}
</style>