Marek Miláček
4th week with astro

4th week with astro

Week 4: Styling & Polish

November 3-9, 2025

This week was all about making things actually look good. Had a working site, but it looked pretty basic. Now it’s something I’d actually show people.

Component-scoped CSS

Learned that styles in <style> tags inside Astro components are automatically scoped - they only affect that component. No more CSS conflicts or worrying about naming.

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

<style>
  .card { border: 1px solid #ddd; }
  h2 { color: navy; } /* Only affects h2 in THIS component */
</style>

Added hover effects to project cards - they lift up slightly when you hover. Simple but makes it feel more interactive.

CSS architecture

Created a global.css file with CSS variables for colors, spacing, and typography:

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

Then used those variables everywhere. Changed the primary color once and it updated across the entire site. Should’ve done this from the start.

Made utility classes for common patterns (flex, gap, margin, etc.) instead of repeating the same CSS in every component.

Responsive design

Made everything work on mobile. Used media queries to adjust layouts at different breakpoints:

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

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

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

Built a hamburger menu for mobile navigation. Added JavaScript to toggle the menu open/close. Took longer than expected to get the animation smooth.

Used clamp() for responsive typography - font sizes scale automatically based on viewport width without needing multiple media queries.

Visual polish

Added small details that make it feel more professional:

  • Smooth transitions on buttons and links
  • Active page highlighting in navigation
  • Consistent spacing using the spacing scale
  • Better typography with proper line heights and letter spacing
  • Sticky header that stays visible when scrolling

Created a hero section with a gradient background and a CTA button that has a hover animation.

What didn’t work

  • Initially forgot about mobile and had to redo half the layouts
  • Spent too long tweaking animations that probably nobody notices
  • Had specificity issues where global styles overrode component styles
  • Navigation hamburger menu animation was janky at first - had to refactor the transform logic

What’s next

Site is basically done now. Looks professional, works on all devices, has smooth interactions. Next week starts working with templates apparently.

Time invested: about 11 hours (spent extra time on details)