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

🎨 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.