/* ========================================================================== T1 — a clean, concise Planet template Themes are driven by [data-theme="dark"] on (set before first paint). ========================================================================== */ :root { --background: #fff1e5; --foreground: #000; --foreground-secondary: #666; --link: #0d7680; --border: rgba(13, 118, 128, 0.85); --chevron: #333; --nav-current-bg: #ffffff; --nav-current-fg: #0274b6; --nav-bg: #f2dfce; --nav-fg: #868686; --nav-hover-bg: #d5e0fc; --code-bg: #f2dfce; --table-head-bg: #c8eecb; --icon-secondary-filter: invert(43%) sepia(22%) saturate(10%) hue-rotate(58deg) brightness(87%) contrast(93%); --icon-social-filter: invert(28%) sepia(47%) saturate(2131%) hue-rotate(197deg) brightness(95%) contrast(78%); --kbd-color: #444; --kbd-text-shadow: #fff; --kbd-border: #bbb; --kbd-bg: #f7f7f7; --kbd-bg-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); --kbd-bg-repeat: repeat-x; --kbd-shadow: 0 1px 0 #bbb, 0 2px 1px #999, 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 2px #ccc; --page-width: 800px; --item-gap: 10px; --inner-gap: 20px; --title-line-height: 1.2; --site-title-font-size: 1.3em; --h1-font-size: 1.5em; --monospace: "Lucida Console", Consolas, Courier, monospace; color-scheme: light; } :root[data-theme="dark"] { --background: #252d38; --foreground: #b0b0b0; --foreground-secondary: #adadaf; --link: #c2a684; --border: rgba(48, 169, 222, 0.8); --chevron: #eee; --nav-current-bg: #1c1c1e; --nav-current-fg: #ddd; --nav-bg: rgba(120, 120, 120, 0.15); --nav-fg: #ccc; --nav-hover-bg: #3f3f3f; --code-bg: #2f3b46; --table-head-bg: #1b475f; --icon-secondary-filter: invert(87%) sepia(6%) saturate(58%) hue-rotate(202deg) brightness(80%) contrast(87%); --icon-social-filter: invert(64%) sepia(85%) saturate(4030%) hue-rotate(203deg) brightness(108%) contrast(102%); --kbd-color: #eee; --kbd-text-shadow: #000; --kbd-border: #000; --kbd-bg: #4d4c4c; --kbd-bg-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)); --kbd-bg-repeat: no-repeat; --kbd-shadow: 0 1px 0 #000, 0 2px 1px rgba(90, 90, 90, 0.5), inset 0 1px 1px #aaa, inset 0 -1px 2px #272727; color-scheme: dark; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; overflow-x: hidden; background-color: var(--background); } html { min-height: 100%; } body { min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } html, body, .wrapper { transition: background-color 0.3s ease, color 0.3s ease; } .wrapper { position: relative; min-height: 100vh; background-color: var(--background); } .main { max-width: calc(var(--page-width) - env(safe-area-inset-left) - env(safe-area-inset-right)); margin: 0 auto; padding: 15px; color: var(--foreground); } a:link, a:visited, a:active { color: var(--link); text-decoration: none; line-break: anywhere; } a:hover { text-decoration: underline; text-underline-offset: 0.2rem; } .chevron { display: inline-block; margin: 0 8px; font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: 1.1em; font-weight: 500; color: var(--chevron); } /* -------------------------------------------------------------------------- Theme toggle -------------------------------------------------------------------------- */ .toolbar { display: flex; justify-content: flex-end; } .theme-toggle { width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--foreground-secondary); cursor: pointer; opacity: 0.7; transition: opacity 0.3s ease, transform 0.3s ease; } .theme-toggle:hover { opacity: 1; transform: scale(1.1); } .theme-toggle svg { display: block; width: 100%; height: 100%; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } @media (hover: none) and (pointer: coarse) { .theme-toggle:hover { opacity: 0.7; transform: none; } } /* -------------------------------------------------------------------------- Site header -------------------------------------------------------------------------- */ .top { display: flex; align-items: center; gap: var(--inner-gap); margin-bottom: 15px; } img.avatar { width: 40px; height: 40px; border-radius: 40px; padding: 0; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1)); } .site-info { flex: 1; display: flex; flex-direction: column; gap: 10px; color: var(--foreground); font-size: 0.9em; line-height: var(--title-line-height); } .site-title { color: var(--foreground); font-size: var(--site-title-font-size); font-weight: 500; line-height: var(--title-line-height); } .site-about { color: #999; font-size: 1em; line-height: 1.2; } .site-about p:first-child { margin-top: 0; } .site-about p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ .nav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 auto 30px auto; padding: 2px; box-sizing: border-box; } .nav-current:link, .nav-current:visited { background-color: var(--nav-current-bg); color: var(--nav-current-fg); border-radius: 0.5em; font-size: 0.9em; line-height: 1; display: inline-block; padding: 3px 7px; transition: background-color 0.15s; } .nav-current:hover { background-color: var(--nav-current-bg); text-decoration: none; } .nav-item:link, .nav-item:visited { background-color: var(--nav-bg); color: var(--nav-fg); border-radius: 0.5em; font-size: 0.9em; line-height: 1; display: inline-block; padding: 3px 7px; transition: background-color 0.15s; } .nav-item:hover { background-color: var(--nav-hover-bg); text-decoration: none; } .social-icon { width: 1em; height: 1em; vertical-align: bottom; filter: var(--icon-social-filter); } /* -------------------------------------------------------------------------- Article list -------------------------------------------------------------------------- */ .items { display: flex; flex-direction: column; gap: 5px; } .item { display: flex; flex-direction: row; gap: 15px; margin-bottom: var(--item-gap); } .item-main { flex: 1; display: flex; flex-direction: column; gap: 10px; } .item-header { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 10px; } .item-title { font-size: 1.1em; line-height: var(--title-line-height); text-align: left; } .item-title > a { line-break: strict !important; } .item-date { flex-shrink: 0; display: inline-block; color: var(--foreground-secondary); font-size: 0.8em; text-align: right; white-space: nowrap; } .item-info { display: flex; align-items: center; gap: 10px; } .item-video-icon, .item-audio-icon { width: 1em; height: 1em; filter: var(--icon-secondary-filter); } /* -------------------------------------------------------------------------- Article -------------------------------------------------------------------------- */ h1 { margin: 0 0 10px 0; color: var(--foreground); font-size: var(--h1-font-size); line-height: var(--title-line-height); } h2 { margin-top: 30px; margin-bottom: 15px; font-size: 1.3em; } .date { color: var(--foreground-secondary); font-size: 0.8em; } .content { margin: 20px 0; color: var(--foreground); font-size: 1.1em; line-height: 1.925rem; hanging-punctuation: allow-end; } .content img { display: block; max-width: 100%; margin: 20px auto; } /* Images rendered by markdown are followed by a hard break; drop the gap. */ p > img + br { display: none; } .video-container { position: relative; width: 100%; height: 0; padding-top: 56.25%; margin: 0 auto 20px auto; border-radius: 2px; } .video { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; border-radius: 2px; } .audio-container { margin: 0 auto 20px auto; } .audio { width: 100%; } /* -------------------------------------------------------------------------- Code, quotes, rules, figures -------------------------------------------------------------------------- */ code, pre, samp, tt { font-family: var(--monospace); } code { padding: 1px; border-radius: 3px; background-color: var(--code-bg); white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; text-align: left; } pre { display: block; break-inside: avoid; padding: 10px; border: 1px solid var(--border); border-radius: 3px; background-color: var(--code-bg); font-size: 0.9em; text-align: left; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.02), 0 8px 16px rgba(0, 0, 0, 0.02); } blockquote { display: block; margin-block: 0.5em; margin-inline: 0; padding-left: 0.5em; padding-right: 0; border-left: 3px solid rgb(65, 98, 127, 0.7); } hr { height: 2px; margin: 2rem auto; border: none; background-color: var(--border); color: var(--border); } figure { margin: 20px 0; } figure > img:first-child { margin: 40px 0 20px 0; } figcaption { color: var(--foreground-secondary); font-size: 0.8em; text-align: center; } ul { padding-inline-start: 1em; } ol { padding-inline-start: 1.25em; } kbd { display: inline; padding: 0.3em 0.55em; border: 1px solid var(--kbd-border); border-radius: 6px; background-clip: padding-box; background-color: var(--kbd-bg); background-image: var(--kbd-bg-image); background-repeat: var(--kbd-bg-repeat); box-shadow: var(--kbd-shadow); color: var(--kbd-color); font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 1em; text-align: center; text-shadow: 0 1px 0 var(--kbd-text-shadow); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .content table { width: 100%; padding: 0; border-collapse: collapse; table-layout: auto; font-size: 80%; line-height: 1; } .content table tr { margin: 0; padding: 0; border-top: 0.8px solid gray; background-color: var(--background); } .content table tr th { margin: 0; padding: 4px 2px; border: 0.8px solid gray; background-color: var(--table-head-bg); font-weight: normal; text-align: center !important; } .content table tr td { margin: 0; padding: 4px 8px; border: 0.8px solid gray; font-family: Arial, "Helvetica Neue", sans-serif; text-align: center; } .content table td[align="left"] { text-align: left !important; } .content table td[align="center"] { text-align: center !important; } .content table td[align="right"] { text-align: right !important; } .content table tr th :first-child, .content table tr td :first-child { margin-top: 0; } .content table tr th :last-child, .content table tr td :last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Footnotes -------------------------------------------------------------------------- */ /* Keep footnote markers from stretching the line box. */ .content sup.footnote-ref { position: relative; top: -0.4em; line-height: 1; vertical-align: baseline; } .content sup.footnote-ref a { white-space: nowrap; text-decoration: none; } /* Let a blockquote sit inline after its footnote number. */ .footnotes li > .footnote-number + blockquote { display: inline-block !important; box-sizing: border-box; width: 90%; margin: 0 0 1em 0 !important; padding-left: 0.5em !important; vertical-align: top; } li p:has(+ blockquote) { display: inline; margin: 0; } /* -------------------------------------------------------------------------- Task list items -------------------------------------------------------------------------- */ ul:has(input[type="checkbox"]) { padding-inline-start: 0; } li input[type="checkbox"] { display: none; } li:has(input[type="checkbox"]) { margin-left: 0; list-style-type: none; pointer-events: none; } li:has(input[type="checkbox"]:not(:checked):disabled)::before, li:has(input[type="checkbox"]:checked:disabled)::before { content: ''; display: inline-block; width: 1.25em; height: 1em; background-repeat: no-repeat; background-size: 1em 1em; vertical-align: text-top; pointer-events: all; } li:has(input[type="checkbox"]:not(:checked):disabled)::before { background-image: url("./circle.svg"); filter: var(--icon-social-filter); } li:has(input[type="checkbox"]:checked:disabled)::before { background-image: url("./checkmark.circle.fill.svg"); } /* -------------------------------------------------------------------------- Tags -------------------------------------------------------------------------- */ .tag-container, .archive-container { display: flex; flex-direction: column; gap: 0.5em; margin: 0 auto 15px auto; padding-bottom: 0.5em; border-bottom: 1px solid var(--border); } .tag-caption { display: flex; align-items: center; gap: 0.5em; font-size: 0.8em; } .tag-title, .archive-title { font-size: 1.5em; font-weight: 500; } .tag-count, .archive-count { color: var(--foreground-secondary); font-size: 0.8em; } .tags-container { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; margin-bottom: 2em; color: var(--foreground-secondary); font-size: 0.8em; } .tags { flex: 1; display: flex; flex-wrap: wrap; gap: 0.5em; } .tag-item { display: inline-block; padding: 0.2em 0.5em; border: 1px solid var(--border); border-radius: 4px; } .tag-item:hover { text-decoration: none; border-color: var(--link); box-shadow: 0 1px 2px var(--border); } .tag-cloud { column-count: 3; column-gap: 20px; column-rule: 1px solid var(--border); line-height: 2; } .tag-cloud-item { display: block; font-size: 1em; } .tag-cloud-item-count { display: inline-block; margin-left: 0.5em; padding: 1px 4px; border-radius: 20px; background-color: var(--border); color: var(--background); font-size: 0.75em; line-height: 1; vertical-align: middle; } /* -------------------------------------------------------------------------- Archive -------------------------------------------------------------------------- */ .archive-list { column-count: 3; column-gap: 20px; column-rule: 1px solid var(--border); line-height: 1.2; } .archive-list-header { display: block; break-after: avoid; margin-top: 20px; margin-bottom: 10px; color: var(--foreground-secondary); font-size: 1.1em; font-weight: 500; } .archive-list-header:first-child { margin-top: 0; } .archive-list-item { display: flex; align-items: center; gap: 0.5em; margin-bottom: 10px; font-size: 1em; } .archive-list-item a { line-break: initial; } /* -------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------- */ .pages-container { display: flex; align-items: center; margin-top: 5px; margin-bottom: 10px; } .pages-info { flex: 1; color: var(--foreground-secondary); font-size: 12px; font-weight: 500; text-align: center; vertical-align: middle; } /* -------------------------------------------------------------------------- Breadcrumb (article pages) -------------------------------------------------------------------------- */ .breadcrumb { display: flex; align-items: center; margin-bottom: 15px; font-size: 0.85em; } .breadcrumb a { line-break: auto; } .breadcrumb-avatar { display: flex; margin-right: 8px; } .breadcrumb-avatar-image { display: block; width: 25px; height: 25px; border-radius: 50%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .breadcrumb-current { color: var(--foreground-secondary); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { :root { --item-gap: 7px; --inner-gap: 10px; --h1-font-size: 1.3em; } h2 { margin-top: 25px; margin-bottom: 13px; font-size: 1.2em; } .main, .content, .wrapper { max-width: 100% !important; box-sizing: border-box; } .tag-cloud, .archive-list { column-count: 2; } .footnotes li > .footnote-number + blockquote { width: 85% !important; margin: 0.3em !important; } } @media screen and (max-width: 420px) { .archive-list { column-count: 1; } .content table { table-layout: fixed; } .content table td { line-break: anywhere; } }