mirror of
https://github.com/ChrisTitusTech/winutil.git
synced 2026-08-10 01:51:18 +10:00
Sean (ANGRYxScotsman)andGitHub
6f0629207a
* Scaffold Astro + Starlight docs site
Bootstraps a new docs-astro project to replace the Hugo-based docs,
using Astro's Starlight framework with the content collection schema
and sidebar navigation configured for WinUtil's docs structure.
* Add WinUtil-branded Starlight theme
Restyles Starlight's default look with a dark-by-default grayscale
palette and WinUtil's brand blue (#0567ff, from the app logo) as the
single accent, Geist for UI text, and JetBrains Mono for code. Also
overrides the default theme provider so first-time visitors land on
dark mode instead of following OS preference.
* Add custom Hero and CornerCard components
Hero overrides Starlight's default hero with a full-bleed grid/glow
background, a browser-chrome-framed screenshot, and a badge row driven
by frontmatter data. CornerCard is a bordered feature card with corner
brackets, used for the landing page's feature grid.
* Migrate docs content from Hugo to Astro/Starlight
Ports the landing page, user guide sections, FAQ, known issues,
contributing guide, and a sample generated tweak reference page from
the Hugo site, converting Hugo shortcodes and GFM alert syntax to
their Starlight/MDX equivalents.
* Use Windows-style caption buttons in hero window chrome
Swap the macOS traffic-light dots for a minimize/maximize/close
button group, since WinUtil is a Windows tool.
* Use Windows-style caption glyph for terminal code blocks
Replace Expressive Code's default macOS dots on terminal-framed code
blocks with a right-aligned Windows minimize/maximize/close icon,
matching the hero window chrome.
* Archive the Hugo docs site as docs-old
* Promote Astro/Starlight docs from docs-astro to docs
* Show the launch command as a copyable code block on the docs homepage
* Add docs codeowner for seanh1995
* Register custom Header component for Starlight docs site
* Add custom navbar links to Astro docs, matching the old Hugo site's top nav
* Point dev docs generator at the Astro/Starlight docs site
Output moves from docs/content/dev (Hugo) to
docs/src/content/docs/code-reference (Astro/Starlight): .mdx instead
of .md, Starlight-style title="..." code fence labels instead of
Hugo's filename/linenos shortcode, and a ":::note" aside linking back
to each entry's source file. Frontmatter description is now pulled
from the JSON Description field. Also fixes a pre-existing bug where
the embedded JSON snippets were always missing their own closing
brace.
* Add seanh1995 as codeowner for the dev docs generator
* Wire up Code Reference section in docs sidebar
Adds an Architecture & Design page plus autogenerated Tweaks/Features
Reference groups pointing at docs/src/content/docs/code-reference, and
fixes the editLink base URL to the promoted docs/ path.
* Port architecture doc to code-reference and drop stale hyperv sample
Moves the Hugo-era architecture doc into
docs/src/content/docs/code-reference/architecture.mdx: drops the
Hugo-only weight/toc frontmatter, converts the embedded code fences to
Starlight's title="..." syntax, and repoints the "Related
Documentation" links at this site's actual slugs. Also removes the
hand-written reference/tweaks/hyperv.mdx placeholder now that the
generator produces the real page under code-reference/features.
* Keep pre-conversion backup of devdocs-generator.ps1
Snapshot of the script before it was pointed at the Astro/Starlight
docs site, for reference.
* updated workflow
* Update CODEOWNERS
* Hide edit-page link on the docs landing page
The splash-template landing page isn't a source doc meant to be edited
via GitHub like the rest of the guides, so skip showing the link.
* Add site footer with copyright line, matching the old Hugo docs
The Hugo site rendered "© {year} Chris Titus Tech. All rights
reserved." in its footer; Starlight's default footer had no
equivalent. Override it to append the same copyright line below the
existing edit-link/pagination row, and collapse that row entirely
when it has nothing in it (e.g. pages with editUrl disabled and no
prev/next) instead of leaving an empty gap.
* Fix vertical alignment and size of the arrow icon in hero/CTA buttons
The right-arrow icon read as floating above the button label's
baseline. Root cause was partly a genuine optical mismatch (fixed with
a small position nudge scoped to just the arrow icon, so it doesn't
also shift the unaffected GitHub icon) and partly the final CTA's copy
getting wrapped in a <p> by MDX's markdown parser, which behaved
slightly differently under the flex layout than the Hero component's
plain text node. Switching the CTA button's label to a JS string
expression avoids the wrapper and keeps both buttons' markup, and
rendering, identical.
* Use the dark fork-button screenshot in the contributing guide
Drop the unused light-mode variant and point the guide at
Fork-Button-Dark.png instead.
* Remove old Hugo docs site and pre-conversion backup files
The docs have moved to the Astro/Starlight site; the Hugo site
(docs-old/), its workflow backup, and the devdocs-generator.ps1
pre-conversion snapshot are no longer needed.
* keeping ai happy
* Bump sharp to 0.35.3 in docs site
477 lines
11 KiB
CSS
477 lines
11 KiB
CSS
/* WinUtil docs theme: grayscale palette with WinUtil blue (#0567ff) as the single accent, dark by default. */
|
|
@import './fonts.css';
|
|
|
|
:root {
|
|
--sl-font: 'Geist', var(--sl-font-system);
|
|
--sl-font-mono: 'JetBrains Mono Variable', var(--sl-font-system-mono);
|
|
|
|
/* WinUtil brand blue, matching the app logo (#0567ff). */
|
|
--wu-accent-h: 216;
|
|
--wu-accent: hsl(var(--wu-accent-h) 100% 51%);
|
|
--wu-accent-dim: hsl(var(--wu-accent-h) 90% 45%);
|
|
|
|
--wu-radius-sm: 0.5rem;
|
|
--wu-radius: 0.625rem;
|
|
--wu-radius-lg: 1rem;
|
|
}
|
|
|
|
/* Dark mode (default). */
|
|
:root,
|
|
::backdrop {
|
|
--sl-color-accent-low: hsl(var(--wu-accent-h) 60% 18%);
|
|
--sl-color-accent: var(--wu-accent);
|
|
--sl-color-accent-high: hsl(var(--wu-accent-h) 100% 85%);
|
|
|
|
--sl-color-white: #fafafa;
|
|
--sl-color-gray-1: #ededed;
|
|
--sl-color-gray-2: #b8b8b8;
|
|
--sl-color-gray-3: #8c8c8c;
|
|
--sl-color-gray-4: #4a4a4a;
|
|
--sl-color-gray-5: #2a2a2a;
|
|
--sl-color-gray-6: #171717;
|
|
--sl-color-black: #0a0a0a;
|
|
|
|
--sl-color-bg: #0a0a0a;
|
|
--sl-color-bg-nav: #0d0d0d;
|
|
--sl-color-bg-sidebar: #0d0d0d;
|
|
--sl-color-bg-inline-code: #1b1b1b;
|
|
--sl-color-hairline-light: #2a2a2a;
|
|
--sl-color-hairline: #1e1e1e;
|
|
--sl-color-hairline-shade: #000;
|
|
}
|
|
|
|
/* Light mode. */
|
|
:root[data-theme='light'],
|
|
[data-theme='light'] ::backdrop {
|
|
--sl-color-accent-low: hsl(var(--wu-accent-h) 90% 92%);
|
|
--sl-color-accent: var(--wu-accent-dim);
|
|
--sl-color-accent-high: hsl(var(--wu-accent-h) 80% 34%);
|
|
|
|
--sl-color-white: #0a0a0a;
|
|
--sl-color-gray-1: #171717;
|
|
--sl-color-gray-2: #333333;
|
|
--sl-color-gray-3: #737373;
|
|
--sl-color-gray-4: #a3a3a3;
|
|
--sl-color-gray-5: #d9d9d9;
|
|
--sl-color-gray-6: #f1f1f1;
|
|
--sl-color-gray-7: #fafafa;
|
|
--sl-color-black: #ffffff;
|
|
|
|
--sl-color-bg: #ffffff;
|
|
--sl-color-bg-nav: #fafafa;
|
|
--sl-color-bg-inline-code: #f1f1f1;
|
|
--sl-color-hairline-light: #ececec;
|
|
--sl-color-hairline-shade: #ececec;
|
|
}
|
|
|
|
/* Heading weight/tracking. */
|
|
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) {
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Rounded code blocks/inline code. */
|
|
.sl-markdown-content code:not(:where(.not-content *)) {
|
|
border-radius: var(--wu-radius-sm);
|
|
border: 1px solid var(--sl-color-hairline-light);
|
|
}
|
|
.sl-markdown-content pre:not(:where(.not-content *)) {
|
|
border-radius: var(--wu-radius);
|
|
border: 1px solid var(--sl-color-hairline-light);
|
|
}
|
|
.starlight-aside {
|
|
border-radius: 0 var(--wu-radius-sm) var(--wu-radius-sm) 0;
|
|
}
|
|
|
|
/* Windows-style minimize/maximize/close glyph for the code blocks */
|
|
.expressive-code .frame.is-terminal .header::before {
|
|
left: auto !important;
|
|
right: 0.85rem !important;
|
|
width: 4.75rem !important;
|
|
height: 0.7rem !important;
|
|
opacity: 0.85 !important;
|
|
--ec-frm-trmIcon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 8h12'/%3E%3Crect x='42' y='3.5' width='12' height='9' rx='0.5'/%3E%3Cpath d='M80 3l12 10M92 3L80 13'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Cards (CardGrid / LinkCard): rounded, accent border on hover. */
|
|
.sl-markdown-content .card,
|
|
a.link-card {
|
|
border-radius: var(--wu-radius) !important;
|
|
transition:
|
|
border-color 0.15s ease,
|
|
transform 0.15s ease;
|
|
}
|
|
.sl-markdown-content .card:hover,
|
|
a.link-card:hover {
|
|
border-color: var(--sl-color-accent);
|
|
}
|
|
|
|
/* Sidebar + nav background/border. */
|
|
.sidebar-pane,
|
|
header.header {
|
|
background-color: var(--sl-color-bg-nav);
|
|
border-color: var(--sl-color-hairline-light);
|
|
}
|
|
|
|
/* Prevents a horizontal scrollbar from the hero's full-bleed 100vw background trick. */
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ============================================================
|
|
Landing page marketing sections.
|
|
============================================================ */
|
|
|
|
/* Shared buttons (hero actions + mid-page + final CTA). */
|
|
.wu-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
height: 2.5rem;
|
|
padding-inline: 1.5rem;
|
|
border-radius: var(--wu-radius-sm);
|
|
font-size: var(--sl-text-sm);
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
transition:
|
|
filter 0.15s ease,
|
|
border-color 0.15s ease,
|
|
color 0.15s ease;
|
|
}
|
|
/* The right/left-arrow glyph's visual weight sits high in its viewBox, so it
|
|
reads as floating above the label's baseline without this nudge. */
|
|
.wu-btn .wu-icon-arrow {
|
|
position: relative;
|
|
top: 0.05em;
|
|
}
|
|
.wu-btn-primary {
|
|
background: var(--wu-accent);
|
|
color: #fff;
|
|
}
|
|
.wu-btn-primary:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
.wu-btn-secondary {
|
|
border: 1px solid var(--sl-color-hairline-light);
|
|
color: var(--sl-color-white);
|
|
background: transparent;
|
|
}
|
|
.wu-btn-secondary:hover {
|
|
border-color: var(--sl-color-accent);
|
|
color: var(--sl-color-accent);
|
|
}
|
|
/* Neutralizes any stray <p> MDX wraps around icon+text content, so it never breaks the flex row. */
|
|
.wu-btn > p,
|
|
.wu-trust-item > p {
|
|
display: contents;
|
|
}
|
|
|
|
/* Cancels Starlight's automatic 1.5rem inter-block margin inside our own grids/rows (it otherwise lands on item 2+ of each row and breaks alignment). */
|
|
.sl-markdown-content .wu-section,
|
|
.sl-markdown-content .wu-solution-grid > *,
|
|
.sl-markdown-content .wu-feature-grid > *,
|
|
.sl-markdown-content .wu-timeline > *,
|
|
.sl-markdown-content .wu-problem-list > *,
|
|
.sl-markdown-content .wu-benefit-list > *,
|
|
.sl-markdown-content .wu-trust-bar > *,
|
|
.sl-markdown-content .wu-badges > *,
|
|
.sl-markdown-content .wu-btn-row > * {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Section shell: full-bleed hairline dividers, alternating tint, 72rem reading width. */
|
|
.wu-section {
|
|
margin-inline: calc(-1 * var(--sl-content-pad-x));
|
|
padding-inline: var(--sl-content-pad-x);
|
|
border-bottom: 1px solid var(--sl-color-hairline-light);
|
|
padding-block: clamp(3rem, 4vw + 1.5rem, 5.5rem);
|
|
}
|
|
.wu-section--trust {
|
|
padding-block: 2rem;
|
|
}
|
|
.wu-section--tint {
|
|
background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
|
|
}
|
|
:root:not([data-theme='light']) .wu-section--tint {
|
|
background-color: color-mix(in srgb, var(--sl-color-gray-6) 60%, transparent);
|
|
}
|
|
.wu-section-inner {
|
|
max-width: 72rem;
|
|
margin-inline: auto;
|
|
}
|
|
.wu-text-narrow {
|
|
max-width: 44rem;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.wu-section-head {
|
|
max-width: 42rem;
|
|
margin: 0 auto 2.5rem;
|
|
text-align: center;
|
|
}
|
|
.wu-section-head h2 {
|
|
margin: 0;
|
|
font-size: var(--sl-text-3xl);
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: var(--sl-color-white);
|
|
}
|
|
.wu-section-head p {
|
|
margin: 0.75rem 0 0;
|
|
font-size: var(--sl-text-lg);
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
.wu-section-head.wu-align-left {
|
|
text-align: left;
|
|
margin-inline: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
/* Shields.io / dcbadge release, download, and Discord badges. */
|
|
.wu-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.wu-badges img {
|
|
height: 1.75rem;
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* Trust bar: icon + label chips under the hero. */
|
|
.wu-trust-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.75rem 1.25rem;
|
|
}
|
|
.wu-trust-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--sl-text-sm);
|
|
font-weight: 500;
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
.wu-trust-item svg {
|
|
color: var(--sl-color-accent);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
/* Problem list: bullet-circle + text, left aligned. */
|
|
.wu-problem-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.1rem;
|
|
margin: 2.5rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.wu-problem-list li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
.wu-problem-list .wu-bullet {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
margin-top: 0.15rem;
|
|
border-radius: 999px;
|
|
background: var(--sl-color-gray-6);
|
|
}
|
|
.wu-problem-list .wu-bullet svg {
|
|
width: 0.85rem;
|
|
height: 0.85rem;
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
|
|
/* Solution grid: icon-in-box above title + description. */
|
|
.wu-solution-grid {
|
|
display: grid;
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
.wu-solution {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
.wu-solution-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: var(--wu-radius-sm);
|
|
background: var(--sl-color-gray-6);
|
|
color: var(--sl-color-accent);
|
|
}
|
|
.wu-solution h3 {
|
|
margin: 0;
|
|
font-size: var(--sl-text-lg);
|
|
font-weight: 600;
|
|
color: var(--sl-color-white);
|
|
}
|
|
.wu-solution p {
|
|
margin: 0;
|
|
font-size: var(--sl-text-sm);
|
|
line-height: var(--sl-line-height);
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
|
|
/* Feature grid: wraps <CornerCard> instances. */
|
|
.wu-feature-grid {
|
|
display: grid;
|
|
gap: 1.25rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
/* Step timeline ("how it works"): connecting line through each numbered circle. */
|
|
.wu-timeline {
|
|
position: relative;
|
|
max-width: 36rem;
|
|
margin: 3rem auto 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
.wu-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 1.25rem;
|
|
top: 1.25rem;
|
|
bottom: 1.25rem;
|
|
width: 1px;
|
|
background: var(--sl-color-hairline-light);
|
|
}
|
|
.wu-timeline-step {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding-left: 3.5rem;
|
|
}
|
|
.wu-timeline-number {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--sl-color-hairline-light);
|
|
background: var(--sl-color-bg);
|
|
font-weight: 700;
|
|
color: var(--sl-color-accent);
|
|
}
|
|
.wu-timeline-step h3 {
|
|
margin: 0;
|
|
font-size: var(--sl-text-lg);
|
|
font-weight: 600;
|
|
color: var(--sl-color-white);
|
|
}
|
|
.wu-timeline-step p {
|
|
margin: 0;
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
.wu-timeline-step code {
|
|
border-radius: var(--wu-radius-sm);
|
|
}
|
|
|
|
/* Benefit checklist. */
|
|
.wu-benefit-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin: 2.5rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.wu-benefit-list li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
color: var(--sl-color-white);
|
|
}
|
|
.wu-benefit-list .wu-check {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
margin-top: 0.15rem;
|
|
border-radius: 999px;
|
|
background: hsl(var(--wu-accent-h) 100% 51% / 0.12);
|
|
}
|
|
.wu-benefit-list .wu-check svg {
|
|
width: 0.85rem;
|
|
height: 0.85rem;
|
|
color: var(--sl-color-accent);
|
|
}
|
|
|
|
/* Final call to action. */
|
|
.wu-cta {
|
|
text-align: center;
|
|
}
|
|
.wu-cta h2 {
|
|
margin: 0;
|
|
font-size: var(--sl-text-3xl);
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: var(--sl-color-white);
|
|
}
|
|
.wu-cta > p:first-of-type {
|
|
margin: 0.75rem 0 0;
|
|
font-size: var(--sl-text-lg);
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
.wu-cta .wu-btn-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.wu-cta p.wu-cta-footnote {
|
|
margin-top: 2rem;
|
|
font-size: var(--sl-text-sm);
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
|
|
/* Grid breakpoints: 1 col mobile, 2 col tablet, 3 col desktop. */
|
|
@media (min-width: 40em) {
|
|
.wu-solution-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.wu-feature-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
@media (min-width: 60em) {
|
|
.wu-solution-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.wu-feature-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.wu-timeline {
|
|
gap: 2.5rem;
|
|
}
|
|
}
|