Skip to content

fix: update link colors and improve CSS for accessibility compliance #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IEvangelist merged 4 commits into from
Jan 16, 2026
Merged

fix: update link colors and improve CSS for accessibility compliance #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb0940f
fix: update link colors and improve CSS for accessibility compliance
IEvangelist Jan 14, 2026
1f10c1f
fix: clarify comments in write-git-env script for better understanding
IEvangelist Jan 16, 2026
3279eb7
fix: update link color for consistency and improve link styling in pa…
IEvangelist Jan 16, 2026
f677e20
fix: update hue values for green and orange to meet WCAG AA compliance
IEvangelist Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/frontend/lunaria/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) /
60rem 30rem,
var(--theme-bg);
--ln-color-link: var(--theme-accent);
--ln-color-link: #7084ff;
--ln-color-black: var(--theme-text);
--ln-color-done: var(--color-blue, #0078d7);
--ln-color-outdated: #ea580c;
Expand Down Expand Up @@ -47,8 +47,8 @@ h6 {
color: var(--sl-color-text, var(--theme-text));
}

/* Links in paragraphs keep an underline but use the shared accent color */
p a {
/* Links keep an underline but use the shared accent color */
a {
text-decoration: underline;
color: var(--ln-color-link);
}
Expand Down
9 changes: 7 additions & 2 deletions src/frontend/scripts/write-git-env.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
#!/usr/bin/env node
/**
* Writes current git commit and repo URL into a .env.local file so Astro (Vite) exposes them.
* Writes the git commit and repo URL into a .env.local file so Astro (Vite) exposes them.
* PUBLIC_ prefix ensures they are available in client code.
*/
import { execSync } from 'child_process';
Expand All @@ -14,7 +14,12 @@ const __dirname = dirname(__filename);

function getCommit() {
try {
return execSync('git rev-parse HEAD').toString().trim();
/**
* We need to get the commit hash from the public repo's main branch.
* In CI/CD, there may be other intermediary commits from the deploy branch.
* This ensures we always get the correct commit hash.
*/
return execSync('git merge-base main HEAD').toString().trim();
} catch {
return '';
}
Expand Down
110 changes: 50 additions & 60 deletions src/frontend/src/styles/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,19 +74,19 @@
background-color: var(--aspire-color-secondary);
}

.starlight-aside .starlight-aside--note > .starlight-aside__title {
.starlight-aside .starlight-aside--note>.starlight-aside__title {
color: var(--sl-color-blue);
}

aside.starlight-aside.starlight-aside--tip > .starlight-aside__title {
aside.starlight-aside.starlight-aside--tip>.starlight-aside__title {
color: var(--sl-color-purple);
}

aside.starlight-aside.starlight-aside--caution > .starlight-aside__title {
aside.starlight-aside.starlight-aside--caution>.starlight-aside__title {
color: var(--sl-color-orange);
}

aside.starlight-aside.starlight-aside--danger > .starlight-aside__title {
aside.starlight-aside.starlight-aside--danger>.starlight-aside__title {
color: var(--sl-color-red);
}

Expand Down Expand Up @@ -116,6 +116,13 @@
--sl-color-bg: var(--aspire-color-white) !important;
--sl-color-text: var(--aspire-color-black) !important;

/* Override green and orange-high for WCAG AA compliance (catppuccin defaults fail 4.5:1 threshold) */
--sl-hue-green: 109;
--sl-hue-orange: 22;
--sl-color-green-low: hsl(var(--sl-hue-green), 40%, 85%) !important;
--sl-color-green-high: hsl(var(--sl-hue-green), 70%, 28%) !important;
--sl-color-orange-high: hsl(var(--sl-hue-orange), 99%, 38%) !important;

--gradient-purple-magenta: linear-gradient(90deg, var(--color-purple), var(--color-magenta));
--gradient-magenta-flamingo: linear-gradient(90deg, var(--color-magenta), var(--color-flamingo));
--gradient-flamingo-purple: linear-gradient(90deg, var(--color-flamingo), var(--color-purple));
Expand All @@ -133,19 +140,19 @@
color: var(--aspire-color);
}

aside.starlight-aside.starlight-aside--note > .starlight-aside__title {
aside.starlight-aside.starlight-aside--note>.starlight-aside__title {
color: var(--sl-color-blue);
}

aside.starlight-aside.starlight-aside--tip > .starlight-aside__title {
aside.starlight-aside.starlight-aside--tip>.starlight-aside__title {
color: var(--sl-color-purple);
}

aside.starlight-aside.starlight-aside--caution > .starlight-aside__title {
aside.starlight-aside.starlight-aside--caution>.starlight-aside__title {
color: #ab3f00;
}

aside.starlight-aside.starlight-aside--danger > .starlight-aside__title {
aside.starlight-aside.starlight-aside--danger>.starlight-aside__title {
color: var(--sl-color-red);
}

Expand Down Expand Up @@ -213,20 +220,16 @@
font-style: normal;
}

pre[data-language='bash'] > code,
pre[data-language='powershell'] > code,
pre[data-language='console'] > code {
pre[data-language='bash']>code,
pre[data-language='powershell']>code,
pre[data-language='console']>code {
line-height: initial;
}

pre.mermaid[data-processed='true'] {
border: 1px solid var(--sl-color-gray-5);
}

/* pre.mermaid[data-processed=true] svg g svg {
transform: translateY(-3.5rem);
} */

.sl-markdown-content code {
border-radius: 0.25rem;
}
Expand All @@ -235,7 +238,7 @@ pre.mermaid[data-processed='true'] {
font-size: inherit;
}

.sl-markdown-content a > code {
.sl-markdown-content a>code {
white-space: pre;
}

Expand Down Expand Up @@ -282,20 +285,20 @@ starlight-file-tree .comment::before {
transform-origin: center;
}

starlight-file-tree .directory > details > summary::marker,
starlight-file-tree .directory > details > summary::-webkit-details-marker {
starlight-file-tree .directory>details>summary::marker,
starlight-file-tree .directory>details>summary::-webkit-details-marker {
display: none !important;
}

starlight-file-tree .directory > details > summary {
starlight-file-tree .directory>details>summary {
list-style: none;
}

starlight-file-tree .directory > details > summary::-webkit-details-marker {
starlight-file-tree .directory>details>summary::-webkit-details-marker {
display: none !important;
}

starlight-file-tree .directory > details > summary::before {
starlight-file-tree .directory>details>summary::before {
content: '';
display: inline-block;
width: 1.25em;
Expand All @@ -304,13 +307,11 @@ starlight-file-tree .directory > details > summary::before {
vertical-align: middle;
background-color: currentColor;
transition: transform 0.25s ease;
-webkit-mask: no-repeat center / contain
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='currentColor' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/></svg>");
mask: no-repeat center / contain
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='currentColor' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/></svg>");
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='currentColor' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/></svg>");
mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='currentColor' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/></svg>");
}

starlight-file-tree .directory > details[open] > summary::before {
starlight-file-tree .directory>details[open]>summary::before {
transform: rotate(90deg);
}

Expand Down Expand Up @@ -500,12 +501,10 @@ figure.frame {
}

:root:has(meta[name='page'][content='404']) #_top:hover {
background: linear-gradient(
90deg,
var(--aspire-color) 0%,
var(--aspire-color-black) 50%,
var(--aspire-color) 100%
);
background: linear-gradient(90deg,
var(--aspire-color) 0%,
var(--aspire-color-black) 50%,
var(--aspire-color) 100%);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
Expand All @@ -515,12 +514,10 @@ figure.frame {
}

:root[data-theme='dark']:has(meta[name='page'][content='404']) #_top:hover {
background: linear-gradient(
90deg,
var(--aspire-color) 0%,
var(--aspire-color-white) 50%,
var(--aspire-color) 100%
);
background: linear-gradient(90deg,
var(--aspire-color) 0%,
var(--aspire-color-white) 50%,
var(--aspire-color) 100%);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
Expand Down Expand Up @@ -560,6 +557,7 @@ figure.frame {

/* Keyframes: quick squish (blink), then a gentle bounce with random flips */
@keyframes blink-bounce {

0%,
15%,
85%,
Expand Down Expand Up @@ -597,7 +595,7 @@ figure.frame {
transform: translateY(-10%);
}

.hero > img {
.hero>img {
max-width: 100%;
max-height: 15rem;
height: auto;
Expand Down Expand Up @@ -720,13 +718,13 @@ figure.frame {

/* Hero page specific styling */
:root[data-has-hero] {
.sl-markdown-content > .sl-heading-wrapper {
.sl-markdown-content>.sl-heading-wrapper {
margin-top: 5rem;
scroll-margin-top: 6rem;
}

.sl-markdown-content > .languages-supported + p,
.sl-markdown-content > .sl-heading-wrapper + p {
.sl-markdown-content>.languages-supported+p,
.sl-markdown-content>.sl-heading-wrapper+p {
max-width: 80%;
}

Expand Down Expand Up @@ -775,8 +773,8 @@ figure.frame {
padding: 0.75rem 1.5rem;
}

.sl-markdown-content > .languages-supported + p,
.sl-markdown-content > .sl-heading-wrapper + p {
.sl-markdown-content>.languages-supported+p,
.sl-markdown-content>.sl-heading-wrapper+p {
max-width: 100%;
}

Expand Down Expand Up @@ -849,10 +847,8 @@ li a.external-link::after {
pointer-events: none;
transition: transform 120ms ease;

-webkit-mask: no-repeat center / contain
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/><path d='M5 5h7v2H7v10h10v-5h2v7H5z'/></svg>");
mask: no-repeat center / contain
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/><path d='M5 5h7v2H7v10h10v-5h2v7H5z'/></svg>");
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/><path d='M5 5h7v2H7v10h10v-5h2v7H5z'/></svg>");
mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/><path d='M5 5h7v2H7v10h10v-5h2v7H5z'/></svg>");
}

:root {
Expand Down Expand Up @@ -882,7 +878,7 @@ it configures at which point the mobile toc should be replaced with the normal t
display: flex;
}

:root[data-has-toc] .content-panel > .sl-container {
:root[data-has-toc] .content-panel>.sl-container {
margin-inline: 0;
}
}
Expand All @@ -906,19 +902,13 @@ it configures at which point the mobile toc should be replaced with the normal t
display: block;
}

:root[data-has-toc] .right-sidebar-panel > .sl-container {
max-width: calc(
(
(
100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
var(--sl-sidebar-pad-x)
) *
.2 /* MAGIC NUMBER 🥲 */
)
);
:root[data-has-toc] .right-sidebar-panel>.sl-container {
max-width: calc(((100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 * var(--sl-sidebar-pad-x)) * .2
/* MAGIC NUMBER 🥲 */
));
}

:root[data-has-toc] .content-panel > .sl-container {
:root[data-has-toc] .content-panel>.sl-container {
margin-inline: var(--sl-content-margin-inline, auto);
}
}
Expand Down
Loading