/* ===== 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: 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; } */