wehub-resource-sync
196 lines
4.4 KiB
CSS
196 lines
4.4 KiB
CSS
/* LocalAI Typography System */
|
|
/* Font-face declarations and typography variables */
|
|
|
|
/* Playfair Display - Display/Headline Font */
|
|
@font-face {
|
|
font-family: 'Playfair Display';
|
|
src: url('/static/assets/playfair-display-regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Playfair Display';
|
|
src: url('/static/assets/playfair-display-semibold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Playfair Display';
|
|
src: url('/static/assets/playfair-display-bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Space Grotesk - Body Font */
|
|
@font-face {
|
|
font-family: 'Space Grotesk';
|
|
src: url('/static/assets/space-grotesk-regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Space Grotesk';
|
|
src: url('/static/assets/space-grotesk-medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Space Grotesk';
|
|
src: url('/static/assets/space-grotesk-semibold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Space Grotesk';
|
|
src: url('/static/assets/space-grotesk-bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* JetBrains Mono - Monospace Font */
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
src: url('/static/assets/jetbrains-mono-regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
src: url('/static/assets/jetbrains-mono-medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
src: url('/static/assets/jetbrains-mono-semibold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
/* Font Families */
|
|
--font-display: 'Playfair Display', serif;
|
|
--font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
|
|
/* Font Sizes */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
--text-5xl: 3rem; /* 48px */
|
|
--text-6xl: 3.75rem; /* 60px */
|
|
--text-7xl: 4.5rem; /* 72px */
|
|
|
|
/* Line Heights */
|
|
--leading-tight: 1.25;
|
|
--leading-snug: 1.375;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.625;
|
|
--leading-loose: 2;
|
|
|
|
/* Font Weights */
|
|
--weight-light: 300;
|
|
--weight-normal: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
--weight-extrabold: 800;
|
|
}
|
|
|
|
/* Base typography */
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-normal);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* Headings */
|
|
h1, .h1 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-4xl);
|
|
font-weight: var(--weight-bold);
|
|
line-height: var(--leading-tight);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
h2, .h2 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-3xl);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--leading-snug);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
h3, .h3 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-2xl);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--leading-snug);
|
|
}
|
|
|
|
h4, .h4 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-xl);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--leading-normal);
|
|
}
|
|
|
|
h5, .h5 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--weight-medium);
|
|
line-height: var(--leading-normal);
|
|
}
|
|
|
|
h6, .h6 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
font-weight: var(--weight-medium);
|
|
line-height: var(--leading-normal);
|
|
}
|
|
|
|
/* Code and monospace */
|
|
code, pre, kbd, samp {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Responsive typography adjustments */
|
|
@media (max-width: 640px) {
|
|
h1, .h1 {
|
|
font-size: var(--text-3xl);
|
|
}
|
|
|
|
h2, .h2 {
|
|
font-size: var(--text-2xl);
|
|
}
|
|
|
|
h3, .h3 {
|
|
font-size: var(--text-xl);
|
|
}
|
|
}
|
|
|