more extra styles

extras/figures.css

@@ -0,0 +1,162 @@
+
+figure[data-lang] {
+	margin-block: 2rem;
+}
+
+figure a.view-svg {
+	font-size: 0.85rem;
+	font-family: var(--font-body);
+}
+
+figure[data-lang] svg {
+	display: block;
+	margin-inline: auto;
+	margin-block: 2rem;
+
+	/* The auto-scaling font-size from typography/*.css does bad things to a lot of SVGs.
+	 * The SVGs themselves are inherently scalable, so there is no need for it here anyway. */
+	font-size: 16px !important;
+}
+
+figure[data-size='medium']:has(svg) {
+	margin-block: 4rem;
+}
+
+figure[data-size='large'] {
+	margin-block: 6rem;
+}
+
+figure[data-size='small'] svg {
+	max-width: 40rem;
+	max-height: min(20rem, 50vw);
+}
+
+figure[data-size='medium'] svg {
+	max-width: 60rem;
+	max-height: min(40rem, 50vw);
+}
+
+figure[data-size='large'] svg {
+	max-height: min(60rem, 80vw);
+}
+
+/* figure[data-lang].big {
+	background: var(--theme-bg-main);
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+	display: flex;
+	border: 0.25rem var(--theme-line) solid;
+	margin: 3rem;
+}
+
+figure[data-lang].big svg {
+	max-width: none !important;
+	max-height: none !important;
+} */
+
+figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text {
+	fill: var(--theme-text-body);
+}
+
+figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([font-family~='Courier']) {
+	font-family: var(--font-body);
+}
+
+[data-lang='bash:samp'] samp {
+	display: block;
+	margin-block-start: 0.5rem;
+	padding-block-start: 0.5rem;
+	border-block-start: 0.1rem solid var(--theme-line);
+}
+
+/* === KaTeX === */
+
+.katex-display {
+	color: var(--theme-text-body);
+}
+
+.katex-display .katex {
+	font-size: 1.4rem;
+}
+
+/* using "body" here to add specificity, to override styles from katex.min.css */
+body .katex-display {
+	margin: 2rem;
+}
+
+body figure.align-left .katex-display > .katex {
+	text-align: left;
+}
+
+body figure.align-right .katex-display > .katex {
+	text-align: right;
+}
+
+:not(.katex-display) > .katex {
+	font-size: inherit;
+	margin-inline: 0.5rem;
+}
+
+.katex span[style~='color:transparent;'] {
+	user-select: none;
+}
+
+/* === Pikchr */
+
+/* boxes */
+figure[data-lang='pikchr'] svg path[style*='fill:none;'] {
+	fill: var(--theme-bg-light) !important;
+	transition: fill linear .5s;
+}
+
+/* lines and boxes */
+figure[data-lang='pikchr'] svg path[style*='stroke:rgb(0,0,0);'] {
+	stroke: var(--theme-text-body) !important;
+}
+
+/* circles */
+figure[data-lang='pikchr'] svg circle[style*='stroke:rgb(0,0,0);'] {
+	stroke: var(--theme-text-body) !important;
+}
+
+/* arrow heads */
+figure[data-lang='pikchr'] svg polygon[style='fill:rgb(0,0,0)'] {
+	fill: var(--theme-text-body) !important;
+	transition: fill linear .5s;
+}
+
+/* === Bytefield === */
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-width='1'] {
+	stroke-width: 2;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='11'] {
+	font-size: 14px;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='18'] {
+	font-size: 16px;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Courier'] {
+	font-family: var(--font-monospace);
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Times'] {
+	font-family: var(--font-body);
+}
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,1'] {
+	stroke-dasharray: 4px, 3px;
+}
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,3'] {
+	stroke-dasharray: 2px, 3px;
+}
+
+

extras/typography/compact.css

@@ -82,5 +82,20 @@ figcaption {
 /* ===== Pre-formatted Blocks ===== */
 
 pre {
+	padding: 0.5rem;
 	margin-block: 1.5rem;
 }
+
+
+
+
+
+/* ===== Note Blocks ===== */
+
+:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) > :first-child {
+	margin-block-start: 0.25rem;
+}
+
+:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) > :last-child {
+	margin-block-end: 0.25rem;
+}

extras/typography/general.css

@@ -269,10 +269,8 @@ pre {
 	font-family: var(--font-monospace);
 	margin-inline-start: 1rem;
 	margin-inline-end: 5rem;
-	padding-block: 0.5rem;
-	padding-inline: 1rem;
 	border: 0.1rem solid var(--theme-line);
-	border-radius: 1rem;
+	border-radius: 0.5rem;
 	font-size: 1rem;
 	overflow: auto;
 	background: var(--theme-bg-light);
@@ -290,7 +288,7 @@ pre {
 /* ===== Code / Sample Output ===== */
 
 code, samp {
-	font-size: 1rem;
+	font-size: inherit;
 	color: var(--theme-code-normal);
 	font-family: var(--font-monospace);
 }

extras/typography/spacious.css

@@ -45,6 +45,20 @@ p {
 
 
 
+/* ===== Note Blocks ===== */
+
+:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) > :first-child {
+	margin-block-start: 0.5rem;
+}
+
+:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) > :last-child {
+	margin-block-end: 0.5rem;
+}
+
+
+
+
+
 
 /* ===== Lists ===== */
 
@@ -82,4 +96,6 @@ figcaption {
 
 pre {
 	margin-block: 2rem;
+	padding-block: 0.5rem;
+	padding-inline: 1rem;
 }

src/template.ts

@@ -116,6 +116,7 @@ export async function load_extras() {
 		'forms-inputs/spacious.css',
 		'forms-inputs/compact.css',
 		'forms-inputs/general.css',
+		'figures.css',
 	];
 
 	const promises = extras_files.map((file) => load_from_dir(extras_dir, file));