Keith Solomon
fa3df3e3f4
- Implemented core functionality to generate fluid typography CSS variables based on user-defined breakpoints and font sizes. - Created configuration options for output format (Tailwind or vanilla CSS) and rounding settings. - Added input parsing for settings from text files or VSCode interface. - Developed CSS generation logic with support for `clamp()` and optional rounding. - Included tests for parsing settings, generating CSS, and inserting text at selection in the editor. - Documented project details and usage in project.md. - Added example CSS output in typography.css.
66 lines
3.3 KiB
CSS
66 lines
3.3 KiB
CSS
/* Basic typographical styles */
|
|
|
|
/**
|
|
* All font sizes are based on 16px base font size and 1920px wide screen
|
|
* Default size is expressed as percentage of screen width.
|
|
* text-14px: 12px-27px, default: 14px
|
|
* text-16px: 14px-28px, default: 16px
|
|
* text-18px: 14px-30px, default: 18px
|
|
* text-20px: 16px-32px, default: 20px
|
|
* text-22px: 17px-33px, default: 22px
|
|
* text-25px: 18px-35px, default: 25px
|
|
* text-30px: 19px-37px, default: 30px
|
|
* text-35px: 20px-40px, default: 35px
|
|
* text-38px: 22px-48px, default: 38px
|
|
* text-40px: 24px-56px, default: 40px
|
|
* text-45px: 25px-64px, default: 45px
|
|
* text-50px: 27px-72px, default: 50px
|
|
* text-55px: 28px-76px, default: 55px
|
|
* text-60px: 30px-80px, default: 60px
|
|
* text-70px: 30px-76px, default: 70px
|
|
* text-75px: 32px-80px, default: 75px
|
|
*
|
|
* Font sizes at standard viewport widths:
|
|
* | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px
|
|
* |-------|-------|-------|--------|--------|--------|-------
|
|
* text-14px | 12.00 | 12.36 | 12.52 | 12.85 | 13.18 | 13.38 | 14.00
|
|
* text-16px | 14.00 | 14.36 | 14.52 | 14.85 | 15.18 | 15.38 | 16.00
|
|
* text-18px | 14.00 | 14.72 | 15.05 | 15.70 | 16.36 | 16.77 | 18.00
|
|
* text-20px | 16.00 | 16.72 | 17.05 | 17.70 | 18.36 | 18.77 | 20.00
|
|
* text-22px | 17.60 | 18.36 | 18.75 | 19.47 | 20.19 | 20.65 | 22.00
|
|
* text-25px | 18.00 | 19.26 | 19.83 | 20.98 | 22.13 | 22.85 | 25.00
|
|
* text-30px | 18.96 | 20.89 | 21.85 | 23.66 | 25.47 | 26.60 | 30.00
|
|
* text-35px | 20.00 | 22.69 | 23.92 | 26.38 | 28.85 | 30.38 | 35.00
|
|
* text-38px | 22.40 | 24.85 | 26.48 | 29.04 | 31.60 | 33.20 | 38.00
|
|
* text-40px | 24.00 | 26.87 | 28.18 | 30.81 | 33.44 | 35.08 | 40.00
|
|
* text-45px | 25.60 | 29.22 | 30.67 | 33.86 | 37.04 | 39.03 | 45.00
|
|
* text-50px | 27.20 | 31.58 | 33.16 | 36.90 | 40.65 | 42.98 | 50.00
|
|
* text-70px | 30.40 | 37.01 | 40.76 | 47.26 | 53.75 | 57.82 | 70.00
|
|
* text-75px | 32.00 | 39.46 | 43.25 | 50.30 | 57.36 | 61.77 | 75.00
|
|
*/
|
|
|
|
@theme static {
|
|
--text-base: 1rem;
|
|
--text-14px: round(down, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 2px);
|
|
--text-16px: round(down, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 2px);
|
|
--text-18px: round(down, clamp(0.875rem, 0.8173rem + 0.2564vw, 1.125rem), 2px);
|
|
--text-20px: round(down, clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem), 2px);
|
|
--text-22px: round(down, clamp(1.1rem, 1.0365rem + 0.2821vw, 1.375rem), 2px);
|
|
--text-25px: round(down, clamp(1.125rem, 1.024rem + 0.4487vw, 1.5625rem), 2px);
|
|
--text-30px: round(down, clamp(1.185rem, 1.0258rem + 0.7077vw, 1.875rem), 2px);
|
|
--text-35px: round(down, clamp(1.25rem, 1.0337rem + 0.9615vw, 2.1875rem), 2px);
|
|
--text-38px: round(down, clamp(1.4rem, 1.175rem + 1vw, 2.375rem), 2px);
|
|
--text-40px: round(down, clamp(2.25rem, 1.2692rem + 1.0256vw, 2.5rem), 2px);
|
|
--text-45px: round(down, clamp(1.6rem, 1.3202rem + 1.2436vw, 2.8125rem), 2px);
|
|
--text-50px: round(down, clamp(1.7rem, 1.3712rem + 1.4615vw, 3.125rem), 2px);
|
|
--text-70px: round(down, clamp(1.9rem, 1.3288rem + 2.5385vw, 4.375rem), 2px);
|
|
--text-75px: round(down, clamp(2rem, 1.3798rem + 2.7564vw, 4.6875rem), 2px);
|
|
|
|
--h1: var(--text-70px);
|
|
--h2: var(--text-50px);
|
|
--h3: var(--text-35px);
|
|
--h4: var(--text-30px);
|
|
--h5: var(--text-25px);
|
|
--h6: var(--text-20px);
|
|
}
|