:root {
--mbr-icon-search: url("data:image/svg+xml,%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221.2em%22%20height%3D%221.2em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M416%20208c0%2045.9-14.9%2088.3-40%20122.7l126.6%20126.7c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376c-34.4%2025.2-76.8%2040-122.7%2040C93.1%20416%200%20322.9%200%20208S93.1%200%20208%200s208%2093.1%20208%20208M208%20352a144%20144%200%201%200%200-288a144%20144%200%201%200%200%20288%22%2F%3E%3C%2Fsvg%3E");
/* Sidebar Navigation Variables (for mbr-browse-single) */
--mbr-sidebar-width: 280px;
--mbr-hide-nav-bp: 1024px;
--mbr-show-tags: block; /* Set to 'none' to hide tags in sidebar */
/* Pull Quote Styling Variables */
--mbr-pullquote-bg: var(--pico-muted-border-color);
--mbr-pullquote-border: var(--pico-primary);
--mbr-pullquote-color: var(--pico-color);
/* Marginalia Styling Variables */
--mbr-marginalia-bg: var(--pico-secondary-background);
/* --mbr-marginalia-border: var(--pico-muted-border-color); */
--mbr-marginalia-border: var(--pico-secondary-hover-background);
--mbr-marginalia-color: var(--pico-muted-color);
/* GitHub Alert: Note (Blue) */
--mbr-alert-note-bg: rgba(227, 242, 253, 0.4);
--mbr-alert-note-border: #1976d2;
--mbr-alert-note-icon-color: #1976d2;
/* GitHub Alert: Tip (Green) */
--mbr-alert-tip-bg: rgba(232, 245, 233, 0.4);
--mbr-alert-tip-border: #388e3c;
--mbr-alert-tip-icon-color: #388e3c;
/* GitHub Alert: Important (Purple) */
--mbr-alert-important-bg: rgba(243, 229, 245, 0.4);
--mbr-alert-important-border: #7b1fa2;
--mbr-alert-important-icon-color: #7b1fa2;
/* GitHub Alert: Warning (Orange) */
--mbr-alert-warning-bg: rgba(255, 243, 224, 0.4);
--mbr-alert-warning-border: #f57c00;
--mbr-alert-warning-icon-color: #f57c00;
/* GitHub Alert: Caution (Red) */
--mbr-alert-caution-bg: rgba(255, 235, 238, 0.4);
--mbr-alert-caution-border: #c62828;
--mbr-alert-caution-icon-color: #c62828;
/* Alert Icons (SVG Data URIs) */
--mbr-icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
--mbr-icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7z'%3E%3C/path%3E%3Cpath d='M9 21h6'%3E%3C/path%3E%3C/svg%3E");
--mbr-icon-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--mbr-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
--mbr-icon-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'%3E%3C/polygon%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
/* tie reveal.js slides styles to our pico styles and theme */
--r-background-color: var(--pico-background-color);
--r-main-font: var(--pico-font-family);
--r-main-font-size: calc(var(--pico-font-size) * 1.25);
--r-main-color: var(--pico-color);
--r-block-margin: calc(var(--pico-spacing) * 1.2);
--r-heading-margin: var(--r-block-margin);
--r-heading-font: var(--pico-font-family);
--r-heading-color: var(--pico-primary);
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: 700;
--r-heading1-text-shadow: none;
--r-heading1-size: calc(var(--pico-font-size) * 3.1);
--r-heading2-size: calc(var(--pico-font-size) * 1.8);
--r-heading3-size: calc(var(--pico-font-size) * 1.6);
--r-heading4-size: calc(var(--pico-font-size) * 1.3);
--r-code-font: var(--pico-font-family-monospace);
--r-link-color: var(--pico-primary);
/* not sure on this one; could do lch(from var(--pico-primary) calc(l - 20) c h) to darken */
--r-link-color-dark: var(--pico-primary);
--r-link-color-hover: var(--pico-primary-hover);
--r-selection-background-color: var(--pico-text-selection-color);
--r-selection-color: var(--pico-color);
--r-overlay-element-bg-color: var(--pico-modal-overlay-background-color);
--r-overlay-element-fg-color: var(--pico-color);
}
main > section[data-theme="light"] {
background-color: rgba(255, 255, 255, 0.85);
padding: var(--pico-block-spacing-vertical) 0;
}
main > section[data-theme="dark"] {
background-color: rgba(0, 0, 0, 0.85);
padding: var(--pico-block-spacing-vertical) 0;
}
.mbr-search-button {
width: 1.2em;
height: 1.2em;
mask-size: cover;
mask: var(--mbr-icon-search) no-repeat 100% 100%;
background-color: var(--pico-color);
border: none;
outline: none;
}
body > header {
background-color: var(--pico-background-color);
border-bottom: 2px solid var(--pico-secondary-border);
position: sticky;
top: 0;
padding-block: 0;
z-index: 999;
}
body > header > nav {
padding-block: 0;
margin-block: 0;
}
body > header > nav > ul {
height: 2.4em;
}
body > header nav details[class="dropdown"] summary {
border-color: transparent;
background-color: transparent;
margin-right: -14px;
}
body > header nav details[class="dropdown"] summary::after {
background: none;
}
nav[aria-label="breadcrumb"] ul li {
padding-top: 0;
font-style: italic;
}
body > footer {
border-top: 1px solid var(--pico-secondary-border);
}
/* ==================== Sidebar Navigation Grid Layout ==================== */
/*
* CSS Grid layout for body when mbr-browse-single sidebar is active.
* The component adds 'mbr-has-sidebar' class to body when in desktop mode (>1024px).
* On mobile (<1024px), the sidebar is an overlay drawer - no grid layout needed.
*/
/* Desktop: sidebar visible inline via CSS grid */
@media (min-width: 1024px) {
body.mbr-has-sidebar {
display: grid;
grid-template-columns: var(--mbr-sidebar-width) 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"sidebar header"
"sidebar main"
"sidebar footer";
min-height: 100vh;
}
body.mbr-has-sidebar > mbr-browse-single {
grid-area: sidebar;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
border-right: 1px solid var(--pico-muted-border-color);
z-index: 100;
}
body.mbr-has-sidebar > header {
grid-area: header;
position: sticky;
top: 0;
}
body.mbr-has-sidebar > main {
grid-area: main;
}
body.mbr-has-sidebar > footer {
grid-area: footer;
}
}
/* Mobile: no grid layout, sidebar is overlay drawer handled by component */
@media (max-width: 1023px) {
body.mbr-has-sidebar {
display: block;
}
}
figure > video {
width: 100%;
height: auto;
max-height: calc(100vh - 50px);
max-width: 100%;
align-items: center;
/* display: inline-flex; */
user-select: none;
}
figure > figcaption {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
}
figure > figcaption > * {
flex-grow: 1;
}
figure > figcaption > mbr-video-extras {
flex-grow: 2;
}
figure {
margin-bottom: var(--pico-block-spacing-vertical);
}
/* ==================== Video Theater Mode ==================== */
figure.theater {
/* Break out of parent container to fill viewport width */
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
/* Dark background for cinematic feel */
background: #000;
/* Flex column to stack video + controls, cap to viewport */
display: flex;
flex-direction: column;
align-items: center;
max-height: 95vh;
/* Sit above sibling content but below sticky header (z-index: 999) */
position: relative;
z-index: 100;
padding: 0;
}
figure.theater > video {
flex: 1 1 auto;
min-height: 0; /* allow flex shrink below intrinsic size */
width: 100%;
max-height: 80vh;
object-fit: contain; /* maintain aspect ratio, letterbox if needed */
}
figure.theater > figcaption {
flex: 0 0 auto;
width: 100%;
max-width: 1200px;
padding: 0.5rem 1rem;
color: var(--pico-muted-color);
}
/* figure > video::cue { */
/* font-size: 0.875em; */
/* margin: 1em; */
/* padding: 0.5em; */
/* } */
/* media-provider > video::cue { */
/* display: none; */
/* } */
ol li {
list-style: decimal;
}
/* ==================== Dark Mode Overrides ==================== */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
/* Marginalia - Dark Mode */
--mbr-marginalia-bg: rgba(32, 38, 50, 0.6);
/* GitHub Alerts - Dark Mode */
--mbr-alert-note-bg: rgba(13, 71, 161, 0.2);
--mbr-alert-note-border: #42a5f5;
--mbr-alert-note-icon-color: #42a5f5;
--mbr-alert-tip-bg: rgba(27, 94, 32, 0.2);
--mbr-alert-tip-border: #66bb6a;
--mbr-alert-tip-icon-color: #66bb6a;
--mbr-alert-important-bg: rgba(74, 20, 140, 0.2);
--mbr-alert-important-border: #ab47bc;
--mbr-alert-important-icon-color: #ab47bc;
--mbr-alert-warning-bg: rgba(230, 81, 0, 0.2);
--mbr-alert-warning-border: #ffa726;
--mbr-alert-warning-icon-color: #ffa726;
--mbr-alert-caution-bg: rgba(183, 28, 28, 0.2);
--mbr-alert-caution-border: #ef5350;
--mbr-alert-caution-icon-color: #ef5350;
}
}
[data-theme="dark"] {
/* Pull Quote - Dark Mode */
--mbr-pullquote-bg: rgba(42, 49, 64, 0.4);
--mbr-pullquote-border: var(--pico-primary-hover);
/* Marginalia - Dark Mode */
--mbr-marginalia-bg: rgba(32, 38, 50, 0.6);
/* GitHub Alerts - Dark Mode */
--mbr-alert-note-bg: rgba(13, 71, 161, 0.2);
--mbr-alert-note-border: #42a5f5;
--mbr-alert-note-icon-color: #42a5f5;
--mbr-alert-tip-bg: rgba(27, 94, 32, 0.2);
--mbr-alert-tip-border: #66bb6a;
--mbr-alert-tip-icon-color: #66bb6a;
--mbr-alert-important-bg: rgba(74, 20, 140, 0.2);
--mbr-alert-important-border: #ab47bc;
--mbr-alert-important-icon-color: #ab47bc;
--mbr-alert-warning-bg: rgba(230, 81, 0, 0.2);
--mbr-alert-warning-border: #ffa726;
--mbr-alert-warning-icon-color: #ffa726;
--mbr-alert-caution-bg: rgba(183, 28, 28, 0.2);
--mbr-alert-caution-border: #ef5350;
--mbr-alert-caution-icon-color: #ef5350;
}
/* ==================== Standard Block Quotes (> - Level 1 Nesting) ==================== */
blockquote {
/* avoid awkward indents when we nest blockquotes by clearing some defaults */
padding: 0;
border: none;
}
blockquote > p:last-child {
/* this will remove the double padding from the blockquote element and the p for all of these */
margin-bottom: 0;
}
:not(blockquote) > blockquote:not(:has(> blockquote)) {
padding: var(--pico-spacing);
border-left: 0.25rem solid var(--pico-blockquote-border-color);
}
blockquote:not(:has(blockquote)) p {
font-style: italic;
}
blockquote > p {
font-size: var(--pico-font-size);
}
/* ==================== Pull Quotes (>> - Level 2 Nesting) ==================== */
/*
* Pull quotes are created with double blockquote nesting (>>).
* Styled like magazine pull quotes: larger text, bold border, italic styling.
*
* Example markdown:
* >> This is a pull quote with larger, emphasized text
*/
:not(blockquote) > blockquote > blockquote:not(:has(> blockquote)) {
--pico-font-size: 1.5rem;
--pico-font-weight: 500;
font-style: italic;
background-color: var(--mbr-pullquote-bg);
border-left: 0.5rem solid var(--mbr-pullquote-border);
color: var(--mbr-pullquote-color);
padding: calc(var(--pico-spacing) * 2);
}
/* ==================== GitHub-Style Alerts ==================== */
/*
* GitHub-style alert blockquotes with semantic colors and icons.
* Classes are automatically added by pulldown-cmark for markdown like:
*
* > [!NOTE]
* > This is a note alert
*/
/* Base alert styling */
blockquote.markdown-alert-note,
blockquote.markdown-alert-tip,
blockquote.markdown-alert-important,
blockquote.markdown-alert-warning,
blockquote.markdown-alert-caution {
position: relative;
padding: var(--pico-spacing);
padding-left: calc(var(--pico-spacing) * 2.5);
margin: var(--pico-typography-spacing-vertical) 0;
border-left: 0.5rem solid;
border-radius: var(--pico-border-radius);
}
/* Icon positioning */
blockquote.markdown-alert-note::before,
blockquote.markdown-alert-tip::before,
blockquote.markdown-alert-important::before,
blockquote.markdown-alert-warning::before,
blockquote.markdown-alert-caution::before {
content: "";
position: absolute;
left: calc(var(--pico-spacing) * 0.75);
top: calc(var(--pico-spacing) * 1.5);
width: 22px;
height: 22px;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
/* Alert title styling */
blockquote.markdown-alert-note > p:first-of-type::before,
blockquote.markdown-alert-tip > p:first-of-type::before,
blockquote.markdown-alert-important > p:first-of-type::before,
blockquote.markdown-alert-warning > p:first-of-type::before,
blockquote.markdown-alert-caution > p:first-of-type::before {
--pico-font-weight: 700;
display: block;
margin-bottom: 0.25rem;
}
/* Note Alert (Blue) */
blockquote.markdown-alert-note {
background-color: var(--mbr-alert-note-bg);
border-color: var(--mbr-alert-note-border);
}
blockquote.markdown-alert-note::before {
mask-image: var(--mbr-icon-note);
background-color: var(--mbr-alert-note-icon-color);
}
blockquote.markdown-alert-note > p:first-of-type::before {
content: "Note";
color: var(--mbr-alert-note-icon-color);
}
/* Tip Alert (Green) */
blockquote.markdown-alert-tip {
background-color: var(--mbr-alert-tip-bg);
border-color: var(--mbr-alert-tip-border);
}
blockquote.markdown-alert-tip::before {
background-color: var(--mbr-alert-tip-icon-color);
mask-image: var(--mbr-icon-tip);
}
blockquote.markdown-alert-tip > p:first-of-type::before {
content: "Tip";
color: var(--mbr-alert-tip-icon-color);
}
/* Important Alert (Purple) */
blockquote.markdown-alert-important {
background-color: var(--mbr-alert-important-bg);
border-color: var(--mbr-alert-important-border);
}
blockquote.markdown-alert-important::before {
mask: var(--mbr-icon-important);
background-color: var(--mbr-alert-important-icon-color);
}
blockquote.markdown-alert-important > p:first-of-type::before {
content: "Important";
color: var(--mbr-alert-important-icon-color);
}
/* Warning Alert (Orange) */
blockquote.markdown-alert-warning {
background-color: var(--mbr-alert-warning-bg);
border-color: var(--mbr-alert-warning-border);
}
blockquote.markdown-alert-warning::before {
background-color: var(--mbr-alert-warning-icon-color);
mask-image: var(--mbr-icon-warning);
}
blockquote.markdown-alert-warning > p:first-of-type::before {
content: "Warning";
color: var(--mbr-alert-warning-icon-color);
}
/* Caution Alert (Red) */
blockquote.markdown-alert-caution {
background-color: var(--mbr-alert-caution-bg);
border-color: var(--mbr-alert-caution-border);
}
blockquote.markdown-alert-caution::before {
mask-image: var(--mbr-icon-caution);
background-color: var(--mbr-alert-caution-icon-color);
}
blockquote.markdown-alert-caution > p:first-of-type::before {
content: "Caution";
color: var(--mbr-alert-caution-icon-color);
}
/* ==================== Marginalia (>>> - Level 3+ Nesting) ==================== */
/*
* Marginalia are created with triple blockquote nesting (>>>).
* Uses a hover/click indicator to reveal sidenote content when there aren't margins.
*
* Example markdown:
* >>> This is a margin note shown in gutter or via indicator
*/
/* Marginalia container - inline indicator approach */
blockquote blockquote:has(blockquote) {
position: relative;
}
blockquote blockquote blockquote {
display: block;
position: absolute;
left: 100%;
top: -3rem;
font-size: 0.75em;
}
/* Indicator marker */
blockquote blockquote blockquote::before {
content: "†";
display: inline-block;
color: var(--pico-primary);
font-weight: 700;
font-size: 1.5em;
cursor: pointer;
padding: 0 4px;
border-radius: var(--pico-border-radius);
}
blockquote blockquote blockquote:hover::before,
blockquote blockquote blockquote:focus-within::before {
background-color: var(--mbr-marginalia-bg);
}
/* Hide marginalia content by default if screen is less than x pixels; media queries below override */
blockquote blockquote blockquote p {
position: absolute;
display: none;
z-index: 1000;
/* Popover styling */
background-color: var(--pico-background-color);
border: 1px solid var(--mbr-marginalia-border);
border-left: 3px solid var(--pico-primary);
border-radius: var(--pico-border-radius);
box-shadow: var(--pico-box-shadow);
padding: calc(var(--pico-spacing) * 0.75);
margin: 0;
/* Sizing and positioning */
min-width: 280px;
max-width: 90vw;
transform: translateX(-100%) translateY(-50%);
/* Text styling */
--pico-font-size: 0.875em;
--pico-line-height: 1.15;
}
/* Show marginalia on hover */
blockquote blockquote blockquote:hover p,
blockquote blockquote blockquote:focus-within p {
display: block;
}
/* Popover arrow - points right toward the † indicator */
blockquote blockquote blockquote p::before {
content: "";
position: absolute;
left: 100%;
top: 12px;
border: 8px solid transparent;
border-left-color: var(--mbr-marginalia-border);
}
blockquote blockquote blockquote p::after {
content: "";
position: absolute;
left: 100%;
top: 13px;
border: 7px solid transparent;
border-left-color: var(--pico-background-color);
margin-left: -1px;
}
/* Show marginalia fixed in margin when screen is wide enough */
@media (min-width: 2000px) {
blockquote blockquote blockquote::before {
content: "";
}
blockquote blockquote blockquote p {
left: calc(100% + 5px);
width: calc(100vw - 40px);
transform: translateY(-50%);
max-width: 250px;
display: block;
border: none;
box-shadow: none;
background: none;
border-radius: 0;
}
blockquote blockquote blockquote p::before,
blockquote blockquote blockquote p::after {
left: auto;
right: 20px;
border: none;
transform: none;
}
}
/* Multiple paragraphs in marginalia */
blockquote blockquote blockquote p + p {
position: static;
visibility: visible;
opacity: 1;
display: none;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
padding: 0;
border: none;
box-shadow: none;
background: none;
width: auto;
max-width: none;
}
blockquote blockquote blockquote:hover p + p,
blockquote blockquote blockquote:focus-within p + p {
display: block;
}
/* Touch device support - keep visible longer after tap */
@media (hover: none) {
blockquote blockquote blockquote:focus p,
blockquote blockquote blockquote:active p {
visibility: visible;
display: block;
opacity: 1;
}
}
pre.mermaid {
padding: var(--pico-typography-spacing-vertical);
}
/* ==================== Link Enhancement Tooltips (GUI Mode) ==================== */
/*
* Subtle tooltip styling for links enhanced by mbr-link-enhancement component.
* Only active in GUI mode where browser URL and status bar is not visible.
* Users can override these styles in their own theme.css. And can disable by removing
* the component that adds them or by using display: none; on this selector.
*/
a.mbr-link-enhanced[data-tooltip]::before {
font-size: 0.65em;
background-color: rgb(from var(--pico-tooltip-background-color) r g b / 0.75);
}
a.mbr-link-enhanced[data-tooltip]::after {
color: rgb(from var(--pico-tooltip-background-color) r g b / 0.75);
}
/* ==================== Screen Reader Only (Accessibility) ==================== */
/*
* Visually hidden but accessible to screen readers and search indexers.
* Used for high-weight search content (titles, filenames) that should
* be indexed by Pagefind with maximum weight but not visible on page.
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==================== Footnotes (GitHub-Flavored Markdown) ==================== */
/*
* Footnotes are created with [^1] syntax in markdown.
* The footnote definitions appear at the bottom of the document.
*
* Example markdown:
* Here is some text with a footnote[^1].
*
* [^1]: This is the footnote content.
*/
/* Footnote reference links (the superscript numbers in the text) */
sup.footnote-reference {
font-size: 0.75em;
vertical-align: super;
line-height: 0;
text-decoration: none;
font-weight: 600;
top: -0.2em;
}
/* Footnote definitions container - all footnotes at bottom */
.footnote-definition {
font-size: 0.875em;
line-height: 1.5;
margin: 0 0 0.75rem 0;
padding-left: 2.5rem;
color: var(--pico-muted-color);
}
/* Add a subtle divider before the first footnote */
.footnote-definition:first-of-type {
margin-top: var(--pico-spacing);
padding-top: var(--pico-spacing);
border-top: 1px solid var(--pico-muted-border-color);
}
/* Footnote label (the number) */
.footnote-definition-label {
font-weight: 700;
color: var(--pico-primary);
min-width: 2rem;
text-align: right;
padding-right: 0.5rem;
display: inline;
margin: 0;
}
.footnote-definition sup {
vertical-align: baseline;
font-size: 1em;
margin-block-start: 1em;
display: inline;
position: static;
}
.footnote-definition-label::after {
content: ".";
}
/* Footnote content paragraphs */
.footnote-definition p {
margin: 0;
display: inline;
}
/* Back-reference link (↩) */
.footnote-definition a[href^="#fnref"] {
margin-left: 0.25em;
text-decoration: none;
opacity: 0.6;
font-size: 0.9em;
}
.footnote-definition a[href^="#fnref"]:hover {
opacity: 1;
}
/* ==================== Print Styles ==================== */
@media print {
@page {
margin: 0.5in 1in; /* top/bottom: 0.5in, left/right: 1in */
}
/* Hide navigation elements */
body > header,
body > footer,
nav.breadcrumbs,
mbr-nav,
mbr-browse-single {
display: none !important;
}
/* Reset grid layout for printing */
body.mbr-has-sidebar {
display: block;
}
/* Reduce font size (~40% smaller than base) */
:root {
--pico-font-size: 62.5%;
}
/* Reset main container margins - @page handles paper margins */
main.container {
margin: 0;
padding: 0;
max-width: none;
}
/* Prevent awkward page breaks */
pre,
code,
figure,
blockquote,
table,
ul,
ol {
page-break-inside: avoid;
}
/* Marginalia: display inline for print (not absolute positioned) */
blockquote blockquote:has(blockquote) {
position: static;
}
blockquote blockquote blockquote {
position: static;
display: block;
font-size: 0.85em;
margin: var(--pico-spacing) 0;
padding: var(--pico-spacing);
background-color: var(--mbr-marginalia-bg);
border-left: 3px solid var(--pico-primary);
}
/* Hide the indicator marker in print */
blockquote blockquote blockquote::before {
content: none;
}
/* Show marginalia content normally in print */
blockquote blockquote blockquote p {
position: static;
display: block;
transform: none;
min-width: auto;
max-width: none;
background: none;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
/* Hide popover arrows in print */
blockquote blockquote blockquote p::before,
blockquote blockquote blockquote p::after {
content: none;
}
/* Show additional paragraphs in marginalia */
blockquote blockquote blockquote p + p {
display: block;
}
/* Video/media elements: use auto height, hide player controls */
figure > video,
media-player {
max-height: none;
height: auto;
}
/* Hide video player (videos cannot be printed meaningfully) */
media-player,
video {
display: none;
}
/* Show a placeholder message for videos */
figure:has(media-player)::after,
figure:has(video)::after {
content: "[Video content - see digital version]";
display: block;
font-style: italic;
color: var(--pico-muted-color);
padding: var(--pico-spacing);
border: 1px dashed var(--pico-muted-border-color);
text-align: center;
}
/* Reduce GitHub alert icon size for print */
blockquote.markdown-alert-note::before,
blockquote.markdown-alert-tip::before,
blockquote.markdown-alert-important::before,
blockquote.markdown-alert-warning::before,
blockquote.markdown-alert-caution::before {
width: 14px;
height: 14px;
top: calc(var(--pico-spacing) * 1.25);
}
/* Footnotes: ensure they stay together and print cleanly */
.footnote-definition {
page-break-inside: avoid;
color: inherit;
}
.footnote-definition:first-of-type {
break-before: avoid;
}
}
/* ==================== Enhanced Oembed Social Link Boxes ==================== */
.mbr-social-link-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1em;
max-width: 900px;
max-height: 200px;
overflow: hidden;
}
.mbr-social-link {
grid-column: span 2;
text-decoration: none;
}
.mbr-social-link header {
font-size: 1rem;
font-weight: bold;
margin-bottom: var(--pico-typography-spacing-vertical);
}
.mbr-social-link p {
font-size: 0.75rem;
margin: 0;
color: var(--pico-secondary);
}
/*
* PRINT TIP: For best results when printing:
* 1. Use light mode (not dark mode)
* 2. Enable "Print backgrounds" in your browser's print dialog
*/
/* ============================= Kanban Display ========================= */
/*
* just use `--- {.kanban}` or put style: kanban in the frontmatter as appropriate
*/
.kanban {
columns: 18rem; /* needs to be fixed since we don't know how many columns */
column-gap: 2rem;
column-fill: auto; /* should avoid balancing and just fill left first */
/* column-rule: 1px solid var(--pico-muted-border-color); */
overflow-x: auto; /* allow horizontal scroll */
overflow-y: visible;
max-width: 100%;
height: 85vh;
}
.kanban h1,
.kanban h2,
.kanban h3,
.kanban h4,
.kanban h5,
.kanban h6 {
margin-top: 0;
break-after: avoid;
-webkit-column-break-after: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.kanban h1:has(+ ul),
.kanban h1:has(+ ol),
.kanban h2:has(+ ul),
.kanban h2:has(+ ol),
.kanban h3:has(+ ul),
.kanban h3:has(+ ol),
.kanban h4:has(+ ul),
.kanban h4:has(+ ol),
.kanban h5:has(+ ul),
.kanban h5:has(+ ol),
.kanban h6:has(+ ul),
.kanban h6:has(+ ol) {
break-after: avoid;
-webkit-column-break-after: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.kanban > ul,
.kanban > ol {
margin-left: 0;
padding-left: 0;
break-after: column;
break-inside: avoid;
-webkit-column-break-inside: avoid;
-webkit-column-break-before: avoid;
break-before: avoid;
}
.kanban > ul > li,
.kanban > ol > li {
margin-bottom: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical)
var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color);
box-shadow: var(--pico-card-box-shadow);
display: block;
/* background-color: var(--pico-card-sectioning-background-color); */
font-weight: bold;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.kanban ul > li ul,
.kanban ol > li ol {
font-weight: normal;
margin-top: 1em;
}
.kanban ul:last-child,
.kanban ol:last-child {
break-after: always;
}
