81 lines
2.3 KiB
CSS
81 lines
2.3 KiB
CSS
/* ============================================================
|
|
CSS VARIABLES FOR CUSTOMIZATION
|
|
============================================================
|
|
|
|
This file contains all customizable design tokens for your webcomic.
|
|
Edit these values to change colors, fonts, spacing, and layout dimensions.
|
|
|
|
The main style.css file references these variables, so you can update
|
|
your design without touching the core framework styles.
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* ========================================
|
|
COLORS
|
|
======================================== */
|
|
|
|
--color-primary: #000;
|
|
--color-background: #fff;
|
|
--color-text: #000;
|
|
--color-text-muted: #666;
|
|
--color-disabled: #999;
|
|
--color-hover-bg: #f0f0f0;
|
|
|
|
/* ========================================
|
|
TYPOGRAPHY
|
|
======================================== */
|
|
|
|
--font-family: 'Courier New', Courier, monospace;
|
|
--font-size-base: 1rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-sm: 0.75rem;
|
|
--font-size-md: 0.85rem;
|
|
--font-size-lg: 0.9rem;
|
|
--font-size-xl: 1.2rem;
|
|
--font-size-2xl: 1.5rem;
|
|
--font-size-3xl: 2rem;
|
|
--font-size-4xl: 6rem;
|
|
--line-height-base: 1.5;
|
|
--line-height-tight: 1.3;
|
|
--line-height-relaxed: 1.6;
|
|
--letter-spacing-tight: 1px;
|
|
--letter-spacing-wide: 2px;
|
|
|
|
/* ========================================
|
|
SPACING
|
|
======================================== */
|
|
|
|
--space-xs: 0.25rem;
|
|
--space-sm: 0.5rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2rem;
|
|
--space-2xl: 3rem;
|
|
--space-3xl: 4rem;
|
|
|
|
/* ========================================
|
|
BORDERS
|
|
======================================== */
|
|
|
|
--border-width-thin: 2px;
|
|
--border-width-thick: 3px;
|
|
--border-color: var(--color-primary);
|
|
--border-radius: 0; /* Can be changed for rounded corners */
|
|
|
|
/* ========================================
|
|
LAYOUT
|
|
======================================== */
|
|
|
|
--container-max-width: 900px;
|
|
--content-max-width: 700px;
|
|
--archive-grid-min: 180px;
|
|
--archive-grid-min-mobile: 140px;
|
|
--archive-thumbnail-height: 120px;
|
|
|
|
/* ========================================
|
|
TRANSITIONS
|
|
======================================== */
|
|
|
|
--transition-speed: 0.2s;
|
|
}
|