From 8651a52197e667ff9ae8a27a563ca8898b4591bd Mon Sep 17 00:00:00 2001 From: Dinesh <13635627+HumbleBee14@users.noreply.github.com> Date: Sat, 8 Aug 2026 22:52:19 -0700 Subject: [PATCH 1/2] Fix dark-mode dialog contrast with proper surface elevation Elevated surfaces (search modal, newsletter dialog) drew near-black on near-black with an invisible shadow. Add --elevated/--elevated-border/ --scrim tokens so dialogs sit lighter than the page with a visible edge. --- src/styles/global.css | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index b8411e6..a2014fc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -47,6 +47,13 @@ html { --accent-2: #8a3318; --accent-soft: rgba(184, 67, 31, 0.08); + /* Elevated surfaces (dialogs, popovers) — raised above the page */ + --elevated: #fffdf8; + --elevated-border: var(--line-2); + --elevated-shadow: + 0 20px 60px -20px rgba(60, 40, 20, 0.28), 0 8px 24px -8px rgba(60, 40, 20, 0.12); + --scrim: rgba(24, 20, 14, 0.32); + /* Highlight tints (light) */ --mark-gray: #ebeced; --mark-brown: #e9e5e3; @@ -128,6 +135,13 @@ html { --accent-2: #ffa07a; --accent-soft: rgba(255, 122, 77, 0.1); + /* Elevated surfaces (dark): lighter than the page + a visible border, since + shadows can't separate a surface from a near-black background. */ + --elevated: #211d16; + --elevated-border: #4a4234; + --elevated-shadow: inset 0 1px 0 rgba(255, 244, 230, 0.05), 0 24px 60px -16px rgba(0, 0, 0, 0.7); + --scrim: rgba(0, 0, 0, 0.62); + /* Highlight tints (dark) — translucent so light text stays readable */ --mark-gray: rgba(255, 255, 255, 0.1); --mark-brown: rgba(150, 110, 90, 0.28); @@ -1027,7 +1041,7 @@ a.hashtag:hover { /* Side panel (right of community) */ .side-panel { - border: 1px solid var(--line); + border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--paper-2); padding: 28px; @@ -1419,17 +1433,17 @@ a.hashtag:hover { position: absolute; inset: 0; border: none; - background: rgba(20, 16, 10, 0.45); + background: var(--scrim); cursor: pointer; } .nl-panel { position: relative; width: min(440px, 100%); - background: var(--paper); - border: 1px solid var(--line); + background: var(--elevated); + border: 1px solid var(--elevated-border); border-radius: var(--radius-md); padding: 28px; - box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); + box-shadow: var(--elevated-shadow); } .nl-panel h3 { font-family: var(--font-display); @@ -2630,7 +2644,7 @@ a.hashtag:hover { .search-backdrop { position: absolute; inset: 0; - background: color-mix(in srgb, var(--paper) 60%, transparent); + background: var(--scrim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; @@ -2643,12 +2657,10 @@ a.hashtag:hover { max-height: calc(100vh - 96px); display: flex; flex-direction: column; - background: var(--paper); - border: 1px solid var(--line-2); + background: var(--elevated); + border: 1px solid var(--elevated-border); border-radius: 14px; - box-shadow: - 0 20px 60px -20px rgba(0, 0, 0, 0.25), - 0 8px 24px -8px rgba(0, 0, 0, 0.1); + box-shadow: var(--elevated-shadow); overflow: hidden; animation: search-pop 0.16s ease-out; } From b4b66d676fd35405f0907bc7a65cf2dfb56f3298 Mon Sep 17 00:00:00 2001 From: Dinesh <13635627+HumbleBee14@users.noreply.github.com> Date: Sat, 8 Aug 2026 22:54:35 -0700 Subject: [PATCH 2/2] Homepage: zine masthead + editorial index (experiment) Replace the hero card grids (Featured/Latest) with a numbered, ruled editorial index and add a masthead rule with a mono wordmark, so the homepage reads as a publication rather than a template. --- src/pages/index.astro | 212 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 182 insertions(+), 30 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 4583c05..54f6723 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -44,6 +44,10 @@ const featuredTools = pickCoreTools(allTools);
+
+ ML Systems + An open archive · Est. 2026 +

@@ -97,23 +101,29 @@ const featuredTools = pickCoreTools(allTools); All articles →

-
- {featured.map((p) => ( - -
- {p.data.topicId && {topicName(p.data.topicId)}} -
-

{p.data.title}

-

{p.data.summary}

-
- {p.authors.map((a) => a.data.name).join(', ')} - - {formatDate(p.data.date)} · {p.data.readMin} min +
    + {featured.map((p, i) => ( +
  1. + + {String(i + 1).padStart(2, '0')} +
    +

    {p.data.title}

    +

    {p.data.summary}

    +
    + {p.data.topicId && {topicName(p.data.topicId)}} + {p.authors.map((a) => a.data.name).join(', ')} + + {formatDate(p.data.date)} · {p.data.readMin} min + +
    +
    + -
- + + ))} -
+
) @@ -132,23 +142,29 @@ const featuredTools = pickCoreTools(allTools); All articles → -
- {recent.map((p) => ( - -
- {p.data.topicId && {topicName(p.data.topicId)}} -
-

{p.data.title}

-

{p.data.summary}

-
- {p.authors.map((a) => a.data.name).join(', ')} - - {formatDate(p.data.date)} · {p.data.readMin} min +
    + {recent.map((p, i) => ( +
  1. + + {String(i + 1).padStart(2, '0')} +
    +

    {p.data.title}

    +

    {p.data.summary}

    +
    + {p.data.topicId && {topicName(p.data.topicId)}} + {p.authors.map((a) => a.data.name).join(', ')} + + {formatDate(p.data.date)} · {p.data.readMin} min + +
    +
    + -
- + + ))} -
+ ) @@ -354,6 +370,142 @@ const featuredTools = pickCoreTools(allTools);