スタイリング

Veltサイトのスタイリング方法を学びます。

CSSファイル

CSSファイルをassets/ディレクトリに配置：

assets/
├── style.css      # メインスタイル
└── components.css # コンポーネントスタイル

レイアウトでリンク：

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

CSS変数（テーマ）

一貫したテーマにCSS変数を使用：

:root {
    /* カラー */
    --color-primary: #6366f1;
    --color-text: #18181b;
    --color-bg: #ffffff;
    
    /* タイポグラフィ */
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

ダークモード

Veltテンプレートにはダークモードサポートが含まれています：

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

JavaScriptで切り替え：

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

レスポンシブデザイン

レスポンシブレイアウトにメディアクエリを使用：

/* モバイルファースト */
.sidebar {
    display: none;
}

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