Fix dark mode contrast, add distinct social icons and footer repo link

Dark mode had inverted gray scale (:root[data-theme="dark"] should
have been [data-theme="light"]), causing near-invisible text. Override
SocialIcons with Lucide GitBranch/Package icons instead of duplicate
external-link icons. Add footer source link to Gitea.
This commit is contained in:
Ryan Malloy 2026-02-15 14:07:58 -07:00
parent c69874c5cb
commit 4c75c76284
4 changed files with 121 additions and 14 deletions

View File

@ -12,6 +12,8 @@ export default defineConfig({
tagline: 'LTspice circuit simulation via MCP',
components: {
Hero: './src/components/Hero.astro',
SocialIcons: './src/components/SocialIcons.astro',
Footer: './src/components/Footer.astro',
},
social: [
{ icon: 'external', label: 'Gitea', href: 'https://git.supported.systems/MCP/mcltspice' },

View File

@ -0,0 +1,62 @@
---
/**
* Custom Footer override — adds source repository link alongside
* Starlight's default edit link and pagination.
*/
import EditLink from 'virtual:starlight/components/EditLink';
import LastUpdated from 'virtual:starlight/components/LastUpdated';
import Pagination from 'virtual:starlight/components/Pagination';
import { GitBranch } from '@lucide/astro';
---
<footer class="sl-flex">
<div class="meta sl-flex">
<EditLink />
<LastUpdated />
</div>
<Pagination />
<div class="repo-link">
<a href="https://git.supported.systems/MCP/mcltspice" class="sl-flex source-link">
<GitBranch size={14} />
<span>Source</span>
</a>
</div>
</footer>
<style>
@layer starlight.core {
footer {
flex-direction: column;
gap: 1.5rem;
}
.meta {
gap: 0.75rem 3rem;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 3rem;
font-size: var(--sl-text-sm);
color: var(--sl-color-gray-3);
}
.meta > :global(p:only-child) {
margin-inline-start: auto;
}
}
@layer starlight.components {
.repo-link {
display: flex;
justify-content: center;
margin: 1rem 0;
}
.source-link {
align-items: center;
gap: 0.4em;
font-size: var(--sl-text-xs);
text-decoration: none;
color: var(--sl-color-gray-3);
}
.source-link:hover {
color: var(--sl-color-text-accent);
}
}
</style>

View File

@ -0,0 +1,40 @@
---
/**
* Custom SocialIcons override — uses Lucide icons instead of
* Starlight's built-in 'external' icon for distinguishable links.
*/
import { GitBranch, Package } from '@lucide/astro';
const links = [
{
label: 'Source',
href: 'https://git.supported.systems/MCP/mcltspice',
Icon: GitBranch,
},
{
label: 'PyPI',
href: 'https://pypi.org/project/mcltspice/',
Icon: Package,
},
];
---
{links.map(({ label, href, Icon }) => (
<a {href} rel="me" class="sl-flex social-link">
<span class="sr-only">{label}</span>
<Icon size={20} />
</a>
))}
<style>
@layer starlight.components {
.social-link {
color: var(--sl-color-text-accent);
padding: 0.5em;
margin: -0.5em;
}
.social-link:hover {
opacity: 0.66;
}
}
</style>

View File

@ -6,9 +6,11 @@
@import "./oscilloscope.css";
:root {
--sl-color-accent-low: #083344; /* teal-950 */
--sl-color-accent: #0d9488; /* teal-600 */
--sl-color-accent-high: #ccfbf1; /* teal-100 */
/* Dark mode (Starlight default: :root = dark)
* Gray scale: gray-1 = highest contrast (lightest), gray-7 = lowest */
--sl-color-accent-low: #083344; /* teal-950 — dark accent bg */
--sl-color-accent: #2dd4bf; /* teal-400 — bright on dark bg */
--sl-color-accent-high: #ccfbf1; /* teal-100 — light accent text */
--sl-color-gray-1: #fafafa; /* zinc-50 */
--sl-color-gray-2: #e4e4e7; /* zinc-200 */
@ -19,18 +21,19 @@
--sl-color-gray-7: #0f0f11; /* near-black */
}
:root[data-theme="dark"] {
--sl-color-accent-low: #083344;
--sl-color-accent: #2dd4bf; /* teal-400 in dark */
--sl-color-accent-high: #042f2e; /* teal-950 */
:root[data-theme="light"] {
/* Light mode: gray-1 = highest contrast (darkest) */
--sl-color-accent-low: #ccfbf1; /* teal-100 — light accent bg */
--sl-color-accent: #0d9488; /* teal-600 — darker on light bg */
--sl-color-accent-high: #042f2e; /* teal-950 — dark accent text */
--sl-color-gray-1: #0f0f11;
--sl-color-gray-2: #18181b;
--sl-color-gray-3: #3f3f46;
--sl-color-gray-4: #a1a1aa;
--sl-color-gray-5: #d4d4d8;
--sl-color-gray-6: #e4e4e7;
--sl-color-gray-7: #fafafa;
--sl-color-gray-1: #0f0f11; /* near-black */
--sl-color-gray-2: #18181b; /* zinc-900 */
--sl-color-gray-3: #3f3f46; /* zinc-700 */
--sl-color-gray-4: #a1a1aa; /* zinc-400 */
--sl-color-gray-5: #d4d4d8; /* zinc-300 */
--sl-color-gray-6: #e4e4e7; /* zinc-200 */
--sl-color-gray-7: #fafafa; /* zinc-50 */
}
/* Tool reference parameter tables */