Skip to content

Restyle blog with deep-ocean dark/underwater theme#4

Merged
Loyale merged 1 commit into
mainfrom
claude/vibrant-ritchie-KKkgZ
May 27, 2026
Merged

Restyle blog with deep-ocean dark/underwater theme#4
Loyale merged 1 commit into
mainfrom
claude/vibrant-ritchie-KKkgZ

Conversation

@Loyale
Copy link
Copy Markdown
Contributor

@Loyale Loyale commented May 27, 2026

Summary

  • Flip the palette from a light deep-ocean scheme to a dark underwater one. New tokens for the water column (abyss / trench / deep / current / kelp), cool-tinted type (foam / mist / muted), coral links, and a bioluminescent mint accent for the brand and headings.
  • Body uses a fixed-viewport vertical gradient roughly following real ocean light attenuation — sunlit teal at top → mesopelagic blue → bathypelagic indigo → abyssal near-black at the bottom — with a faint surface-light radial wash. background-attachment: fixed keeps the bottom of the screen always the deepest, independent of scroll.
  • Cleaner layout: narrower 980px container, articles rendered as subtly bordered cards with soft shadow, refined uppercase navbar with bioluminescent hover/active states, pill-shaped tags and buttons, glow on focus.
  • Switched CODE_COLOR_SCHEME to monokai and styled .highlight / pre as a dark IDE-style well with a teal border and line-number gutter.
  • Jupyter notebook support for both the classic (.input_area, .output, div.prompt) and JupyterLab (.jp-InputArea, .jp-OutputArea, .jp-RenderedHTMLCommon) class trees: cyan input prompts, coral output prompts, translucent teal dataframe headers with zebra rows, coral-tinted stderr cells, and a light backing for matplotlib/SVG outputs so transparent figures stay legible.
  • THEME_COLOR updated to #04161d for the mobile browser chrome.

Test plan

  • nikola build succeeds with no template/CSS errors
  • nikola serve -b — verify home, archive, tags, single post, and About page render in the new theme
  • Confirm the body gradient transitions smoothly top→bottom and stays fixed while scrolling
  • Verify a Markdown post with fenced code blocks renders cleanly in monokai on the dark well
  • Verify a sample Jupyter notebook post renders inputs, outputs, dataframes, and matplotlib figures legibly
  • Check responsive header / collapsed navbar on a narrow viewport
  • Verify Giscus comments section visually integrates with the dark theme

Generated by Claude Code

Flip the palette from a light deep-ocean scheme to a dark
underwater one. Body uses a fixed-viewport vertical gradient
roughly following real ocean light attenuation (sunlit ->
twilight -> midnight -> abyss) so the bottom of the screen
always feels deeper.

Layout: narrower container, card-style articles with subtle
teal borders, refined navbar with bioluminescent accents,
pill tags and pagination.

Code: switch CODE_COLOR_SCHEME to monokai and ship dark
code-block styling. Add Jupyter notebook overrides (both
classic .input/.output and modern .jp-* classes) so inputs,
outputs, prompts, dataframes, and figures stay readable.
@Loyale Loyale merged commit 3930160 into main May 27, 2026
2 checks passed
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.

2 participants