gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Formalize font weight hierarchy

Browse Source
This commit is contained in:
gbanyan
2025-11-19 00:42:53 +08:00
parent 9235ab291b
commit af0d2e3a6c
3 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/nav-menu.tsx
View File

@@ -75,13 +75,13 @@ export function NavMenu({ items }: NavMenuProps) {
<FontAwesomeIcon icon={open ? faXmark : faBars} className="h-4 w-4" /> <FontAwesomeIcon icon={open ? faXmark : faBars} className="h-4 w-4" />
</button> </button>
<nav <nav
className={`${open ? 'flex' : 'hidden'} flex-col gap-2 text-base sm:flex sm:flex-row sm:items-center sm:gap-3 sm:text-sm`} className={`${open ? 'flex' : 'hidden'} flex-col gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3`}
> >
{items.map((item) => ( {items.map((item) => (
<Link <Link
key={item.key} key={item.key}
href={item.href} href={item.href}
className="motion-link group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 font-medium text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200" className="motion-link type-nav group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
onClick={close} onClick={close}
> >
<FontAwesomeIcon <FontAwesomeIcon

2
components/site-header.tsx
View File

@@ -25,7 +25,7 @@ export function SiteHeader() {
<div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100"> <div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
<Link <Link
href="/" href="/"
className="motion-link group relative font-semibold tracking-tight text-lg text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100" className="motion-link group relative type-title text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100"
> >
<span className="absolute -bottom-0.5 left-0 h-[2px] w-0 bg-accent transition-all duration-180 ease-snappy group-hover:w-full" aria-hidden="true" /> <span className="absolute -bottom-0.5 left-0 h-[2px] w-0 bg-accent transition-all duration-180 ease-snappy group-hover:w-full" aria-hidden="true" />
{siteConfig.title} {siteConfig.title}

52
styles/globals.css
View File

@@ -8,6 +8,9 @@
--motion-ease-snappy: cubic-bezier(0.32, 0.72, 0, 1); --motion-ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
--card-translate-y: -6px; --card-translate-y: -6px;
--line-height-body: clamp(1.5, 0.15vw + 1.45, 1.65); --line-height-body: clamp(1.5, 0.15vw + 1.45, 1.65);
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-system-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans CJK TC', 'Noto Sans CJK SC', 'Source Han Sans TC', 'Source Han Sans SC', 'Roboto', 'Ubuntu', 'Cantarell', 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-system-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans CJK TC', 'Noto Sans CJK SC', 'Source Han Sans TC', 'Source Han Sans SC', 'Roboto', 'Ubuntu', 'Cantarell', 'Inter', 'Helvetica Neue', Arial, sans-serif;
font-size: clamp(15px, 0.65vw + 11px, 19px); font-size: clamp(15px, 0.65vw + 11px, 19px);
@@ -147,29 +150,40 @@ body {
} }
@layer components { @layer components {
.type-display { .type-display {
font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
line-height: 1.2; line-height: 1.2;
} font-weight: var(--font-weight-semibold);
}
.type-title { .type-title {
font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem);
line-height: 1.3; line-height: 1.3;
} font-weight: var(--font-weight-semibold);
}
.type-subtitle { .type-subtitle {
font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem); font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
line-height: 1.35; line-height: 1.35;
} font-weight: var(--font-weight-medium);
}
.type-body { .type-body {
font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem); font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
line-height: var(--line-height-body); line-height: var(--line-height-body);
} font-weight: var(--font-weight-regular);
}
.type-small { .type-small {
font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem); font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem);
line-height: 1.4; line-height: 1.4;
font-weight: var(--font-weight-regular);
}
.type-nav {
font-size: clamp(0.95rem, 0.2vw + 0.85rem, 1.05rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04em;
} }
.motion-card { .motion-card {