// Lagrange — site-layout SCSS.
// Compiled at build time via tairitsu_macros::scss! into a <style> tag.
$bg: #0b1220;
$bg-subtle: #0f1928;
$fg: #cfe3ff;
$fg-sec: #8ea8cc;
$accent: #7aa2f7;
$accent-bg: rgba(122, 162, 247, 0.08);
$code-bg: #131e32;
$border: #1e3250;
$sidebar-w: 260px;
$radius: 6px;
$ts: 0.18s;
:root {
--bg: #{$bg};
--bg-subtle: #{$bg-subtle};
--fg: #{$fg};
--fg-sec: #{$fg-sec};
--accent: #{$accent};
--accent-bg: #{$accent-bg};
--code-bg: #{$code-bg};
--border: #{$border};
--sidebar-w: #{$sidebar-w};
--radius: #{$radius};
--ts: #{$ts};
}
@media (prefers-color-scheme: light) {
:root {
--bg: #f5f8fc;
--bg-subtle: #eef2f7;
--fg: #1e2837;
--fg-sec: #587898;
--accent: #4a7cf7;
--accent-bg: rgba(74, 124, 247, 0.08);
--code-bg: #e8edf3;
--border: #cdd6e0;
}
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 0.94rem;
line-height: 1.65;
color: var(--fg);
background: var(--bg);
}
a {
color: var(--accent);
text-decoration: none;
&:hover { text-decoration: underline; }
}
.layout {
display: flex;
height: 100%;
}
.sidebar {
width: var(--sidebar-w);
border-right: 1px solid var(--border);
height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg-subtle);
flex-shrink: 0;
h2 {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-sec);
margin: 1rem 0.25rem 0.5rem;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li a {
display: block;
padding: 0.42rem 0.6rem;
font-size: 0.875rem;
color: var(--fg-sec);
border-radius: 4px;
transition: all var(--ts);
border-left: 2px solid transparent;
&:hover {
color: var(--fg);
background: var(--accent-bg);
text-decoration: none;
}
&.active {
color: var(--accent);
font-weight: 500;
border-left-color: var(--accent);
background: var(--accent-bg);
}
}
}
.lg-search-box {
position: relative;
padding: 0.5rem 0.75rem;
input {
width: 100%;
/* Icon zones are 2rem squares; keep text ~4px past the zone edge
* (~12px from the glyph) instead of drifting far from the icon. */
padding: 0.35rem 2.25rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
color: var(--fg);
font-size: 0.85rem;
line-height: 1.4;
&:focus {
outline: none;
border-color: var(--accent);
}
}
}
.lg-search-icon {
position: absolute;
left: 0.75rem;
top: 0;
bottom: 0;
width: 2rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-sec);
pointer-events: none;
svg { display: block; }
}
#lg-search-clear {
position: absolute;
right: 0.75rem;
top: 0;
bottom: 0;
width: 2rem;
display: none;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent;
color: var(--fg-sec);
cursor: pointer;
&.show { display: flex; }
&:hover { color: var(--fg); }
svg { display: block; }
}
#lg-search-results {
position: absolute;
top: calc(100% - 0.4rem);
left: 0.75rem;
right: 0.75rem;
z-index: 200;
display: none;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
max-height: 320px;
overflow-y: auto;
&.open {
display: block;
animation: lg-pop-down 0.15s ease;
}
.lg-hit {
display: block;
padding: 0.5rem 0.75rem;
color: var(--fg);
text-decoration: none;
border-bottom: 1px solid var(--border);
&:last-child { border-bottom: none; }
&:hover, &:focus-visible { background: var(--accent-bg); }
b { display: block; font-size: 0.88rem; font-weight: 600; }
span {
display: block;
margin-top: 0.15rem;
font-size: 0.78rem;
color: var(--fg-sec);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.lg-no {
padding: 0.75rem;
color: var(--fg-sec);
font-size: 0.85rem;
text-align: center;
}
}
/* Shared popover motion — every dropdown/panel animates through the same
keyframes; direction depends on which way the panel opens. */
@keyframes lg-pop-down {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@keyframes lg-pop-up {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
#lg-sidebar {
flex: 1;
overflow-y: auto;
padding: 0.5rem 0.75rem 1rem;
}
.lg-lang-footer {
padding: 0.6rem 0.85rem;
border-top: 1px solid var(--border);
}
.lg-lang-select { position: relative; }
.lg-lang-trigger {
display: flex;
align-items: center;
gap: 0.4rem;
width: 100%;
padding: 0.4rem 0.6rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
font-size: 0.85rem;
color: var(--fg);
transition: border-color var(--ts);
&:hover { border-color: var(--accent); }
svg { flex-shrink: 0; color: var(--fg-sec); }
}
.lg-lang-arrow {
margin-left: auto;
transition: transform var(--ts);
}
.lg-lang-panel {
display: none;
position: absolute;
bottom: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
max-height: 240px;
overflow: auto;
z-index: 200;
&.open {
display: block;
animation: lg-pop-up 0.15s ease;
}
}
.lg-lang-opt {
display: flex;
align-items: center;
/* Same selection language as the sidebar nav: a 2px accent bar on the
* left (transparent on idle rows so text never shifts) + accent tint. */
padding: 0.4rem 0.85rem;
border-left: 2px solid transparent;
color: var(--fg);
font-size: 0.85rem;
transition: background var(--ts);
&:hover {
background: var(--accent-bg);
text-decoration: none;
}
&.selected {
color: var(--accent);
font-weight: 600;
border-left-color: var(--accent);
background: var(--accent-bg);
}
}
.content {
flex: 1;
height: 100vh;
overflow-y: auto;
padding: 2rem max(1.5rem, calc((100% - 820px) / 2)) 5rem;
min-width: 0;
h1 { font-size: 1.85rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.3; }
h2 { font-size: 1.35rem; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; margin: 2rem 0 1rem; }
h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.75rem; }
p { margin: 0.75rem 0; }
img { max-width: 100%; border-radius: var(--radius); }
/* hikari markup carries its own styles (injected via build_css);
* keep lagrange's generic pre/code rules off it — the specificity
* tie (.content pre / .hi-code-highlight-code) would otherwise
* clobber padding, background and font metrics. */
pre:not(.hi-code-highlight-code) { background: var(--code-bg); padding: 1rem; border-radius: var(--radius); overflow: auto; font-size: 0.85rem; line-height: 1.5; }
:not(pre) > code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.88em; }
p > code, li > code { background: var(--code-bg); padding: 0.12em 0.35em; border-radius: 3px; }
table { border-collapse: collapse; margin: 1rem 0; width: 100%; font-size: 0.9rem; }
th, td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
th { background: var(--code-bg); font-weight: 600; }
blockquote { border-left: 3px solid var(--accent); margin: 1rem 0; padding: 0.5rem 1rem; color: var(--fg-sec); background: var(--accent-bg); border-radius: 0 var(--radius) var(--radius) 0; }
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
ul, ol { padding-left: 1.5rem; }
}
.lg-header {
background: var(--bg-subtle);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
.lg-lang-panel {
bottom: auto;
top: calc(100% + 4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
}
.lg-header-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1.5rem;
}
.lg-site-title {
font-weight: 600;
color: var(--fg);
text-decoration: none;
&:hover { color: var(--accent); }
}
.lg-hero {
overflow-y: auto;
.content {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem 5rem;
height: auto;
overflow: visible;
}
}
.lg-live-block {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
margin: 1.5rem 0;
}
/* Diagram demo blocks (mermaid / math) — same chrome language as the code
* blocks: header with badge left, controls right. Markup mirrors hikari's
* .hi-component-demo family; tokens come from the mapped --hi palette. */
.lg-diagram {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
margin: 1.5rem 0;
background: var(--bg);
}
.lg-diagram-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.lg-diagram-toggle {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 999px;
}
.lg-diagram-toggle-btn {
appearance: none;
border: none;
background: transparent;
border-radius: 999px;
padding: 0.1rem 0.65rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--fg-sec);
cursor: pointer;
transition: background var(--ts), color var(--ts);
&:hover { color: var(--fg); }
&.active {
background: var(--bg);
color: var(--fg);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
}
.lg-diagram-preview {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 1.25rem;
overflow-x: auto;
> .lg-diagram-canvas {
max-width: 100%;
svg { max-width: 100%; height: auto; }
}
/* KaTeX display output inherits page colors */
.katex { color: var(--fg); }
}
.lg-diagram-error {
margin: 0 0 0.75rem;
width: 100%;
padding: 0.6rem 0.85rem;
background: var(--accent-bg);
border: 1px solid var(--accent);
border-radius: var(--radius);
color: var(--accent);
font-size: 0.85rem;
}
.lg-diagram-source {
border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
.layout { flex-direction: column; height: auto; overflow: visible; }
/* Scroll the nav (#lg-sidebar, already overflow-y:auto) internally
* instead of the whole strip: an overflow here would crop the absolute
* search-results and language panels that open outside the sidebar's
* box. The nav is a scroll container, so its flex minimum is 0 and the
* 50vh cap still holds. */
.sidebar { height: auto; width: auto; max-height: 50vh; flex-shrink: 0; }
.content { height: auto; overflow-y: visible; padding: 1.5rem 1rem 3rem; }
}