Styling

Learn how to style your Velt site.

CSS Files

Place CSS files in the assets/ directory:

assets/
├── style.css      # Main styles
└── components.css # Component styles

Link them in your layout:

<link rel="stylesheet" href="assets/style.css">

CSS Variables (Theming)

Use CSS variables for consistent theming:

:root {
    /* Colors */
    --color-primary: #6366f1;
    --color-text: #18181b;
    --color-bg: #ffffff;
    
    /* Typography */
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Spacing */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
}

Dark Mode

Velt templates include dark mode support:

html.dark {
    --color-text: #fafafa;
    --color-bg: #09090b;
}

Toggle with JavaScript:

document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');

Responsive Design

Use media queries for responsive layouts:

/* Mobile first */
.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .sidebar {
        display: flex;
        width: 280px;
    }
}

Component Styling

Style your components with class names:

.callout {
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.callout-info {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
}

Typography

Use system font stacks or web fonts:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
}