Layout improvements #3048
Merged
Layout improvements #3048
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add styling for details/summary elements with: - 0.5rem border radius for rounded corners - Remove borders for cleaner appearance - Overflow hidden to clip content to border radius - Consistent styling in both collapsed and expanded states Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Apply 0.5rem border radius to zoomed images for consistent rounded corners with other UI elements. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Add _image-zoom.scss partial with all ImageZoom component styles including modal, container, thumbnail, caption, and close button. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Add @use statement for _image-zoom.scss partial to include ImageZoom component styles in the build. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Replace inline styles with CSS class names from _image-zoom.scss partial for better maintainability and separation of concerns. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Move ImageZoom styles to dedicated _image-zoom.scss partial for better organization and maintainability. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Apply 0.5rem border radius to thumbnail images so they display with rounded corners before being clicked, not just in modal view. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
- Remove all table borders for cleaner appearance - Add zebra striping (alternating row backgrounds) for readability - Apply 0.4rem border radius to table corners - Strong header contrast with bold text and distinct background - Full light/dark mode support with appropriate color schemes - Universal application to all markdown and HTML tables Light mode: - Header background: #e8ecf1 - Zebra stripe: rgba(0, 0, 0, 0.02) Dark mode: - Header background: #2a3a4a - Zebra stripe: rgba(255, 255, 255, 0.03)
…better contrast - Increased zebra striping opacity from 0.03 to 0.08 for better row differentiation - Updated header background from #2a3a4a to #2d3748 for improved contrast - Added base table background color #1b1b1d instead of pure black - Added explicit text colors for headers (90% white) and cells (85% white) for better readability - Maintains light mode styling unchanged
- Changed table base background from #0f0f12 to transparent - Fixed row backgrounds from light gray (#929292, #8c8c8c) to proper dark/transparent - Changed text color from dark gray to light (#e3e3e3) for readability - Made header background consistent (#18181c) instead of #444459 - Added subtle zebra striping with rgba(0, 0, 0, 0.2) for even rows - Tables now blend naturally into page background while maintaining visibility
Significantly enhanced dark mode table styling for better readability: - Increased zebra striping contrast: 18% white opacity (vs previous 2% black) - Lightened header background: #3a4b5c (vs previous #18181c near-black) - Added subtle base table background: 5% white opacity to separate from page - Improved text contrast: 95% white for headers, 90% for cells - Enhanced hover states: 12-22% opacity range for better interaction feedback - Strengthened border visibility: increased opacity from 10% to 15% These changes maintain the borderless aesthetic while making tables much more prominent and easier to read in dark mode.
Apply explicit border-radius to all four corners of tables: - Top-left and top-right on first header row cells - Bottom-left and bottom-right on last body row cells - Ensure border-collapse: separate and overflow: hidden are set - Apply consistently in both light and dark modes
Updated table row background colors to create stronger visual separation: Dark mode changes: - Odd rows: 0.05 → 0.03 (darker baseline) - Even rows: 0.18 → 0.30 (significantly lighter) - Contrast difference: 13% → 27% (more than doubled) - Hover states updated proportionally Light mode changes: - Even rows: 0.02 → 0.04 (doubled contrast) This enhancement improves row scanning and readability while maintaining WCAG AA contrast ratios for text accessibility.
Enhances table readability in dark mode by increasing the contrast between alternating rows: - Odd rows: nearly transparent (1% white opacity) - Even rows: significantly brighter (45% white opacity) This creates a 44% contrast difference (up from 27%), making the zebra striping much more pronounced and easier to scan in dark mode. Text readability and WCAG AA accessibility standards are maintained.
Changes dark mode selector from nested structure to explicit selectors: - [data-theme='dark'] .markdown table - [data-theme='dark'] table.small-table - [data-theme='dark'] .small-table This ensures dark mode styles properly override base styles applied via @include small-table mixin in .markdown table selector.
Removed all border styling from tables to create a cleaner, borderless appearance while maintaining zebra striping and rounded corners for visual definition. Changes: - Dark mode: Removed table border (line 100), thead border-bottom (line 108), and td border-top (line 154) - Light mode: Already had border: none set correctly - Kept all other styling intact (backgrounds, colors, border-radius)
Reduce the zebra striping contrast in dark mode tables from 44% to 35% (a 20% reduction) for improved readability. Even row background changed from rgba(255, 255, 255, 0.45) to rgba(255, 255, 255, 0.36), maintaining clear row separation while reducing visual strain.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Apply consistent border radius to images embedded using the ImageWithCaption component for visual consistency across all images in the documentation. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
fionnachan
approved these changes
Feb 2, 2026
Member
fionnachan
left a comment
fionnachan
left a comment
There was a problem hiding this comment.
LGTM
One small nit on the table: if the number of rows is an odd number, the table bleeds onto the page. You might want to add a border?
Added discreet 1px borders to all markdown tables that work with both light and dark themes: - Light theme: rgba(0, 0, 0, 0.1) - very subtle dark border - Dark theme: rgba(255, 255, 255, 0.15) - very subtle light border The borders complement the existing rounded corners and zebra striping, providing better visual separation without being intrusive.
- Add subtle column separators using right borders on th and td elements - Light theme: rgba(0, 0, 0, 0.1) borders matching table outer border - Dark theme: rgba(255, 255, 255, 0.15) borders matching table outer border - Last column has no right border for clean edge - Improves visual separation while maintaining minimal design
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds some improvements to the site's layout and its styling code.