CSS Test Page

• #test

This post exercises the CSS features touched by recent cleanup. Check each section in both light and dark mode.

1. Images and video (no more color: solid)

Images and video should render normally with no weird color artifacts:

2. Dark mode body background

Toggle to dark mode. The background should be hsl(120, 2%, 9%) and text color should follow --main-color automatically via the CSS variable (no explicit color on body needed).

3. Visited links

This is a link to the homepage — after visiting, it should inherit the current text color in both light and dark mode. Previously a:visited was redundantly declared in the dark media query.

4. Typo class (wavy red underline)

This word is mispeled on purpose. You should see a red wavy underline. Previously the shorthand text-decoration: underline was clobbering the wavy and red values.

5. Image frame (merged duplicate rules)

The .img-frame img rules were split across two declarations. Now merged — the image below should have a dodgerblue background (visible while loading), a desaturated high-contrast filter, and on hover it should become saturated:

Merged .img-frame img rule┅

6. Image frame — right float

Should float right with max-width: 60%. The standalone .right class was removed since it was only used with .img-frame:

Right-floated image┅

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

7. Image frame — left float

Left-floated image┅

This text should wrap around the left-floated image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

8. Dark mode .img-frame figcaption

In dark mode, the figcaption inside .img-frame should have color: hsl(120, 2%, 9%) (dark background color as text). The redundant gradient was removed but the figcaption override remains:

Check this caption color in dark mode┅

9. Blockquote

This is a blockquote. It should have a thin solid border using --main-color and italic text.

10. Aside with figure

This text wraps around the aside. On mobile (under 600px), the aside should stop floating and go full width, with the figure centered via text-align: center (the redundant margin: 0 was removed from the mobile query since the base rule already handles it). Resize your browser to test.

11. Code block (syntax highlighting)

Highlight CSS is now only loaded on pages that use code.html. Check the network tab — highlight.css should appear as a separate request on this page but not on pages without code blocks. Verify syntax colors work in both light and dark mode:

hello.rb </>

def hello(name)
  # This should have syntax colors
  puts "Hello, #{name}!"
end

And a second code block to verify the <link> tag only appears once in the DOM:

greeting.js </>

const greeting = (name) => {
  // keywords, strings, and comments should all be colored
  return `Hello, ${name}!`
}

12. Extreme aspect ratio images

Test how the figure partial handles images with unusual dimensions. Click any to toggle fullscreen — that’s where clipping is most likely.

Super tall (portrait, 1:3)

1:3 portrait — should not be clipped┅

Super wide (landscape, 4:1)

4:1 landscape — should not be clipped┅

Extreme portrait (1:5)

1:5 portrait — likely to clip in fullscreen┅

Extreme landscape (6:1)

6:1 landscape — likely to clip in fullscreen┅

Tall portrait, right float

Right float with tall image┅

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Wide landscape, left float

Left float with wide image┅

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

13. Mobile responsive (resize to < 600px)

At narrow widths:

• .img-frame should go full width (no float)
• aside should stop floating
• blockquote margins should collapse
• #index-list padding removed