fix(aicoc-hub): dark mode for session-card on /aicochub#101
Open
dosteinacher wants to merge 4 commits into
Open
fix(aicoc-hub): dark mode for session-card on /aicochub#101dosteinacher wants to merge 4 commits into
dosteinacher wants to merge 4 commits into
Conversation
PR #98 only dark-moded the .article-card (blog list cards). The AI CoC hub's session-card has its own styling and was untouched — so on /aicochub with the OS in dark mode, cards still rendered with a bright white body sitting on a near-black page. Visually jarring; text inside the white body inherited the now-light dark-mode body color, making the title and description hard to read. Mirror the article-card approach: in @media (prefers-color-scheme: dark), darken the card body to #1a1a1c, flip text colors to light grays, and bump the hover shadow so the lift still reads on dark. Light mode is byte-identical — change is fully scoped to the media query. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
Two follow-ups on top of the dark-mode card colors:
1. **Empty media void**: When a session has no cover image (which is all
of them today), the 16:9 `.session-card-media` placeholder shows a
dark gradient. That gave visual separation in light mode but in dark
mode it merges with the now-dark card body — leaving a tall void
above the title with just the AI COC pill floating in it.
Fix: in dark mode + no-image, collapse the media area to a 48px strip
(just room for the pill), hide the placeholder gradient div, and hide
the play overlay (no thumbnail to "play" anyway).
2. **Raw Excel-serial dates**: The publishing pipeline serialises Word
doc date cells as Excel serial numbers ("46175"). session-feed.js
already converts these for sorting, but the value passed to the card
was the raw string — so cards rendered "46175 · Neeraj Garg" instead
of "Jun 4, 2026 · Neeraj Garg".
Fix: add `formatSessionDate()` to session-card.js (mirrors the one in
session-header.js) and call it before render.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Two further follow-ups after the dark-mode color fix: 1. **Contain the hub hero.** `body.aicoc-hub main > div:first-of-type` was full-bleed, so in light mode the dark gradient extended edge-to- edge and the page looked entirely dark. Give it a `max-width: 1200px`, center it with auto margins, and round the corners — now the page bg shows breathing room on either side and the hero reads as a centered block. Same change benefits dark mode too (with a slightly tinted body bg so the contained hero still stands out against the page). 2. **Reliably collapse no-image card media.** The previous attempt used `.session-card-media:has(.session-card-placeholder)` to collapse the empty 16:9 dark-gradient area to a 48px strip in dark mode, but the `:has()` rule didn't take effect in practice (still seeing the void). Switch to a JS-driven `.session-card--no-image` modifier on the card, target it with a plain descendant selector — applies in both light and dark mode for consistency, and adds a subtle border between the pill strip and the body so the AI COC tag still feels anchored. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Two visual tweaks based on dark-mode preview feedback: 1. **Lighter cards.** The previous #1a1a1c card bg was too close to the page tone — cards barely separated from the background. Bump to #2d2d33 with a #3d3d44 border so cards visibly lift. Text colors nudged slightly lighter to keep readable contrast (#f5f5f7 title, #d4d4d8 description). 2. **Blend the hero corners with the page.** The hero's border-radius was revealing the page bg (#0e0e10) at the corners, which read as lighter "white" patches next to the hero's #0b0b0d darkest gradient stop. Match the page bg to the hero's darkest tone so the rounded corners disappear into the page seamlessly. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
PR #98 only dark-moded
.article-card(blog list). The AI CoC hub's.session-cardhas its own block CSS and was untouched, so on/en/aicochubwith the OS in dark mode the cards still rendered with a bright white body sitting on a near-black page — and the title/description inside inherited the now-light--body-color, making text hard to read.This PR adds a dark-mode block to
blocks/session-card/session-card.css:#1a1a1c(matches the page tone)#2a2a2e#f0f0f0, description →#c5c5c9, presenter →#f0f0f0Light mode is byte-identical — change is fully inside
@media (prefers-color-scheme: dark).Preview
Branch preview host:
fix-dark-mode-session-card--inside-aem--adobe.aem.pageNote on the empty card bodies
The two sessions currently visible on the hub (
Unlocking AI Productivity with EasyMCP Desktop,Learning Machine) appear to have empty white bodies in the screenshot. That's a separate issue from dark mode — likely because those two docs were published withoutdescriptionorpresenterin their Metadata table, so the card has nothing to render below the title. After this PR lands and the patched docs in~/Downloads/aicocdocs/get uploaded, the bodies should populate.Test plan
/en/aicochubin OS dark mode → cards have dark bodies, all text readable/en/aicochubin OS light mode → identical to production🤖 Generated with Claude Code