mirror of
https://github.com/boostorg/boostlook.git
synced 2026-02-25 16:22:12 +00:00
145 lines
5.3 KiB
HTML
145 lines
5.3 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); }
|
|
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 24 24"><path d="M12 7a5 5 0 100 10 5 5 0 000-10zm0-3a1 1 0 01-1-1V1a1 1 0 112 0v2a1 1 0 01-1 1zm0 18a1 1 0 01-1-1v-2a1 1 0 112 0v2a1 1 0 01-1 1zm9-9h-2a1 1 0 110-2h2a1 1 0 110 2zM4 13H2a1 1 0 110-2h2a1 1 0 110 2zm15.07-6.07a1 1 0 01-.7-.29l-1.42-1.42a1 1 0 111.41-1.41l1.42 1.41a1 1 0 01-.71 1.71zM6.34 19.66a1 1 0 01-.7-.29l-1.42-1.42a1 1 0 111.41-1.41l1.42 1.41a1 1 0 01-.71 1.71zM19.07 19.66a1 1 0 01-.71-1.71l1.42-1.42a1 1 0 111.41 1.42l-1.41 1.41a1 1 0 01-.71.3zM6.34 6.93a1 1 0 01-.71-1.71l1.42-1.41a1 1 0 111.41 1.41L7.05 6.64a1 1 0 01-.71.29z"/></svg>
|
|
<svg class="icon-moon" viewBox="0 0 24 24"><path d="M12.3 4.9a7.5 7.5 0 006.8 6.8A7 7 0 1112.3 4.9z"/></svg>
|
|
</button>
|
|
</header>
|
|
<p class="subtitle">Preview builds for the new Boost C++ Libraries site design, in collaboration with MetaLab.</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>
|
|
|
|
<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>
|