/* The i18n layer should set . Font files are served from src/fonts. */
@font-face {
font-family: "Fusion Pixel 10px Mono latin";
src: url("/fonts/fusion-pixel-10px-monospaced-latin.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 10px Mono zh-Hans";
src: url("/fonts/fusion-pixel-10px-monospaced-zh_hans.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 10px Mono zh-Hant";
src: url("/fonts/fusion-pixel-10px-monospaced-zh_hant.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 10px Mono zh-HK";
src: url("/fonts/fusion-pixel-10px-monospaced-zh_hk.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 10px Mono zh-TW";
src: url("/fonts/fusion-pixel-10px-monospaced-zh_tw.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 10px Mono ja";
src: url("/fonts/fusion-pixel-10px-monospaced-ja.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 10px Mono ko";
src: url("/fonts/fusion-pixel-10px-monospaced-ko.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 12px Mono latin";
src: url("/fonts/fusion-pixel-12px-monospaced-latin.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 12px Mono zh-Hans";
src: url("/fonts/fusion-pixel-12px-monospaced-zh_hans.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 12px Mono zh-Hant";
src: url("/fonts/fusion-pixel-12px-monospaced-zh_hant.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 12px Mono zh-HK";
src: url("/fonts/fusion-pixel-12px-monospaced-zh_hk.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 12px Mono zh-TW";
src: url("/fonts/fusion-pixel-12px-monospaced-zh_tw.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 12px Mono ja";
src: url("/fonts/fusion-pixel-12px-monospaced-ja.otf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Fusion Pixel 12px Mono ko";
src: url("/fonts/fusion-pixel-12px-monospaced-ko.otf.woff2") format("woff2");
font-display: swap;
}
:root {
--site-font: "Fusion Pixel 12px Mono latin", system-ui, sans-serif;
--site-font-10px: "Fusion Pixel 10px Mono latin", system-ui, sans-serif;
}
html:lang(zh) {
--site-font: "Fusion Pixel 12px Mono zh-Hans", system-ui, sans-serif;
--site-font-10px: "Fusion Pixel 10px Mono zh-Hans", system-ui, sans-serif;
}
html:lang(zh-HK) {
--site-font: "Fusion Pixel 12px Mono zh-HK", system-ui, sans-serif;
--site-font-10px: "Fusion Pixel 10px Mono zh-HK", system-ui, sans-serif;
}
html:lang(zh-TW) {
--site-font: "Fusion Pixel 12px Mono zh-TW", system-ui, sans-serif;
--site-font-10px: "Fusion Pixel 10px Mono zh-TW", system-ui, sans-serif;
}
html:lang(ko) {
--site-font: "Fusion Pixel 12px Mono ko", system-ui, sans-serif;
--site-font-10px: "Fusion Pixel 10px Mono ko", system-ui, sans-serif;
}
html:lang(ja) {
--site-font: "Fusion Pixel 12px Mono ja", system-ui, sans-serif;
--site-font-10px: "Fusion Pixel 10px Mono ja", system-ui, sans-serif;
}
body {
font-family: var(--site-font);
margin: 0;
min-width: 0;
background: #f7f4ec;
color: #20231f;
}
body,
button,
input,
select,
textarea {
font-family: var(--site-font);
}
/* Keep the navigation readable while allowing it to wrap on narrow screens. */
header {
padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 5vw, 4rem);
border-bottom: 2px solid #20231f;
background: #d3d3d3;
}
nav {
display: flex;
align-items: center;
max-width: 72rem;
margin: 0 auto;
}
.toolbar-menu {
display: block;
}
.toolbar-menu > input,
.toolbar-menu > label {
display: none;
}
.toolbar-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
}
a {
color: inherit;
text-decoration-thickness: 2px;
text-underline-offset: 0.2em;
}
a:hover,
a:focus-visible {
background: #20231f;
color: #f7f4ec;
outline: 0;
}
/* Toolbar and content share one viewport-height layout area. */
.page-content {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
main {
box-sizing: border-box;
width: 100%;
flex: 1;
}
main .post {
width: min(100% - 2rem, 72rem);
margin: 0 auto;
padding: clamp(2rem, 8vw, 6rem) 0;
}
/* The footer stays in normal flow, so it follows the full-height content area. */
footer {
box-sizing: border-box;
width: 100%;
padding: 1.5rem max(1rem, calc((100% - 72rem) / 2));
border-top: 2px solid #20231f;
background: #bbdec0;
/* color: #f7f4ec; */
font-family: var(--site-font-10px);
}
footer p {
margin: 0.5rem 0;
}
summary {
cursor: pointer;
}
/* Position the native details menu outside the toolbar flow when expanded. */
.tool-menu {
position: relative;
}
.tool-menu ul {
position: absolute;
top: calc(100% + 0.75rem);
left: 0;
z-index: 1;
box-sizing: border-box;
min-width: 12rem;
max-width: calc(100vw - 2rem);
margin: 0;
padding: 0.75rem;
border: 2px solid #20231f;
background: #f7f4ec;
box-shadow: 4px 4px 0 #20231f;
list-style: none;
}
.tool-menu li + li {
margin-top: 0.5rem;
}
/* Reduce outer spacing and keep footer text inside the viewport on mobile. */
@media (max-width: 40rem) {
header {
padding: 1rem;
}
nav {
width: 100%;
}
.toolbar-menu {
display: block;
position: relative;
}
.toolbar-menu > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toolbar-menu > label {
display: block;
width: fit-content;
padding: 0.5rem 0.75rem;
border: 2px solid #20231f;
cursor: pointer;
}
.toolbar-links {
display: none;
position: absolute;
top: calc(100% + 0.75rem);
left: 0;
z-index: 2;
box-sizing: border-box;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
width: min(16rem, calc(100vw - 2rem));
padding: 0.75rem;
border: 2px solid #20231f;
background: #f7f4ec;
box-shadow: 4px 4px 0 #20231f;
}
.toolbar-menu > input:checked ~ .toolbar-links {
display: flex;
}
.tool-menu ul {
position: static;
width: auto;
min-width: 0;
max-width: none;
padding: 0.5rem 0 0 1rem;
border: 0;
box-shadow: none;
}
.tool-menu li + li {
margin-top: 0.5rem;
}
main .post {
width: min(100% - 2rem, 72rem);
}
footer {
padding-right: 1rem;
padding-left: 1rem;
}
}