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:
parent
c69874c5cb
commit
4c75c76284
@ -12,6 +12,8 @@ export default defineConfig({
|
|||||||
tagline: 'LTspice circuit simulation via MCP',
|
tagline: 'LTspice circuit simulation via MCP',
|
||||||
components: {
|
components: {
|
||||||
Hero: './src/components/Hero.astro',
|
Hero: './src/components/Hero.astro',
|
||||||
|
SocialIcons: './src/components/SocialIcons.astro',
|
||||||
|
Footer: './src/components/Footer.astro',
|
||||||
},
|
},
|
||||||
social: [
|
social: [
|
||||||
{ icon: 'external', label: 'Gitea', href: 'https://git.supported.systems/MCP/mcltspice' },
|
{ icon: 'external', label: 'Gitea', href: 'https://git.supported.systems/MCP/mcltspice' },
|
||||||
|
|||||||
62
docs/src/components/Footer.astro
Normal file
62
docs/src/components/Footer.astro
Normal 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>
|
||||||
40
docs/src/components/SocialIcons.astro
Normal file
40
docs/src/components/SocialIcons.astro
Normal 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>
|
||||||
@ -6,9 +6,11 @@
|
|||||||
@import "./oscilloscope.css";
|
@import "./oscilloscope.css";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--sl-color-accent-low: #083344; /* teal-950 */
|
/* Dark mode (Starlight default: :root = dark)
|
||||||
--sl-color-accent: #0d9488; /* teal-600 */
|
* Gray scale: gray-1 = highest contrast (lightest), gray-7 = lowest */
|
||||||
--sl-color-accent-high: #ccfbf1; /* teal-100 */
|
--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-1: #fafafa; /* zinc-50 */
|
||||||
--sl-color-gray-2: #e4e4e7; /* zinc-200 */
|
--sl-color-gray-2: #e4e4e7; /* zinc-200 */
|
||||||
@ -19,18 +21,19 @@
|
|||||||
--sl-color-gray-7: #0f0f11; /* near-black */
|
--sl-color-gray-7: #0f0f11; /* near-black */
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-theme="dark"] {
|
:root[data-theme="light"] {
|
||||||
--sl-color-accent-low: #083344;
|
/* Light mode: gray-1 = highest contrast (darkest) */
|
||||||
--sl-color-accent: #2dd4bf; /* teal-400 in dark */
|
--sl-color-accent-low: #ccfbf1; /* teal-100 — light accent bg */
|
||||||
--sl-color-accent-high: #042f2e; /* teal-950 */
|
--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-1: #0f0f11; /* near-black */
|
||||||
--sl-color-gray-2: #18181b;
|
--sl-color-gray-2: #18181b; /* zinc-900 */
|
||||||
--sl-color-gray-3: #3f3f46;
|
--sl-color-gray-3: #3f3f46; /* zinc-700 */
|
||||||
--sl-color-gray-4: #a1a1aa;
|
--sl-color-gray-4: #a1a1aa; /* zinc-400 */
|
||||||
--sl-color-gray-5: #d4d4d8;
|
--sl-color-gray-5: #d4d4d8; /* zinc-300 */
|
||||||
--sl-color-gray-6: #e4e4e7;
|
--sl-color-gray-6: #e4e4e7; /* zinc-200 */
|
||||||
--sl-color-gray-7: #fafafa;
|
--sl-color-gray-7: #fafafa; /* zinc-50 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tool reference parameter tables */
|
/* Tool reference parameter tables */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user