/* ========================================================================== variables.css — CSS Custom Properties for hamz.me theme All colors, typography, spacing, and transitions defined here. Dark/light mode controlled via data-theme attribute on . ========================================================================== */ /* -------------------------------------------------------------------------- Font Face Declarations — Self-hosted TTF Note: Convert to woff2 before production deploy for ~40% size savings. TTF works in all modern browsers and is fine for development. -------------------------------------------------------------------------- */ /* Inter — Body & UI text */ @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } /* Lora — Headings */ @font-face { font-family: 'Lora'; src: url('../fonts/lora/lora-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Lora'; src: url('../fonts/lora/lora-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* JetBrains Mono — Code */ @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono/jetbrains-mono-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- Typography Variables -------------------------------------------------------------------------- */ :root { /* Font families */ --font-heading: 'Lora', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-code: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; --font-sidebar: var(--font-body); /* Font sizes */ --fs-h1: 2.25rem; /* 36px */ --fs-h2: 1.75rem; /* 28px */ --fs-h3: 1.375rem; /* 22px */ --fs-h4: 1.125rem; /* 18px */ --fs-body: 1.125rem; /* 18px */ --fs-small: 0.875rem; /* 14px */ --fs-xs: 0.75rem; /* 12px */ --fs-sidebar-nav: 0.9375rem; /* 15px */ --fs-toc: 0.8125rem; /* 13px */ --fs-code: 0.875rem; /* 14px */ /* Font weights */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --lh-heading: 1.2; --lh-body: 1.7; --lh-code: 1.5; /* Letter spacing */ --ls-uppercase: 0.05em; } /* -------------------------------------------------------------------------- Layout Variables -------------------------------------------------------------------------- */ :root { --sidebar-width: 240px; --content-max-width: 960px; --topbar-height: 56px; /* Breakpoints (for reference — used in responsive.css) */ /* Desktop: >= 960px */ /* Tablet: 550px – 959px */ /* Mobile: < 550px */ } /* -------------------------------------------------------------------------- Spacing Scale -------------------------------------------------------------------------- */ :root { --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-post-gap: 2.5rem; /* 40px — gap between post entries */ } /* -------------------------------------------------------------------------- Transition Variables -------------------------------------------------------------------------- */ :root { --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; } /* -------------------------------------------------------------------------- Sidebar Colors — Constant across light/dark modes -------------------------------------------------------------------------- */ :root { --sidebar-bg: #0A0A0A; --sidebar-text: #E5E5E5; --sidebar-text-muted: #6B7280; --sidebar-accent: #22C55E; --sidebar-accent-subtle: rgba(34, 197, 94, 0.1); --sidebar-border: #1A1A1A; --sidebar-hover-text: #FFFFFF; } /* -------------------------------------------------------------------------- Content Area Colors — Light Mode (default) -------------------------------------------------------------------------- */ :root, [data-theme="light"] { --content-bg: #FFFFFF; --surface: #F9FAFB; --text-primary: #1A1A1A; --text-secondary: #6B7280; --text-heading: #000000; --accent: #16A34A; --accent-hover: #15803D; --border: #E5E7EB; --selection-bg: rgba(22, 163, 74, 0.15); --selection-text: inherit; --code-bg: #1E1E1E; --code-text: #D4D4D4; --scrollbar-thumb: #D1D5DB; --scrollbar-track: transparent; } /* -------------------------------------------------------------------------- Content Area Colors — Dark Mode -------------------------------------------------------------------------- */ [data-theme="dark"] { --content-bg: #0F0F0F; --surface: #1A1A1A; --text-primary: #E5E5E5; --text-secondary: #9CA3AF; --text-heading: #FFFFFF; --accent: #22C55E; --accent-hover: #4ADE80; --border: #27272A; --selection-bg: rgba(34, 197, 94, 0.2); --selection-text: inherit; --code-bg: #1E1E1E; --code-text: #D4D4D4; --scrollbar-thumb: #3F3F46; --scrollbar-track: transparent; }