Astro Hackathon Showcase

🎨 Themes

Astro Landing Page

by Markus Hsi-Yang Fritz

GitHub Live Preview

README.md

Astro Landing Page

An Astro + Tailwind CSS starter kit for landing pages.

Screenshots of Astro Landing Page

Features

  • 💨 Tailwind CSS for styling
  • 🎨 Themeable
    • CSS variables are defined in src/styles/theme.css and mapped to Tailwind (tailwind.config.cjs)
  • 🌙 Dark mode
  • 📱 Responsive (layout, images, typography)
  • ♿ Accessible (as measured by https://web.dev/measure/)
  • 🔎 SEO-enabled (as measured by https://web.dev/measure/)
  • 🔗 Open Graph tags for social media sharing

Commands

CommandAction
npm installInstall dependencies
npm run devStart local dev server at localhost:3000
npm run buildBuild your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run formatFormat code with Prettier
npm run cleanRemove node_modules and build output

Credits

Description

The astronaut image was taken from the withastro/astro-og-image repo which isn’t public anymore 😬. I hope it’s OK that I’m using it, yell at me otherwise. Also, I was looking for a good moon joke, but they were all so cheesy.