From 46f7424bc9ffafdc71e255c9cd728a2a9809fdf3 Mon Sep 17 00:00:00 2001 From: James Brumond Date: Sat, 1 Jul 2023 14:51:41 -0700 Subject: [PATCH] more extra styles --- extras/figures.css | 162 +++++++++++++++++++++++++++++++++ extras/typography/compact.css | 15 +++ extras/typography/general.css | 6 +- extras/typography/spacious.css | 16 ++++ src/template.ts | 1 + 5 files changed, 196 insertions(+), 4 deletions(-) create mode 100644 extras/figures.css diff --git a/extras/figures.css b/extras/figures.css new file mode 100644 index 0000000..3e8d472 --- /dev/null +++ b/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; +} + + diff --git a/extras/typography/compact.css b/extras/typography/compact.css index 7d1f507..9b5d66b 100644 --- a/extras/typography/compact.css +++ b/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; +} diff --git a/extras/typography/general.css b/extras/typography/general.css index 1f1feac..bf19f9a 100644 --- a/extras/typography/general.css +++ b/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); } diff --git a/extras/typography/spacious.css b/extras/typography/spacious.css index f1ad9a4..f06e8ef 100644 --- a/extras/typography/spacious.css +++ b/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; } diff --git a/src/template.ts b/src/template.ts index 020a7d1..856fb64 100644 --- a/src/template.ts +++ b/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));