Improve docs homepage layout and sidebar spacing

[anve-sha]

This PR improves the documentation homepage layout and overall readability by refining spacing, alignment, and visual hierarchy.

The focus is on improving user experience by reducing visual clutter and making the documentation easier to scan and navigate.

What’s Changed

• Increased spacing between the sidebar navigation and main content
• Centered the main content container with a controlled max-width
• Improved alignment and section grouping on the homepage
• Enhanced typography and whitespace for better readability
• Improved responsive behavior across screen sizes

Why These Changes

Previously, the documentation homepage felt visually congested due to tight spacing between the sidebar and content area, wide text blocks, and scattered section alignment.

These changes help:

[ ] - Improve readability
[ ] - Create a clear visual hierarchy
[ ] - Reduce cognitive load for users
[ ] - Make navigation more intuitive

Screenshots

Before:
Current layout with tight sidebar spacing and scattered content as I have previously uploaded in the issue
[]

After:
Improved layout with clearer spacing, centered content, and better hierarchy
[]
[]
[]
[]
[]

Related Issue
Related to: #796

Notes

• Changes are limited to documentation styles and layout

• No functional or backend logic is affected

• Open to feedback and further improvements

Summary by CodeRabbit

• Documentation

  • Refined project description to clearly identify the application as a modern desktop photo management tool
  • Reorganized content sections for improved clarity and navigation

• Style

  • Enhanced website layout with grid-based design improvements
  • Refined typography, visual presentation, and responsive styling across all screen sizes

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Documentation homepage content refined with clearer project description and restructured feature list. HTML layout converted from fixed-width columns to responsive grid system. CSS extensively refactored with updated header, footer, navigation styling and multi-breakpoint responsive rules.

Changes

Cohort / File(s)	Summary
Documentation Content docs/index.md	Refines project summary to "modern desktop photo management application"; restructures feature bullets into enumerated benefits (organization, privacy, AI tagging, navigation/search); updates section headings for backend Python/Rust/Frontend consolidation; modifies project purpose wording and clarifies feature mentions; reorganizes HTML layout from centered blocks with fixed widths to unified wrapper/grid layout
Documentation Styling docs/stylesheets/extra.css	Extensive CSS restructuring: introduces grid-based two-column layout (.md-main__inner) with responsive adjustments across multiple breakpoints (1220px, 900px, 768px, 600px); adds fixed-width sidebar and flexible content container; refactors header/logo, footer, and navigation styling with flex alignment; updates typography (centered, larger h1/h2); replaces inline-flex and fixed-width API hacks with fluid responsive grid system; adjusts content padding, margins, and image constraints

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Fixed logo spacing and removed white background #453: Modifies overlapping header/logo CSS selectors (.md-header__button.md-logo) and spacing rules
• Fix #543: Improve documentation site responsiveness on mobile devices #601: Introduces overlapping grid/header/content/media-query layout and responsive design changes
• Revise docs for setup links and feature details #462: Modifies docs/index.md homepage structure and feature links

Suggested labels

documentation, UI, enhancement

Suggested reviewers

• rahulharpal1603

Poem

🐰 A homepage so bright, with grid lines aligned,
CSS whispers of layouts redesigned,
Features now gleaming in enumerated grace,
Responsive on screens of each shape and each space,
Documentation dancing—what a delightful embrace! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main changes: CSS layout improvements and spacing adjustments in the documentation homepage and sidebar, as confirmed by the extensive CSS restructuring and HTML layout changes in docs/index.md and docs/stylesheets/extra.css.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[anve-sha]

Hi @rahulharpal1603 👋
I’ve submitted this PR to improve the documentation homepage layout and sidebar spacing.
Please let me know if you’d like any changes or refinements.
Thank you!

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

docs/stylesheets/extra.css (2)

11-13: Consider documenting the !important usage.

The !important flag is likely needed to override MkDocs Material theme defaults. A brief comment explaining this would help future maintainers understand why it's necessary.

🔎 Suggested improvement

 .md-header__title {
-  margin-left: 8px !important;
+  margin-left: 8px !important; /* Override Material theme default */
 }

---

114-120: Multiple !important declarations for footer override.

These overrides are likely necessary to control the MkDocs Material theme footer layout. Consider adding a comment explaining this is intentional for theme customization.

🔎 Suggested improvement

+/* Override Material theme footer to center content */
 .md-footer-meta__inner.md-grid {
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   gap: 0.25rem;
   text-align: center;
 }

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 917daff and 13accd5.

📒 Files selected for processing (2)

• docs/index.md
• docs/stylesheets/extra.css

🔇 Additional comments (7)

docs/index.md (3)

3-8: LGTM!

The updated project description is clear and the bullet points effectively communicate PictoPy's key value propositions in a scannable format.

---

10-12: LGTM!

The logo container uses the appropriate home-logo class that corresponds to the centered styling defined in the CSS file.

---

19-56: Well-structured grid layout.

The HTML structure properly utilizes the home-wrapper and home-grid classes, creating a clean two-column grid for documentation sections. The semantic grouping of content (Overview, Backend Python/Rust, Frontend) improves navigation.

docs/stylesheets/extra.css (4)

1-4: LGTM!

Flexbox alignment properly centers the logo button contents vertically.

---

15-24: Good grid-based layout structure.

The two-column grid with auto 1fr appropriately sizes the sidebar to its content width while allowing the main content to fill remaining space. The 260px fixed sidebar width provides consistent navigation.

---

132-165: Solid responsive breakpoint strategy.

The progressive breakdown from two-column grid (desktop) → single-column home-grid (900px) → single-column main layout (768px) provides a smooth responsive experience. The sidebar width adjustments at each breakpoint are appropriate.

One note: the AI summary mentions a 600px breakpoint, but it's not present in the code. If smaller mobile screens need additional adjustments, consider adding one.

---

102-106: The display: block styling with width: 100% and overflow-x: auto is a standard responsive table pattern. Examination of all tables in the documentation (parameter tables, stack listings) confirms they render correctly without layout issues or width constraints. Tables are simple markdown tables with no nesting, and the full-width property is explicitly set, allowing proper horizontal scrolling on small screens.