164 lines
3.4 KiB
CSS
164 lines
3.4 KiB
CSS
|
|
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:not([fill^='var']) { */
|
|
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;
|
|
}
|
|
|
|
|