🏺 Clay Theme for Astro

A minimalist, image-centric theme for photographers and artists. Originally a Gatsby theme, now fully ported to Astro for superior performance and modern development experience.

Note: This theme is a modern Astro port of the beautiful Clay Theme by lilxyzz.

📺 Check out the Live Demo or view on the Astro Themes Portal

---

✨ Features

• ⚡ Astro-Powered - Blazing fast static site generation with zero-JS output by default
• 🎨 Beautiful Design - Minimalist and image-centric layout perfect for portfolios
• 🔄 Client Router - Seamless client-side navigation for an SPA-like feel
• 📱 Responsive Design - Mobile-friendly layout with a collapsible menu
• 🌗 Dark Mode - Native dark mode support with toggle switch and persistence
• 📝 CMS Ready - Pre-configured with Decap CMS (formerly Netlify CMS)
• 🎯 Scoped CSS - Modular, component-scoped styles replacing legacy monolithic CSS
• ✍️ Typography - Futura for titles/menu (Small Caps) and EB Garamond for body
• 📚 Content Collections - Type-safe Markdown content management

---

🚀 Quick Start

# Clone the repository
git clone https://github.com/your-username/clay-astro-theme.git
cd clay-astro-theme

# Install dependencies and start dev server
npm install && npm run dev

Visit http://localhost:4321 to see your site in action! 🎉

---

📦 Installation

1. Install Dependencies

npm install

2. Start Development Server

npm run dev

Your site will be running at http://localhost:4321

3. Build for Production

npm run build

The output will be in the dist/ directory, ready for deployment.

---

🛠️ Tech Stack

• Astro - Static Site Generator
• Decap CMS - Headless CMS
• PostCSS - CSS Processing
• TypeScript - Type Safety
• Markdown/MDX - Content Management

---

📁 Project Structure

/
├── public/                 # Static assets (images, admin config)
│   ├── admin/              # Decap CMS configuration
│   └── img/                # Uploaded images
├── src/
│   ├── components/         # Reusable Astro components (PostCard, etc.)
│   ├── content/            # Content Collections (Markdown/MDX)
│   │   ├── news/           # News/blog posts
│   │   ├── pages/          # Static pages
│   │   ├── sold/           # Sold items (for artists)
│   │   └── work/           # Portfolio work items
│   ├── layouts/            # Main layouts (Layout.astro)
│   ├── pages/              # Route definitions
│   │   ├── index.astro     # Home page
│   │   ├── [...slug].astro # Dynamic route for generic pages
│   │   └── work/[slug].astro # Dynamic routes for collections
│   ├── styles/             # Global variables and resets
│   │   ├── content.css     # Typography for markdown content
│   │   └── vars.css        # CSS Variables (Colors, Fonts)
│   └── templates/          # Templates for different content types
├── astro.config.mjs        # Astro configuration
├── postcss.config.cjs      # PostCSS configuration
└── tsconfig.json           # TypeScript configuration

---

🎨 Customization

Fonts & Colors

Edit src/styles/vars.css to update CSS variables for colors, fonts, and breakpoints:

:root {
  --color-primary: #3eb0ef;
  --color-base: #131313;
  --font-serif: 'EB Garamond', Georgia, Times, serif;
  /* ... more variables */
}

Content Management

• Option 1: Add markdown files directly to src/content/ folders
• Option 2: Use the Admin panel at /admin (requires local backend or Netlify deployment)

Navigation

Edit the <nav> section in src/layouts/Layout.astro to customize menu links.

---

🚀 Deployment

Deploy to Netlify

Deploy to Vercel

npm run build
# Upload dist/ folder to Vercel

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Credits

• Original Theme: Clay Theme by lilxyzz
• Framework: Astro
• CMS: Decap CMS

Made with ❤️ using Astro