Čtvrtý týden s Astro

Nov 3, 2025

3-9. listopadu 2025

Tento týden bylo všechno o tom, aby věci vypadaly dobře. Měl jsem fungující web, ale vypadal dost základně. Teď je to něco, co bych vlastně ukázal lidem.

CSS vázané na komponenty

Zjistil jsem, že styly v tagech <style> uvnitř Astro komponent jsou automaticky vázané jen na tu komponentu. Žádné CSS konflikty ani starosti s pojmenováním.

<div class="card">
	<h2>Nadpis</h2>
</div>

<style>
	.card {
		border: 1px solid #ddd;
	}
	h2 {
		color: navy;
	} /* Ovlivní jen h2 v TÉTO komponentě */
</style>

Přidal jsem hover efekty na karty projektů - lehce se zvednou, když na ně najedeš. Jednoduché, ale díky tomu to působí interaktivněji.

Architektura CSS

Vytvořil jsem global.css soubor s CSS proměnnými pro barvy, mezery a typografii:

:root {
	--color-primary: #3355ff;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	/* další... */
}

Pak jsem ty proměnné používal všude. Změnil jsem primární barvu jednou a aktualizovalo se to na celém webu. Tohle jsem měl udělat hned od začátku.

Udělal jsem utility třídy pro běžné vzory (flex, gap, margin atd.) místo opakování stejného CSS v každé komponentě.

Responzivní design

Udělal jsem všechno funkční i na mobilu. Použil jsem media queries na úpravu layoutů pro různé breakpointy:

.grid {
	grid-template-columns: 1fr; /* mobil */
}

@media (min-width: 768px) {
	.grid {
		grid-template-columns: repeat(2, 1fr); /* tablet */
	}
}

@media (min-width: 1024px) {
	.grid {
		grid-template-columns: repeat(3, 1fr); /* desktop */
	}
}

Postavil jsem hamburger menu pro mobilní navigaci. Přidal jsem JavaScript na přepínání menu otevřít/zavřít. Trvalo to déle, než jsem čekal, než byla animace plynulá.

Použil jsem clamp() pro responzivní typografii - velikosti fontů se škálují automaticky podle šířky viewportu bez potřeby více media queries.

Vizuální vylepšení

Přidal jsem malé detaily, díky kterým to působí profesionálněji:

• Plynulé přechody na tlačítkách a odkazech
• Zvýraznění aktivní stránky v navigaci
• Konzistentní mezery pomocí škály mezer
• Lepší typografie se správnými výškami řádků a rozestupy písmen
• Sticky hlavička, která zůstává viditelná při scrollování

Vytvořil jsem hero sekci s gradientovým pozadím a CTA tlačítkem s hover animací.

Co nefungovalo

• Zpočátku jsem zapomněl na mobil a musel jsem předělat polovinu layoutů
• Strávil jsem moc času laděním animací, kterých si pravděpodobně nikdo nevšimne
• Měl jsem problémy se specificitou, kdy globální styly přepisovaly styly komponent
• Animace hamburger menu v navigaci byla zpočátku trhavá - musel jsem zrefaktorovat logiku transformací