188 lines
3.7 KiB
CSS
188 lines
3.7 KiB
CSS
/* ===== Custom Fonts ===== */
|
|
|
|
/* iA Writer Quattro S — self-hosted */
|
|
@font-face {
|
|
font-family: "iA Writer Quattro S";
|
|
src: url("/fonts/iAWriterQuattroSRegular.ttf") format("truetype");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
n/* Noto Sans SC — self-hosted */
|
|
@font-face {
|
|
font-family: "Noto Sans SC";
|
|
src: url("/fonts/noto-sans-sc-400.ttf") format("truetype");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Sans SC";
|
|
src: url("/fonts/noto-sans-sc-500.ttf") format("truetype");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Sans SC";
|
|
src: url("/fonts/noto-sans-sc-700.ttf") format("truetype");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
}
|
|
|
|
/* Global font stack: English → Chinese → system fallback */
|
|
html,
|
|
body {
|
|
font-family: "iA Writer Quattro S", "Noto Sans SC", sans-serif;
|
|
}
|
|
|
|
/* Code blocks keep monospace */
|
|
code,
|
|
pre,
|
|
kbd {
|
|
font-family:
|
|
"SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Noto Sans SC",
|
|
monospace;
|
|
}
|
|
|
|
/* Remove navbar bottom border shadow */
|
|
.hextra-nav-container-blur {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Shift logo left to compensate for internal whitespace */
|
|
nav a:first-of-type img {
|
|
margin-left: -10px;
|
|
}
|
|
|
|
/* Unified widths — all sections aligned at 76rem */
|
|
:root {
|
|
--hx-color-dark: #000;
|
|
--hextra-max-page-width: 76rem;
|
|
--hextra-max-content-width: 76rem;
|
|
--hextra-max-navbar-width: 57rem;
|
|
--hextra-max-footer-width: 57rem;
|
|
}
|
|
|
|
/* Narrow left sidebar to half width — desktop only */
|
|
@media (min-width: 48rem) {
|
|
.hextra-sidebar-container {
|
|
width: 8rem !important;
|
|
}
|
|
}
|
|
|
|
.dark body,
|
|
body:where(.dark) {
|
|
background-color: #000;
|
|
}
|
|
|
|
/* Footer: #fff light / #000 dark */
|
|
.hextra-footer {
|
|
background-color: #fff !important;
|
|
}
|
|
.dark .hextra-footer,
|
|
.hextra-footer:where(.dark *) {
|
|
background-color: #000 !important;
|
|
}
|
|
|
|
/* Theme toggle icon visibility */
|
|
.theme-toggle-dark {
|
|
display: none;
|
|
}
|
|
.theme-toggle-light {
|
|
display: inline;
|
|
}
|
|
html.dark .theme-toggle-dark {
|
|
display: inline;
|
|
}
|
|
html.dark .theme-toggle-light {
|
|
display: none;
|
|
}
|
|
|
|
/* Vim-style block cursor via ::after */
|
|
#typewriter-text::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 0.6em;
|
|
height: 1.1em;
|
|
background: #999;
|
|
vertical-align: text-bottom;
|
|
transform: translateY(-2px);
|
|
margin-left: 1px;
|
|
animation: vim-blink 0.8s step-end infinite;
|
|
}
|
|
@keyframes vim-blink {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.dark #typewriter-text::after {
|
|
background: #ccc;
|
|
}
|
|
|
|
/* Hide current page title in breadcrumb */
|
|
|
|
/* Image caption */
|
|
figcaption.post-caption {
|
|
font-size: 0.85em;
|
|
color: #888;
|
|
text-align: center;
|
|
margin-top: -0.25em;
|
|
margin-bottom: 1em;
|
|
}
|
|
.dark figcaption.post-caption {
|
|
color: #999;
|
|
}
|
|
|
|
.mermaid svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.mermaid svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.mermaid svg {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.mermaid svg {
|
|
max-width: none !important;
|
|
height: auto;
|
|
}
|
|
|
|
/*
|
|
.content .mermaid svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
*/
|
|
|
|
/* Footer 3-column grid on desktop */
|
|
@media (min-width: 48rem) {
|
|
.hextra-footer .footer-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
/* Footer brand column — extra breathing room */
|
|
.footer-brand .hx\:whitespace-pre-line {
|
|
max-width: 18rem;
|
|
}
|
|
.footer-nav {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
.footer-links {
|
|
padding-left: 2rem;
|
|
}
|
|
.footer-roadmap { padding: 1rem 0; }
|