Tochi's Gardening Website Kit 🌱

npm create astro@latest -- --template tochibedford/green_thumb

📚 Stack

• Astro
• CSS - TailwindCss
• Icons - Astro-Icons

✨Features

• Gardening Home Page
• Blog Section
• Blog Posts Page
• Form collection is handled by Form spark
• Parallax scroll built-in

Desktop-First

I've added TailwindCss as an Astro integration, and all breakpoints are desktop first. Can be easily changed to tailwinds mobile-first style by:

• Deleting the screens entry from the tailwind.config.cjs file:

  

• Deleting the tailwindbase.css file. Don't forget to remove it's import in the main Layout file:

  

• Then Removing the applyBaseStyles entry from the astro.config.mjs file here:

  

🚀 Project Structure

Inside of this Astro template, you'll see the following project structure:

📦green_thumb
 ┣ 📂public
 ┃ ┗ 📜favicon.png
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📜...png
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📜BlogCard.astro
 ┃ ┃ ┣ 📜BorderlessCard.astro
 ┃ ┃ ┣ 📜Footer.astro
 ┃ ┃ ┣ 📜MainButton.astro
 ┃ ┃ ┗ 📜Navbar.astro
 ┃ ┣ 📂layouts
 ┃ ┃ ┣ 📜Layout.astro
 ┃ ┃ ┗ 📜tailwindbase.css
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂blog
 ┃ ┃ ┃ ┣ 📜index.astro
 ┃ ┃ ┃ ┗ 📜[postId].astro
 ┃ ┃ ┗ 📜index.astro
 ┃ ┣ 📜blogposts.ts
 ┃ ┗ 📜env.d.ts
 ┣ 📜.gitignore
 ┣ 📜astro.config.mjs
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┣ 📜tailwind.config.cjs
 ┗ 📜tsconfig.json