mirror of
https://github.com/boostorg/boostlook.git
synced 2026-02-26 04:32:18 +00:00
ddd6c64d37
Update grey scale, blue, orange, and accent primitives to match Figma variable exports. Remap light and dark theme semantic tokens for text, buttons, surfaces, and icons. Add stroke-strong and stroke-mid tokens. Flatten dark mode accent surfaces to grey. Preview landing page: add standalone docs note, fix theme toggle icons to match Antora.
216 lines
9.0 KiB
HTML
216 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Boostlook v3 Preview</title>
|
|
<meta name="color-scheme" content="light dark">
|
|
<style>
|
|
:root {
|
|
--bg: #f9fafb;
|
|
--fg: #1a1a1a;
|
|
--muted: #6b7280;
|
|
--link: #1a6fb5;
|
|
--border: #e5e7eb;
|
|
--card-bg: #ffffff;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #111214;
|
|
--fg: #e5e7eb;
|
|
--muted: #9ca3af;
|
|
--link: #60a5fa;
|
|
--border: #2a2d32;
|
|
--card-bg: #1a1c20;
|
|
}
|
|
}
|
|
html.light {
|
|
--bg: #f9fafb; --fg: #1a1a1a; --muted: #6b7280;
|
|
--link: #1a6fb5; --border: #e5e7eb; --card-bg: #ffffff;
|
|
}
|
|
html.dark {
|
|
--bg: #111214; --fg: #e5e7eb; --muted: #9ca3af;
|
|
--link: #60a5fa; --border: #2a2d32; --card-bg: #1a1c20;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
background: var(--bg); color: var(--fg);
|
|
max-width: 640px; margin: 0 auto;
|
|
padding: 3rem 1.5rem;
|
|
}
|
|
header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
|
|
h1 { font-size: 1.375rem; font-weight: 600; }
|
|
.theme-btn {
|
|
background: none; border: none; cursor: pointer;
|
|
padding: 0.25rem; color: var(--muted); display: flex; align-items: center;
|
|
}
|
|
.theme-btn:hover { color: var(--fg); }
|
|
.theme-btn svg { width: 18px; height: 18px; fill: currentColor; }
|
|
.icon-sun { display: none; }
|
|
.icon-moon { display: block; }
|
|
html.dark .icon-sun { display: block; }
|
|
html.dark .icon-moon { display: none; }
|
|
@media (prefers-color-scheme: dark) {
|
|
.icon-sun { display: block; }
|
|
.icon-moon { display: none; }
|
|
}
|
|
html.light .icon-sun { display: none; }
|
|
html.light .icon-moon { display: block; }
|
|
.subtitle { color: var(--muted); margin-bottom: 2.5rem; font-size: 0.9375rem; }
|
|
h2 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.5rem; margin-top: 1.75rem; }
|
|
.links { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
|
|
.link-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.375rem 0; flex-wrap: wrap; }
|
|
.link-row a { white-space: nowrap; }
|
|
a { color: var(--link); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
.tag { font-size: 0.75rem; color: var(--muted); }
|
|
.desc { font-size: 0.8125rem; color: var(--muted); }
|
|
.changelog-wrap { position: relative; }
|
|
.changelog {
|
|
background: var(--card-bg); border: 1px solid var(--border);
|
|
border-radius: 0.5rem; padding: 1rem 1.25rem;
|
|
display: flex; flex-direction: column; gap: 0.75rem;
|
|
max-height: 30rem; overflow-y: auto;
|
|
}
|
|
.changelog-wrap::after {
|
|
content: ""; position: absolute; bottom: 0; left: 0; right: 0;
|
|
height: 2.5rem; border-radius: 0 0 0.5rem 0.5rem; pointer-events: none;
|
|
background: linear-gradient(transparent, var(--card-bg));
|
|
}
|
|
.changelog-item { display: flex; flex-direction: column; gap: 0.25rem; }
|
|
.changelog-item:not(:last-child) { padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
|
|
.changelog-date { font-size: 0.6875rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
|
|
.changelog-text { font-size: 0.8125rem; color: var(--fg); line-height: 1.5; }
|
|
.changelog-text ul { list-style: none; padding: 0; margin: 0; }
|
|
.changelog-text li::before { content: "\2022\00a0"; color: var(--muted); }
|
|
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
|
|
footer { font-size: 0.8125rem; color: var(--muted); }
|
|
footer a { color: var(--muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Boostlook v3</h1>
|
|
<button class="theme-btn" onclick="toggleTheme()" aria-label="Toggle theme">
|
|
<svg class="icon-sun" viewBox="0 0 512 512"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0s-49.9-131.1 0-181 131.1-49.9 181 0 49.9 131.1 0 181z"/></svg>
|
|
<svg class="icon-moon" viewBox="0 0 512 512"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"/></svg>
|
|
</button>
|
|
</header>
|
|
<p class="subtitle">Preview builds for the new Boost C++ Libraries site design, in collaboration with MetaLab.</p>
|
|
<p class="desc" style="margin-bottom: 1rem; line-height: 1.5;">These are standalone doc pages styled with boostlook-v3. In production, they are built and uploaded to S3, then pulled into the Django app (the Boost website) which wraps them in the site chrome.</p>
|
|
|
|
<h2>Design System</h2>
|
|
<div class="links">
|
|
<div class="link-row">
|
|
<a href="style-guide/">Style Guide</a>
|
|
<span class="desc">Color primitives, typography, spacing tokens</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Library Docs</h2>
|
|
<div class="links">
|
|
<div class="link-row">
|
|
<a href="capy/">Boost.Capy</a>
|
|
<span class="tag">Antora</span>
|
|
</div>
|
|
<div class="link-row">
|
|
<a href="charconv/">Boost.Charconv</a>
|
|
<span class="tag">Asciidoctor</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Site Docs</h2>
|
|
<div class="links">
|
|
<div class="link-row">
|
|
<a href="user-guide/">User Guide</a>
|
|
<span class="tag">Antora</span>
|
|
</div>
|
|
<div class="link-row">
|
|
<a href="contributor-guide/">Contributor Guide</a>
|
|
<span class="tag">Antora</span>
|
|
</div>
|
|
<div class="link-row">
|
|
<a href="formal-reviews/">Formal Reviews</a>
|
|
<span class="tag">Antora</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Changelog</h2>
|
|
<div class="changelog-wrap">
|
|
<div class="changelog">
|
|
<div class="changelog-item">
|
|
<span class="changelog-date">Feb 24</span>
|
|
<div class="changelog-text"><ul>
|
|
<li>New color tokens for note-style admonitions</li>
|
|
<li>Fixed spacing after paragraphs before code blocks and lists</li>
|
|
<li>Math expressions now render inline as SVGs</li>
|
|
</ul></div>
|
|
</div>
|
|
<div class="changelog-item">
|
|
<span class="changelog-date">Feb 24</span>
|
|
<div class="changelog-text"><ul>
|
|
<li>Spacing now matches Figma designs</li>
|
|
<li>Added style guide with colors, typography, and component demos</li>
|
|
<li>Added this preview landing page</li>
|
|
<li>Color naming now matches Figma</li>
|
|
<li>Replaced hardcoded colors with design tokens</li>
|
|
<li>Removed unused styles</li>
|
|
</ul></div>
|
|
</div>
|
|
<div class="changelog-item">
|
|
<span class="changelog-date">Feb 23</span>
|
|
<div class="changelog-text"><ul>
|
|
<li>Created the Boostlook v3 preview site</li>
|
|
<li>Set up Netlify preview deployment</li>
|
|
<li>Rebuilt CSS from updated sources</li>
|
|
<li>Refined typography, code blocks, and doc styles</li>
|
|
<li>Body text sizing now matches Figma</li>
|
|
<li>Fixed font weight rendering for variable fonts</li>
|
|
<li>Updated style guide to use correct font files</li>
|
|
</ul></div>
|
|
</div>
|
|
<div class="changelog-item">
|
|
<span class="changelog-date">Feb 19</span>
|
|
<div class="changelog-text"><ul>
|
|
<li>Typography refinements across the site</li>
|
|
</ul></div>
|
|
</div>
|
|
<div class="changelog-item">
|
|
<span class="changelog-date">Feb 17</span>
|
|
<div class="changelog-text"><ul>
|
|
<li>Set up modular v3 CSS source files and build script</li>
|
|
<li>Initial boostlook-v3.css development build</li>
|
|
<li>Cleaned up dead code and commented-out CSS</li>
|
|
<li>Removed unused local font files</li>
|
|
</ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<footer>
|
|
<a href="https://github.com/boostorg/boostlook/pull/173">PR #173</a>
|
|
</footer>
|
|
|
|
<script>
|
|
function toggleTheme() {
|
|
var html = document.documentElement;
|
|
if (html.classList.contains('dark')) {
|
|
html.classList.remove('dark');
|
|
html.classList.add('light');
|
|
localStorage.setItem('theme', 'light');
|
|
} else {
|
|
html.classList.remove('light');
|
|
html.classList.add('dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
}
|
|
}
|
|
(function() {
|
|
var saved = localStorage.getItem('theme');
|
|
if (saved) document.documentElement.classList.add(saved);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|