Files
Hugo/assets/css/custom.css
T

138 lines
2.6 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;
}
/* 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: 76rem;
--hextra-max-footer-width: 76rem;
}
/* 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: .85em;
color: #888;
text-align: center;
margin-top: -.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;
}