codex-bot
787491622b
Verify and deploy Tabularium / verify-and-deploy (pull_request) Successful in 11m20s
1384 lines
37 KiB
CSS
1384 lines
37 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
@theme {
|
|
--font-sans:
|
|
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC",
|
|
"Microsoft YaHei", sans-serif;
|
|
}
|
|
:root {
|
|
color-scheme: light;
|
|
--ink: #232927;
|
|
--muted: #68736b;
|
|
--line: #e8ece9;
|
|
--green: #20785e;
|
|
--soft: #f6f8f6;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 96px;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: #fff;
|
|
color: var(--ink);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
button,
|
|
a,
|
|
input,
|
|
summary {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
button,
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
button,
|
|
input {
|
|
font: inherit;
|
|
}
|
|
button {
|
|
color: inherit;
|
|
}
|
|
::selection {
|
|
background: #d5eee2;
|
|
}
|
|
:focus-visible {
|
|
outline: 2px solid var(--green);
|
|
outline-offset: 4px;
|
|
}
|
|
.site-header {
|
|
height: 68px;
|
|
border: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 32px;
|
|
gap: 34px;
|
|
position: sticky;
|
|
top: 0;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
backdrop-filter: blur(12px);
|
|
z-index: 30;
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
white-space: nowrap;
|
|
font-size: 15px;
|
|
letter-spacing: -0.4px;
|
|
}
|
|
.brand strong {
|
|
font-weight: 600;
|
|
}
|
|
.brand-divider {
|
|
margin: 0 7px;
|
|
color: #c8ceca;
|
|
}
|
|
.docs-badge {
|
|
font-size: 13px;
|
|
padding: 2px 5px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
color: var(--muted);
|
|
letter-spacing: 0;
|
|
}
|
|
.brand-mark {
|
|
width: 23px;
|
|
height: 27px;
|
|
display: flex;
|
|
gap: 3px;
|
|
align-items: center;
|
|
transform: skewY(-18deg);
|
|
}
|
|
.brand-mark i {
|
|
width: 5px;
|
|
background: var(--green);
|
|
height: 23px;
|
|
border-radius: 1px;
|
|
}
|
|
.brand-mark i:nth-child(2) {
|
|
height: 17px;
|
|
}
|
|
.brand-mark i:nth-child(3) {
|
|
height: 11px;
|
|
}
|
|
.top-nav {
|
|
display: flex;
|
|
gap: 25px;
|
|
margin-left: auto;
|
|
font-size: 13px;
|
|
color: #626b66;
|
|
}
|
|
.top-nav a:hover {
|
|
color: var(--green);
|
|
}
|
|
.search-trigger {
|
|
display: flex;
|
|
gap: 9px;
|
|
align-items: center;
|
|
border: 0;
|
|
background: #fafbf9;
|
|
border-radius: 7px;
|
|
padding: 7px 10px;
|
|
width: 205px;
|
|
font-size: 12px;
|
|
color: #89918b;
|
|
}
|
|
.search-trigger > span:first-child {
|
|
font-size: 23px;
|
|
line-height: 16px;
|
|
color: #707b73;
|
|
}
|
|
.search-trigger kbd {
|
|
margin-left: auto;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
padding: 0 4px;
|
|
font-size: 10px;
|
|
background: white;
|
|
}
|
|
.skip-link {
|
|
position: fixed;
|
|
top: -70px;
|
|
left: 20px;
|
|
background: white;
|
|
padding: 12px;
|
|
z-index: 100;
|
|
}
|
|
.skip-link:focus {
|
|
top: 10px;
|
|
}
|
|
.home-layout,
|
|
.reading-layout {
|
|
max-width: 1600px;
|
|
margin: auto;
|
|
display: grid;
|
|
grid-template-columns: 238px minmax(0, 1fr);
|
|
}
|
|
.sidebar {
|
|
border: 0;
|
|
padding: 32px 22px;
|
|
height: calc(100dvh - 68px);
|
|
position: sticky;
|
|
top: 68px;
|
|
overflow-y: auto;
|
|
font-size: 13px;
|
|
}
|
|
.nav-home {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 9px 10px;
|
|
border-radius: 5px;
|
|
color: #6a756e;
|
|
}
|
|
.nav-home.selected {
|
|
background: #f0f5f1;
|
|
color: var(--green);
|
|
font-weight: 600;
|
|
}
|
|
.nav-group {
|
|
margin-top: 30px;
|
|
}
|
|
.nav-group > p {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: #363f39;
|
|
margin: 0 10px 10px;
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 9px 10px;
|
|
line-height: 1.6;
|
|
color: #637066;
|
|
border: 0;
|
|
margin-left: 10px;
|
|
}
|
|
.nav-item:hover {
|
|
color: var(--green);
|
|
background: #fafbf9;
|
|
}
|
|
.nav-item[aria-current="page"] {
|
|
border-left-color: var(--green);
|
|
color: var(--green);
|
|
font-weight: 550;
|
|
background: #f4f8f5;
|
|
}
|
|
.tiny-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: #c2a56e;
|
|
flex-shrink: 0;
|
|
}
|
|
.home-main {
|
|
min-width: 0;
|
|
padding: 0 48px;
|
|
}
|
|
.eyebrow { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0; }
|
|
.draft-badge { color: #8c733e; background: #faf6e9; border: 0; border-radius: 4px; padding: 2px 6px; font-size: 12px; white-space: nowrap; }
|
|
.site-footer {
|
|
border: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
padding: 24px 0;
|
|
color: #a1aaa1;
|
|
font-size: 13px;
|
|
}
|
|
.site-footer strong {
|
|
font-weight: 500;
|
|
color: #7b877c;
|
|
}
|
|
.reading-layout {
|
|
grid-template-columns: 238px minmax(0, 1fr) 210px;
|
|
}
|
|
.reading-main {
|
|
min-width: 0;
|
|
max-width: 820px;
|
|
width: 100%;
|
|
margin: auto;
|
|
padding: 34px 48px 0;
|
|
}
|
|
.breadcrumb {
|
|
display: flex;
|
|
gap: 12px;
|
|
font-size: 11px;
|
|
color: #8e978f;
|
|
margin-bottom: 35px;
|
|
}
|
|
.breadcrumb a:hover {
|
|
color: var(--green);
|
|
}
|
|
.breadcrumb > span:nth-child(2) {
|
|
color: #c6cec7;
|
|
}
|
|
.prose {
|
|
font-size: 16px;
|
|
line-height: 1.95;
|
|
color: #606b63;
|
|
overflow-wrap: anywhere;
|
|
--tw-prose-body: #606b63;
|
|
--tw-prose-headings: #252e28;
|
|
--tw-prose-bold: #414e44;
|
|
--tw-prose-links: #287358;
|
|
--tw-prose-counters: #919d93;
|
|
--tw-prose-bullets: #a7b2a8;
|
|
}
|
|
.prose h1 {
|
|
font-size: 34px;
|
|
letter-spacing: -1.2px;
|
|
font-weight: 550;
|
|
line-height: 1.45;
|
|
margin: 0 0 20px;
|
|
}
|
|
.prose > p:first-of-type {
|
|
font-size: 16px;
|
|
color: #6a766b;
|
|
line-height: 1.9;
|
|
margin-bottom: 34px;
|
|
}
|
|
.prose h2 {
|
|
font-size: 21px;
|
|
font-weight: 550;
|
|
margin: 44px 0 20px;
|
|
padding-top: 10px;
|
|
letter-spacing: -0.4px;
|
|
}
|
|
.prose h3 {
|
|
font-size: 18px;
|
|
font-weight: 550;
|
|
margin: 30px 0 12px;
|
|
}
|
|
.prose .heading-anchor {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-weight: inherit;
|
|
}
|
|
.heading-anchor > span {
|
|
margin-left: 10px;
|
|
color: #bac8bc;
|
|
font-weight: 400;
|
|
opacity: 0;
|
|
}
|
|
.heading-anchor:hover > span,
|
|
.heading-anchor:focus > span {
|
|
opacity: 1;
|
|
}
|
|
.prose a {
|
|
text-decoration-color: #b1cdbb;
|
|
text-underline-offset: 4px;
|
|
}
|
|
.prose code:not(pre code) {
|
|
font:
|
|
0.85em ui-monospace,
|
|
SFMono-Regular,
|
|
Consolas,
|
|
monospace;
|
|
border: 0;
|
|
background: #f6f8f5;
|
|
border-radius: 4px;
|
|
padding: 2px 5px;
|
|
font-weight: 400;
|
|
color: #4c6655;
|
|
}
|
|
.prose code::before,
|
|
.prose code::after {
|
|
content: none;
|
|
}
|
|
.prose li {
|
|
padding-left: 3px;
|
|
}
|
|
.prose table {
|
|
display: table;
|
|
width: 100%;
|
|
min-width: 360px;
|
|
margin: 0;
|
|
font-size: 13px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
}
|
|
.prose thead {
|
|
background: #f7f9f5;
|
|
}
|
|
.prose th,
|
|
.prose td {
|
|
padding: 12px 15px;
|
|
white-space: normal;
|
|
min-width: 100px;
|
|
}
|
|
.prose img {
|
|
border: 0;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
background: #fafbf8;
|
|
width: 100%;
|
|
}
|
|
.callout {
|
|
display: flex;
|
|
gap: 12px;
|
|
border: 0;
|
|
padding: 15px 18px;
|
|
border-radius: 7px;
|
|
background: #f8faf6;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
color: #6f7f6c;
|
|
}
|
|
.callout-draft {
|
|
border-color: #ebe3d0;
|
|
background: #fcfaf3;
|
|
color: #927f54;
|
|
}
|
|
.callout p {
|
|
margin: 0;
|
|
}
|
|
.callout p::before,
|
|
.callout p::after {
|
|
content: none;
|
|
}
|
|
.callout-icon {
|
|
flex-shrink: 0;
|
|
font-size: 16px;
|
|
}
|
|
.code-block {
|
|
border: 0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #f9fbf7;
|
|
margin: 24px 0;
|
|
min-width: 0;
|
|
}
|
|
.code-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
border: 0;
|
|
color: #879781;
|
|
font:
|
|
10px ui-monospace,
|
|
SFMono-Regular,
|
|
Consolas,
|
|
monospace;
|
|
background: #f5f8f2;
|
|
}
|
|
.code-toolbar button {
|
|
padding: 2px 6px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
min-height: 28px;
|
|
min-width: 44px;
|
|
background: #fff;
|
|
color: #607553;
|
|
}
|
|
.code-toolbar button:hover {
|
|
border-color: #95ac8d;
|
|
}
|
|
.code-block pre,
|
|
.prose .code-block pre {
|
|
margin: 0;
|
|
background: transparent;
|
|
color: #5b6f55;
|
|
font:
|
|
13px/1.9 ui-monospace,
|
|
SFMono-Regular,
|
|
Consolas,
|
|
monospace;
|
|
padding: 16px 15px;
|
|
overflow-x: auto;
|
|
border-radius: 0;
|
|
}
|
|
.code-block code {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
.code-line {
|
|
display: flex;
|
|
min-width: max-content;
|
|
}
|
|
.line-number {
|
|
width: 25px;
|
|
flex-shrink: 0;
|
|
color: #b3bfb0;
|
|
user-select: none;
|
|
}
|
|
.code-command {
|
|
color: #337c57;
|
|
font-weight: 600;
|
|
}
|
|
.toc {
|
|
padding: 47px 25px 30px 5px;
|
|
position: sticky;
|
|
top: 68px;
|
|
height: calc(100dvh - 68px);
|
|
overflow: auto;
|
|
font-size: 13px;
|
|
}
|
|
.toc > .eyebrow {
|
|
letter-spacing: 0;
|
|
font-size: 13px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.toc nav {
|
|
border: 0;
|
|
}
|
|
.toc nav a {
|
|
display: block;
|
|
padding: 7px 0 7px 15px;
|
|
margin-left: -1px;
|
|
border: 0;
|
|
color: #69766b;
|
|
line-height: 1.6;
|
|
}
|
|
.toc nav a:hover,
|
|
.toc nav a.active {
|
|
color: var(--green);
|
|
border-left-color: var(--green);
|
|
}
|
|
.toc nav a.toc-nested {
|
|
padding-left: 25px;
|
|
}
|
|
.article-end {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: space-between;
|
|
border: 0;
|
|
padding: 25px 0;
|
|
margin-top: 45px;
|
|
font-size: 10px;
|
|
color: #9ba59b;
|
|
}
|
|
.article-end a {
|
|
color: #688169;
|
|
}
|
|
.pagination {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
margin: 10px 0 45px;
|
|
}
|
|
.pagination > a {
|
|
border: 0;
|
|
padding: 18px;
|
|
border-radius: 7px;
|
|
}
|
|
.pagination > a:hover {
|
|
border-color: #afc3b1;
|
|
}
|
|
.pagination small {
|
|
display: block;
|
|
font-size: 10px;
|
|
color: #9aa79a;
|
|
margin-bottom: 7px;
|
|
}
|
|
.pagination strong {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #526c55;
|
|
}
|
|
.next-page {
|
|
text-align: right;
|
|
}
|
|
.search-dialog {
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
width: min(570px, calc(100vw - 32px));
|
|
max-height: 80dvh;
|
|
margin: 14vh auto auto;
|
|
box-shadow: 0 24px 80px #14281b26;
|
|
color: var(--ink);
|
|
}
|
|
.search-dialog::backdrop {
|
|
background: #293b304d;
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
.search-input-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
padding: 17px;
|
|
border: 0;
|
|
}
|
|
.search-input-row > span {
|
|
font-size: 25px;
|
|
color: #879786;
|
|
}
|
|
.search-input-row input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
outline: none;
|
|
font-size: 14px;
|
|
}
|
|
.search-input-row button {
|
|
font-size: 10px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
padding: 3px 5px;
|
|
}
|
|
.search-results {
|
|
padding: 15px;
|
|
max-height: 50dvh;
|
|
overflow-y: auto;
|
|
}
|
|
.search-results > .eyebrow {
|
|
margin: 0 8px 12px;
|
|
}
|
|
.search-result {
|
|
display: block;
|
|
border: 0;
|
|
padding: 13px;
|
|
border-radius: 7px;
|
|
}
|
|
.search-result.selected,
|
|
.search-result:hover {
|
|
background: #f3f7f1;
|
|
border-color: #e3ebdf;
|
|
}
|
|
.search-result > span {
|
|
color: #92a18c;
|
|
font-size: 10px;
|
|
}
|
|
.search-result strong {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin: 5px 0;
|
|
}
|
|
.search-result strong span {
|
|
float: right;
|
|
color: #91aa85;
|
|
}
|
|
.search-result small {
|
|
font-size: 11px;
|
|
color: #69765f;
|
|
}
|
|
.empty-search {
|
|
font-size: 13px;
|
|
padding: 25px 8px;
|
|
color: #66735f;
|
|
}
|
|
.search-footer {
|
|
padding: 12px 20px;
|
|
border: 0;
|
|
font-size: 10px;
|
|
color: #9da797;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.mobile-bar,
|
|
.mobile-navigation,
|
|
.mobile-toc {
|
|
display: none;
|
|
}
|
|
@media (min-width: 1450px) {
|
|
.home-main {
|
|
padding: 0 70px;
|
|
}
|
|
.reading-layout {
|
|
grid-template-columns: 250px minmax(0, 1fr) 235px;
|
|
}
|
|
}
|
|
@media (max-width: 1150px) {
|
|
.top-nav {
|
|
gap: 15px;
|
|
}
|
|
.reading-layout {
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
}
|
|
.toc {
|
|
display: none;
|
|
}
|
|
.home-layout {
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
}
|
|
.home-main {
|
|
padding: 0 30px;
|
|
}
|
|
.reading-main {
|
|
padding: 30px 40px 0;
|
|
}
|
|
.top-nav a:nth-child(2) {
|
|
display: none;
|
|
}
|
|
.mobile-toc {
|
|
display: block;
|
|
margin: 18px 0;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
padding: 10px 15px;
|
|
font-size: 12px;
|
|
color: #7d8a7d;
|
|
}
|
|
.mobile-toc nav {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding-top: 15px;
|
|
}
|
|
.mobile-toc a {
|
|
padding: 3px 0;
|
|
}
|
|
.mobile-toc .active {
|
|
color: var(--green);
|
|
}
|
|
}
|
|
@media (max-width: 850px) {
|
|
.site-header {
|
|
padding: 0 20px;
|
|
gap: 20px;
|
|
height: 62px;
|
|
}
|
|
.top-nav {
|
|
display: none;
|
|
}
|
|
.search-trigger {
|
|
margin-left: auto;
|
|
}
|
|
.home-layout,
|
|
.reading-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
.mobile-bar {
|
|
display: block;
|
|
position: sticky;
|
|
top: 62px;
|
|
z-index: 25;
|
|
background: #fff;
|
|
border: 0;
|
|
}
|
|
.mobile-bar button {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 22px;
|
|
font-size: 11px;
|
|
color: #7b897c;
|
|
}
|
|
.mobile-bar button span:last-child {
|
|
margin-left: auto;
|
|
}
|
|
.mobile-navigation {
|
|
display: block;
|
|
padding: 15px 22px;
|
|
border: 0;
|
|
max-height: 65dvh;
|
|
overflow: auto;
|
|
}
|
|
.mobile-navigation .nav-group {
|
|
margin-top: 15px;
|
|
}
|
|
.home-main {
|
|
padding: 0 30px;
|
|
}
|
|
.reading-main {
|
|
max-width: 800px;
|
|
padding: 28px 35px 0;
|
|
}
|
|
.breadcrumb {
|
|
margin-bottom: 28px;
|
|
}
|
|
html {
|
|
scroll-padding-top: 120px;
|
|
}
|
|
}
|
|
@media (max-width: 560px) {
|
|
.brand {
|
|
font-size: 13px;
|
|
gap: 9px;
|
|
}
|
|
.brand-divider {
|
|
margin: 0 4px;
|
|
}
|
|
.docs-badge {
|
|
display: none;
|
|
}
|
|
.site-header {
|
|
padding: 0 18px;
|
|
gap: 12px;
|
|
}
|
|
.search-trigger {
|
|
width: 34px;
|
|
height: 32px;
|
|
justify-content: center;
|
|
padding: 5px;
|
|
}
|
|
.search-trigger span:nth-child(2),
|
|
.search-trigger kbd {
|
|
display: none;
|
|
}
|
|
.home-main {
|
|
padding: 0 22px;
|
|
}
|
|
.site-footer {
|
|
flex-wrap: wrap;
|
|
font-size: 9px;
|
|
gap: 12px;
|
|
}
|
|
.site-footer > span:nth-child(2) {
|
|
display: none;
|
|
}
|
|
.reading-main {
|
|
padding: 25px 22px 0;
|
|
}
|
|
.prose {
|
|
font-size: 15px;
|
|
line-height: 1.95;
|
|
}
|
|
.prose h1 {
|
|
font-size: 28px;
|
|
letter-spacing: -0.8px;
|
|
}
|
|
.prose > p:first-of-type {
|
|
font-size: 15px;
|
|
}
|
|
.prose h2 {
|
|
font-size: 20px;
|
|
}
|
|
.pagination {
|
|
gap: 10px;
|
|
}
|
|
.pagination > a {
|
|
padding: 13px;
|
|
}
|
|
.pagination strong {
|
|
font-size: 11px;
|
|
}
|
|
.article-end {
|
|
flex-wrap: wrap;
|
|
font-size: 10px;
|
|
}
|
|
.code-block pre,
|
|
.prose .code-block pre {
|
|
font-size: 12px;
|
|
padding: 14px 11px;
|
|
}
|
|
.line-number {
|
|
width: 20px;
|
|
}
|
|
.callout {
|
|
padding: 13px;
|
|
font-size: 13px;
|
|
}
|
|
.eyebrow {
|
|
font-size: 9px;
|
|
}
|
|
.search-dialog {
|
|
margin-top: 8vh;
|
|
}
|
|
.search-result small {
|
|
line-height: 1.7;
|
|
display: block;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.prose .mobile-toc {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
}
|
|
.prose .mobile-toc a {
|
|
text-decoration: none;
|
|
font-weight: 400;
|
|
}
|
|
.mobile-toc summary {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.table-scroll {
|
|
overflow-x: auto;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
margin: 24px 0;
|
|
}
|
|
.prose .table-scroll table {
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Inline diagrams behave like ordinary article images with click-to-enlarge. */
|
|
.architecture-preview {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 28px 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: zoom-in;
|
|
}
|
|
.prose .architecture-preview img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
.figure-gallery {
|
|
margin: 28px 0;
|
|
}
|
|
.figure-gallery .architecture-preview {
|
|
margin: 0;
|
|
}
|
|
.figure-gallery-controls,
|
|
.figure-gallery-dots {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.figure-gallery-controls {
|
|
gap: 20px;
|
|
margin-top: 12px;
|
|
}
|
|
.figure-gallery-arrow,
|
|
.figure-gallery-dot {
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 36px;
|
|
min-height: 36px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
color: #57534e;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
.figure-gallery-arrow {
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
}
|
|
.figure-gallery-dot span {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #d6d3d1;
|
|
}
|
|
.figure-gallery-dot[aria-current="true"] span {
|
|
background: #2563eb;
|
|
}
|
|
.figure-gallery-arrow:hover,
|
|
.figure-gallery-dot:hover {
|
|
background: #f5f5f4;
|
|
}
|
|
.figure-gallery-arrow:focus-visible,
|
|
.figure-gallery-dot:focus-visible {
|
|
outline: 2px solid #2563eb;
|
|
outline-offset: 2px;
|
|
}
|
|
.image-lightbox {
|
|
width: 100vw;
|
|
height: 100dvh;
|
|
max-width: none;
|
|
max-height: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
.image-lightbox::backdrop {
|
|
background: rgba(245, 247, 244, 0.97);
|
|
}
|
|
.image-lightbox-stage {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
padding: 32px;
|
|
}
|
|
.image-lightbox-picture {
|
|
display: block;
|
|
flex-shrink: 0;
|
|
margin: auto;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: zoom-in;
|
|
}
|
|
.prose .image-lightbox-picture img {
|
|
display: block;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: calc(100vw - 64px);
|
|
max-height: calc(100dvh - 64px);
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
.image-lightbox-picture.original-size {
|
|
cursor: zoom-out;
|
|
}
|
|
.prose .image-lightbox-picture.original-size img {
|
|
width: 2000px;
|
|
max-width: none;
|
|
max-height: none;
|
|
}
|
|
.image-lightbox-close {
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 12px;
|
|
right: 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #52655a;
|
|
font:
|
|
28px/1 ui-sans-serif,
|
|
system-ui,
|
|
sans-serif;
|
|
}
|
|
.image-lightbox-close:hover {
|
|
background: #edf2ec;
|
|
}
|
|
@media (max-width: 560px) {
|
|
.image-lightbox-stage {
|
|
padding: 16px;
|
|
}
|
|
.prose .image-lightbox-picture img {
|
|
max-width: calc(100vw - 32px);
|
|
max-height: calc(100dvh - 32px);
|
|
}
|
|
.prose .image-lightbox-picture.original-size img {
|
|
max-width: none;
|
|
max-height: none;
|
|
}
|
|
}
|
|
|
|
.auth-page {
|
|
min-height: 100dvh;
|
|
display: grid;
|
|
place-content: center;
|
|
padding: 32px 20px;
|
|
background: #fafcf9;
|
|
}
|
|
.auth-brand {
|
|
margin: 0 auto 30px;
|
|
}
|
|
.auth-card {
|
|
width: min(390px, calc(100vw - 40px));
|
|
padding: 36px;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
background: white;
|
|
box-shadow: 0 15px 45px #34523c06;
|
|
}
|
|
.auth-card h1 {
|
|
font-size: 26px;
|
|
font-weight: 550;
|
|
letter-spacing: -0.8px;
|
|
margin: 22px 0 12px;
|
|
}
|
|
.auth-description {
|
|
font-size: 13px;
|
|
color: #78867a;
|
|
line-height: 1.8;
|
|
margin-bottom: 25px;
|
|
}
|
|
.auth-card label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #617566;
|
|
margin-bottom: 10px;
|
|
}
|
|
.auth-card input {
|
|
width: 100%;
|
|
padding: 13px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
font:
|
|
24px ui-monospace,
|
|
monospace;
|
|
letter-spacing: 10px;
|
|
text-align: center;
|
|
}
|
|
.auth-card input::placeholder {
|
|
color: #bdc8bb;
|
|
}
|
|
.auth-error {
|
|
font-size: 12px;
|
|
color: #a64e3c;
|
|
min-height: 38px;
|
|
padding: 8px 0;
|
|
line-height: 1.6;
|
|
}
|
|
.auth-card button[type="submit"] {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: #2c7057;
|
|
border-radius: 6px;
|
|
color: white;
|
|
font-size: 13px;
|
|
}
|
|
.auth-card button:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
.auth-footnote {
|
|
font-size: 11px;
|
|
color: #92a08f;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
.logout-button {
|
|
font-size: 11px;
|
|
color: #788575;
|
|
padding: 6px 0;
|
|
}
|
|
.logout-button:hover {
|
|
color: var(--green);
|
|
}
|
|
|
|
/* A bounded reading shelf and paged catalog keep the home stable as it grows. */
|
|
.home-main { max-width: 1120px; width: 100%; margin: 0 auto; }
|
|
.library-intro { padding: 64px 0 42px; }
|
|
.library-intro h1 { margin: 0 0 14px; font-size: 38px; font-weight: 600; letter-spacing: -1px; }
|
|
.library-intro p { margin: 0; font-size: 16px; color: var(--muted); }
|
|
.featured-section h2, .library-section h2 { font-size: 19px; font-weight: 550; margin: 0 0 22px; }
|
|
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
|
|
.featured-link { position: relative; border: 0; border-radius: 8px; padding: 26px; }
|
|
.featured-link:hover { border-color: #a4b7aa; background: #fafcfb; }
|
|
.featured-link > svg:first-child { color: var(--green); margin-bottom: 18px; }
|
|
.featured-link h3 { font-size: 18px; font-weight: 550; line-height: 1.6; margin: 0 0 10px; padding-right: 18px; }
|
|
.featured-link p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
|
|
.featured-link > svg:last-child { position: absolute; top: 28px; right: 24px; color: var(--muted); }
|
|
.library-section { padding: 46px 0 32px; }
|
|
.library-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
|
|
.collection-filters { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.collection-filters button { font-size: 14px; padding: 8px 12px; border-radius: 5px; color: var(--muted); }
|
|
.collection-filters button[aria-pressed="true"] { background: #eef4f0; color: var(--green); }
|
|
.library-search { display: flex; align-items: center; gap: 8px; color: var(--muted); border: 0; border-radius: 6px; padding: 9px 12px; }
|
|
.library-search input { min-width: 0; width: 145px; outline: 0; font-size: 14px; }
|
|
.library-search:focus-within { border-color: var(--green); }
|
|
.library-list { padding: 0; margin: 0; list-style: none; border: 0; }
|
|
.library-list li { border: 0; }
|
|
.library-list a { display: flex; align-items: center; gap: 18px; padding: 20px 4px; }
|
|
.library-list a:hover { color: var(--green); background: #fafcfb; }
|
|
.library-row-title { flex: 1; font-size: 15px; line-height: 1.7; }
|
|
.library-row-title .draft-badge { margin-left: 10px; }
|
|
.library-row-group { font-size: 13px; color: var(--muted); }
|
|
.library-list svg { flex-shrink: 0; color: #87948c; }
|
|
.library-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 22px; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
|
|
.library-pagination button { padding: 8px; }
|
|
.library-pagination button:disabled { opacity: .35; cursor: default; }
|
|
.library-empty { padding: 30px 0; color: var(--muted); }
|
|
.site-footer { font-size: 13px; color: var(--muted); }
|
|
.article-end { font-size: 13px; }
|
|
.search-trigger svg { flex-shrink: 0; }
|
|
@media (max-width: 560px) {
|
|
.library-intro { padding: 36px 0; }
|
|
.library-intro h1 { font-size: 32px; }
|
|
.featured-grid { grid-template-columns: 1fr; gap: 12px; }
|
|
.featured-link { padding: 22px; }
|
|
.featured-link h3 { font-size: 17px; }
|
|
.library-section { padding-top: 36px; }
|
|
.library-tools { align-items: stretch; }
|
|
.library-search { width: 100%; }
|
|
.library-search input { width: 100%; }
|
|
.library-list a { gap: 10px; padding: 16px 0; }
|
|
.library-row-group { display: none; }
|
|
.pagination strong { font-size: 13px; }
|
|
.site-footer { font-size: 13px; }
|
|
}
|
|
.search-status { padding: 12px 20px 0; font-size: 13px; color: var(--muted); }
|
|
|
|
/* Shared typography; each document keeps its own identity and reading context. */
|
|
:root { --ink: #202724; --muted: #707873; --green: #27745b; --accent-wash: #e9f2ec; --ease: cubic-bezier(.2,.7,.2,1); }
|
|
body { background: #fdfefd; }
|
|
svg { flex-shrink: 0; }
|
|
[data-tone="blue"] { --green: #456da2; --accent-wash: #eaf0f9; }
|
|
[data-tone="violet"] { --green: #79609e; --accent-wash: #f1ecf8; }
|
|
[data-tone="amber"] { --green: #927346; --accent-wash: #f6f0e6; }
|
|
.site-header { height: 64px; padding: 0 30px; gap: 32px; border-bottom: 1px solid #edf0ee; background: #fdfefded; backdrop-filter: blur(18px); }
|
|
.brand { gap: 10px; }
|
|
.brand-mark i { background: linear-gradient(160deg,#80b69a,#27745b); }
|
|
.docs-badge { color: #819087; padding: 0; font-size: 13px; }
|
|
.top-nav { align-self: stretch; align-items: stretch; gap: 26px; margin-left: 16px; }
|
|
.top-nav a, .top-nav a:nth-child(2) { display: flex; align-items: center; position: relative; white-space: nowrap; transition: color 180ms; }
|
|
.top-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
|
|
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--ink); }
|
|
.top-nav a[aria-current="page"]::after { transform: scaleX(1); }
|
|
.search-trigger { margin-left: auto; width: 218px; padding: 8px 12px; background: #f0f3f1; color: #768078; transition: background 180ms,box-shadow 180ms; }
|
|
.search-trigger:hover { background: #eaf0ec; box-shadow: 0 3px 16px #1c3c2810; }
|
|
.search-trigger span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.search-trigger kbd { background: transparent; font-size: 11px; white-space: nowrap; }
|
|
.logout-button { font-size: 12px; }
|
|
.home-layout { grid-template-columns: 272px minmax(0,1fr); }
|
|
.reading-layout { grid-template-columns: 272px minmax(0,1fr) 222px; }
|
|
.sidebar { padding: 30px 26px 40px; height: calc(100dvh - 64px); top: 64px; scrollbar-width: thin; scrollbar-color: #d9e2dc transparent; }
|
|
.nav-back { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #8a948e; margin: 0 8px 28px; transition: color 160ms; }
|
|
.nav-back:hover { color: var(--green); }
|
|
.collection-identity { display: flex; gap: 12px; align-items: center; color: var(--green); font-size: 16px; font-weight: 550; margin: 0 8px 28px; line-height: 1.5; }
|
|
.collection-nav-link { display: flex; align-items: center; gap: 12px; padding: 12px 10px; margin-bottom: 6px; border-radius: 7px; color: #647169; transition: background 180ms,color 180ms; }
|
|
.collection-nav-link svg:last-child { margin-left: auto; opacity: 0; transform: translateX(-3px); transition: opacity 180ms,transform 180ms; }
|
|
.collection-nav-link:hover { background: #f0f5f1; color: var(--green); }
|
|
.collection-nav-link:hover svg:last-child { opacity: 1; transform: none; }
|
|
.nav-group { margin-top: 28px; }
|
|
.nav-group > p { font-size: 12px; font-weight: 500; color: #909991; margin: 0 10px 10px; }
|
|
.nav-item { position: relative; padding: 8px 10px; margin: 2px 0; border-radius: 5px; line-height: 1.65; color: #68756d; transition: color 160ms,background 160ms; }
|
|
.nav-item:hover { color: var(--green); background: color-mix(in srgb,var(--accent-wash) 45%,transparent); }
|
|
.nav-item[aria-current="page"] { color: var(--green); background: linear-gradient(90deg,var(--accent-wash),transparent); }
|
|
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -3px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--green); }
|
|
.home-main { max-width: 1160px; }
|
|
.library-intro { position: relative; padding: 68px 0 46px; isolation: isolate; }
|
|
.library-intro::before { content: ""; position: absolute; z-index: -1; width: 420px; max-width: 100%; height: 240px; top: 0; left: -30px; background: radial-gradient(ellipse at 30% 30%,#eaf3ed99,transparent 70%); pointer-events: none; }
|
|
.library-intro h1 { font-weight: 550; }
|
|
.featured-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
|
|
.featured-link { display: flex; flex-direction: column; padding: 24px; border-radius: 12px; background: linear-gradient(145deg,color-mix(in srgb,var(--accent-wash) 65%,white),#fbfcfb 65%); transition: transform 240ms var(--ease),box-shadow 240ms var(--ease); }
|
|
.featured-link:hover { background: linear-gradient(145deg,var(--accent-wash),#fbfcfb 80%); transform: translateY(-4px); box-shadow: 0 14px 36px #1d35220d; }
|
|
.collection-art { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--green); background: linear-gradient(145deg,#ffffffc9,var(--accent-wash)); margin-bottom: 26px; box-shadow: 0 2px 8px #25483705; transition: transform 240ms var(--ease); }
|
|
.featured-link:hover .collection-art { transform: translateY(-2px) rotate(-4deg); }
|
|
.featured-link h3 { font-size: 19px; margin: 0 0 12px; padding: 0; }
|
|
.featured-link p { flex: 1; }
|
|
.collection-entry { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; color: var(--green); font-size: 13px; }
|
|
.collection-entry svg { transition: transform 200ms var(--ease); }
|
|
.featured-link:hover .collection-entry svg { transform: translateX(4px); }
|
|
.collection-filters { gap: 4px; }
|
|
.collection-filters button { font-size: 13px; transition: background 180ms,color 180ms; }
|
|
.collection-filters button:hover { color: var(--green); background: #f0f4f1; }
|
|
.collection-filters button[aria-pressed="true"] { background: linear-gradient(120deg,var(--accent-wash),#f2f6f3); }
|
|
.library-search { background: #f1f4f2; }
|
|
.library-search:focus-within { box-shadow: 0 0 0 2px var(--accent-wash); }
|
|
.library-list a { padding: 19px 14px; border-radius: 7px; transition: background 180ms,color 180ms; }
|
|
.library-list a:hover { background: #f2f6f3; }
|
|
.library-row-title { font-size: 14px; }
|
|
.library-row-group { font-size: 12px; color: #929b95; }
|
|
.library-list svg { transition: transform 180ms; }
|
|
.library-list a:hover svg { transform: translateX(3px); }
|
|
.site-footer { padding: 32px 0; font-size: 12px; color: #919a94; }
|
|
.reading-main { max-width: 852px; padding: 38px 44px 0; }
|
|
.breadcrumb { align-items: center; flex-wrap: wrap; font-size: 12px; margin-bottom: 30px; line-height: 1.7; }
|
|
.breadcrumb a { color: #6c7970; }
|
|
.breadcrumb > span:not(.draft-badge) { max-width: 100%; }
|
|
.draft-badge { font-size: 11px; background: #f7f2e9; }
|
|
.prose { line-height: 1.9; --tw-prose-links: var(--green); }
|
|
.prose > p:first-of-type { font-size: 17px; color: #788379; }
|
|
.prose code:not(pre code) { background: #eef2ef; }
|
|
.prose tbody tr, .prose thead tr { border: 0; }
|
|
.prose tbody tr:nth-child(even) { background: #f6f8f6; }
|
|
.prose thead { background: #eef3ef; }
|
|
.prose img { background: transparent; padding: 0; }
|
|
.callout { padding: 18px 20px; font-size: 14px; background: linear-gradient(120deg,#eef4ef,#f8faf7); }
|
|
.callout-draft { background: linear-gradient(120deg,#f7f1e7,#fcfaf5); }
|
|
.code-block { background: #f2f5f2; }
|
|
.code-toolbar { font-size: 12px; background: #eaf0eb88; }
|
|
.code-toolbar button { font-size: 12px; background: #ffffffaa; transition: background 180ms; }
|
|
.code-toolbar button:hover { background: white; }
|
|
.toc { top: 64px; height: calc(100dvh - 64px); padding: 44px 24px 30px 12px; font-size: 12px; }
|
|
.toc > .eyebrow { font-size: 12px; color: #929c94; }
|
|
.toc nav a { padding: 7px 10px; margin: 0; border-radius: 4px; color: #8a968d; transition: color 160ms,background 160ms; }
|
|
.toc nav a:hover, .toc nav a.active { color: var(--green); background: linear-gradient(90deg,var(--accent-wash),transparent); }
|
|
.article-end { margin-top: 30px; font-size: 12px; }
|
|
.pagination > a { background: #f3f6f3; transition: background 180ms,transform 180ms var(--ease); }
|
|
.pagination > a:hover { background: var(--accent-wash); transform: translateY(-2px); }
|
|
.pagination small { font-size: 12px; }
|
|
.search-dialog { background: #fdfefd; box-shadow: 0 24px 90px #192d2330; }
|
|
.search-dialog[open] { animation: surface-in 180ms var(--ease); }
|
|
.search-dialog::backdrop { backdrop-filter: blur(5px); }
|
|
.search-input-row { background: #f3f6f3; padding: 20px; }
|
|
.search-result.selected, .search-result:hover { background: var(--accent-wash); }
|
|
.search-result > span, .search-result small { font-size: 12px; }
|
|
.auth-page { background: radial-gradient(ellipse at 50% 30%,#edf5ef,transparent 60%),#fbfdfb; }
|
|
.auth-card { box-shadow: 0 18px 64px #294d340b; }
|
|
.auth-card input { background: #eff4ef; }
|
|
.auth-card button[type="submit"] { background: linear-gradient(120deg,#3e8969,#2c7057); }
|
|
@keyframes surface-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
|
|
.reading-main, .library-intro { animation: surface-in 320ms var(--ease) both; }
|
|
@media (max-width: 1200px) {
|
|
.site-header { gap: 22px; padding: 0 24px; }
|
|
.top-nav { gap: 18px; margin-left: 0; }
|
|
.search-trigger { width: 180px; }
|
|
.reading-layout { grid-template-columns: 248px minmax(0,1fr); }
|
|
.home-layout { grid-template-columns: 248px minmax(0,1fr); }
|
|
.sidebar { padding-left: 22px; padding-right: 22px; }
|
|
.toc { display: none; }
|
|
.home-main { padding: 0 36px; }
|
|
.mobile-toc { display: block; background: #f3f6f3; }
|
|
}
|
|
@media (min-width: 761px) and (max-width: 980px) {
|
|
.top-nav { display: flex; gap: 14px; font-size: 12px; }
|
|
.search-trigger { width: 36px; height: 34px; padding: 8px; justify-content: center; }
|
|
.search-trigger span, .search-trigger kbd { display: none; }
|
|
.mobile-bar, .mobile-navigation { display: none; }
|
|
.sidebar { display: block; }
|
|
}
|
|
@media (max-width: 760px) {
|
|
html { scroll-padding-top: 165px; }
|
|
.site-header { height: auto; padding: 0 20px; column-gap: 18px; row-gap: 0; flex-wrap: wrap; }
|
|
.brand { height: 62px; font-size: 15px; }
|
|
.top-nav { display: flex; order: 4; width: 100%; overflow-x: auto; gap: 24px; min-width: 0; margin: 0; height: 44px; flex: 0 0 100%; font-size: 13px; scrollbar-width: none; }
|
|
.top-nav a { padding: 0; }
|
|
.search-trigger { width: 36px; height: 34px; padding: 8px; justify-content: center; }
|
|
.search-trigger span, .search-trigger kbd { display: none; }
|
|
.home-layout, .reading-layout { grid-template-columns: 1fr; }
|
|
.sidebar { display: none; }
|
|
.mobile-bar { display: block; top: 106px; background: #fdfefdf0; backdrop-filter: blur(14px); }
|
|
.mobile-bar button { font-size: 13px; color: var(--green); }
|
|
.mobile-navigation { padding: 20px 22px; background: #f7faf7; box-shadow: 0 16px 24px #26382c08; }
|
|
.mobile-navigation .collection-identity, .mobile-navigation .nav-back { margin-bottom: 20px; }
|
|
.home-main { padding: 0 24px; }
|
|
.library-intro { padding: 40px 0 34px; }
|
|
.library-intro h1 { font-size: 32px; }
|
|
.reading-main { padding: 26px 24px 0; }
|
|
.prose h1 { font-size: 29px; }
|
|
.breadcrumb { margin-bottom: 24px; }
|
|
}
|
|
@media (max-width: 520px) {
|
|
.featured-grid { grid-template-columns: 1fr; }
|
|
.featured-link { padding: 23px; }
|
|
.library-section { padding-top: 38px; }
|
|
.library-list a { padding: 16px 8px; }
|
|
.prose > p:first-of-type { font-size: 16px; }
|
|
.pagination strong { font-size: 13px; }
|
|
.site-footer { font-size: 12px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation: none !important; transition: none !important; }
|
|
.featured-link:hover, .featured-link:hover .collection-art, .pagination > a:hover { transform: none; }
|
|
}
|
|
|
|
/* Compact navigation and local font roles, with no font downloads. */
|
|
:root {
|
|
--font-reading: "Charter", "Iowan Old Style", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
|
|
--font-code: "SFMono-Regular", Consolas, "Liberation Mono", "PingFang SC", monospace;
|
|
}
|
|
.top-nav { margin-left: 0; }
|
|
.sidebar { padding: 22px 16px 32px; }
|
|
.collection-identity { font-size: 14px; gap: 9px; margin: 0 8px 20px; }
|
|
.collection-identity svg { width: 18px; height: 18px; }
|
|
.nav-group { margin-top: 20px; }
|
|
.nav-group > p { margin: 0 8px 6px; font-size: 11px; letter-spacing: .02em; color: #7d8981; }
|
|
.nav-item { font-size: 13px; padding: 5px 8px; margin: 0; line-height: 1.5; gap: 6px; }
|
|
.nav-item[aria-current="page"]::before { top: 7px; bottom: 7px; }
|
|
.collection-nav-link { padding: 7px 8px; margin-bottom: 2px; gap: 9px; font-size: 13px; }
|
|
.prose { font-family: var(--font-reading); font-size: 16px; line-height: 1.95; }
|
|
.prose :is(h1,h2,h3,h4), .prose table, .code-toolbar, .mobile-toc { font-family: var(--font-sans); }
|
|
.prose :is(h1,h2,h3) { font-weight: 600; letter-spacing: -.025em; }
|
|
.prose :is(code,pre), .code-block pre, kbd { font-family: var(--font-code); font-variant-ligatures: none; }
|
|
.prose code { font-size: .86em; }
|
|
@media (min-width: 1201px) {
|
|
.home-layout { grid-template-columns: 240px minmax(0,1fr); }
|
|
.reading-layout { grid-template-columns: 240px minmax(0,1fr) 222px; }
|
|
}
|
|
@media (min-width: 761px) and (max-width: 1200px) {
|
|
.home-layout, .reading-layout { grid-template-columns: 224px minmax(0,1fr); }
|
|
}
|
|
@media (max-width: 760px) {
|
|
.top-nav { overflow: visible; }
|
|
.mobile-navigation .nav-group { margin-top: 16px; }
|
|
}
|
|
|
|
/* Categories stay visible across the header, each with its own disclosure panel. */
|
|
.top-nav.category-navigation { position: relative; display: flex; margin-left: 0; gap: 0; }
|
|
.category-navigation > ul { display: flex; align-items: stretch; gap: 22px; height: 100%; list-style: none; padding: 0; margin: 0; }
|
|
.category-navigation > ul > li { display: flex; align-items: stretch; }
|
|
.category-menu { position: relative; }
|
|
.category-navigation .category-home, .category-trigger { display: flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--font-sans); font-size: 13px; white-space: nowrap; }
|
|
.category-trigger { position: relative; padding: 0; background: transparent; cursor: pointer; }
|
|
.category-trigger > svg { transform: rotate(90deg); transition: transform 160ms; }
|
|
.category-trigger[aria-expanded="true"] > svg { transform: rotate(-90deg); }
|
|
.category-trigger:hover, .category-trigger[aria-expanded="true"], .category-trigger[data-active="true"] { color: var(--ink); }
|
|
.category-trigger[data-active="true"]::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--green); }
|
|
.category-trigger:focus-visible, .category-navigation a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 3px; }
|
|
.category-panel { position: absolute; top: 100%; left: -16px; width: 320px; padding: 12px; background: #fdfefd; border: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: 0 16px 40px #24352b1a; z-index: 50; }
|
|
.category-panel[hidden] { display: none; }
|
|
.category-menu:last-child .category-panel { left: auto; right: -16px; }
|
|
.category-panel-title { margin: 3px 10px 8px; font-size: 11px; color: var(--muted); }
|
|
.top-nav .category-panel a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px; white-space: normal; border-radius: 6px; color: var(--ink); }
|
|
.top-nav .category-panel a::after { display: none; }
|
|
.category-panel a:hover, .category-panel a[aria-current] { background: var(--accent-wash); }
|
|
.category-panel a > svg { margin-top: 2px; color: var(--green); }
|
|
.category-panel strong { display: block; font-size: 13px; font-weight: 550; line-height: 1.5; }
|
|
.category-panel small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--muted); }
|
|
@media (min-width: 761px) and (max-width: 1100px) {
|
|
.site-header { gap: 20px; }
|
|
.category-navigation > ul { gap: 16px; }
|
|
.category-navigation .category-home, .category-trigger { font-size: 12px; }
|
|
.search-trigger { width: 36px; height: 34px; padding: 8px; justify-content: center; }
|
|
.search-trigger span, .search-trigger kbd { display: none; }
|
|
}
|
|
@media (max-width: 760px) {
|
|
.top-nav.category-navigation { overflow: visible; }
|
|
.category-navigation > ul { width: 100%; gap: 18px; }
|
|
.category-navigation .category-home, .category-trigger { font-size: 12px; }
|
|
.category-menu { position: static; }
|
|
.category-panel, .category-menu:last-child .category-panel { width: auto; left: 0; right: 0; }
|
|
}
|