/* Minimal CSS extracted for 2.html
– Responsive (desktop & mobile)
– Supports manual toggle (.dark) + prefers‑color‑scheme
– Only includes selectors referenced in the document */
/* ---------- Design tokens ---------- */
:root{
--color-bg:#fff;
--color-text:#333;
--color-anchor:#337ab7;
--color-heading:#111;
--color-divider:#cdcdcd; /* rgb(205 205 205) */
--color-code-bg:#f7f7f7;
--color-code-text:#333;
--color-table-border:#c2c2c2;
--color-table-row-even:#f0f0f0;
--color-table-row-odd:#fff;
--color-toggle-accent: #c3a554;
--color-callout-bg:#f5f6f8;
--color-callout-border:#d9dce1;
}
/* Dark mode toggled with */
html.dark{
--color-bg:#1c1c1c;
--color-text:#e5e5e5;
--color-anchor:#c3a554;
--color-heading:#fff;
--color-divider:#444;
--color-code-bg:#2d2d2d;
--color-code-text:#f7f7f7;
--color-table-border:#444;
--color-table-row-even:#262626;
--color-table-row-odd:#1c1c1c;
--color-callout-bg:#262626;
--color-callout-border:#444;
}
/* ---------- Global element styles ---------- */
*{box-sizing:border-box;}
body{
margin:0;
font-family:Inter,system-ui,sans-serif;
line-height:1.8;
background:var(--color-bg);
color:var(--color-text);
}
/* Links */
a{color:var(--color-anchor);text-decoration:none;}
a:hover,a:focus{text-decoration:underline;}
/* Headings */
h1,h2,h3,h4,h5,h6{color:var(--color-heading);line-height:1.25;margin-top:1.2em;margin-bottom:.6em;}
h1{font-size:2rem;}
h2{font-size:1.6rem;}
h3{font-size:1.3rem;}
/* Images & SVG */
img,svg{max-width:100%;height:auto;}
/* Layout container */
.container-fluid{padding:40px 15px;margin:auto;max-width:1200px;}
/* Constrain main markdown content */
.markdown-body{max-width:760px;margin:auto;padding:40px 15px 40px 15px;position:relative;letter-spacing: .025em}
/* Markdown body basics */
.markdown-body table{width:100%;border-collapse:collapse;margin:1em 0;}
.markdown-body th,.markdown-body td{border:1px solid var(--color-table-border);padding:.6em .8em;}
.markdown-body table tr:nth-child(2n){background:var(--color-table-row-even);}
.markdown-body blockquote{margin:0 0 1em;padding:0 1em;border-left:4px solid var(--color-divider);color:var(--color-text);opacity:.8;}
.markdown-body code{background:var(--color-code-bg);color:var(--color-code-text);padding:.2em .4em;border-radius:4px;}
.markdown-body pre{background:var(--color-code-bg);color:var(--color-code-text);padding:.8em;overflow:auto;border-radius:4px;}
/* Headline underline (simple border) */
.markdown-body h1{font-weight:600;margin-top:0;padding-bottom:.3em;margin-top:42px;margin-bottom:.5rem;border-bottom:1px solid rgb(205 205 205);} /* border-bottom-color set to 205 205 205 */
.markdown-body hr {
height: .25em;
padding: 0;
margin: 24px 0;
background-color: #cdcdcd;
border: 0;
}
/* Date & meta info */
.markdown-body small{font-size:.85rem;color:var(--color-text);display:block;}
/* Utility – visually hidden */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
/* Size utilities used by inline SVG icons (Tailwind‑style) */
.h-6{height:1.5rem;}
.w-6{width:1.5rem;}
/* Color‑mode switch layout */
#color-mode-switch{display:flex;align-items:center;}
#color-mode-switch label{cursor:pointer;font-size:.875rem;user-select:none;}
/* Responsive typography */
@media only screen and (orientation: portrait) {
.markdown-body{max-width:1000px; padding: 40px;}
h1{font-size:4rem;}
h2{font-size:3.5rem;}
h3{font-size:3rem;}
.markdown-body p,li,div,span,code,table {font-size: 1.8rem;}
.markdown-body small {font-size: 1.4rem;}
}
/* ---------- Optional components ----------
Raw HTML you can drop into a post when markdown isn't enough. Pandoc passes
it through untouched:
...
...
Plain from pandoc's implicit_figures is styled further down. */
/* Callout */
.markdown-body .callout{
background:var(--color-callout-bg);
border:1px solid var(--color-callout-border);
border-left:4px solid var(--color-toggle-accent);
border-radius:6px;
padding:.8em 1em;
margin:1em 0;
}
.markdown-body .callout > p:first-child{margin-top:0;}
.markdown-body .callout > p:last-child{margin-bottom:0;}
/* Tweet link card (static — no widget script) */
.markdown-body .tweet-embed{
background:var(--color-callout-bg);
border:1px solid var(--color-callout-border);
border-radius:12px;
padding:1em 1.4em;
margin:1.4em auto;
max-width:32em;
text-align:center;
}
.markdown-body .tweet-embed p{margin:0;}
.markdown-body .tweet-embed a{
display:block;
font-weight:600;
color:var(--color-anchor);
text-decoration:none;
}
.markdown-body .tweet-embed a:hover{text-decoration:underline;}
.markdown-body .tweet-embed .tweet-embed-url{
display:block;
margin-top:.3em;
font-size:.75em;
color:var(--color-text);
opacity:.6;
word-break:break-all;
}
/* Media figures: alignment + captions */
.markdown-body figure[data-type="resizable-media"]{
margin:1.5em 0;
}
.markdown-body figure[data-type="resizable-media"] img,
.markdown-body figure[data-type="resizable-media"] video{
display:block;
max-width:100%;
height:auto;
}
.markdown-body figure[data-align="center"] img,
.markdown-body figure[data-align="center"] video{
margin-left:auto;
margin-right:auto;
}
.markdown-body figure[data-align="right"] img,
.markdown-body figure[data-align="right"] video{
margin-left:auto;
}
.markdown-body figure[data-type="resizable-media"] figcaption{
font-size:.85rem;
color:var(--color-text);
opacity:.7;
text-align:center;
margin-top:.5em;
}
.markdown-body figure[data-align="left"] figcaption{text-align:left;}
.markdown-body figure[data-align="right"] figcaption{text-align:right;}
.markdown-body figure[data-float="left"]{
float:left;
max-width:50%;
margin:.3em 1.5em .8em 0;
}
.markdown-body figure[data-float="right"]{
float:right;
max-width:50%;
margin:.3em 0 .8em 1.5em;
}
/* Columns: one grid track per column div, stacked in portrait */
.markdown-body div[data-type="columns"]{
display:grid;
grid-auto-flow:column;
grid-auto-columns:1fr;
gap:24px;
margin:1em 0;
}
@media only screen and (orientation: portrait){
.markdown-body div[data-type="columns"]{display:block;}
.markdown-body div[data-type="columns"] > div[data-type="column"]{margin-bottom:1em;}
.markdown-body figure[data-type="resizable-media"] figcaption{font-size:1.4rem;}
}
/* Simple clearfix for floats */
.clearfix::after,
.container-fluid::after{content:"";display:block;clear:both;}
/*
Color Scheme Toggle Switch
- Styled checkbox with slight animation when toggling
*/
#color-mode-switch {
display: flex;
align-items: center;
justify-content: flex-end;
}
#color-mode-switch > span {
font-size: 30px;
display: inline-block;
margin-right: 8px;
}
#color-mode-switch svg {
width: 24px;
height: 24px;
margin: 0 4px;
}
#color-mode-switch input[type=checkbox] {
height: 0;
width: 0;
margin: 0;
visibility: hidden;
}
#color-mode-switch label {
cursor: pointer;
text-indent: -9999px;
width: 42px;
height: 21px;
border-radius: 30px;
background: var(--color-toggle-accent);
display: block;
position: relative;
margin: 0;
}
#color-mode-switch label:after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
}
#color-mode-switch input:checked + label:after {
left: calc(100% - 3px);
transform: translateX(-100%);
}
#color-mode-switch label:active:after {
width: 30px;
}
.post-list {
margin-left: 0;
padding-left: 0;
list-style: none; }
.post-list > li {
margin-bottom: 30px;
}
@media only screen and (orientation: landscape) {
.post-link {
display: block;
font-size: 24px; }
.post-meta {
font-size: 14px;
color: #515151; }
.toc-category {
display: inline-block;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 4px;
padding-left: 4px; }
}
@media only screen and (orientation: portrait) {
.post-link {
display: block; }
.post-meta {
font-size: 24px;
color: #515151; }
.post-list > li {
margin-bottom: 60px;
}
.toc-category {
display: inline-block;
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 12px;
padding-left: 12px; }
}
/* ---------- Homepage tagline ---------- */
.tagline{
margin:-8px 0 0;
color:var(--color-text);
opacity:.7;
font-size:1.05rem;
}
/* ---------- Site footer ---------- */
.site-footer{
max-width:760px;
margin:56px auto 0;
padding:0 15px 40px;
text-align:center;
font-size:.9rem;
color:var(--color-text);
}
.site-footer hr{
border:0;
border-top:1px solid var(--color-divider);
margin:0 0 20px;
}
.footer-links{opacity:.75;}
.footer-links a{color:var(--color-anchor);}
.footer-socials{
display:flex;
justify-content:center;
gap:18px;
margin-top:14px;
}
.social-link{
display:inline-flex;
align-items:center;
color:var(--color-text);
opacity:.55;
transition:opacity .15s ease, color .15s ease;
}
.social-link:hover,.social-link:focus{
opacity:1;
color:var(--color-anchor);
text-decoration:none;
}
/* ---------- Figures produced by pandoc's implicit_figures ---------- */
.markdown-body figure{
margin:1.5em 0;
text-align:center;
}
.markdown-body figure img{
display:block;
margin:0 auto;
max-width:100%;
height:auto;
}
.markdown-body figcaption{
margin-top:.6em;
font-size:.9em;
opacity:.7;
line-height:1.5;
}