🎨 Customize MkDocs Theme to Match Site Appearance and Include Google Tag Manager

[httpdss]

🎨 Customization Overview

We need to customize the MkDocs theme to match the existing website's look and feel, including the integration of Google Tag Manager (GTM) through a theme structure override.

✨ Goals

1. Align Styles: Match the typography, colors, and spacing of the current site (https://httpdss.github.io/struct/).
2. Theme Override: Use MkDocs's customization capabilities to apply advanced styling and feature configurations.
3. GTM Integration: Include Google Tag Manager code in the theme to manage tracking and analytics.

🎯 Customization Tasks

1. Colors and Typography

   • Align MkDocs colors with the website's custom CSS properties defined in site/css/main.css
   • Use the same typography, including fonts and font sizes
   • Adhere to overall styling, including backgrounds, borders, and spacings
   • Dark mode should be the default mode

2. Layout Adjustments

   • Ensure consistency in layout structure and navigation bar styling
   • Implement hero sections, feature grids, and other UI elements

3. Feature Enhancements

   • Include sticky navigation, search enhancements, and responsive design improvements

4. Google Tag Manager Inclusion

   • Add GTM script tag with ID GTM-M4X52F2D to MkDocs HTML using theme override
   • Ensure no-script method is included for users with JavaScript disabled

🚀 Expected Outcomes

• The MkDocs-generated documentation should visually match the existing site
• Integrated GTM provides tracking capabilities across the documentation
• Enhanced user experience through consistent styling and layout
• Maintain responsiveness and accessibility across devices

🛠️ Instructions

• Utilize the MkDocs Material theme’s [customization options] (e.g., overriding theme.css)
• Explore MkDocs hooks and plugin configurations for GTM integration

🔗 Resource and Reference

• MkDocs Material Theme Customization Guide

This task provides an opportunity to improve the cohesiveness of the STRUCT project site and its associated documents.

---

Please prioritize this issue to ensure our documentation is visually coherent with our main site branding and CTAs.