Skip to content

Implement new dark theme design for documentation site#13

Merged
joelmartinez merged 3 commits intomainfrom
copilot/fix-12
Aug 15, 2025
Merged

Implement new dark theme design for documentation site#13
joelmartinez merged 3 commits intomainfrom
copilot/fix-12

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Aug 15, 2025

This PR completely redesigns the Modulator library documentation site with a modern dark theme based on the provided mockup. The new design transforms the site from a basic Bootstrap-based layout to a sophisticated, custom-styled documentation experience.

Key Design Changes

Visual Design:

  • Modern dark color scheme: Implemented gradients from #1d1d1b to #2b2a27 for the main background, with darker gradients for header (#181817 to #22211f) and sidebar (#1b1a18 to #242320)
  • Professional typography: Added Google Fonts with Poppins for headings, Inter for body text, and JetBrains Mono for code blocks
  • Card-based layout: Content sections now use semi-transparent backgrounds (rgba(255,255,255,0.04)) with subtle borders and shadows for depth
  • Enhanced welcome section: Featured welcome heading and introductory paragraph in highlighted card sections to create visual hierarchy

Technical Improvements:

  • Removed Bootstrap dependency: Replaced all Bootstrap classes with custom CSS for better performance and design control
  • CSS custom properties: Implemented CSS variables for consistent theming throughout the site
  • Flexbox layout: Modernized layout structure using flexbox instead of Bootstrap grid system
  • Responsive design: Mobile-friendly layout that adapts seamlessly to different screen sizes

Interactive Elements:

  • Smooth hover effects: Navigation items feature subtle animations with color transitions and transform effects
  • Gold accent highlights: Links and interactive elements use #d4c389 accent color for better visual feedback
  • Enhanced readability: Generous padding, proper line height (1.6), and carefully chosen text colors (#e8e4d8 primary, #bcb8aa secondary)

Files Modified

  • docs/templates/SiteFrame.cshtml: Updated main layout template, removed Bootstrap dependencies
  • docs/templates/Default.cshtml: Modernized page template with flexbox layout
  • docs/templates/menu.cshtml: Redesigned navigation menu with custom styling
  • docs/source/assets/main.css: Complete CSS rewrite with modern dark theme implementation

The new design closely matches the provided mockup and creates a professional, modern documentation experience that better represents the quality of the Modulator library.

Fixes #12.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Co-authored-by: joelmartinez <90380+joelmartinez@users.noreply.github.com>
@joelmartinez joelmartinez marked this pull request as ready for review August 15, 2025 01:28
Co-authored-by: joelmartinez <90380+joelmartinez@users.noreply.github.com>
@joelmartinez joelmartinez merged commit f5ef7d5 into main Aug 15, 2025
@joelmartinez joelmartinez deleted the copilot/fix-12 branch August 15, 2025 01:28
Copilot AI restored the copilot/fix-12 branch August 15, 2025 01:29
Copilot AI changed the title [WIP] New docs design Implement new dark theme design for documentation site Aug 15, 2025
Copilot AI requested a review from joelmartinez August 15, 2025 01:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

New docs design

2 participants