kato/warpbox-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(retro): style docs header and cards as Win98 windows

Browse Source 
Enhance the retro theme's API and documentation pages to better mimic
the Windows 98 aesthetic:

- Convert the docs header into a full-width grey window with black text.
- Style section card headings (`h2`) as classic blue gradient title bars, complete with a mock close button ("✕").
- Adjust margins to make top-level headings flush with window edges.
- Hide the kicker element in the docs header.
This commit is contained in:
Daniel Legt
2026-05-31 16:23:51 +03:00
parent ffe4201f05
commit 48d3c0475f
1 changed files with 52 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
backend/static/css/16-retro.css
View File

@@ -234,15 +234,62 @@
color: #1a1a1a; color: #1a1a1a;
} }
/* Desktop-level text (outside the grey windows) reads light on the black sky. */ /* API / docs page: the header is a real full-width window with the intro text
:root[data-theme="retro"] .docs-header, inside it, and each section card gets a Win98 title bar from its <h2>. */
:root[data-theme="retro"] .docs-header p, :root[data-theme="retro"] .docs-header {
:root[data-theme="retro"] .docs-header .kicker { max-width: none;
color: #cfd8ff; margin-bottom: 1.5rem;
padding: 1.5rem;
background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%);
background-color: #c0c0c0;
color: #000000;
border: 1px solid #000000;
box-shadow: var(--shadow);
} }
:root[data-theme="retro"] .docs-header .kicker {
display: none;
}
:root[data-theme="retro"] .docs-header p,
:root[data-theme="retro"] .docs-header code { :root[data-theme="retro"] .docs-header code {
color: #000000;
margin-bottom: 0;
}
:root[data-theme="retro"] .docs-card h2 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin: -1.5rem -1.5rem 1rem;
padding: 0.35rem 0.5rem;
background: linear-gradient(to right, #000078, 80%, #0f80cd);
color: #ffffff; color: #ffffff;
font-size: 1rem;
font-weight: 700;
}
/* Make title bars flush to the window edge (a real Win98 title bar) wherever
the heading is the top of its window: the upload card, the API header, and
the API section cards. Pages where a heading sits below an icon or kicker
(download/preview/login) keep the inset heading from the base h1 rule. */
:root[data-theme="retro"] .card-content > h1:first-child,
:root[data-theme="retro"] .docs-header h1 {
margin: -1.5rem -1.5rem 1rem;
}
:root[data-theme="retro"] .docs-card h2::after {
content: "✕";
display: grid;
place-items: center;
width: 1.15rem;
height: 1rem;
background: #c0c0c0;
color: #000000;
font-size: 0.7rem;
font-weight: 700;
box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
} }
/* Drop zone: a sunken white field with a dashed navy border. */ /* Drop zone: a sunken white field with a dashed navy border. */