Баптау

AstroGlass @tailwindcss/vite плагині арқылы стильдеу үшін Tailwind CSS v4 пайдаланады. Мұнда бөлек tailwind.config.mjs жоқ — барлық баптаулар CSS арқылы жүзеге асады.

Стильдеуге шолу

Ауқымды стильдер мен CSS айнымалылары src/styles/global.css ішінде анықталған. Бұл файл мыналарды реттейді:

• Базалық қабаттарды қалпына келтіру (Base layer resets)
• Таңдамалы қаріптер (Inter & JetBrains Mono)
• Тақырыптауға арналған CSS айнымалылары (HSL түс мәндері)

Тақырыпқа тән үстінен жазулар (overrides) src/styles/_themes.css ішінде орналасқан.

Түстер жүйесі

Бұл жоба CSS айнымалыларына негізделген түс жүйесін пайдаланады. Түстер HSL мәндері түрінде (hsl() орамысыз) анықталады, бұл Tailwind-тің мөлдірлікті өзгерту конвенциясының дұрыс жұмыс істеуіне мүмкіндік береді.

/* src/styles/global.css */
:root {
  --p: 260 80% 60%;   /* Негізгі (Primary) */
  --s: 310 80% 60%;   /* Қосымша (Secondary) */
  --a: 190 90% 60%;   /* Акцент (Accent) */
  --b1: 220 20% 10%;  /* База 1 (Фон) */
  --b2: 220 18% 14%;  /* База 2 (Беткі қабат) */
  --bc: 220 20% 90%;  /* Базалық контент (Мәтін) */
  --er: 0 80% 60%;    /* Қате (Error) */
  --su: 150 80% 50%;  /* Сәтті (Success) */
}

Компоненттер бұл айнымалыларды Tailwind утилиталық кластары немесе hsl() арқылы тұтынады:

<div class="bg-[hsl(var(--p))] text-[hsl(var(--bc))]">
  Негізгі фон және базалық контент мәтіні
</div>

Өзіндік қаріптерді қосу

1. Қаріп файлдарын public/fonts/ ішіне орналастырыңыз немесе global.css ішінде Google Fonts-тан импорттаңыз.
2. src/styles/global.css ішінде @font-face ережелерін анықтаңыз.
3. Қажеттілігіне қарай font-family CSS айнымалыларын немесе Tailwind утилиталарын жаңартыңыз.

Компоненттерді баптау

Әр тақырыптың өзіндік компонент нұсқалары бар (мысалы, HeroLiquid.astro, HeroGlass.astro). Белгілі бір секцияны баптау үшін:

1. src/components/sections/{section}/ (мысалы, hero/) бумасына өтіңіз.
2. Тақырыпқа тән файлды тікелей өңдеңіз (мысалы, HeroGlass.astro).
3. Компонентке тән CSS src/styles/components/{section}/ ішінде орналасқан.