General Docs Improvements

[TechHutTV]

UI/UX Improvements: Typography, Navigation, and Style Enhancements

Summary

This PR improves documentation typography, navigation, and styling. Includes typography refinements, enhanced table styling, a jump-to-top button, smooth scrolling, CSS consolidation, and a hidden sidebar scrollbar.

Changes

Typography refinements (typography.js)

• Heading hierarchy: Improved spacing for h4, h5, and h6
  • h4: increased marginBottom from spacing.2 to spacing.3
  • h5/h6: added definitions with marginTop: spacing.6, marginBottom: spacing.3
• List spacing: Increased margins for better hierarchy
  • ol/ul: marginTop/marginBottom from spacing.5 to spacing.6
  • li: marginTop/marginBottom from spacing.2 to spacing.3, added lineHeight.7
  • Nested lists: marginTop/marginBottom from spacing.3 to spacing.4
• Blockquote styling:
  • Orange accent border (borderLeftWidth: 0.375rem, borderLeftColor: orange.500/400)
  • Subtle background (orange.50 / 0.3 light, zinc.900 / 0.2 dark)
  • Added padding and border radius

Table styling enhancements (typography.js)

• CSS variables: Added table-specific variables for borders and backgrounds
  • Light mode: --tw-prose-th-bg, --tw-prose-td-bg, --tw-prose-th-borders, --tw-prose-td-borders
  • Dark mode: Inverted variants for consistent theming
• Table container:
  • Rounded corners (borderRadius.lg)
  • Border and shadow
  • Overflow hidden for clean edges
• Table header (thead):
  • Background color using CSS variables
  • 2px bottom border
  • Uppercase text with wider letter spacing
  • Increased padding (spacing.4)
  • Smaller font size (fontSize.sm)
• Table body (tbody):
  • Row hover effects with smooth transitions
  • Alternating row backgrounds (zebra striping)
  • Vertical alignment (verticalAlign: 'middle')
  • Increased padding (spacing.4)
  • Border between rows
• Table footer (tfoot):
  • 2px top border
  • Subtle background color
  • Proper vertical alignment

Navigation enhancements (Layout.jsx)

• Jump to top button:
  • Appears when scrolled > 400px
  • Smooth scroll to top
  • Positioned in the table of contents sidebar
• Smooth scroll behavior:
  • Global scroll-behavior: smooth for anchor links and programmatic scrolling

CSS consolidation

• Removed src/styles/global.css
• Consolidated styles into src/styles/tailwind.css using Tailwind @layer directives
• Removed global.css import from src/pages/_app.jsx
• Moved styles:
  • .custom-details li styling
  • html { scroll-behavior: smooth; }

Sidebar navigation (tailwind.css, Layout.jsx)

• Hidden scrollbar while maintaining scroll functionality
• Cross-browser support:
  • Firefox: scrollbar-width: none
  • IE/Edge: -ms-overflow-style: none
  • Chrome/Safari/Opera: ::-webkit-scrollbar { display: none }

Files changed

• typography.js — Typography and table styling refinements
• src/components/Layout.jsx — Jump to top button and scroll detection
• src/styles/tailwind.css — Smooth scroll, sidebar scrollbar hiding, consolidated styles
• src/pages/_app.jsx — Removed global.css import
• src/styles/global.css — Deleted (consolidated into tailwind.css)

Testing

• Typography spacing verified across heading levels
• List spacing improved for readability
• Blockquote styling with orange accent
• Table styling with hover effects and alternating rows
• Table headers with proper styling and spacing
• Jump to top button appears/disappears correctly
• Smooth scrolling works for anchor links
• Sidebar scrollbar hidden but scrolling functional
• No visual regressions in existing styles

Impact

• Improved readability and visual hierarchy
• Enhanced table presentation with hover effects and zebra striping
• Better navigation with jump-to-top functionality
• Cleaner sidebar without visible scrollbar
• Simplified CSS structure with consolidated styles