Implement MkDocs site with responsive design, accessibility, and gradient theme

[Copilot]

Creates a production-ready MkDocs site with Material theme for GitHub Pages and Azure Static Web Apps deployment. Implements responsive design, WCAG accessibility standards, light/dark mode, and a purple gradient color scheme with hero images on all pages.

Configuration & Infrastructure

• MkDocs setup (mkdocs.yml): Material theme with blog plugin, search, navigation features, and markdown extensions
• CI/CD (.github/workflows/deploy.yml): GitHub Actions workflow for automated deployment
• Dependencies (requirements.txt): mkdocs>=1.5.0, mkdocs-material>=9.5.0

Design System

• Gradient theme (docs/stylesheets/extra.css):
  • CSS variables for gradient colors (#667eea → #764ba2 → #f093fb)
  • Hero container with overlay and responsive scaling (400px desktop → 250px mobile)
  • Gradient headers with fallback support for non-webkit browsers
  • Form styling with gradient accents

:root {
  --gradient-start: #667eea;
  --gradient-end: #764ba2;
  --gradient-accent: #f093fb;
}

Content Pages

• Home (docs/index.md): Landing page with features overview
• Blog (docs/blog/index.md): Post listings with three sample articles (MkDocs tutorial, accessibility guide, responsive design patterns)
• Contact (docs/contact.md): Form with accessible inline validation

Accessibility & UX

• Form validation (docs/javascripts/extra.js): Inline error messages with ARIA attributes, HTML5 validation, focus management
• Hero images (docs/images/*.svg): SVG gradient backgrounds for performance and scalability
• Semantic HTML: Proper heading hierarchy, ARIA labels, keyboard navigation support

Screenshots

Home (Light/Dark Mode)

Blog & Contact

Mobile Responsive

Original prompt

A website build using mkdocs and deployed to GitHub Pages that will later be deployed to Azure Static Web
Apps. It should be Responsive, Accessible, Light/Dark Mode, with a hero image at the top of each page
followed by text. Create a Home page, a Blog page which I can add posts to, and a contact page. Gradient
colour theme.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.