admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task 2: Set up premium font system (Elvaro Grotesque + Blumir)

Browse Source 
Added @font-face declarations for both premium font candidates:
- Elvaro Grotesque: 7 weights (Light 300 → Black 900) from WOFF2/WOFF files
- Blumir: Variable font (100-700 weight range) from WOFF2/WOFF files

Updated Tailwind config:
- Added font-ui (Elvaro Grotesque) and font-ui-alt (Blumir) families
- Removed font-inter references (replaced with font-ui)
- Enhanced shadow tokens: pmr, pmr-hover, pmr-banner for Clinical Luxury depth
- Kept font-geist (Geist Mono) for data/timestamps, font-mono (Fira Code) for boot/ECG

Updated CSS variables and utility classes:
- --font-ui: Elvaro Grotesque
- --font-ui-alt: Blumir
- .pmr-theme now uses var(--font-ui) instead of var(--font-inter)

Fixed ESLint errors in ECGAnimation.tsx (viewOff/headSX should be const).

Quality checks: All passed (typecheck, lint, build). Font files bundled correctly.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
A Charlwood
2026-02-12 23:40:32 +00:00
parent 5a000d6457
commit b8c1aedb5a
3 changed files with 90 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ECGAnimation.tsx
+2 -4
View File
@@ -414,13 +414,11 @@ export function ECGAnimation({ onComplete, startPosition }: ECGAnimationProps) {
}
// Calculate viewport and head screen position
let headSX: number
let viewOff: number
const headSXEcg = HEAD_SCREEN_RATIO * vw
// Simple continuous scrolling - viewport follows head when it exceeds 75% of screen
viewOff = Math.max(0, headWX - headSXEcg)
headSX = headWX - viewOff
const viewOff = Math.max(0, headWX - headSXEcg)
const headSX = headWX - viewOff
// Calculate fade alpha
let fadeAlpha = 1
src/index.css
+82 -4
View File
@@ -2,6 +2,80 @@
@tailwind components;
@tailwind utilities;
/* Premium UI fonts — Elvaro Grotesque (primary) */
@font-face {
font-family: 'Elvaro Grotesque';
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff2') format('woff2'),
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Elvaro Grotesque';
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff2') format('woff2'),
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Elvaro Grotesque';
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff2') format('woff2'),
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Elvaro Grotesque';
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff2') format('woff2'),
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Elvaro Grotesque';
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff2') format('woff2'),
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Elvaro Grotesque';
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff2') format('woff2'),
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Elvaro Grotesque';
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff2') format('woff2'),
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* Premium UI fonts — Blumir (alternative) */
@font-face {
font-family: 'Blumir';
src: url('/Fonts/blumir-font-family/WOFF/Blumir-VF.woff2') format('woff2-variations'),
url('/Fonts/blumir-font-family/WOFF/Blumir-VF.woff') format('woff-variations');
font-weight: 100 700;
font-style: normal;
font-display: swap;
}
:root {
/* Original design system tokens (for boot/ECG phases) */
--bg: #FFFFFF;
@@ -41,7 +115,8 @@
--pmr-alert-text: #92400E;
--pmr-radius: 4px;
--pmr-radius-login: 12px;
--font-inter: 'Inter', system-ui, sans-serif;
--font-ui: 'Elvaro Grotesque', system-ui, sans-serif;
--font-ui-alt: 'Blumir', system-ui, sans-serif;
--font-geist-mono: 'Geist Mono', 'Fira Code', monospace;
}
@@ -69,8 +144,11 @@ body {
.font-mono {
font-family: 'Fira Code', monospace;
}
.font-inter {
font-family: var(--font-inter);
.font-ui {
font-family: var(--font-ui);
}
.font-ui-alt {
font-family: var(--font-ui-alt);
}
.font-geist-mono {
font-family: var(--font-geist-mono);
@@ -78,7 +156,7 @@ body {
.pmr-theme {
background-color: var(--pmr-content);
color: var(--pmr-text-primary);
font-family: var(--font-inter);
font-family: var(--font-ui);
}
}
tailwind.config.js
+5 -2
View File
@@ -58,14 +58,17 @@ export default {
primary: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
secondary: ['Inter Tight', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace'],
inter: ['Inter', 'system-ui', 'sans-serif'],
ui: ['Elvaro Grotesque', 'system-ui', 'sans-serif'],
'ui-alt': ['Blumir', 'system-ui', 'sans-serif'],
geist: ['Geist Mono', 'Fira Code', 'monospace'],
},
boxShadow: {
'sm': '0 1px 3px rgba(0,0,0,0.06)',
'md': '0 4px 12px rgba(0,0,0,0.08)',
'lg': '0 8px 24px rgba(0,0,0,0.1)',
'pmr': '0 1px 2px rgba(0,0,0,0.03)',
'pmr': '0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)',
'pmr-hover': '0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04)',
'pmr-banner': '0 2px 8px rgba(0,0,0,0.12)',
},
borderRadius: {
'card': '4px',