Self Esteem is an editorial Astro template designed for writers and small publications. The homepage uses a full-viewport cover with a four-column grid, scroll-snapping articles, a marquee ticker, and a dark "Circle" call-to-action button. Subpages use a standard PageLayout component that includes top navigation, an optional hero section, and a reading column restricted to a maximum width of 920px.
Content management is handled through Astro content collections. Adding an .mdx file with frontmatter to src/content/posts automatically generates a blog post complete with previous/next navigation, tag pages, an RSS feed, and a homepage entry. A distinct work collection is used for the portfolio page, and a _template.astro.example file is provided to simplify the process of adding new pages.
Included Features
- Homepage (/): Uses a 4-column grid layout with scroll-snapping featured articles.
- MDX blog (/blog): Includes [slug] post pages, previous/next navigation, and tag taxonomy.
- Auto-generated tag pages (/tags/[tag]): Generated directly from frontmatter data.
- Additional pages: Includes a data-driven /work portfolio, /studio, /contact, and a custom /404.
- SEO and feeds: Generates an RSS feed (/rss.xml), sitemap, and OpenGraph/Twitter meta tags configured in BaseLayout.
- Typography: Implements Space Grotesk, Inter, and Playfair Display on a fluid clamp-based scale.
- Color palette: Uses a strict five-token system without gradients, shadows, or accent colors to prioritize image visibility.
- Navigation and responsive design: Features mobile drawer navigation, a sticky header, and breakpoints at 1400, 1260, 1030, 768, and 560 pixels.
- Styleguide (STYLEGUIDE.md): Documents design tokens, scaling, breakpoints, and components.
The template relies on minimal JavaScript, using only an inline script for the mobile menu toggle. The static output can be deployed to standard hosting platforms such as Netlify, Vercel, Cloudflare Pages, GitHub Pages, or a private server.
Credits & Demo
- Original cover layout by Aysenur Turk, re-implemented and extended into a full Astro project.
- Live preview: miro.build/templates/self-esteem
