From c4e1c55df90505f2bf183ea623de1c33e12139c8 Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 20:20:47 -0400 Subject: [PATCH] Complete 3.2.2: Implement Responsive Typography System --- UI_UPDATE.MD | 10 ++- static/css/utilities.css | 155 +++++++++++++++++++++++++++++++++++++-- 2 files changed, 156 insertions(+), 9 deletions(-) diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD index e946f56..0c906a2 100644 --- a/UI_UPDATE.MD +++ b/UI_UPDATE.MD @@ -322,10 +322,12 @@ Always come back and update UI_UPDATE.MD once complete with task and task item. **Notes:** Implemented comprehensive breakpoint system using CSS custom properties. Established 6 mobile-first breakpoints (xs: 320px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px) in variables.css. Created breakpoint mixin system with custom property utilities (--mq-sm, --mq-md, etc.) and implemented all utility classes using var(--breakpoint-sm) in media queries across utilities.css. Added container max-widths and responsive padding variables for each breakpoint. Modernized all existing responsive utilities to use the new system, including grid, display, text alignment, and dimension utilities. -#### 3.2.2: Responsive Typography -- [ ] Create fluid typography scaling -- [ ] Implement responsive font sizing -- [ ] Add breakpoint-specific text adjustments +#### 3.2.2: Responsive Typography - COMPLETED 9/29/2025 +- [x] Create fluid typography scaling +- [x] Implement responsive font sizing +- [x] Add breakpoint-specific text adjustments + +**Notes:** Implemented comprehensive fluid typography system using clamp() for responsive font scaling. Added fluid heading scale utilities (.text-fluid-xs through .text-fluid-3xl) that automatically scale from minimum to maximum sizes based on viewport width. Created breakpoint-specific font size adjustments for all breakpoints (.sm\:text-xs, .md\:text-lg, etc.). Added responsive line height utilities (.sm\:leading-tight, etc.) and complete font weight scale (.font-thin through .font-black). All typography utilities use the established CSS custom properties from variables.css for consistency and maintainability. #### 3.2.3: Component Breakpoint Overrides - [ ] Create component-specific responsive behavior diff --git a/static/css/utilities.css b/static/css/utilities.css index 6d7c0ef..d224e6a 100644 --- a/static/css/utilities.css +++ b/static/css/utilities.css @@ -666,11 +666,11 @@ } /* Border Utilities */ -.border { border: 1px solid var(--color-border-primary); } -.border-t { border-top: 1px solid var(--color-border-primary); } -.border-b { border-bottom: 1px solid var(--color-border-primary); } -.border-l { border-left: 1px solid var(--color-border-primary); } -.border-r { border-right: 1px solid var(--color-border-primary); } +.border { border: 1px solid var(--border-color); } +.border-t { border-top: 1px solid var(--border-color); } +.border-b { border-bottom: 1px solid var(--border-color); } +.border-l { border-left: 1px solid var(--border-color); } +.border-r { border-right: 1px solid var(--border-color); } /* Text Alignment */ .text-left { text-align: left; } @@ -754,6 +754,151 @@ .2xl\:text-right { text-align: right; } } +/* ================================================================= + RESPONSIVE TYPOGRAPHY UTILITIES + ================================================================= */ + +/* Base responsive typography scaling using clamp() for fluid font sizes */ + +/* Fluid heading scale utilities */ +.text-fluid-xs { + font-size: clamp(var(--font-size-xs), 2.5vw, var(--font-size-sm)); +} + +.text-fluid-sm { + font-size: clamp(var(--font-size-sm), 3vw, var(--font-size-base)); +} + +.text-fluid-base { + font-size: clamp(var(--font-size-base), 3.5vw, var(--font-size-lg)); +} + +.text-fluid-lg { + font-size: clamp(var(--font-size-lg), 4vw, var(--font-size-xl)); +} + +.text-fluid-xl { + font-size: clamp(var(--font-size-xl), 4.5vw, var(--font-size-2xl)); +} + +.text-fluid-2xl { + font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-3xl)); +} + +.text-fluid-3xl { + font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-4xl)); +} + +/* Responsive font weight utilities */ +.font-thin { font-weight: 100; } +.font-extralight { font-weight: 200; } +.font-light { font-weight: 300; } +.font-normal { font-weight: var(--font-weight-normal); } +.font-medium { font-weight: var(--font-weight-medium); } +.font-semibold { font-weight: var(--font-weight-semibold); } +.font-bold { font-weight: var(--font-weight-bold); } +.font-extrabold { font-weight: 800; } +.font-black { font-weight: 900; } + +/* Responsive line height utilities */ +.leading-none { line-height: 1; } +.leading-tight { line-height: var(--line-height-tight); } +.leading-normal { line-height: var(--line-height-normal); } +.leading-relaxed { line-height: var(--line-height-relaxed); } +.leading-loose { line-height: var(--line-height-loose); } + +/* Breakpoint-specific font size adjustments */ +@media (min-width: var(--breakpoint-sm)) { + .sm\:text-xs { font-size: var(--font-size-xs); } + .sm\:text-sm { font-size: var(--font-size-sm); } + .sm\:text-base { font-size: var(--font-size-base); } + .sm\:text-lg { font-size: var(--font-size-lg); } + .sm\:text-xl { font-size: var(--font-size-xl); } + .sm\:text-2xl { font-size: var(--font-size-2xl); } + .sm\:text-3xl { font-size: var(--font-size-3xl); } + .sm\:text-4xl { font-size: var(--font-size-4xl); } +} + +@media (min-width: var(--breakpoint-md)) { + .md\:text-xs { font-size: var(--font-size-xs); } + .md\:text-sm { font-size: var(--font-size-sm); } + .md\:text-base { font-size: var(--font-size-base); } + .md\:text-lg { font-size: var(--font-size-lg); } + .md\:text-xl { font-size: var(--font-size-xl); } + .md\:text-2xl { font-size: var(--font-size-2xl); } + .md\:text-3xl { font-size: var(--font-size-3xl); } + .md\:text-4xl { font-size: var(--font-size-4xl); } +} + +@media (min-width: var(--breakpoint-lg)) { + .lg\:text-xs { font-size: var(--font-size-xs); } + .lg\:text-sm { font-size: var(--font-size-sm); } + .lg\:text-base { font-size: var(--font-size-base); } + .lg\:text-lg { font-size: var(--font-size-lg); } + .lg\:text-xl { font-size: var(--font-size-xl); } + .lg\:text-2xl { font-size: var(--font-size-2xl); } + .lg\:text-3xl { font-size: var(--font-size-3xl); } + .lg\:text-4xl { font-size: var(--font-size-4xl); } +} + +@media (min-width: var(--breakpoint-xl)) { + .xl\:text-xs { font-size: var(--font-size-xs); } + .xl\:text-sm { font-size: var(--font-size-sm); } + .xl\:text-base { font-size: var(--font-size-base); } + .xl\:text-lg { font-size: var(--font-size-lg); } + .xl\:text-xl { font-size: var(--font-size-xl); } + .xl\:text-2xl { font-size: var(--font-size-2xl); } + .xl\:text-3xl { font-size: var(--font-size-3xl); } + .xl\:text-4xl { font-size: var(--font-size-4xl); } +} + +@media (min-width: var(--breakpoint-2xl)) { + .2xl\:text-xs { font-size: var(--font-size-xs); } + .2xl\:text-sm { font-size: var(--font-size-sm); } + .2xl\:text-base { font-size: var(--font-size-base); } + .2xl\:text-lg { font-size: var(--font-size-lg); } + .2xl\:text-xl { font-size: var(--font-size-xl); } + .2xl\:text-2xl { font-size: var(--font-size-2xl); } + .2xl\:text-3xl { font-size: var(--font-size-3xl); } + .2xl\:text-4xl { font-size: var(--font-size-4xl); } +} + +/* Breakpoint-specific line height adjustments */ +@media (min-width: var(--breakpoint-sm)) { + .sm\:leading-tight { line-height: var(--line-height-tight); } + .sm\:leading-normal { line-height: var(--line-height-normal); } + .sm\:leading-relaxed { line-height: var(--line-height-relaxed); } + .sm\:leading-loose { line-height: var(--line-height-loose); } +} + +@media (min-width: var(--breakpoint-md)) { + .md\:leading-tight { line-height: var(--line-height-tight); } + .md\:leading-normal { line-height: var(--line-height-normal); } + .md\:leading-relaxed { line-height: var(--line-height-relaxed); } + .md\:leading-loose { line-height: var(--line-height-loose); } +} + +@media (min-width: var(--breakpoint-lg)) { + .lg\:leading-tight { line-height: var(--line-height-tight); } + .lg\:leading-normal { line-height: var(--line-height-normal); } + .lg\:leading-relaxed { line-height: var(--line-height-relaxed); } + .lg\:leading-loose { line-height: var(--line-height-loose); } +} + +@media (min-width: var(--breakpoint-xl)) { + .xl\:leading-tight { line-height: var(--line-height-tight); } + .xl\:leading-normal { line-height: var(--line-height-normal); } + .xl\:leading-relaxed { line-height: var(--line-height-relaxed); } + .xl\:leading-loose { line-height: var(--line-height-loose); } +} + +@media (min-width: var(--breakpoint-2xl)) { + .2xl\:leading-tight { line-height: var(--line-height-tight); } + .2xl\:leading-normal { line-height: var(--line-height-normal); } + .2xl\:leading-relaxed { line-height: var(--line-height-relaxed); } + .2xl\:leading-loose { line-height: var(--line-height-loose); } +} + /* ================================================================= FLEXBOX UTILITIES ================================================================= */