http://foo.bar
*/
a code {
font-size: 0.9em;
}
pre {
--background-color: var(--GW-pre-element-background-color);
overflow: auto;
margin: 0;
border: 1px solid var(--GW-pre-element-border-color);
background-color: var(--background-color);
cursor: text;
max-height: calc(100vh - 8rem);
}
@media all and (hover: hover) {
pre {
overscroll-behavior: none;
}
}
pre code {
display: block;
margin: 0;
padding: 0.4rem 0.7rem;
border: none;
background-color: transparent;
}
/* Truncated code blocks.
*/
div.sourceCode.truncated .truncation-notice {
font-family: var(--GW-sans-serif-font-stack);
text-align: center;
height: 2em;
line-height: 2;
border-style: solid;
border-color: var(--GW-pre-element-border-color);
border-width: 0 1px 1px 1px;
}
/* Horizontal scroll bar styles (for WebKit/Blink).
*/
pre::-webkit-scrollbar {
height: 16px;
background-color: var(--GW-pre-element-scrollbar-track-color);
}
pre::-webkit-scrollbar-thumb {
background-color: var(--GW-pre-element-scrollbar-thumb-color);
box-shadow:
0 0 0 3px var(--GW-pre-element-scrollbar-track-color) inset;
}
pre::-webkit-scrollbar-thumb:hover {
background-color: var(--GW-pre-element-scrollbar-thumb-hover-color);
}
@media all and (max-width: 649px) {
pre::-webkit-scrollbar {
height: 10px;
}
}
/* Horizontal scroll bar styles (for Firefox).
*/
@supports (-moz-appearance: none) {
pre {
scrollbar-color: var(--GW-pre-element-scrollbar-thumb-color) var(--GW-pre-element-scrollbar-track-color);
}
pre:hover {
scrollbar-color: var(--GW-pre-element-scrollbar-thumb-hover-color) var(--GW-pre-element-scrollbar-track-color);
}
}
/*=------------------------------------------------------------------------------------------=*/
/*= Source code highlighting for Pandoc/skylighting-generated syntax classes (not Pygments) =*/
/*=------------------------------------------------------------------------------------------=*/
/* Monochrome-ish code highlighting theme, loosely based on Pygments’s algol_nu
CSS: https://github.com/lukelbd/proplot/blob/master/docs/_static/pygments/algol_nu.css
demo: https://xyproto.github.io/splash/docs/longer/algol_nu.html
Python: https://github.com/pycom/EricShort/blob/master/ThirdParty/Pygments/pygments/styles/algol.py
This skips the underlining and overuse of graying, and uses a bit of blue
as an alternative, and retains red for warnings/errors.
*/
code span { color: var(--GW-syntax-highlight-color-normal); } /* Normal */
code span.at { color: var(--GW-syntax-highlight-color-attribute); } /* Attribute */
code span.dt { color: var(--GW-syntax-highlight-color-data-type); font-weight: bold; font-style: italic } /* DataType */
code span.va { color: var(--GW-syntax-highlight-color-variable); font-weight: bold; font-style: italic } /* Variable */
code span.ot { color: var(--GW-syntax-highlight-color-other); font-weight: bold; font-style: italic } /* Other */
code span.pp { color: var(--GW-syntax-highlight-color-preprocessor); font-weight: bold; font-style: italic } /* Preprocessor */
code span.ex { color: var(--GW-syntax-highlight-color-extension); font-style: italic } /* Extension */
code span.co { color: var(--GW-syntax-highlight-color-comment); } /* Comment */
code span.cf { color: var(--GW-syntax-highlight-color-control-flow); font-weight: bold; } /* ControlFlow */
code span.kw { color: var(--GW-syntax-highlight-color-keyword); font-weight: bold; } /* Keyword */
code span.op { color: var(--GW-syntax-highlight-color-operator); } /* Operator */
code span.sc { color: var(--GW-syntax-highlight-color-special-char); } /* SpecialChar */
code span.bu { color: var(--GW-syntax-highlight-color-built-in); font-weight: bold; } /* BuiltIn */
code span.fu { color: var(--GW-syntax-highlight-color-function); } /* Function */
code span.cn { color: var(--GW-syntax-highlight-color-constant); font-weight: bold; } /* Constant */
code span.dv { color: var(--GW-syntax-highlight-color-dec-val); font-weight: bold; } /* DecVal */
code span.bn { color: var(--GW-syntax-highlight-color-base-n); font-weight: bold; font-feature-settings: 'ss01'; } /* BaseN: "dsBaseN, values with a base other than 10." */
code span.fl { color: var(--GW-syntax-highlight-color-float); font-weight: bold; font-feature-settings: 'ss01'; } /* Float */
code span.in { color: var(--GW-syntax-highlight-color-information); font-weight: bold; } /* Information */
code span.ch { color: var(--GW-syntax-highlight-color-char); font-style: italic; } /* Char */
code span.st { color: var(--GW-syntax-highlight-color-string); font-style: italic; } /* String */
code span.ss { color: var(--GW-syntax-highlight-color-special-string); font-weight: bold; font-style: italic } /* SpecialString: "dsSpecialString, SQL, regexes, HERE docs, LaTeX math mode, ..."x1 */
code span.vs { color: var(--GW-syntax-highlight-color-verbatim-string); font-style: italic; } /* VerbatimString: "dsVerbatimString, verbatim or raw strings like 'raw \backlash' in Perl, CoffeeScript, and shells, as well as r'\raw' in Python." */
code span.al { color: var(--GW-syntax-highlight-color-alert); text-decoration: underline; font-weight: bold; } /* Alert */
code span.er { color: var(--GW-syntax-highlight-color-error); } /* Error */
code span.im { color: var(--GW-syntax-highlight-color-import); font-weight: bold; font-style: italic } /* Import */
/**********************/
/* Highlight-on-hover.
*/
pre code {
padding: 0.4rem 0;
}
pre .line {
display: inline-block;
width: 100%;
position: relative;
padding: 0 0.7rem;
box-sizing: border-box;
}
pre .line:hover {
background-color: var(--GW-code-block-line-highlight-background-color);
box-shadow:
0 1px 0 0 var(--GW-code-block-line-highlight-border-color),
0 -1px 0 0 var(--GW-code-block-line-highlight-border-color);
}
/********/
/* MATH */
/********/
.math.block {
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--GW-math-block-scrollbar-border-color);
}
.math.block .mjpage {
display: block;
overflow: auto;
}
.math.block .MJXc-display {
--background-color: var(--GW-math-block-background-color);
display: inline-block;
margin: 0;
padding: 0.875em 0.75em 0.75em 0.75em;
min-width: calc(100% - 1.5em);
background-color: var(--background-color);
transition:
background-color 0.15s ease-out;
}
.math.block .MJXc-display.flash {
--background-color: var(--GW-math-block-background-color-flash);
transition:
background-color 0.1s ease-out;
}
/* Horizontal scroll bar styles (for WebKit/Chromium).
*/
.math.block .mjpage::-webkit-scrollbar {
height: 14px;
border-top: 1px solid var(--GW-math-block-scrollbar-border-color);
background-color: var(--background-color);
}
.math.block .mjpage::-webkit-scrollbar-thumb {
box-shadow:
0 0 0 2px var(--background-color) inset,
0 0 0 8px var(--GW-math-block-scrollbar-thumb-color) inset;
border-color: var(--GW-math-block-scrollbar-border-color);
border-style: solid;
border-width: 1px 0 0 0;
}
.math.block .mjpage:hover::-webkit-scrollbar-thumb:hover {
box-shadow:
0 0 0 2px var(--background-color) inset,
0 0 0 8px var(--GW-math-block-scrollbar-thumb-hover-color) inset;
}
@media all and (max-width: 649px) {
.math.block .mjpage::-webkit-scrollbar {
height: 10px;
}
}
/* Horizontal scroll bar styles (for Firefox).
*/
@supports (-moz-appearance: none) {
.math.block {
scrollbar-color: var(--GW-math-block-scrollbar-thumb-color) var(--background-color);
}
.math.block:hover {
scrollbar-color: var(--GW-math-block-scrollbar-thumb-hover-color) var(--background-color);
}
}
/* Block buttons.
*/
.math.block .block-button-bar {
position: absolute;
top: -1px;
right: -1px;
border-color: var(--GW-math-block-scrollbar-border-color);
border-style: solid;
border-width: 1px;
}
@media all and (min-width: 650px) {
.math.block .block-button-bar {
opacity: 0;
visibility: hidden;
transition:
opacity 0.15s ease,
visibility 0.15s ease;
}
.math.block:hover .block-button-bar {
opacity: 1.0;
visibility: visible;
transition:
opacity 0s ease 0.05s,
visibility 0s ease 0.05s;
}
}
.math.block .block-button-bar button {
appearance: none;
display: block;
font-size: inherit;
border: none;
padding: 0.25em;
width: 1.25em;
background-color: var(--GW-body-background-color);
cursor: pointer;
}
.math.block .block-button-bar button svg {
opacity: 0.65;
}
@media all and (hover: hover) {
.math.block .block-button-bar button svg {
opacity: 0.45;
}
.math.block .block-button-bar button:hover svg {
opacity: 0.65;
}
}
.math.block .block-button-bar button:active svg {
transform: translateY(1px);
}
.math.inline,
.math.inline .mjpage,
.math.inline .mjx-chtml,
.math.inline .mjx-math,
.math.inline .mjx-mrow {
display: inline;
white-space: normal;
}
/*************/
/* CITATIONS */
/*************/
/* Citation formatting: ellipsis'd "et al", subscripted date; see /subscripts & /lorem#citation-variants */
/* This is variant #6, 'HORIZONTAL ELLIPSIS/subscripted year'. */
/* This relies on the 'citefyInline' pass in Typography.hs: the author ('Foo', or 'Foo & Bar') is put in span.cite-author, the 'et al' joiner (if any) in span.cite-joiner, and the year date in span.cite-date. For 'Foo 2020' or 'Foo & Bar 2020', there is no joiner, only for 'et al'; this lets us replace the et al with an ellipsis while subscripting the year in all cases. */
/* Author
*/
.cite-author-plural::after {
content: "...";
margin-left: 0.05em;
margin-right: -0.05em;
font-size: 75%;
}
a .cite-author-plural::after {
margin-right: 0;
}
/* “et al”
*/
.cite-joiner {
display: none;
}
/* Date
*/
.cite-date {
vertical-align: -0.35ex;
position: relative;
font-size: 0.8em;
line-height: 0.7;
font-variant-numeric: tabular-nums;
margin-left: 0.1em;
white-space: nowrap;
}
/***********/
/* NUMBERS */
/***********/
/* ‘Tabular figures’ to make numbers line up in tables or other
monospace/code like contexts:
https://practicaltypography.com/alternate-figures.html#tabular-and-proportional-figures
https://helpx.adobe.com/fonts/using/open-type-syntax.html#tnum
*/
/* Skip old-style figures in elements with underlining, to reduce the need to
cross the underline with skip-ink
*/
table, code, pre, a, h1, h2, h3, h4, h5, h6 {
font-variant-numeric: tabular-nums;
}
/********/
/* MISC */
/********/
/* Ordinals.
*/
sup.ordinal {
text-transform: lowercase;
top: 0.1em;
text-shadow: none;
}
.heading sup.ordinal {
font-variant-caps: small-caps;
}
.markdownBody a sup.ordinal {
padding: 0;
}
/* Inflation adjustments.
Make sure that adjusted prices move as a block: no breaking in the middle
between the price & sup/sub; this works better than trying to use no-break
Unicode entities.
*/
span.inflation-adjusted {
white-space: nowrap;
}
span.inflation-adjusted .subsup {
align-items: flex-end;
bottom: 0;
}
/* Fixes a bug, not with thickness of the strikethrough line, but its position.
(No, I have no idea why it works like that.)
*/
del {
text-decoration-thickness: from-font;
}
/* LaTeX/TeX: Format the logotypes correctly (a higher up, e lower)
(borrowed from https://latex.now.sh/ )
*/
.logotype-latex .logotype-latex-a {
text-transform: uppercase;
font-size: 0.79em;
vertical-align: 0.24em;
margin-left: -0.32em;
margin-right: -0.02em;
padding-left: 0.02em;
line-height: 1ex;
}
.logotype-latex .logotype-latex-e {
text-transform: uppercase;
vertical-align: -0.5ex;
margin-left: -0.13em;
margin-right: -0.10em;
line-height: 1ex;
}
.logotype-tex sub {
text-transform: uppercase;
vertical-align: -0.50ex;
margin-left: -0.08em;
margin-right: -0.08em;
font-size: 1em;
}
/* Scratchpad for copy operations.
*/
#scratchpad {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
z-index: -1;
pointer-events: none;
}
/* Script tags.
*/
script {
user-select: none;
}
/*************/
/* AUX-LINKS */
/*************/
.link-bibliography-list > li > p {
--text-alignment: left;
}
@media all and (max-width: 649px) {
.backlinks-list .backlink-context,
.link-bibliography-list .annotation-abstract {
margin-left: calc(-1 * var(--list-left-padding));
}
}
/* Do not hyphenate “context” in backlinks lists; it looks bad.
*/
.backlink-source a:nth-of-type(2) {
hyphens: none;
}
/*************/
/* DROPCAPS */
/*************/
/* "dropcaps"/"initials" (https://en.wikipedia.org/wiki/Initial
https://wiki.obormot.net/Reference/DropCapsDemo) are large fancy
block letters used to start a page/section.
The 5 dropcaps right now are Cheshire ('dropcaps-cheshire') (https://www.dafont.com/cheshire-initials.font), Goudy Initialen (https://www.1001fonts.com/goudy-initialen-font.html)
('dropcaps-goudy'), yinit (https://www.tug.org/TUGboat/tb12-1/tb31hara.pdf#page=8) ('dropcaps-yinit'), Kanzlei Initialen ('dropcaps-kanzlei') (https://wiki.obormot.net/Main/BonusFontsDemo?demo_font_one=Kanzlei+Initialen), and
De-Zs/Deutsche Zierschrift (https://www.typografie.info/3/Schriften/fonts.html/deutsche-zierschrift-r250/) ('dropcaps-de-zs').
Dropcaps are used to subtly 'theme' pages: Cheshire is for literary pages, Goudy is for
historical/humanities pages, Kanzlei is for light technical/scientific pages, while yinit is for hardcore technical/scientific
pages (if it has a lot of equations, it's yinit), and De-Zs is for everything else (such as newsletters).
We use them on desktop & skip them on mobile because
they use up 8-12KB each (even after @font-face subset optimization to load
only 1 letter at a time), and take up a lot of screen space.
(Mobile users can't have nice things.)
To implement them, each Markdown
page has a custom metadata field like "css: dropcaps-goudy" which is
substituted into the compiled HTML like
'', allowing defining of multiple
dropcaps and customized per page. The body class then is read by JS
(currently: `rewrite.js` l841, the `dropcapBlocksSelector` variable) which
actually sets it on relevant paragraphs. It would be difficult to define 'first paragraph'
at the start of the page correctly without many special-case pure-CSS selectors.
(Dropcaps in arbitrary manually-specified places, like appendices or split-out articles,
are supported by a separate 'dropcap' singular class which can wrap either the abstract
or a specific .)
*/
@media all and (min-width: 650px) {
p[class*='dropcap-'].overlap-not {
min-height: 6em;
}
p[class*='dropcap-'].graphical-dropcap.overlap-not {
min-height: 8em;
}
p[class*='dropcap-'] a.link-dropcap,
p[class*='dropcap-'] a.link-dropcap * {
text-shadow: none;
}
p[class*='dropcap-'] span.dropcap {
font-style: normal;
font-weight: normal;
float: left;
}
.initial-preceding-punctuation {
float: left;
margin-left: -1ch;
font-size: 1.5em;
}
/* All of these numbers are magic.
*/
p.dropcap-goudy span.dropcap {
font-family: Goudy Initialen;
font-size: 7em;
line-height: 1;
margin: 0.025em 0.02em -0.25em 0;
color: var(--GW-dropcaps-goudy-color);
}
p.dropcap-yinit span.dropcap {
font-family: Yinit;
font-size: 5.625em;
line-height: 1.35;
margin: 0.07em 0.08em -0.5em 0;
text-shadow: 0 0 0 var(--GW-dropcaps-yinit-text-shadow-color);
color: var(--GW-dropcaps-yinit-color);
}
p.dropcap-de-zs span.dropcap {
font-family: Deutsche Zierschrift;
font-size: 6.625em;
line-height: 1.1;
margin: 0.01em 0.05em -0.25em 0;
color: var(--GW-dropcaps-de-zs-color);
}
p.dropcap-cheshire span.dropcap {
font-family: Cheshire Initials;
font-size: 6.75em;
line-height: 1;
margin: 0.045em 0.06em -0.25em 0;
color: var(--GW-dropcaps-cheshire-color);
}
p.dropcap-kanzlei span.dropcap {
font-family: Kanzlei Initialen;
font-size: 7em;
line-height: 1;
margin: 0.025em 0.025em -0.25em -0.02em;
color: var(--GW-dropcaps-kanzlei-color);
}
/* Compensating for responsive line-height reduction.
*/
@media all and (max-width: 1199px) {
p.dropcap-goudy span.dropcap {
font-size: 6.875em;
}
p.dropcap-yinit span.dropcap {
font-size: 5.375em;
}
p.dropcap-de-zs span.dropcap {
font-size: 6.5em;
}
p.dropcap-cheshire span.dropcap {
font-size: 6.625em;
}
p.dropcap-kanzlei span.dropcap {
font-size: 6.875em;
}
}
@media all and (max-width: 999px) {
p.dropcap-goudy span.dropcap {
font-size: 6.625em;
}
p.dropcap-yinit span.dropcap {
font-size: 5.25em;
}
p.dropcap-de-zs span.dropcap {
font-size: 6.25em;
}
p.dropcap-cheshire span.dropcap {
font-size: 6.3125em;
}
p.dropcap-kanzlei span.dropcap {
font-size: 6.6875em;
}
}
/**********************/
/* Graphical dropcaps.
*/
p.graphical-dropcap img.dropcap {
float: left;
display: block;
height: 9.4em;
margin: -0.5em -0.10em -0.95em -0.75em;
filter: none;
}
@media all and (max-width: 1199px) {
p.graphical-dropcap img.dropcap {
margin-top: -0.25em;
}
}
p.graphical-dropcap img.dropcap.svg {
height: 8em;
margin: 0 0.25em 0 0;
}
p.graphical-dropcap img.dropcap.svg.invert {
filter: invert(1);
}
p.graphical-dropcap.disable-dropcap img.dropcap {
display: none;
}
p.graphical-dropcap:not(.disable-dropcap) .hidden-initial-letter {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
}
}
/*************/
/* FOOTNOTES */
/*************/
/*=-----------=*/
/*= Citations =*/
/*=-----------=*/
a.footnote-ref {
vertical-align: super;
line-height: 0.3;
position: relative;
top: 0.05em;
padding: 0 0.05em;
font-variant-numeric: lining-nums;
font-weight: 600;
z-index: 1;
transition:
box-shadow 0.15s ease 0.05s;
}
a.footnote-ref sup {
font-size: 0.75em;
vertical-align: baseline;
}
/* Expanded hover/tap area.
*/
a.footnote-ref::after {
content: "";
position: absolute;
left: -40%;
top: 5%;
width: 180%;
height: 120%;
}
a.footnote-ref.highlighted,
a.footnote-ref:hover,
a.footnote-ref.targeted {
/* o-v-o: outline vertical offset
o-p: outline padding
o-h-s: outline horizontal spread
*/
--o-v-o: 4px;
--o-p: 4px;
--o-h-s: 2px;
box-shadow:
var(--o-h-s) var(--o-v-o) 0 var(--o-p) var(--background-color),
calc(-1 * var(--o-h-s)) var(--o-v-o) 0 var(--o-p) var(--background-color),
var(--o-h-s) var(--o-v-o) 0 calc(var(--o-p) + 1px) var(--GW-highlighted-link-outline-color),
calc(-1 * var(--o-h-s)) var(--o-v-o) 0 calc(var(--o-p) + 1px) var(--GW-highlighted-link-outline-color),
var(--o-h-s) var(--o-v-o) 0 calc(var(--o-p) + 2px) var(--background-color),
calc(-1 * var(--o-h-s)) var(--o-v-o) 0 calc(var(--o-p) + 2px) var(--background-color),
var(--o-h-s) var(--o-v-o) 0 calc(var(--o-p) + 3px) var(--GW-highlighted-link-outline-color),
calc(-1 * var(--o-h-s)) var(--o-v-o) 0 calc(var(--o-p) + 3px) var(--GW-highlighted-link-outline-color)
}
/* Deal with multiple footnote superscripts one after another; per Charuru
*/
sup + sup,
a.footnote-ref {
margin-left: 0.125em;
}
/* ‘Foreign’ footnotes.
*/
sup a,
sub a {
margin-left: 0.10em;
margin-right: 0.13em;
}
sup a + a,
sub a + a {
margin-left: 0.20em;
margin-right: 0.13em;
}
/*=-------------------=*/
/*= Footnotes section =*/
/*=-------------------=*/
section.footnotes {
position: relative;
}
/*********************************************************/
/* Horizontal rule at the start of the footnotes section.
*/
section.footnotes > hr:first-child {
position: relative;
display: flex;
clear: both;
margin: -0.5em 0;
}
section.footnotes > hr:first-child::after {
content: "";
border: 1px solid var(--GW-footnotes-section-top-rule-color);
width: 2em;
height: 2em;
background-color: var(--background-color);
background-image: none;
z-index: 1;
box-shadow:
0 0 0 calc(0.5em - 1px) var(--background-color) inset,
0 0 0 0.5em var(--GW-footnotes-section-top-rule-color) inset;
filter: none;
opacity: 1.0;
}
section.footnotes > hr:first-child::before {
content: "";
position: absolute;
height: 1px;
background-color: var(--GW-footnotes-section-top-rule-color);
width: 100%;
top: 50%;
}
section.footnotes:target > hr:first-child::after,
section.footnotes > hr:first-child.highlighted::after {
border-color: var(--GW-footnote-highlighted-border-color);
box-shadow:
0 0 0 1px var(--background-color) inset,
0 0 0 2px var(--GW-footnote-highlighted-border-color) inset,
0 0 0 calc(0.5em - 1px) var(--background-color) inset,
0 0 0 0.5em var(--GW-footnote-highlighted-border-color) inset,
0 0 0 calc(0.5em + 1px) var(--background-color) inset,
0 0 0 calc(0.5em + 2px) var(--GW-footnote-highlighted-border-color) inset;
}
section.footnotes:target > hr:first-child::before,
section.footnotes > hr:first-child.highlighted::before {
background-color: var(--background-color);
box-shadow:
0 1px 0 0 var(--GW-footnote-highlighted-border-color) inset,
0 -1px 0 0 var(--GW-footnote-highlighted-border-color) inset;
height: 3px;
}
/* Footnotes section self-link.
*/
section.footnotes .section-self-link {
position: absolute;
width: 2em;
height: 2em;
top: -1px;
border: 1px solid transparent;
left: 0;
right: 0;
margin: auto;
z-index: 1;
opacity: 0;
}
/*=----------------=*/
/*= Footnotes list =*/
/*=----------------=*/
section.footnotes > ol {
padding-left: 2.625em;
}
section.footnotes > ol > li {
counter-increment: footnotes;
min-height: calc(1.75em + 1px);
padding: 6px 0 0.25em 0;
}
/* Footnote number.
*/
section.footnotes > ol > li::before {
content: counter(footnotes);
position: absolute;
left: unset;
right: calc(100% + 0.75em);
top: calc(-0.125em + 5px);
width: 1.75em;
height: 1.75em;
display: flex;
justify-content: center;
align-items: center;
border: 1px dotted var(--GW-footnote-border-color);
border-right-color: transparent;
line-height: 1;
font-variant-numeric: lining-nums;
z-index: 1;
}
/* Dotted vertical line.
*/
section.footnotes > ol > li::after {
content: "";
position: absolute;
border-right: 1px dotted var(--GW-footnote-border-color);
height: calc(100% + 0.125em - 4px);
top: calc(-0.125em + 5px);
left: calc(-0.75em - 1px);
}
/* Footnote highlighting.
*/
section.footnotes > ol > li.targeted::before,
section.footnotes > ol > li.targeted::after,
section.footnotes > ol > li.highlighted::before,
section.footnotes > ol > li.highlighted::after {
border-style: solid;
border-color: var(--GW-footnote-highlighted-border-color);
box-shadow:
0 0 0 1px var(--background-color) inset,
0 0 0 2px var(--GW-footnote-highlighted-border-color) inset;
}
section.footnotes > ol > li.targeted::after,
section.footnotes > ol > li.highlighted::after {
border-width: 0 3px 0 0;
border-style: double;
left: calc(-0.75em - 3px);
}
/* Footnote self-links.
*/
section.footnotes .footnote-self-link {
display: initial;
position: absolute;
top: 2px;
right: calc(100% + 0.75em);
width: 1.75em;
height: 1.75em;
border: 1px solid transparent;
z-index: 1;
opacity: 0;
}
/* Hide outside of a footnotes section.
*/
.footnote-self-link {
display: none;
}
/*=------------------------=*/
/*= Back-to-citation links =*/
/*=------------------------=*/
.footnotes a.footnote-back {
display: initial;
margin: 0 0 0 0.5em;
position: relative;
display: inline-block;
font-size: 1em;
line-height: 0.5;
border: 1px dotted var(--GW-footnote-backlink-border-color);
top: 0.10em;
padding: 0.25em 0.30em 0.25em 0.30em;
width: 0.70em;
z-index: 1;
}
/* Hide outside of a footnotes section.
*/
a.footnote-back {
display: none;
}
.markdownBody .footnotes a.footnote-back {
background-image: none;
}
.markdownBody .footnotes a.footnote-back:hover {
border-color: var(--GW-footnote-backlink-border-hover-color);
border-style: solid;
box-shadow:
0 0 0 1px var(--background-color) inset,
0 0 0 2px var(--GW-footnote-backlink-border-hover-color) inset;
}
.markdownBody .footnotes .footnote-back-block {
text-align: right;
}
/*************/
/* SIDENOTES */
/*************/
#sidenote-column-left,
#sidenote-column-right {
width: calc(50vw - (var(--GW-body-max-width) / 2 + 96px));
max-width: var(--GW-sidenotes-max-width);
pointer-events: none;
}
#sidenote-column-left,
#sidenote-column-right {
position: absolute;
top: 0;
height: 100%;
z-index: 1;
pointer-events: none;
}
#sidenote-column-left {
right: calc(100% + 64px);
}
#sidenote-column-right {
left: calc(100% + 64px);
}
#sidenote-column-left:empty,
#sidenote-column-right:empty {
display: none;
}
/*=-----------------=*/
/*= Sidenote blocks =*/
/*=-----------------=*/
#markdownBody .sidenote {
--sidenote-padding: 10px;
--sidenote-border-width: 3px;
--text-indent: 1.75em;
position: absolute;
left: 0;
width: 100%;
opacity: 0.85;
padding: 2em 0 0 0;
font-size: 0.85em;
line-height: calc(1.3 / 0.85);
transition:
opacity 0.25s ease-in,
transform 0.25s ease-in,
top 0.15s ease-out;
pointer-events: auto;
}
#markdownBody .sidenote.displaced {
transition:
opacity 0.25s ease-out,
transform 0.25s ease-out;
}
#markdownBody .sidenote.hidden {
display: none;
}
#markdownBody .sidenote:hover,
#markdownBody .sidenote.targeted,
#markdownBody .sidenote.displaced,
#markdownBody .sidenote.highlighted {
background-color: var(--background-color);
opacity: 1.0;
box-shadow: 0 0 0 16px var(--background-color);
}
#markdownBody .sidenote.targeted {
z-index: 1;
}
#markdownBody .sidenote.displaced {
z-index: 2;
}
#markdownBody .sidenote.highlighted,
#markdownBody .sidenote:hover {
z-index: 3;
}
/* This provides a solid hover margin.
*/
#markdownBody .sidenote::after {
content: "";
position: absolute;
width: calc(100% + 2 * var(--sidenote-padding));
height: calc(100% + 2 * var(--sidenote-padding));
top: calc(-1 * (var(--sidenote-padding) + var(--sidenote-border-width)));
left: calc(-1 * (var(--sidenote-padding) + var(--sidenote-border-width)));
border: 0px solid var(--background-color);
transition:
border-color 0.15s ease 0.05s,
border-style 0.15s ease 0.05s;
}
#markdownBody .sidenote:hover::after,
#markdownBody .sidenote.targeted::after,
#markdownBody .sidenote.displaced::after,
#markdownBody .sidenote.highlighted::after {
border: 3px double var(--GW-sidenote-highlight-box-shadow-color);
}
#markdownBody .sidenote.cut-off::before {
content: "…";
position: absolute;
border: 1px dotted var(--GW-sidenote-border-color);
top: calc(100% - 1px);
left: 0;
right: 0;
margin: auto;
width: fit-content;
z-index: 2;
background-color: var(--background-color);
padding: 0.125em 0.5em 0.5em 0.5em;
font-size: 1.25em;
font-weight: 600;
line-height: 0.5;
pointer-events: none;
}
#markdownBody .sidenote.cut-off:hover::before {
visibility: hidden;
}
#markdownBody .sidenote.cut-off.hide-more-indicator::before {
visibility: hidden;
}
/*=-------------------=*/
/*= Sidenote wrappers =*/
/*=-------------------=*/
/* Outer wrapper (scrolls).
*/
.sidenote-outer-wrapper {
max-height: 600px;
overflow: hidden;
position: relative;
z-index: 1;
border-style: dotted;
border-color: var(--GW-sidenote-border-color);
border-width: 1px 0;
}
#markdownBody .sidenote:hover .sidenote-outer-wrapper,
#markdownBody .sidenote.displaced .sidenote-outer-wrapper,
#markdownBody .sidenote.highlighted .sidenote-outer-wrapper {
/* 1px for inner border; 1px for minimum distance from edge. */
max-height: calc(100vh - (2em + 2 * (var(--sidenote-padding) + var(--sidenote-border-width) + 1px + 1px)));
}
#markdownBody .sidenote.cut-off .sidenote-outer-wrapper {
overflow-y: scroll;
overscroll-behavior: none;
width: 100%;
padding: 0 0.5em 0 0;
}
/* Scroll bar styles (for WebKit/Chromium).
*/
#markdownBody .sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar {
width: 12px;
}
#markdownBody .sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb {
background-image: var(--GW-checkerboard-scrollbar-background-image);
background-size: 2px;
box-shadow:
0 0 0 2px var(--background-color) inset;
}
#markdownBody .sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb:hover {
background-image: var(--GW-checkerboard-scrollbar-hover-background-image);
}
/* Scroll bar styles (for Firefox).
*/
@supports (-moz-appearance: none) {
#markdownBody .sidenote.cut-off .sidenote-outer-wrapper {
scrollbar-color: var(--GW-sidenote-scrollbar-thumb-color) var(--background-color);
}
#markdownBody .sidenote.cut-off .sidenote-outer-wrapper:hover {
scrollbar-color: var(--GW-sidenote-scrollbar-thumb-hover-color) var(--background-color);
}
}
/* Inner wrapper (does not scroll; stretches to height of content).
*/
.sidenote-inner-wrapper {
position: relative;
margin: 0.5em 0;
}
/* Ensure content is interactive.
*/
.sidenote-inner-wrapper > * {
position: relative;
z-index: 1;
}
/*=--------------------------------------=*/
/*= Sidenote contents layout corrections =*/
/*=--------------------------------------=*/
#markdownBody .sidenote {
--base-block-spacing: 0.2em;
}
#markdownBody .sidenote .list {
--list-left-padding: 1.75em;
}
#markdownBody .sidenote li p {
text-align: left;
}
#markdownBody .sidenote .footnote-back {
vertical-align: text-top;
}
#markdownBody .sidenote blockquote > * {
line-height: calc(1.25 / (var(--blockquote-font-size-scaling-factor) * 0.85))
}
/*=-------------------------------=*/
/*= Sidenote self-links (numbers) =*/
/*=-------------------------------=*/
#markdownBody .sidenote > .sidenote-self-link {
font-weight: 600;
position: absolute;
top: -1px;
background-image: none;
border-style: dotted;
border-color: var(--GW-sidenote-self-link-border-color);
border-width: 1px 1px 0px 1px;
width: 2em;
height: 2em;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
transition:
border-color 0.15s ease 0.05s,
border-style 0.15s ease 0.05s;
}
#markdownBody #sidenote-column-left .sidenote > .sidenote-self-link {
right: 0;
}
#markdownBody #sidenote-column-right .sidenote > .sidenote-self-link {
left: 0;
}
#markdownBody .sidenote.targeted > .sidenote-self-link,
#markdownBody .sidenote > .sidenote-self-link:hover {
border-width: 3px;
border-style: double;
top: -3px;
}
#markdownBody #sidenote-column-left .sidenote.targeted > .sidenote-self-link,
#markdownBody #sidenote-column-left .sidenote > .sidenote-self-link:hover {
right: -2px;
}
#markdownBody #sidenote-column-right .sidenote.targeted > .sidenote-self-link,
#markdownBody #sidenote-column-right .sidenote > .sidenote-self-link:hover {
left: -2px;
}
#markdownBody .sidenote.targeted > .sidenote-self-link::before,
#markdownBody .sidenote > .sidenote-self-link:hover::before {
content: "";
display: block;
position: absolute;
bottom: -3px;
width: calc(50vw - (var(--GW-body-max-width) / 2 + 96px) + 10px);
max-width: var(--GW-sidenotes-max-width);
border-bottom: 3px double var(--GW-sidenote-self-link-border-color);
transition:
border-color 0.15s ease 0.05s,
border-style 0.15s ease 0.05s;
}
#markdownBody #sidenote-column-left .sidenote.targeted > .sidenote-self-link::before,
#markdownBody #sidenote-column-left .sidenote > .sidenote-self-link:hover::before {
right: -1px;
}
#markdownBody #sidenote-column-right .sidenote.targeted > .sidenote-self-link::before,
#markdownBody #sidenote-column-right .sidenote > .sidenote-self-link:hover::before {
left: -1px;
}
/*=------------------------------------------=*/
/*= Sidenote back-to-citation links (arrows) =*/
/*=------------------------------------------=*/
#markdownBody .sidenote .footnote-back svg {
transition:
transform 0.25s ease-out;
}
/**********/
/* FOOTER */
/**********/
#footer {
margin-top: 2.5rem;
}
@media all and (max-width: 649px) {
#footer {
margin-top: 2.25rem;
}
}
#footer > p:first-child {
text-align: center;
}
/**********************************/
/* TRANSCLUDED TABLES OF CONTENTS */
/**********************************/
/* TOCs in annotations and content transforms.
*/
blockquote .TOC,
.content-transform .TOC,
.annotation .TOC {
padding: 0.5em 0.5em 0.75em 0.75em;
/* The following four properties are to prevent both overlap and
margin-collapse of the TOC when there’s a floated thumbnail figure
that juts down below the abstract text.
*/
clear: both;
display: inline-block;
box-sizing: border-box;
width: 100%;
}
/**********************/
/* CONTENT TRANSFORMS */
/**********************/
/*=-------------------=*/
/*= WIKIPEDIA ENTRIES =*/
/*=-------------------=*/
.wikipedia-entry p.data-field {
--text-alignment: left;
--text-indent: 0em;
}
.wikipedia-entry .data-field.title .title-link {
font-weight: bold;
}
.wikipedia-entry figure {
clear: both;
}
.wikipedia-entry .image-row-wrapper {
display: flex;
}
.wikipedia-entry .table-wrapper {
clear: both;
}
.wikipedia-entry .infobox {
font-size: 0.9em;
}
.wikipedia-entry .infobox table {
font-size: 0.935em;
}
.wikipedia-entry .infobox tbody tr:hover {
outline: none;
}
.wikipedia-entry .infobox th[colspan="2"],
.wikipedia-entry .infobox td[colspan="2"],
.wikipedia-entry .infobox th.sidebar-title,
.wikipedia-entry .infobox th.sidebar-heading {
text-align: center;
}
.wikipedia-entry .infobox th {
border-top: 1px solid var(--GW-table-row-horizontal-border-color);
}
.wikipedia-entry .infobox tr:first-of-type th {
font-size: 1.25em;
}
.wikipedia-entry .infobox td:first-child {
font-weight: bold;
}
.wikipedia-entry .infobox td ul {
margin: 0.25em 0;
padding: 0 0 0 1.5em;
}
.wikipedia-entry .quotebox-title {
text-align: center;
font-weight: bold;
font-size: 1.25em;
margin: -0.125em 0 0.25em 0;
}
.wikipedia-entry .quotebox-cite {
margin-top: 0.5em;
}
.wikipedia-entry #Timeline-row {
display: flex;
width: fit-content;
margin: 0.25em auto;
}
.wikipedia-entry th br ~ * {
font-weight: normal;
font-size: calc((1 / 1.25) * 1em);
}
.wikipedia-entry .hatnote {
margin: 0 0 0.75em 0;
font-style: italic;
}
.wikipedia-entry .chemf {
word-break: break-all;
}
.wikipedia-entry .side-box {
border: 1px dotted currentColor;
float: right;
clear: right;
padding: 0.5em 0.75em;
max-width: calc(50% - 2em);
margin: 0 0 1em 1em;
overflow: auto;
position: relative;
z-index: 1;
}
.wikipedia-entry .side-box.sister-box ul {
padding: 0;
margin: 1em 0 0 0;
}
.wikipedia-entry .side-box.sister-box ul li::before {
content: none;
}
.wikipedia-entry .side-box.sister-box ul .sister-logo {
margin: 0 0.5em 0 0;
display: inline-block;
vertical-align: text-top;
width: 1.5em;
text-align: center;
}
.wikipedia-entry .gallery {
--list-bullet: none;
--list-left-padding: 0.25em;
display: flex;
flex-flow: row wrap;
}
/* Special case for math in Wikipedia pop-frames.
*/
.wikipedia-entry .wikipedia-math-wrapper img {
--dark-mode-invert-filter: invert(1);
display: block;
}
/* Inline math.
*/
.wikipedia-entry .wikipedia-math-inline-wrapper {
display: inline-block;
vertical-align: baseline;
position: relative;
bottom: -0.35em;
}
/* Block math.
*/
.wikipedia-entry .wikipedia-math-block-wrapper {
margin: 1em 0;
}
.wikipedia-entry .wikipedia-math-block-wrapper img {
margin: auto;
}
/* WP wraps references entirely in elements; is styled by
browsers (Chrome/FF) by default in italics. No one wants their entire
reference in italics, so WP resets the font to the default style (whatever
that is), and styles italics bits (like book titles) manually. We need to
replicate that, or else references sections in our WP popups will be
entirely italics!
*/
.wikipedia-entry cite,
.wikipedia-entry dfn {
font-style: inherit;
}
.wikipedia-entry .wp-footnote-back {
padding: 0 0.25em;
margin: 0 0.5em 0 0;
}
.wikipedia-entry .heading {
pointer-events: auto;
}
.wikipedia-entry.wikipedia-section .TOC {
clear: none;
width: unset;
display: flow-root;
}
/*=--------=*/
/*= TWEETS =*/
/*=--------=*/
.tweet {
--avatar-margin: 1em;
--avatar-border-width: 1px;
}
.tweet p.data-field {
--text-alignment: left;
--text-indent: 0em;
}
.tweet .data-field.tweet-links a {
font-weight: bold;
}
.tweet img.avatar {
display: block;
width: var(--GW-popups-tweet-avatar-size);
height: var(--GW-popups-tweet-avatar-size);
float: left;
margin: 0.25em var(--avatar-margin) var(--avatar-margin) 0;
border-radius: 50%;
border: var(--avatar-border-width) solid var(--GW-figure-outline-color);
}
.tweet .data-field.tweet-content p {
text-indent: 0;
padding-left: calc(var(--GW-popups-tweet-avatar-size) + var(--avatar-margin) + 2 * var(--avatar-border-width));
}
.tweet figure {
margin-left: auto;
margin-right: auto;
margin-bottom: 0.1em;
max-width: unset;
}
/***************/
/* ANNOTATIONS */
/***************/
/***************/
/* Data fields.
*/
.annotation p.data-field,
.annotation-partial p.data-field {
--text-alignment: left;
--text-indent: 0em;
}
.annotation p.data-field.author-date-aux,
.annotation-partial p.data-field.author-date-aux {
--text-hyphenation: none;
}
.annotation p.data-field.title.intro-graf::first-line {
font-variant-caps: unset;
}
/* Title link.
*/
.annotation .data-field.title .title-link,
.annotation-partial .data-field.title .title-link {
font-weight: bold;
}
/* Italicize link tags in popups/indexes similar to the page metadata block’s
tags, for consistency.
*/
.annotation .link-tags,
.annotation-partial .link-tags {
font-style: italic;
/* Tags are enclosed in ()s, but as links with the text-shadow trick, the
italic slant leads to the usual ‘chomp’ without additional margin.
*/
margin-left: 0.1em;
}
/*************************************/
/* Content (in annotation abstracts).
*/
/* Page description in annotation abstract.
*/
.annotation .data-field.annotation-abstract .page-description-annotation {
font-style: italic;
}
/* Images.
*/
.annotation figure {
clear: both;
}
.annotation figure.float .image-wrapper {
max-width: 100%;
}
/* “Aux links” (see also, similars, backlinks, link bibliography).
*/
.annotation .aux-links-list > li > p {
--text-alignment: left;
}
/* “Aux links” in link bibliographies, directory indexes, and other transcluded
(rather than pop-framed) annotations.
*/
ol.link-bibliography-list-compact {
--list-left-padding: 2.25em;
}
ol.link-bibliography-list-compact > li::before {
font-family: var(--GW-monospaced-font-stack);
}
@media all and (max-width: 649px) {
ol.link-bibliography-list-compact {
--list-left-padding: 1.75em;
}
}
ol.link-bibliography-list-compact blockquote.data-field.annotation-abstract.in-list {
margin-right: -1px;
}
/**********/
/* /blog/ */
/**********/
body.blog-page .annotation.blog-post > p.data-field {
--text-alignment: center;
}
body.blog-page .annotation.blog-post > .annotation-abstract > .collapse.aux-links-append,
body.blog-page .annotation.blog-post > .file-includes > .collapse.file-include-collapse {
border: 1px solid var(--GW-aux-links-collapse-border-color);
}
body.blog-page .annotation.blog-post > .annotation-abstract > .collapse.aux-links-append.expanded .collapse-content-wrapper,
body.blog-page .annotation.blog-post > .file-includes > .collapse.file-include-collapse.expanded .collapse-content-wrapper {
padding: 0.5em 0;
}
body.blog-page .annotation.blog-post > .annotation-abstract > .collapse.aux-links-append.expanded-not .collapse-content-wrapper,
body.blog-page .annotation.blog-post > .file-includes > .collapse.file-include-collapse.expanded-not .collapse-content-wrapper {
padding: 0.5em 0.5em 0.5em 1em;
}
body.page-blog-index .collapse.expanded .annotation.blog-post > p.data-field.title {
font-size: 1.25em;
}
/****************/
/* X OF THE DAY */
/****************/
#x-of-the-day {
--ornament-image-left: var(--GW-image-three-wavy-lines-ornament-left-svg);
--ornament-image-right: var(--GW-image-three-wavy-lines-ornament-right-svg);
--ornament-dark-mode-invert-filter: invert(1);
position: relative;
margin-top: 2.75rem;
padding: 3rem 1.5rem 3.75rem 1.5rem;
border: 1px solid var(--GW-x-of-the-day-border-color);
}
@media all and (max-width: 649px) {
#x-of-the-day {
margin-top: 3rem;
padding: 3.5rem 1rem 3.75rem 1rem;
}
}
#x-of-the-day::before,
#x-of-the-day::after {
--dark-mode-invert-filter: var(--ornament-dark-mode-invert-filter);
content: "";
position: absolute;
left: 0.5rem;
width: calc(100% - 1rem);
height: 2rem;
background-image:
var(--ornament-image-left),
var(--ornament-image-right);
background-repeat: no-repeat;
background-size: 4rem 100%;
background-position:
center left,
center right;
opacity: 0.15;
}
#x-of-the-day::before {
top: 0.5rem;
}
#x-of-the-day::after {
bottom: 0.5rem;
transform: scaleY(-1);
}
/*******************/
/* Quote of the day.
*/
/* No special styles, for now.
*/
/*******************/
/* Site of the day.
*/
#x-of-the-day .site-of-the-day {
--box-size: 4em;
--box-padding-top: 1em;
--box-padding-bottom: 3em;
--box-total-size: calc(var(--box-size) + var(--box-padding-top) + var(--box-padding-bottom));
--box-horizontal-offset: calc(var(--box-padding-top) * 2.0);
margin: 3.5em 0 3.25em 0;
padding-right: calc(var(--box-horizontal-offset) * 0.25);
}
@media all and (max-width: 649px) {
#x-of-the-day .site-of-the-day {
margin: 2.75em -1em;
}
}
#x-of-the-day .site-of-the-day blockquote {
--background-color: var(--GW-body-background-color);
--background-image: var(--GW-image-swiss-spiral-roll-stretched-svg);
--background-image-sides: var(--GW-image-swiss-spiral-roll-svg);
position: relative;
height: var(--box-size);
width: fit-content;
margin: auto;
padding:
var(--box-padding-top)
calc(var(--box-size) + 2.0 * var(--box-padding-top))
var(--box-padding-bottom)
calc(var(--box-size) + 2.0 * var(--box-padding-top) + var(--box-horizontal-offset));
background-image: var(--background-image);
background-size: 1000% 100%;
background-position: center;
background-repeat: no-repeat;
border: none;
display: flex;
align-items: center;
}
@media all and (max-width: 649px) {
#x-of-the-day .site-of-the-day blockquote {
font-size: calc((17/18) * var(--GW-body-text-font-size));
padding:
var(--box-padding-top)
calc(var(--box-size) - var(--box-padding-top))
var(--box-padding-bottom)
calc(var(--box-size) + var(--box-padding-top) + var(--box-horizontal-offset));
}
}
#x-of-the-day .site-of-the-day blockquote::before,
#x-of-the-day .site-of-the-day blockquote::after {
content: "";
position: absolute;
width: var(--box-total-size);
height: var(--box-total-size);
background-image: var(--background-image-sides);
background-repeat: no-repeat;
background-color: inherit;
background-size: cover;
top: 0;
}
#x-of-the-day .site-of-the-day blockquote::before {
left: 0;
}
#x-of-the-day .site-of-the-day blockquote::after {
right: 0;
background-position: right;
}
#x-of-the-day .site-of-the-day blockquote p {
position: relative;
margin: 0;
line-height: 1;
z-index: 1;
}
/*************************/
/* Annotation of the day.
*/
#x-of-the-day .annotation-of-the-day {
width: fit-content;
margin: auto;
}
/*********************/
/* BOTTOM DECORATION */
/*********************/
/* Create a ‘footer’ at the bottom of pages which looks like ‘—————𝔊—————’,
similar to the arabesque navbar.
Footers help denote “this is the end”, and avoid the somewhat lame effect of
just having the anonymous feedback link at the end of the page and ending
there with nothing else.
*/
#footer-decoration-container {
margin: 1.75rem 0 0 0;
line-height: 0;
}
@media all and (max-width: 649px) {
#footer-decoration-container {
margin: 1.5rem 0 0 0;
}
}
#footer-decoration-container .footer-logo {
--logo-image: var(--GW-image-logo-smooth-svg);
--logo-image-dark-mode-invert-filter: invert(1);
display: block;
height: 30px;
position: relative;
background-image: linear-gradient(to right,
var(--GW-bottom-ornament-line-color) 50%,
var(--GW-body-background-color) 50%);
background-size: 2px 1px;
background-repeat: repeat-x;
background-position: 0 50%;
opacity: 0.3;
pointer-events: none;
}
#footer-decoration-container .footer-logo:hover {
opacity: 1.0;
}
#footer-decoration-container .footer-logo::before,
#footer-decoration-container .footer-logo::after {
content: "";
position: absolute;
height: 100%;
width: 22px;
top: 0;
left: 0;
right: 0;
margin: auto;
padding: 0 10px 0 12px;
}
#footer-decoration-container .footer-logo::before {
background-color: var(--GW-body-background-color);
}
#footer-decoration-container .footer-logo::after {
--dark-mode-invert-filter: var(--logo-image-dark-mode-invert-filter);
background-image: var(--logo-image);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
pointer-events: auto;
}
/*********************/
/* SEQUENTIAL NAV UI */
/*********************/
/* Navigation bar for return-to-top link + side-arrows (horizontal divider based on:
https://commons.wikimedia.org/wiki/File:Filet_arabesque.svg )
On mobile, we hide the side-arrows.
*/
#navigation {
display: flex;
align-items: center;
opacity: 0.8;
color: var(--GW-nav-header-link-color);
}
#navigation a {
line-height: 1;
display: flex;
color: var(--GW-nav-header-link-color);
}
#navigation a:hover {
color: var(--GW-body-link-color);
}
#navigation svg {
margin: 0;
height: 1.65em;
}
@media all and (min-width: 650px) {
#navigation {
margin: 2.5rem 0 0 0;
justify-content: space-between;
}
#navigation #navigation-right,
#navigation #navigation-left {
flex-grow: 1;
}
#navigation #navigation-right {
transform: scale(-1, 1);
}
#navigation #navigation-center {
width: 15%;
}
}
@media all and (max-width: 649px) {
#navigation {
margin: 3rem 0 0 0;
justify-content: center;
}
#navigation #navigation-right,
#navigation #navigation-left {
display: none;
}
#navigation #navigation-center {
width: 25%;
}
}
/********************/
/* BACK-TO-TOP LINK */
/********************/
#back-to-top {
position: absolute;
bottom: 0.75rem;
opacity: 1.0;
visibility: visible;
transition:
opacity 2s ease;
}
#back-to-top.hidden {
opacity: 0;
}
#back-to-top a {
--background-color: var(--GW-body-background-color);
display: block;
width: 2.25em;
height: 2.25em;
padding: 0.25em 0.25em;
box-sizing: border-box;
color: var(--GW-back-to-top-link-color);
filter:
drop-shadow(0 0 1px var(--background-color))
drop-shadow(0 0 1px var(--background-color))
drop-shadow(0 0 1px var(--background-color));
}
#back-to-top a:hover {
color: var(--GW-back-to-top-link-hover-color);
}
#back-to-top svg {
display: block;
width: 100%;
height: 100%;
}
@media all and (min-width: 1080px) {
#back-to-top {
right: calc(((100% - (var(--GW-body-max-width) + 2 * var(--GW-body-side-padding))) / 2) - 5px);
}
#back-to-top a {
border: 3px double transparent;
}
#back-to-top a:hover {
border-color: currentColor;
}
}
@media all and (max-width: 1079px) {
#back-to-top {
right: 1rem;
bottom: 1rem;
}
#back-to-top a {
border: 1px solid currentColor;
}
#back-to-top {
background-color: var(--background-color);
background-image: linear-gradient(var(--GW-back-to-top-link-color),
var(--GW-back-to-top-link-color));
background-position: 0 0;
background-repeat: no-repeat;
background-size: 0 0;
}
}
/*******************************/
/* PAGE-SPECIFIC MODIFICATIONS */
/*******************************/
/*=--------------=*/
/*= /review/book =*/
/*=--------------=*/
#markdownBody .book-review-meta {
margin: -0.5em 0 1.5em 0;
display: flex;
flex-flow: row;
justify-content: flex-start;
max-width: 100%;
}
.book-review-meta span {
white-space: nowrap;
}
.book-review-meta span + span {
margin-left: 1em;
}
.book-review-meta span:first-of-type {
flex: 0 1 auto;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
.book-review-meta span:first-of-type:hover {
overflow: visible;
white-space: normal;
height: 1em;
padding-left: 1.5em;
text-indent: -1.5em;
}
/*=--------------=*/
/*= /review/mead =*/
/*=--------------=*/
/* This is for the pictures of mead bottles next to the reviews.
*/
body.page-review-mead p > img {
float: right;
max-height: 8em;
width: auto;
position: relative;
z-index: 1;
margin: 1em 1em 1em 2em;
}
/*=-------=*/
/*= /hafu =*/
/*=-------=*/
body.page-hafu .table-wrapper#hafu-list-table td:last-of-type {
width: 50%;
}
/*=-------------=*/
/*= /dnm-arrest =*/
/*=-------------=*/
body.page-dnm-arrest .table-wrapper#data-table td:nth-of-type(6),
body.page-dnm-arrest .table-wrapper#data-table td:nth-of-type(12),
body.page-dnm-arrest .table-wrapper#data-table td:nth-of-type(13) {
white-space: nowrap;
}
body.page-dnm-arrest .table-wrapper#data-table td:last-of-type {
width: 20%;
}
/**************/
/* POP-FRAMES */
/**************/
/*******************/
/* Pop-frame title.
*/
.popframe .popframe-title .popframe-title-link::after,
.popframe .popframe-title .popframe-title-link-archived::after {
display: none;
}
.popframe .popframe-title .separator {
margin: 0 0.5em;
}
.popframe .popframe-title code {
margin: 0 0.05em;
padding: 0;
border: none;
background-color: inherit;
font-size: 0.95em;
}
.popframe .popframe-title code + span {
margin-left: 0.25em;
}
/* “Loading failed” message.
*/
.popframe {
--popframe-loading-failed-message: "Loading failed.";
}
/*=-------------------=*/
/*= POP-FRAME CONTENT =*/
/*=-------------------=*/
/* Adjustments for styles in pop-frames.
*/
.popframe-body {
--text-indent: 1.75em;
}
.popframe-body section.level1 > .heading {
font-size: 1.75em;
}
.popframe-body .list {
--text-alignment: left;
}
.popframe-body .heading {
margin-left: 0;
}
.popframe-body figure:not(.float) {
max-width: calc(100% - 2px);
}
.popframe-body > figure:only-child {
margin: 0;
max-width: unset;
}
.popframe-body pre {
max-height: unset;
}
.popframe-body .table-scroll-wrapper {
max-height: unset;
overscroll-behavior: unset;
}
.popframe-body .marginnote {
display: initial;
}
/* Footnotes sections in pop-frames.
*/
.popframe-body #footnotes > hr:first-child,
.popframe-body #footnotes > hr:first-child + a.section-self-link {
display: none;
}
.popframe-body .footnotes .footnote-back {
vertical-align: text-top;
}
.popframe-body:not(.object) iframe {
max-height: calc(var(--popframe-scroll-view-height) - 2em);
}
.popframe-body .heading .copy-section-link-button {
display: none;
}
/*=-----------------=*/
/*= POP-FRAME TYPES =*/
/*=-----------------=*/
/*┌──────────────────────┐*/
/*│ Aux-link pop-frames. │*/
/*└──────────────────────┘*/
/*┌────────────────────────┐*/
/*│ Annotation pop-frames. │*/
/*└────────────────────────┘*/
.popframe-body > .annotation > .annotation-abstract > .TOC > ul {
column-width: 12em;
column-gap: 1.25em;
}
.popframe-body.link-tag > .annotation > .annotation-abstract > .TOC > ul {
column-width: unset;
column-gap: unset;
}
/* Collapses in annotations.
*/
.popframe-body > .annotation > .annotation-abstract > .collapse-block,
.popframe-body > .annotation > .file-includes > .collapse-block,
.popframe-body > .annotation > .annotation-abstract > .file-includes > .collapse-block {
margin-left: calc(-1 * var(--collapse-left-offset));
padding-left: var(--collapse-left-offset);
}
/* Aux-links and file include collapses in annotations.
*/
.popframe-body > .annotation > .annotation-abstract > .collapse-block.aux-links-append,
.popframe-body > .annotation > .file-includes > .collapse-block.file-include-collapse,
.popframe-body > .annotation > .annotation-abstract > .file-includes > .collapse-block.file-include-collapse {
padding-right: 0.5em;
border-right: 1px solid var(--GW-aux-links-collapse-border-color);
border-left: 1px solid var(--GW-aux-links-collapse-border-color);
margin-left: calc(-1 * (var(--collapse-left-offset) + 1px));
}
.popframe-body > .annotation .collapse-block.last-block {
border-bottom: 1px solid var(--GW-aux-links-collapse-border-color);
}
/* Partial annotations appended to non-annotation pop-frames.
*/
.popframe .partial-annotation-append-container .annotation-partial {
font-size: 0.9em;
}
/*┌──────────────────────┐*/
/*│ Footnote pop-frames. │*/
/*└──────────────────────┘*/
/*┌──────────────────────────────┐*/
/*│ Citation context pop-frames. │*/
/*└──────────────────────────────┘*/
/*┌──────────────────┐*/
/*│ Code pop-frames. │*/
/*└──────────────────┘*/
.popframe.local-code-file .popframe-content-view {
padding: 0;
}
.popframe-body.local-code-file div.sourceCode {
height: 100%;
}
/* Truncated syntax-highlighted code pop-frames, and the note at their end.
*/
.popframe-body.local-code-file div.sourceCode.truncated {
height: calc(100% - 2em);
}
.popframe-body.local-code-file div.sourceCode.truncated .truncation-notice {
border-width: 1px 0 0 0;
}
.popframe-body.local-code-file pre {
height: 100%;
border: none;
max-height: unset;
white-space: pre-wrap;
}
/* Syntax highlighting.
*/
.popframe-body.local-code-file pre code {
padding-left: 2px;
padding-right: 2px;
}
.popframe-body.local-code-file pre .line {
counter-increment: code-line;
display: inline-block;
width: 100%;
position: relative;
padding: 0 0 0.25em 4em;
box-sizing: border-box;
}
.popframe-body.local-code-file pre .line:hover {
background-color: var(--GW-code-block-line-highlight-background-color);
box-shadow:
0 1px 0 0 var(--GW-code-block-line-highlight-border-color),
0 -1px 0 0 var(--GW-code-block-line-highlight-border-color);
}
.popframe-body.local-code-file pre .line::before {
content: counter(code-line);
position: absolute;
width: 3.5em;
height: 100%;
left: 0;
top: 0;
text-align: right;
color: var(--GW-popframes-code-popframe-line-number-color);
font-size: 0.8em;
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding: 0.25em 0.5em 0 0;
border-right: 1px solid var(--GW-popframes-code-popframe-line-number-divider-color);
}
/* “Loading failed” message.
*/
.popframe.local-code-file {
--popframe-loading-failed-message: "File not found.";
}
/*┌────────────────────┐*/
/*│ Object pop-frames. │*/
/*└────────────────────┘*/
/* “Object pop-frames”: videos, images, PDFs, archived web pages, etc.
*/
.popframe.object .popframe-content-view {
--background-color: var(--GW-popframes-object-popframe-background-color);
padding: 0;
}
.popframe-body.object img,
.popframe-body.object video,
.popframe-body.object audio,
.popframe-body.object iframe {
display: block;
margin: auto;
}
.popframe-body.object iframe {
border: unset;
max-height: unset;
height: var(--popframe-scroll-view-height);
width: 100%;
}
/* Don’t show when loading failed.
*/
.popframe-body.object.loading-failed iframe {
visibility: hidden;
}
/*┌───────────────────┐*/
/*│ Image pop-frames. │*/
/*└───────────────────┘*/
/* “Loading failed” message.
*/
.popframe.image {
--popframe-loading-failed-message: "Image not found.";
}
/* Don’t show when loading failed.
*/
.popframe-body.image.loading-failed figure {
visibility: hidden;
}
/*┌───────────────────┐*/
/*│ Video pop-frames. │*/
/*└───────────────────┘*/
.popframe-body.video video {
width: 100%;
}
/* Don’t show while loading, or when loading failed.
*/
.popframe-body.video.loading figure,
.popframe-body.video.loading-failed figure {
visibility: hidden;
}
/* “Loading failed” message.
*/
.popframe.video {
--popframe-loading-failed-message: "Video not found.";
}
/*┌───────────────────┐*/
/*│ Audio pop-frames. │*/
/*└───────────────────┘*/
.popframe-body.audio audio {
width: 100%;
top: 0;
}
/* Don’t show while loading, or when loading failed.
*/
.popframe-body.audio.loading figure,
.popframe-body.audio.loading-failed figure {
visibility: hidden;
}
/* “Loading failed” message.
*/
.popframe.audio {
--popframe-loading-failed-message: "Audio not found.";
}
/*┌────────────────────────────┐*/
/*│ Local document pop-frames. │*/
/*└────────────────────────────┘*/
/* “Loading failed” message.
*/
.popframe.local-document {
--popframe-loading-failed-message: "File not found.";
}
/*┌─────────────────────────────┐*/
/*│ Wikipedia entry pop-frames. │*/
/*└─────────────────────────────┘*/
.popframe-body.wikipedia-entry .data-field.title .title-link {
font-size: 1.125em;
}
/*┌───────────────────┐*/
/*│ Tweet pop-frames. │*/
/*└───────────────────┘*/
.popframe.tweet .popframe-title img.avatar {
height: 1.125em;
width: auto;
margin: 0 0.5em 0 0;
}
/*┌──────────────────────────────┐*/
/*│ Local transclude pop-frames. │*/
/*└──────────────────────────────┘*/
.popframe.local-page .popframe-content-view {
overflow-x: hidden;
}
.popframe-body.local-page #page-metadata {
margin: 0;
}
.popframe-body.local-page #page-metadata::after {
content: "";
display: block;
border-bottom: 1px dotted currentColor;
width: calc(100% + 2em);
margin: 1em -1em 1.125em -1em;
}
/* Section pop-frame metadata (e.g., backlinks link).
*/
.popframe-body.local-page section .section-metadata {
text-align: right;
}
.popframe-body.local-page section.level1 .section-metadata {
text-align: left;
}
/*┌─────────────────┐*/
/*│ Tag pop-frames. │*/
/*└─────────────────┘*/
/* On tag/directory index pop-frames, we want to hide the initial ‘# Links’
because it takes up way too much space and adds nothing.
*/
.popframe-body section.display-pop-not > .heading {
display: none;
}
/* Hide “See Also”... also.
*/
.popframe-body[class*='-index'] section#see-also > .heading {
display: none;
}
/**********/
/* POPUPS */
/**********/
/*=----------------------=*/
/*= GENERAL POPUP STYLES =*/
/*=----------------------=*/
/* Overlay that holds all popups as immediate children.
*/
.popup-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
pointer-events: none;
}
.popup-container > * {
pointer-events: auto;
}
.popup.hidden,
.popup-body.hidden {
visibility: hidden;
}
/* The three nested boxes that make up a popup:
1. Outer frame (positioned within the popup container)
2. Scroll view
3. Content view
The content view contains the actual contents of a popup.
*/
.popup,
.popup .popframe-scroll-view,
.popup .popframe-content-view,
.popup .popframe-title-bar,
.popup .popframe-footer {
box-sizing: border-box;
}
/*┌────────────────────┐*/
/*│ Popup outer frame. │*/
/*└────────────────────┘*/
.popup {
--background-color: var(--GW-popups-popup-background-color);
/* Layout. */
--popups-popup-content-padding: 0.7em 0.9em 0.8em 0.9em;
position: absolute;
overflow: visible;
max-width: var(--GW-popups-popup-max-width);
min-height: calc(3 * var(--popup-title-bar-height) + 2 * var(--GW-popups-popup-border-width));
max-height: var(--GW-popups-popup-max-height);
z-index: 1;
display: flex;
flex-flow: column;
/* Styling. */
--popups-popup-box-shadow: 1px 2px 8px 0 var(--GW-popups-popup-box-shadow-color);
border: var(--GW-popups-popup-border-width) double var(--GW-popups-popup-border-color);
box-shadow: var(--popups-popup-box-shadow);
background-color: var(--background-color);
}
/*┌──────────────────┐*/
/*│ Popup title bar. │*/
/*└──────────────────┘*/
.popup {
--popup-title-bar-height: 0px;
}
.popup.has-title-bar {
--popup-title-bar-height: var(--GW-popups-popup-title-bar-height);
--popup-title-bar-button-size: calc(var(--popup-title-bar-height) - 1px);
min-width: var(--GW-popups-popup-with-full-title-bar-min-width);
min-height: var(--GW-popups-popup-with-full-title-bar-min-height);
}
.popup.mini-title-bar {
--popup-title-bar-height: var(--GW-popups-popup-mini-title-bar-height);
min-width: unset;
min-height: unset;
}
.popup .popframe-title-bar {
--background-color: var(--GW-popups-popup-title-bar-background-color);
flex: 0 0 auto;
height: var(--popup-title-bar-height);
border-bottom: 1px solid var(--GW-popups-popup-border-color);
background-color: var(--background-color);
background-image: var(--GW-popups-popup-title-bar-pattern);
background-size: 8px;
display: flex;
flex-flow: row;
align-items: center;
cursor: grab;
z-index: 1;
}
.popup.mini-title-bar .popframe-title-bar {
overflow: hidden;
}
.popup.grabbed .popframe-title-bar,
.popup.dragging .popframe-title-bar,
.popup.dragging .popframe-title-bar a {
cursor: grabbing;
}
/* Popup title.
*/
.popup .popframe-title {
display: flex;
justify-content: center;
font-family: var(--GW-sans-serif-font-stack);
font-size: 0.8rem;
font-weight: bold;
flex: 1 1 100%;
/* Extra 3rem padding on right to maintain centeredness despite
2 extra buttons on left.
*/
padding: 0 4rem 0 1rem;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
text-align: center;
filter:
drop-shadow(0 0 1px var(--background-color))
drop-shadow(0 0 2px var(--background-color));
}
.popup.mini-title-bar .popframe-title {
display: none;
}
.popup .popframe-title-link,
.popup .popframe-title span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.popup .popframe-title,
.popup .popframe-title > span,
.popup .popframe-title a {
color: var(--GW-popups-popup-title-color);
}
.popup .popframe-title a:hover {
color: var(--GW-popups-popup-title-link-hover-color);
}
.popup .popframe-title::after {
display: none;
}
/* Buttons in the popup title bar.
*/
.popup .popframe-title-bar-button {
line-height: 0;
margin: 0 1px;
padding: 4px;
height: 100%;
flex: 0 0 1.5rem;
width: var(--popup-title-bar-button-size);
cursor: pointer;
color: var(--GW-popups-popup-title-bar-button-color);
justify-content: center;
}
.popup .popframe-title-bar-button:disabled {
color: var(--GW-popups-popup-title-bar-button-color-disabled);
pointer-events: none;
}
.popup .popframe-title-bar-button:nth-child(n+2) {
margin: 0 0 0 1px;
}
.popup.mini-title-bar .popframe-title-bar-button {
padding: 2px;
flex: 0 0 1rem;
}
.popup .popframe-title-bar-button:hover {
color: var(--GW-popups-popup-title-bar-button-color-hover);
}
.popup .popframe-title-bar-button:active {
transform: scale(0.9);
}
.popup .popframe-title-bar-button svg {
max-width: 100%;
max-height: 100%;
filter:
drop-shadow(0 0 1px var(--background-color))
drop-shadow(0 0 2px var(--background-color));
}
.popup .popframe-title-bar-button.zoom-button {
padding: 5px;
}
.popup button.extracts-disable-button {
padding: 3px;
}
.popup.mini-title-bar button.zoom-button,
.popup.mini-title-bar button.extracts-disable-button {
display: none;
}
/* Sub-menus of buttons in the popup title bar.
*/
.popup .popframe-title-bar .submenu {
position: absolute;
top: var(--popup-title-bar-height);
left: -1px;
background-color: var(--background-color);
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 1px;
padding: 0 1px 1px 1px;
background-color: var(--GW-popups-popup-border-color);
visibility: hidden;
box-shadow:
1px 1px 0 0 var(--GW-popups-popup-title-bar-submenu-box-shadow-color);
opacity: 0.0;
transition:
visibility 0.1s ease 0.2s,
opacity 0.1s ease 0.2s;
}
.popup .popframe-title-bar .submenu:hover,
.popup .popframe-title-bar .has-submenu:hover + .submenu {
visibility: visible;
opacity: 1.0;
}
.popup .popframe-title-bar .submenu button {
background-color: var(--background-color);
border: none;
margin: 0;
height: var(--popup-title-bar-button-size);
}
.popup .popframe-title-bar .submenu button svg {
height: calc(var(--popup-title-bar-button-size) - 8px);
width: calc(var(--popup-title-bar-button-size) - 8px);
}
/*┌─────────────────────────────┐*/
/*│ Popup with appended footer. │*/
/*└─────────────────────────────┘*/
.popup.has-footer {
min-width: var(--GW-popups-popup-with-footer-min-width);
max-height: var(--GW-popups-popup-with-footer-max-height);
}
/*┌──────────────────────────────┐*/
/*│ Appended partial annotation. │*/
/*└──────────────────────────────┘*/
.popup .partial-annotation-append-container {
background-color: var(--background-color);
padding: var(--popups-popup-content-padding);
margin-top: 2px;
box-shadow:
0 0 0 1px var(--GW-popups-popup-border-color),
0 -1px 0 1px var(--background-color),
0 -2px 0 1px var(--GW-popups-popup-border-color);
position: relative;
z-index: 1;
}
/*┌────────────────────┐*/
/*│ Popup scroll view. │*/
/*└────────────────────┘*/
.popup .popframe-scroll-view {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: none;
position: relative;
}
/* Scroll bar styles (for WebKit/Blink).
*/
.popup .popframe-scroll-view::-webkit-scrollbar {
width: 14px;
}
.popup .popframe-scroll-view::-webkit-scrollbar-thumb {
background-color: var(--GW-popups-popup-scrollbar-thumb-color);
background-image: var(--GW-checkerboard-scrollbar-background-image);
background-size: 2px;
box-shadow:
0 0 0 3px var(--background-color) inset;
}
.popup .popframe-scroll-view::-webkit-scrollbar-thumb:hover {
background-color: var(--GW-popups-popup-scrollbar-thumb-hover-color);
background-image: var(--GW-checkerboard-scrollbar-hover-background-image);
}
/* Scroll bar styles (for Firefox).
*/
@supports (-moz-appearance: none) {
.popup .popframe-scroll-view {
scrollbar-color: var(--GW-popups-popup-scrollbar-thumb-color) var(--background-color);
}
.popup .popframe-scroll-view:hover {
scrollbar-color: var(--GW-popups-popup-scrollbar-thumb-hover-color) var(--background-color);
}
}
/*┌─────────────────────┐*/
/*│ Popup content view. │*/
/*└─────────────────────┘*/
.popup .popframe-content-view {
background-color: var(--background-color);
padding: var(--popups-popup-content-padding);
display: flow-root;
contain: content;
}
/*┌─────────────┐*/
/*│ Popup body. │*/
/*└─────────────┘*/
.popup-body {
--base-font-size: 0.9rem;
--line-height: 1.5;
}
/*┌─────────────────┐*/
/*│ Focused popups. │*/
/*└─────────────────┘*/
.popup:not(.focused) .popframe-title-bar * {
pointer-events: none;
}
.popup.focused {
--GW-popups-popup-border-color: var(--GW-popups-popup-border-focused-color);
--GW-popups-popup-box-shadow-color: var(--GW-popups-popup-box-shadow-focused-color);
--GW-popups-popup-title-bar-button-color: var(--GW-popups-popup-title-bar-button-focused-color);
--GW-popups-popup-title-bar-button-color-hover: var(--GW-popups-popup-title-bar-button-focused-color-hover);
--GW-popups-popup-title-bar-button-color-disabled: var(--GW-popups-popup-title-bar-button-focused-color-disabled);
--GW-popups-popup-title-color: var(--GW-popups-popup-title-focused-color);
--GW-popups-popup-title-link-hover-color: var(--GW-popups-popup-title-link-hover-focused-color);
--GW-popups-popup-scrollbar-thumb-color: var(--GW-popups-popup-scrollbar-thumb-focused-color);
--GW-popups-popup-scrollbar-thumb-hover-color: var(--GW-popups-popup-scrollbar-thumb-hover-focused-color);
}
.popup.focused .popframe-title-bar {
background-image: var(--GW-popups-popup-title-bar-pattern-focused);
}
/*┌──────────────────────────┐*/
/*│ Zoomed / resized popups. │*/
/*└──────────────────────────┘*/
.popup.zoomed .popframe-content-view,
.popup.resized .popframe-content-view {
max-width: 971px;
margin: auto;
}
.popup.zoomed.full .popframe-content-view {
--line-height: 1.6;
font-size: 1em;
}
.popup.object.zoomed .popframe-content-view,
.popup.object.resized .popframe-content-view,
.popup.local-code-file.zoomed .popframe-content-view,
.popup.local-code-file.resized .popframe-content-view {
max-width: unset;
height: 100%;
}
.popup-body.object.zoomed iframe,
.popup-body.object.resized iframe {
width: 100%;
height: 100%;
}
/*┌───────────────────┐*/
/*│ Collapsed popups. │*/
/*└───────────────────┘*/
.popup.collapsed {
border-bottom-width: var(--popups-popup-border-width);
}
.popup.collapsed[class] {
height: unset !important;
min-height: unset !important;
}
.popup.collapsed .popframe-title-bar {
border-bottom: none;
height: calc(var(--popup-title-bar-height) - 1px);
}
.popup.collapsed .popframe-scroll-view {
height: 0 !important;
}
.popup.collapsed .popframe-scroll-view ~ * {
display: none !important;
}
/*┌───────────────────┐*/
/*│ Minimized popups. │*/
/*└───────────────────┘*/
.popup.minimized .popframe-title-bar {
cursor: pointer;
}
.popup.minimized .popframe-title {
pointer-events: none;
}
/*┌───────────────────────────┐*/
/*│ Transitional UI elements. │*/
/*└───────────────────────────┘*/
/* Animated spawn/despawn.
*/
.popup {
opacity: 1.0;
transition: none;
}
.popup.fading {
opacity: 0.0;
transition:
opacity 0.25s ease-in 0.1s;
}
/* Loading spinner.
*/
.popup .popframe-loading-spinner-view {
display: none;
}
.popup.loading .popframe-loading-spinner-view {
display: initial;
}
.popup .popframe-loading-spinner-view::before {
content: "";
background-image: url('/static/img/icon/icons.svg?v=1754602014#circle-notch-light');
animation: fa-spin 2s infinite linear;
position: absolute;
width: calc(100% - 1em);
height: auto;
max-width: 3em;
max-height: 3em;
top: var(--popup-title-bar-height);
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0.2;
z-index: 1;
}
@keyframes fa-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* “Loading failed” messages.
*/
.popup .popframe-loading-failed-message-view {
display: none;
}
.popup.loading-failed .popframe-loading-failed-message-view {
display: initial;
}
.popup .popframe-loading-failed-message-view::before {
content: var(--popframe-loading-failed-message);
position: absolute;
left: 0;
top: var(--popup-title-bar-height);
width: 100%;
height: calc(100% - var(--popup-title-bar-height) - 1px);
box-sizing: border-box;
padding: 0.1em 0.25em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 1.75em;
font-family: var(--GW-sans-serif-font-stack);
font-weight: bold;
text-transform: uppercase;
opacity: 0.35;
}
/*=-------------=*/
/*= POPUP TYPES =*/
/*=-------------=*/
/*┌────────────────────┐*/
/*│ Annotation popups. │*/
/*└────────────────────┘*/
.popup.annotation:not(.annotation-partial) {
min-width: var(--GW-popups-annotation-popup-min-width);
min-height: var(--GW-popups-annotation-popup-min-height);
}
/*┌─────────────────────────┐*/
/*│ Wikipedia entry popups. │*/
/*└─────────────────────────┘*/
.popup.content-transform.wikipedia-entry {
min-width: var(--GW-popups-wikipedia-entry-popup-min-width);
min-height: var(--GW-popups-wikipedia-entry-popup-min-height);
}
/*┌───────────────┐*/
/*│ Tweet popups. │*/
/*└───────────────┘*/
.popup.content-transform.tweet {
min-height: var(--GW-popups-tweet-popup-min-height);
}
/*┌──────────────────────┐*/
/*│ Dropcap info popups. │*/
/*└──────────────────────┘*/
.popup-body.dropcap-info p {
text-align: left;
}
/*┌──────────────────┐*/
/*│ Footnote popups. │*/
/*└──────────────────┘*/
/*┌──────────────────────────┐*/
/*│ Citation context popups. │*/
/*└──────────────────────────┘*/
/*┌──────────────────┐*/
/*│ Aux-link popups. │*/
/*└──────────────────┘*/
.popup.aux-links {
min-width: var(--GW-popups-aux-links-popup-min-width);
min-height: var(--GW-popups-aux-links-popup-min-height);
}
/*┌──────────────┐*/
/*│ Code popups. │*/
/*└──────────────┘*/
.popup.local-code-file {
width: var(--GW-popups-popup-max-width);
height: var(--GW-popups-popup-max-height);
}
.popup.local-code-file.has-footer {
height: var(--GW-popups-popup-with-footer-max-height);
}
.popframe.local-code-file .popframe-content-view {
height: 100%;
}
/*┌────────────────┐*/
/*│ Object popups. │*/
/*└────────────────┘*/
.popup-body.object,
.popup-body.object figure,
.popup-body.object .figure-outer-wrapper {
flex: 1 0 auto;
display: flex;
width: 100%;
height: 100%;
}
.popup-body.object .figure-outer-wrapper {
background-color: var(--GW-popups-popup-border-color);
}
.popup-body.object .image-wrapper {
flex: 0 1 auto;
display: flex;
width: auto;
}
.popup-body.image.zoomed img,
.popup-body.video.zoomed video,
.popup-body.image.resized img,
.popup-body.video.resized video {
width: calc(var(--popframe-scroll-view-height) * var(--aspect-ratio)) !important;
height: unset !important;
max-height: unset;
}
/* Overlay (for dragging / click capturing).
*/
.popup.object .popframe-content-view::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.popup.object.focused .popframe-content-view::before {
visibility: hidden;
}
.popup.object.dragging .popframe-content-view::before,
.popup.object.resizing .popframe-content-view::before {
visibility: visible;
}
/*┌───────────────┐*/
/*│ Image popups. │*/
/*└───────────────┘*/
/* Popups for images.
*/
.popup.image {
min-width: var(--GW-popups-image-popup-min-size);
min-height: calc(var(--GW-popups-image-popup-min-size) + var(--popup-title-bar-height));
}
/* “Loading failed” message.
*/
.popup.image:not(.dimensions-specified).loading-failed::after {
content: "";
background-image: url('/static/img/icon/icons.svg?v=1754602014#xmark-regular');
background-position: center;
box-sizing: border-box;
margin: 8px;
width: calc(var(--GW-popups-image-popup-min-size) - 2 * var(--GW-popups-popup-border-width) - 16px);
height: calc(var(--GW-popups-image-popup-min-size) - 2 * var(--GW-popups-popup-border-width) - 16px);
opacity: 0.2;
}
/*┌───────────────┐*/
/*│ Video popups. │*/
/*└───────────────┘*/
/* Popups for videos.
*/
.popup.video {
min-width: var(--GW-popups-video-popup-min-width);
min-height: var(--GW-popups-video-popup-min-height);
}
.popup.video.youtube {
width: calc(var(--GW-popups-video-youtube-iframe-width) + 2 * var(--GW-popups-popup-border-width));
height: calc(var(--GW-popups-video-youtube-iframe-height) + 2 * var(--GW-popups-popup-border-width) + var(--popup-title-bar-height));
}
.popup.video.vimeo {
width: calc(var(--GW-popups-video-vimeo-iframe-width) + 2 * var(--GW-popups-popup-border-width));
height: calc(var(--GW-popups-video-vimeo-iframe-height) + 2 * var(--GW-popups-popup-border-width) + var(--popup-title-bar-height));
}
/*┌───────────────┐*/
/*│ Audio popups. │*/
/*└───────────────┘*/
/* Popups for audio files.
*/
.popup.audio {
width: unset;
height: unset;
min-height: unset;
}
.popup.audio.has-footer {
height: unset;
}
.popup.audio:not(.has-footer) {
min-width: var(--GW-popups-audio-popup-min-width);
}
.popup.audio .popframe-content-view {
padding: 3px;
}
.popup-body.audio figure span {
width: 100%;
}
.popup.audio .popframe-loading-failed-message-view::before {
height: calc(var(--GW-popups-audio-popup-min-height) - var(--popup-title-bar-height) - 0.1em - 1px);
}
/*┌────────────────────────┐*/
/*│ Local document popups. │*/
/*└────────────────────────┘*/
.popup.local-document {
width: var(--GW-popups-popup-max-width);
height: var(--GW-popups-popup-max-height);
}
/*┌──────────────────────┐*/
/*│ Foreign site popups. │*/
/*└──────────────────────┘*/
.popup.foreign-site {
width: var(--GW-popups-popup-max-width);
height: var(--GW-popups-popup-max-height);
}
/*┌──────────────────────────┐*/
/*│ Local transclude popups. │*/
/*└──────────────────────────┘*/
.popup.local-page {
min-width: var(--GW-popups-local-page-popup-min-width);
min-height: var(--GW-popups-local-page-popup-min-height);
}
/* Matches mobile layout.
*/
.popup-body.local-page #page-metadata {
font-size: calc((17/18) * var(--base-font-size));
}
.popup-body.local-page #page-metadata .link-tags {
font-size: calc((16/18) * var(--base-font-size));
}
.popup-body.local-page #page-metadata .page-description {
line-height: calc(25/17);
}
.popup-body.local-page #page-metadata .page-metadata-fields {
font-size: calc((16/18) * var(--base-font-size));
line-height: calc(25/16);
}
.popup-body.local-page #page-metadata .page-metadata-fields::before,
.popup-body.local-page #page-metadata .page-metadata-fields::after {
content: "";
width: 100%;
height: calc(1em * (3/18));
}
.popup-body.local-page #page-metadata .page-metadata-fields::before {
order: 2;
}
.popup-body.local-page #page-metadata .page-metadata-fields::after {
order: 4;
}
.popup-body.local-page #page-metadata .page-metadata-fields .page-author::after,
.popup-body.local-page #page-metadata .page-metadata-fields .page-status::after {
display: none;
}
.popup-body.local-page #page-metadata .page-metadata-fields .page-author::after {
height: calc(1em * (3/18));
}
.popup-body.local-page .collapse.section-backlinks-container {
padding-right: 0.5em;
border-color: var(--GW-aux-links-collapse-border-color);
border-style: solid;
border-width: 1px 1px 1px 0;
}
/* Table of contents popups.
*/
.popup.local-page.toc-section {
max-height: 100vh;
}
/*┌───────────────┐*/
/*│ Search popup. │*/
/*└───────────────┘*/
.popup.search {
min-height: unset;
height: unset;
}
.popup-body.search iframe {
height: 7em;
}
/*┌───────────────┐*/
/*│ Search popup. │*/
/*└───────────────┘*/
.popup.help {
width: var(--GW-popups-popup-max-width);
height: var(--GW-popups-popup-max-height);
}
/*=---------------=*/
/*= POPUP CONTENT =*/
/*=---------------=*/
/* None... for now.
*/
/**********/
/* POPINS */
/**********/
/* The three nested boxes that make up a popin:
1. Outer frame (positioned within the block flow, after the spawning target)
2. Scroll view
3. Content view
The content view contains the actual contents of a popin.
*/
.popin,
.popin .popframe-scroll-view,
.popin .popframe-content-view,
.popin .popframe-title-bar {
box-sizing: border-box;
}
/*┌────────────────────┐*/
/*│ Popin outer frame. │*/
/*└────────────────────┘*/
.popin {
--background-color: var(--GW-popins-popin-background-color);
/* Layout. */
--popins-popin-content-padding: 0.7em 0.9em 0.8em 0.9em;
display: block;
position: absolute;
left: 0;
width: 100%;
margin-top: 2.2em;
max-height: var(--GW-popins-popin-max-height);
min-height: var(--GW-popins-popin-min-height);
overflow: visible;
z-index: 100;
/* Styling. */
background-color: var(--background-color);
border: var(--GW-popins-popin-border-width) double var(--GW-popins-popin-border-color);
/* Having a filter on the popin causes `position:fixed` to not work on
the popin backdrop (see below). This is not, technically, a ‘bug’:
https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning
https://github.com/w3c/fxtf-drafts/issues/402
Still, maybe CSSWG will come to their senses someday?
—SA 2023-09-29
*/
/* filter: drop-shadow(0px 0px 12px var(--GW-popins-popin-box-shadow-color)); */
}
.markdownBody .popin-ancestor {
position: relative !important;
z-index: 100 !important;
margin-bottom: 75vh;
}
.popin + .popin {
display: none;
}
/* Backdrop.
*/
.popin-open + .popin::before {
content: "";
background-color: var(--background-color);
position: absolute;
top: calc(-1 * var(--GW-popins-popin-border-width));
left: calc(-1 * var(--GW-popins-popin-border-width));
width: 100%;
height: 100%;
z-index: -1;
border: var(--GW-popins-popin-border-width) double var(--GW-popins-popin-border-color);
}
.popin-open + .popin::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--GW-popins-popin-backdrop-color);
z-index: -2;
}
/*┌──────────────────┐*/
/*│ Popin title bar. │*/
/*└──────────────────┘*/
.popin .popframe-title-bar {
--background-color: var(--GW-popins-popin-title-bar-background-color);
position: absolute;
right: 0;
bottom: calc(100% + 1px);
height: var(--GW-popins-popin-title-bar-height);
max-width: calc(100% - 2em);
border-width: 0;
background-color: var(--background-color);
display: flex;
flex-flow: row;
align-items: center;
width: fit-content;
z-index: -1;
outline: 1px solid var(--GW-popins-popin-border-color);
box-shadow:
-2px 0 0 0 var(--background-color),
2px 0 0 0 var(--background-color),
2px -2px 0 0 var(--background-color),
-2px -2px 0 0 var(--background-color),
-3px -1px 0 0 var(--GW-popins-popin-border-color),
-3px -3px 0 0 var(--GW-popins-popin-border-color),
3px 0 0 0 var(--GW-popins-popin-border-color),
3px -3px 0 0 var(--GW-popins-popin-border-color);
}
.popin {
--popin-title-bar-height: 0px;
}
.popin.has-title-bar {
--popin-title-bar-height: var(--GW-popins-popin-title-bar-height);
}
/* Popin title.
*/
.popin .popframe-title {
display: flex;
align-items: baseline;
justify-content: flex-end;
font-family: var(--GW-sans-serif-font-stack);
font-size: 0.875rem;
flex: 1 1 100%;
padding: 0 1rem;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
text-align: center;
}
.popin .popframe-title::after {
display: none;
}
.popin .popframe-title-link {
--link-underline-gradient-line-color: var(--popframe-title-link-color, currentColor);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Buttons in the popin title bar.
*/
.popin .popframe-title-bar-button {
appearance: none;
border: none;
background-color: transparent;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
margin: 0 1px;
padding: 6px;
height: 100%;
flex: 1 0 auto;
width: calc(var(--GW-popins-popin-title-bar-height) - 1px);
cursor: pointer;
color: var(--GW-popins-popin-title-bar-button-color);
}
.popin .popframe-title-bar-button:active {
transform: scale(0.9);
}
.popin .popframe-title-bar-button svg {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
.popin .popframe-title-bar-button.extracts-disable-button {
padding: 3px;
margin: 0 0 0 2px;
}
.popin .popframe-title-bar-button.close-button {
padding: 2px;
}
/* Popin stack counter.
*/
.popin-stack-counter {
position: absolute;
right: calc(100% + var(--GW-popins-popin-border-width));
bottom: calc(var(--GW-popins-popin-border-width) - 1px);
height: calc(var(--GW-popins-popin-title-bar-height) - var(--GW-popins-popin-border-width) - 1px);
padding: 1px calc(0.5rem + 1px) 1px calc(0.5rem + 2px);
background-color: var(--GW-popins-popin-stack-counter-background-color);
font-family: var(--GW-sans-serif-font-stack);
font-size: calc(1rem * 8/9);
font-weight: normal;
display: flex;
justify-content: center;
align-items: center;
cursor: default;
color: var(--GW-popins-popin-stack-counter-text-color);
}
/*┌───────────────────┐*/
/*│ Popin footer bar. │*/
/*└───────────────────┘*/
.popin .popin-footer-bar {
--background-color: var(--GW-popins-popin-title-bar-background-color);
position: absolute;
left: calc(-1 * var(--GW-popins-popin-border-width));
right: calc(-1 * var(--GW-popins-popin-border-width));
top: calc(100%);
height: calc(var(--GW-popins-popin-border-width) + var(--GW-popins-popin-footer-bar-height));
max-width: calc(100% + (2 * var(--GW-popins-popin-border-width)));
border-style: double;
border-color: var(--GW-popins-popin-border-color);
border-width: 1px var(--GW-popins-popin-border-width) var(--GW-popins-popin-border-width) var(--GW-popins-popin-border-width);
background-color: var(--background-color);
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
z-index: 1;
}
.popin .popin-footer-bar .popframe-title-link {
font-family: var(--GW-sans-serif-font-stack);
font-size: 0.875rem;
}
.popin .popin-footer-bar .popframe-title-link .bracket {
font-size: 1.125em;
}
/*┌─────────────────────────────┐*/
/*│ Popin with appended footer. │*/
/*└─────────────────────────────┘*/
.popin.has-footer {
border-bottom-width: 0;
}
.popin.has-footer .popin-footer-bar {
display: none;
}
/*┌──────────────────────────────┐*/
/*│ Appended partial annotation. │*/
/*└──────────────────────────────┘*/
.popin .partial-annotation-append-container {
background-color: var(--background-color);
padding: var(--popins-popin-content-padding);
position: absolute;
top: 100%;
left: calc(-1 * var(--GW-popins-popin-border-width));
right: calc(-1 * var(--GW-popins-popin-border-width));
border-color: inherit;
border-style: inherit;
border-width:
0
var(--GW-popins-popin-border-width)
var(--GW-popins-popin-border-width)
var(--GW-popins-popin-border-width);
box-shadow:
0 -3px 0 -2px var(--GW-popins-popin-border-color),
0 -4px 0 -2px var(--background-color),
0 -5px 0 -2px var(--GW-popins-popin-border-color);
}
.popin .partial-annotation-append-container .data-field {
display: inline;
}
.popin .partial-annotation-append-container .data-field.title {
margin-right: 0.25em;
}
/*┌────────────────────┐*/
/*│ Popin scroll view. │*/
/*└────────────────────┘*/
.popin .popframe-scroll-view {
overflow-y: auto;
overscroll-behavior: none;
max-height: calc(var(--GW-popins-popin-max-height) - 2 * var(--GW-popins-popin-border-width) - var(--popin-title-bar-height));
height: 100%;
background-color: var(--background-color);
}
/* Scroll bar styles (for WebKit/Blink).
*/
.popin .popframe-scroll-view::-webkit-scrollbar {
width: 12px;
}
.popin .popframe-scroll-view::-webkit-scrollbar-thumb {
background-color: var(--GW-popins-popin-scrollbar-thumb-color);
background-image: var(--GW-checkerboard-scrollbar-background-image);
background-size: 2px;
box-shadow:
0 0 0 3px var(--background-color) inset;
}
.popin .popframe-scroll-view::-webkit-scrollbar-thumb:hover {
background-color: var(--GW-popins-popin-scrollbar-thumb-hover-color);
background-image: var(--GW-checkerboard-scrollbar-hover-background-image);
}
/* Scroll bar styles (for Firefox).
*/
@supports (-moz-appearance: none) {
.popin .popframe-scroll-view {
scrollbar-color: var(--GW-popins-popin-scrollbar-thumb-color) var(--background-color);
}
.popin .popframe-scroll-view:hover {
scrollbar-color: var(--GW-popins-popin-scrollbar-thumb-hover-color) var(--background-color);
}
}
/*┌─────────────────────┐*/
/*│ Popin content view. │*/
/*└─────────────────────┘*/
.popin .popframe-content-view {
--background-color: var(--GW-popins-popin-title-bar-background-color);
background-color: var(--background-color);
padding: var(--popins-popin-content-padding);
display: flow-root;
contain: content;
}
/*┌─────────────┐*/
/*│ Popin body. │*/
/*└─────────────┘*/
.popin-body {
--base-font-size: 0.9rem;
}
/*┌───────────────────────────┐*/
/*│ Transitional UI elements. │*/
/*└───────────────────────────┘*/
/* Loading spinner.
*/
.popin .popframe-loading-spinner-view {
display: none;
}
.popin.loading .popframe-loading-spinner-view {
display: initial;
}
.popin .popframe-loading-spinner-view::before {
content: "";
background-image: url('/static/img/icon/icons.svg?v=1754602014#circle-notch-light');
animation: fa-spin 2s infinite linear;
position: absolute;
width: calc(100% - 1em);
height: auto;
max-width: 3em;
max-height: 3em;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0.2;
z-index: 1;
}
@keyframes fa-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* “Loading failed” messages.
*/
.popin .popframe-loading-failed-message-view {
display: none;
}
.popin.loading-failed .popframe-loading-failed-message-view {
display: initial;
}
.popin .popframe-loading-failed-message-view::before {
content: var(--popframe-loading-failed-message);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 1.5em;
font-family: var(--GW-sans-serif-font-stack);
font-weight: bold;
text-transform: uppercase;
opacity: 0.35;
}
/*┌───────────────────────────┐*/
/*│ Links with an open popin. │*/
/*└───────────────────────────┘*/
.markdownBody a.spawns-popin:not(.footnote-ref) {
transition:
box-shadow 0.15s ease 0.05s;
}
.markdownBody a.spawns-popin.popin-open:not(.footnote-ref) {
position: relative;
z-index: 2;
box-shadow:
3px 1px 0 2px var(--background-color),
-3px 1px 0 2px var(--background-color),
3px 1px 0 3px var(--GW-highlighted-link-outline-color),
-3px 1px 0 3px var(--GW-highlighted-link-outline-color),
3px 1px 0 4px var(--background-color),
-3px 1px 0 4px var(--background-color),
3px 1px 0 5px var(--GW-highlighted-link-outline-color),
-3px 1px 0 5px var(--GW-highlighted-link-outline-color);
}
/*=-------------=*/
/*= POPIN TYPES =*/
/*=-------------=*/
/*┌────────────────────┐*/
/*│ Annotation popins. │*/
/*└────────────────────┘*/
.popin-body.annotation .data-field.title .title-link {
--link-underline-gradient-line-color: var(--popframe-title-link-color, currentColor);
}
.popin-body.annotation .data-field.title .title-link .link-icon-hook::after {
--dark-mode-invert-filter: none;
background-image: var(--link-icon-url-hover, var(--link-icon-url));
color: var(--link-icon-color-hover, currentColor);
opacity: 1.0;
}
/*┌──────────────────┐*/
/*│ Footnote popins. │*/
/*└──────────────────┘*/
.popin.footnote {
min-height: unset;
}
/*┌──────────────────────────┐*/
/*│ Citation context popins. │*/
/*└──────────────────────────┘*/
/*┌──────────────┐*/
/*│ Code popins. │*/
/*└──────────────┘*/
.popin.local-code-file .popframe-title-bar {
--background-color: var(--GW-pre-element-background-color);
}
/*┌────────────────┐*/
/*│ Object popins. │*/
/*└────────────────┘*/
.popin-body.object iframe {
width: 100%;
height: calc(var(--GW-popins-popin-max-height) - 2 * var(--GW-popins-popin-border-width) - var(--popin-title-bar-height));
}
/*┌───────────────┐*/
/*│ Image popins. │*/
/*└───────────────┘*/
.popin-body.image img {
margin: auto;
max-height: calc(var(--GW-popins-popin-max-height) - 2 * var(--GW-popins-popin-border-width) - var(--popin-title-bar-height));
outline: none;
}
/*┌───────────────┐*/
/*│ Video popins. │*/
/*└───────────────┘*/
.popin.video {
padding: 0;
}
.popin-body.video iframe {
display: block;
width: 100%;
}
/*┌───────────────┐*/
/*│ Audio popins. │*/
/*└───────────────┘*/
.popin.audio {
padding: 2px;
}
/*┌────────────────────────┐*/
/*│ Local document popins. │*/
/*└────────────────────────┘*/
/*┌──────────────────────┐*/
/*│ Foreign site popins. │*/
/*└──────────────────────┘*/
/*┌──────────────────────────┐*/
/*│ Local transclude popins. │*/
/*└──────────────────────────┘*/
.popin-body #page-metadata::after {
width: calc(100% + 1em);
margin: 1em -1em 1.125em 0;
}
/*┌───────────────┐*/
/*│ Search popup. │*/
/*└───────────────┘*/
.popin.search {
min-height: unset;
height: unset;
}
.popin-body.search iframe {
height: 7rem;
}
/*=---------------=*/
/*= POPIN CONTENT =*/
/*=---------------=*/
/* Adjustments for styles in popins.
*/
/*┌──────────────┐*/
/*│ Style reset. │*/
/*└──────────────┘*/
.popin {
white-space: normal;
font-weight: normal;
font-style: normal;
font-size: var(--GW-body-text-font-size);
text-align: unset;
}
/*************************/
/* UI ELEMENTS CONTAINER */
/*************************/
#ui-elements-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
pointer-events: none;
}
#ui-elements-container > * {
pointer-events: auto;
}
@media all and (hover: hover) {
#ui-elements-container.hover {
z-index: 10001;
}
}
/****************/
/* PAGE TOOLBAR */
/****************/
#page-toolbar {
user-select: none;
}
/* Show no toolbar if no items in it.
*/
#page-toolbar .widgets:empty ~ * {
display: none;
}
/***************************/
/* Toolbar control buttons.
*/
#page-toolbar > button {
color: var(--GW-page-toolbar-control-button-color);
}
#page-toolbar > button.toggle-button:active {
color: var(--GW-page-toolbar-control-button-active-color);
}
#page-toolbar > button svg {
display: block;
/* The following two properties are not valid CSS. They are here to fix
a Safari-specific bug, which causes the toolbar toggle button to not
display. These properties should be ignored by non-Safari browsers.
—SA 2023-09-24
*/
width: intrinsic;
height: intrinsic;
}
/* Collapse button (chevron); hidden on desktop.
*/
#page-toolbar.desktop > button.collapse-button {
display: none;
}
/* Collapse button (chevron) in mobile layout.
*/
#page-toolbar.mobile > button.collapse-button {
order: 1;
padding: 0 12px;
outline: 1px dotted currentColor;
background-color: var(--background-color);
}
/* Main toggle button (gear).
*/
#page-toolbar > button.main-toggle-button {
order: -1;
opacity: 0.4;
}
#page-toolbar > button.main-toggle-button:focus {
outline: none;
}
#page-toolbar > button.main-toggle-button:active {
transform: scale(0.95);
}
@media all and (hover: hover) {
#page-toolbar > button.main-toggle-button:hover {
opacity: 1.0;
transition:
opacity 0.15s ease;
}
#page-toolbar:not(.collapsed):not(.expanded-temp) > button.main-toggle-button {
opacity: 1.0;
}
}
/* Main toggle button (gear) in vertical layout.
*/
#page-toolbar.vertical > button.main-toggle-button {
padding: 3px;
}
/******************/
/* Toolbar layout.
*/
#page-toolbar {
position: fixed;
display: flex;
align-items: stretch;
opacity: 1;
}
#page-toolbar .widgets {
display: flex;
align-items: stretch;
max-height: 100vh;
max-width: 100vw;
transition:
transform 0.25s ease-out;
}
#page-toolbar .widget {
display: flex;
align-items: stretch;
background-color: var(--background-color);
}
#page-toolbar .widget .widget-button {
position: relative;
aspect-ratio: 1 / 1;
height: auto;
}
#page-toolbar .widget a.widget-button {
font-family: var(--GW-sans-serif-font-stack);
}
#page-toolbar .widget .widget-button .label {
color: var(--GW-page-toolbar-button-text-color);
}
#page-toolbar .widget button.widget-button:disabled .label {
color: var(--GW-page-toolbar-button-disabled-text-color);
}
#page-toolbar .widget button.widget-button .icon {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
color: var(--GW-page-toolbar-button-icon-color);
transition:
color 0.1s ease;
}
#page-toolbar .widget button.widget-button.selectable .icon {
color: var(--GW-page-toolbar-button-selectable-icon-color);
}
#page-toolbar .widget button.widget-button.selected .icon {
color: var(--GW-page-toolbar-button-selected-icon-color);
}
@media all and (hover: hover) {
#page-toolbar .widget button.widget-button:hover .icon {
color: var(--GW-page-toolbar-button-selected-icon-color);
}
}
#page-toolbar .widget button.widget-button:not(:disabled):active .icon {
transform: scale(0.95);
}
#page-toolbar .widget a.widget-button .icon {
color: var(--GW-page-toolbar-button-selected-icon-color);
}
/* Icons-only toolbar mode.
*/
#page-toolbar.button-labels-not .widget .widget-button .label {
display: none;
}
/* Vertical toolbar layout.
*/
#page-toolbar.vertical {
flex-flow: column;
width: 4vmin;
min-width: var(--GW-page-toolbar-minimum-width);
top: 5px;
right: 4px;
}
#page-toolbar.vertical .widgets {
flex-flow: column;
transform-origin: top;
}
#page-toolbar.vertical .widget {
--widget-box-shadow-double-outline:
0 0 0 1px var(--GW-page-toolbar-border-color),
0 0 0 2px var(--background-color),
0 0 0 3px var(--GW-page-toolbar-border-color);
flex-flow: column;
outline: 1px dotted var(--GW-page-toolbar-border-color);
margin-top: 8px;
transition:
box-shadow 0.1s ease;
}
@media all and (hover: hover) {
#page-toolbar.vertical .widget:hover {
box-shadow: var(--widget-box-shadow-double-outline);
}
}
#page-toolbar.vertical .widget.flashing {
box-shadow: var(--widget-box-shadow-double-outline);
background-color: var(--GW-page-toolbar-border-color);
transition:
box-shadow var(--GW-page-toolbar-widget-flash-rise-duration) ease-in,
background-color var(--GW-page-toolbar-widget-flash-rise-duration) ease-in;
}
#page-toolbar.vertical .widget.flashing-fade {
transition:
box-shadow var(--GW-page-toolbar-widget-flash-fall-duration) ease-out,
background-color var(--GW-page-toolbar-widget-flash-fall-duration) ease-out;
}
#page-toolbar.vertical .widget .widget-button .icon {
padding: 4px;
}
#page-toolbar.vertical .widget .widget-button .label {
position: absolute;
right: calc(100% + 5px);
top: 0;
bottom: 0;
margin: auto;
display: flex;
align-items: center;
white-space: nowrap;
padding: 0 10px;
font-variant-caps: small-caps;
background-color: var(--background-color);
box-shadow:
0 0 0 2px var(--background-color),
0 0 0 3px var(--GW-page-toolbar-border-color);
opacity: 0;
transition:
opacity 0.1s ease;
pointer-events: none;
}
@media all and (hover: hover) {
#page-toolbar.vertical .widget:not(.flashing) .widget-button:hover .label,
#page-toolbar.vertical .widget.show-selected-button-label .widget-button.selected .label {
opacity: 1;
}
#page-toolbar.vertical .widget.highlight-selected-button-label button.widget-button.selected .label {
color: var(--GW-page-toolbar-button-highlighted-text-color);
}
#page-toolbar.vertical .widget.highlight-selected-button-label button.widget-button.selected .label::after {
content: "!";
}
}
/* Mobile toolbar layout (reverse vertical).
*/
#page-toolbar.mobile {
--toolbar-offset-x: 0px;
--toolbar-offset-y: 0px;
flex-flow: column-reverse;
width: var(--GW-page-toolbar-minimum-width);
bottom: calc(0.5em - var(--toolbar-offset-y));
right: calc(0.5em - var(--toolbar-offset-x));
transition:
bottom 0.2s ease-out,
right 0.2s ease-out;
}
#page-toolbar.mobile .widgets {
flex-flow: column;
margin: 0 0 0.75em 0;
transform-origin: bottom;
}
#page-toolbar.mobile .widget {
--widget-box-shadow-double-outline:
0 0 0 1px var(--GW-page-toolbar-border-color),
0 0 0 2px var(--background-color),
0 0 0 3px var(--GW-page-toolbar-border-color);
flex-flow: column;
outline: 1px dotted var(--GW-page-toolbar-border-color);
margin-top: 0.5em;
transition:
box-shadow 0.15s ease;
}
#page-toolbar.mobile .widget.flashing {
box-shadow: var(--widget-box-shadow-double-outline);
transition:
box-shadow var(--GW-page-toolbar-widget-flash-rise-duration) ease-out;
}
#page-toolbar.mobile .widget.flashing-fade {
transition:
box-shadow var(--GW-page-toolbar-widget-flash-fall-duration) ease-in;
}
#page-toolbar.mobile .widget .widget-button .icon {
padding: 7px;
}
/******************/
/* Fade on scroll.
*/
#page-toolbar.collapsed {
transition:
opacity 2s ease-out;
}
#page-toolbar.collapsed.faded {
opacity: 0;
}
#page-toolbar.collapsed:hover {
transition:
opacity 0.15s ease;
}
/****************************************/
/* Special case (mobile fade on scroll).
*/
#page-toolbar.mobile.collapsed {
transition:
opacity 2s ease-out,
bottom 0.2s ease-out,
right 0.2s ease-out;
}
#page-toolbar.mobile.collapsed:hover {
transition:
opacity 0.15s ease,
bottom 0.2s ease-out,
right 0.2s ease-out;
}
/**********************/
/* Toolbar collapsing.
*/
#page-toolbar.animating > button.main-toggle-button {
transition:
opacity var(--GW-page-toolbar-collapse-duration) ease-out,
transform var(--GW-page-toolbar-collapse-duration) ease-out;
}
/* Toolbar collapsing (vertical mode).
*/
#page-toolbar.vertical.collapsed > button.main-toggle-button {
transform: rotateZ(0.5turn);
}
#page-toolbar.vertical.collapsed > button.main-toggle-button:active {
transform: rotateZ(0.5turn) scale(0.95);
}
#page-toolbar.vertical.collapsed .widgets {
transform: rotateX(-0.25turn);
max-height: 0;
transition:
transform var(--GW-page-toolbar-collapse-duration) ease-out,
max-height 0s ease-out var(--GW-page-toolbar-collapse-duration);
}
/* Toolbar collapsing (mobile mode).
*/
#page-toolbar.mobile > button.main-toggle-button {
opacity: 1.0;
}
#page-toolbar.mobile.collapsed > button.main-toggle-button {
opacity: 0.65;
transform: rotateZ(-0.5turn);
}
#page-toolbar.mobile.collapsed > button.main-toggle-button:active {
transform: rotateZ(-0.5turn) scale(0.95);
}
#page-toolbar.mobile > button.collapse-button {
transition:
opacity var(--GW-page-toolbar-fade-after-collapse-duration) ease-out var(--GW-page-toolbar-collapse-duration);
}
#page-toolbar.mobile.collapsed > button.collapse-button {
opacity: 0;
transition:
opacity var(--GW-page-toolbar-collapse-duration) ease-out;
}
#page-toolbar.mobile.collapsed .widgets {
transform: rotateX(0.25turn);
max-height: 0;
transition:
transform var(--GW-page-toolbar-collapse-duration) ease-out,
max-height 0s ease-out var(--GW-page-toolbar-collapse-duration);
}
/* Slow collapsing.
*/
#page-toolbar.collapsed.collapsed-slowly > button.main-toggle-button {
transition:
opacity var(--GW-page-toolbar-slow-collapse-duration) ease-out,
transform var(--GW-page-toolbar-slow-collapse-duration) linear;
}
#page-toolbar.collapsed.collapsed-slowly .widgets {
transition:
transform var(--GW-page-toolbar-slow-collapse-duration) ease-out;
}
/* Slow collapsing (vertical layout).
*/
#page-toolbar.vertical.collapsed.collapsed-slowly .widgets {
transition:
transform var(--GW-page-toolbar-slow-collapse-duration) ease-out,
max-height 0s ease-out var(--GW-page-toolbar-slow-collapse-duration);
}
/* Slow collapsing (mobile layout).
*/
#page-toolbar.mobile.collapsed.collapsed-slowly .widgets {
transition:
transform var(--GW-page-toolbar-slow-collapse-duration) ease-out,
max-height 0s ease-out var(--GW-page-toolbar-slow-collapse-duration);
}
/******************/
/* INLINE WIDGETS */
/******************/
.link-widget a {
opacity: 0.6;
}
.link-widget a:hover {
opacity: 1.0;
}
/*******************/
/* VIRTUAL WIDGETS */
/*******************/
#virtual-widget-container {
position: fixed;
visibility: hidden;
overflow: hidden;
top: 5em;
right: 3em;
width: 0;
height: 0;
}
/***************/
/* IMAGE FOCUS */
/***************/
/*=--------=*/
/*= Colors =*/
/*=--------=*/
:root {
--SA-image-focus-sans-serif-font-stack: var(--GW-sans-serif-font-stack);
--SA-image-focus-image-background-color: #fff;
--SA-image-focus-image-hover-drop-shadow-color: var(--GW-image-focus-image-hover-drop-shadow-color);
--SA-image-focus-image-hover-tooltip-background-color: rgba(0, 0, 0, 0.75);
--SA-image-focus-image-hover-tooltip-text-color: #fff;
--SA-image-focus-image-hover-tooltip-inverted-background-color: rgba(255, 255, 255, 0.6);
--SA-image-focus-overlay-background-color: #000;
--SA-image-focus-overlay-image-caption-background-color: rgba(0, 0, 0, 0.7);
--SA-image-focus-overlay-image-caption-text-color: #fff;
--SA-image-focus-overlay-image-caption-link-color: #ccc;
--SA-image-focus-overlay-image-caption-link-hover-color: #aaa;
--SA-image-focus-overlay-image-caption-separator-color: #888;
--SA-image-focus-overlay-help-box-background-color: rgba(0, 0, 0, 0.85);
--SA-image-focus-overlay-help-box-text-color: #fff;
--SA-image-focus-overlay-info-icon-drop-shadow-color: #000;
--SA-image-focus-overlay-image-number-text-color: #fff;
--SA-image-focus-overlay-image-number-text-shadow-color: #000;
--SA-image-focus-overlay-image-url-copy-icon-color: #bbb;
--SA-image-focus-overlay-slideshow-button-color: #ddd;
--SA-image-focus-overlay-slideshow-button-hover-background-color: rgba(0, 0, 0, 0.1);
--SA-image-focus-overlay-slideshow-button-hover-color: #777;
--SA-image-focus-overlay-slideshow-button-hover-drop-shadow-color: #fff;
--SA-image-focus-overlay-slideshow-button-active-color: #888;
--SA-image-focus-overlay-slideshow-button-disabled-color: #ddd;
}
/*=--------------=*/
/*= Hover styles =*/
/*=--------------=*/
.markdownBody img.focusable:hover {
/* filter: drop-shadow(0 0 3px var(--SA-image-focus-image-hover-drop-shadow-color)); */
cursor: zoom-in;
box-shadow: 0 0 10px 0 var(--SA-image-focus-image-hover-drop-shadow-color);
}
.markdownBody img.focusable:active {
transform: scale(0.975);
}
/*=---------=*/
/*= Overlay =*/
/*=---------=*/
#image-focus-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: none;
cursor: zoom-out;
}
#image-focus-overlay::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--SA-image-focus-overlay-background-color);
opacity: 0.9;
z-index: -1;
}
#image-focus-overlay.engaged {
display: initial;
}
#image-focus-overlay .image-in-focus {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
width: auto;
height: auto;
max-height: unset;
background-color: var(--SA-image-focus-image-background-color);
}
#image-focus-overlay .image-in-focus.loading {
box-shadow: 0 0 0 1px var(--SA-image-focus-overlay-image-caption-separator-color) inset;
background-color: transparent;
}
#image-focus-overlay .loading-spinner {
visibility: hidden;
color: var(--SA-image-focus-overlay-image-caption-separator-color);
width: 40vw;
height: fit-content;
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.4;
pointer-events: none;
z-index: -1;
}
#image-focus-overlay .loading-spinner svg {
display: block;
width: 100%;
height: 100%;
max-height: 20vh;
animation: fa-spin 2s infinite linear;
}
#image-focus-overlay .image-in-focus.loading + .loading-spinner {
visibility: visible;
}
/*=-------------------=*/
/*= Single-image mode =*/
/*=-------------------=*/
#image-focus-overlay:not(.slideshow) .image-number,
#image-focus-overlay:not(.slideshow) .slideshow-buttons,
#image-focus-overlay:not(.slideshow) .slideshow-help-text {
display: none;
}
/*=---------=*/
/*= Caption =*/
/*=---------=*/
#image-focus-overlay .caption {
position: absolute;
bottom: 0.25em;
left: 4.5em;
right: 4.5em;
margin: auto;
max-width: calc(100% - 9em);
width: fit-content;
text-align: center;
font-family: var(--SA-image-focus-sans-serif-font-stack);
cursor: auto;
z-index: 1;
transition:
bottom 0.15s ease;
}
@media all and (max-width: 1179px) {
#image-focus-overlay .caption {
max-width: calc(100% - 2em);
left: 1em;
right: 1em;
}
}
@media (min-width: 650px) and (orientation: portrait),
(min-height: 650px) and (orientation: landscape) {
#image-focus-overlay .caption {
font-size: 2vmin;
}
}
#image-focus-overlay .caption.hidden:not(.locked) {
bottom: -50%;
transition:
bottom 0.5s ease-in;
}
/* Necessary so that mouse hover at bottom of screen to the left or right of
a narrow caption still counts as “hovering over the caption” for the purpose
of preventing the caption from hiding.
*/
#image-focus-overlay .caption:not(:empty)::before {
content: "";
display: block;
position: absolute;
width: 100vw;
height: calc(100% + 1.5em);
z-index: -1;
top: -0.75em;
left: calc(-50vw + 50%);
}
#image-focus-overlay .caption .caption-text-wrapper {
background-color: var(--SA-image-focus-overlay-image-caption-background-color);
padding: 0.125em 1.25em 1px 1.25em;
border-radius: 8px;
}
@media (max-width: 649px) and (orientation: portrait),
(max-height: 649px) and (orientation: landscape) {
#image-focus-overlay .caption .caption-text-wrapper {
font-size: 0.9em;
padding: 0.125em 0.75em 0.25em 0.75em;
}
}
#image-focus-overlay .caption .caption-text-wrapper:empty {
display: none;
}
/* Caption contents.
*/
#image-focus-overlay .caption p {
margin: 0.875em 0;
color: var(--SA-image-focus-overlay-image-caption-text-color);
}
#image-focus-overlay .caption p + p {
padding-top: 0.75em;
border-top: 1px dotted var(--SA-image-focus-overlay-image-caption-separator-color);
font-size: 0.9em;
}
@media (max-width: 649px) and (orientation: portrait),
(max-height: 649px) and (orientation: landscape) {
#image-focus-overlay .caption p + p {
display: none;
}
}
#image-focus-overlay .caption code {
background-color: inherit;
border: none;
font-size: 1em;
}
#image-focus-overlay .caption a {
color: var(--SA-image-focus-overlay-image-caption-link-color);
margin: 0;
padding: 0;
}
#image-focus-overlay .caption a:hover {
color: var(--SA-image-focus-overlay-image-caption-link-hover-color);
}
#image-focus-overlay .caption a .indicator-hook,
#image-focus-overlay .caption a .link-icon-hook {
display: none;
}
/* Image URL in caption.
*/
#image-focus-overlay .caption .image-url {
position: relative;
margin: 0;
padding: 0.625em 2em 0.875em 1.25em;
border-radius: 8px;
background-color: var(--SA-image-focus-overlay-image-caption-background-color);
cursor: copy;
user-select: none;
transition:
background-color 0.15s ease-out;
}
#image-focus-overlay .caption .caption-text-wrapper:not(:empty) + .image-url::before {
content: "";
position: absolute;
top: -1px;
left: 1.25em;
right: 1.25em;
border-top: 1px dotted var(--SA-image-focus-overlay-image-caption-separator-color);
}
@media (max-width: 649px) and (orientation: portrait),
(max-height: 649px) and (orientation: landscape) {
#image-focus-overlay .caption .image-url {
display: none;
}
}
#image-focus-overlay .caption .image-url.flash {
background-color: var(--SA-image-focus-overlay-image-caption-link-color);
transition:
background-color 0.1s ease-out;
}
#image-focus-overlay .caption .image-url .url {
font-size: 0.8em;
color: var(--SA-image-focus-overlay-image-caption-link-color);
}
@media (max-width: 649px) and (orientation: portrait) {
#image-focus-overlay .caption .image-url .url {
font-size: 0.75em;
}
}
@media (max-height: 649px) and (orientation: landscape) {
#image-focus-overlay .caption .image-url .url {
font-size: 0.70em;
}
}
#image-focus-overlay .caption .image-url:hover .url {
color: var(--SA-image-focus-overlay-image-caption-text-color);
}
#image-focus-overlay .caption .image-url .icon-container {
display: block;
position: absolute;
width: 0.95em;
height: 0.95em;
right: 0.55em;
top: 0.9em;
pointer-events: none;
overflow: hidden;
}
#image-focus-overlay .caption .image-url .icon {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
color: var(--SA-image-focus-overlay-image-url-copy-icon-color);
transition:
opacity 2s ease-in;
}
#image-focus-overlay .caption .image-url:hover .icon {
color: currentColor;
}
#image-focus-overlay .caption .image-url.copied .icon {
transition:
left 0.15s ease,
opacity 0.15s ease;
}
#image-focus-overlay .caption .image-url .icon.normal {
left: 0;
opacity: 1;
}
#image-focus-overlay .caption .image-url.copied .icon.normal {
left: -100%;
opacity: 0;
}
#image-focus-overlay .caption .image-url .icon.copied {
left: 100%;
opacity: 0;
}
#image-focus-overlay .caption .image-url.copied .icon.copied {
left: 0;
opacity: 1;
}
#image-focus-overlay .caption .image-url .icon svg {
display: block;
height: 100%;
}
/*=--------------=*/
/*= Help overlay =*/
/*=--------------=*/
#image-focus-overlay .help-overlay {
position: absolute;
display: flex;
flex-flow: column;
z-index: 3;
font-family: var(--SA-image-focus-sans-serif-font-stack);
font-size: 1.25rem;
padding: 1em;
border-radius: 10px;
bottom: 1em;
right: 1em;
max-width: calc(100vw - 4em);
overflow: hidden;
color: transparent;
cursor: help;
visibility: hidden;
transition:
visibility 1s ease,
color 1s ease,
background-color 1s ease,
bottom 0.15s ease;
}
#image-focus-overlay .help-overlay.open {
width: fit-content;
background-color: var(--SA-image-focus-overlay-help-box-background-color);
color: var(--SA-image-focus-overlay-help-box-text-color);
visibility: visible;
transition:
visibility 0.2s ease 0.3s,
color 0.2s ease 0.3s,
background-color 0.2s ease 0.3s;
}
#image-focus-overlay .help-overlay::after {
content: "";
background-image: url('/static/img/icon/icons.svg?v=1754602014#question');
background-origin: content-box;
background-clip: content-box;
position: absolute;
width: 1em;
height: 1.5em;
right: 0;
bottom: 0;
padding: 10px;
filter: invert(1) drop-shadow(0 0 4px var(--SA-image-focus-overlay-info-icon-drop-shadow-color));
visibility: visible;
opacity: 0.85;
transition:
visibility 1s ease;
}
#image-focus-overlay .help-overlay.open::after {
visibility: hidden;
transition:
visibility 0.2s ease 0.3s;
}
#image-focus-overlay .help-overlay p {
margin: 0 0 0.75em 0;
text-indent: -2em;
padding-left: 2em;
max-width: 100%;
overflow: hidden;
}
#image-focus-overlay .help-overlay p:last-of-type {
margin: 0;
}
#image-focus-overlay .help-overlay.hidden {
bottom: -2.25em;
}
@media all and (max-width: 1179px) {
#image-focus-overlay .help-overlay {
bottom: unset;
top: 1em;
}
#image-focus-overlay .help-overlay::after {
bottom: unset;
top: 0;
}
#image-focus-overlay .help-overlay.hidden {
bottom: unset;
top: -2.25em;
}
}
/*=--------------=*/
/*= Slide number =*/
/*=--------------=*/
#image-focus-overlay .image-number {
position: absolute;
z-index: 2;
font-family: var(--SA-image-focus-sans-serif-font-stack);
font-size: 1.5rem;
left: 1em;
top: 1em;
font-weight: 600;
color: var(--SA-image-focus-overlay-image-number-text-color);
text-shadow:
0 0 2px var(--SA-image-focus-overlay-image-number-text-shadow-color),
0 0 4px var(--SA-image-focus-overlay-image-number-text-shadow-color),
0 0 6px var(--SA-image-focus-overlay-image-number-text-shadow-color),
0 0 10px var(--SA-image-focus-overlay-image-number-text-shadow-color);
width: 1.5em;
text-align: right;
white-space: nowrap;
cursor: default;
transition: top 0.3s ease;
}
#image-focus-overlay .image-number::before {
content: "#";
opacity: 0.3;
}
#image-focus-overlay .image-number::after {
content: " of " attr(data-number-of-images);
opacity: 0.3;
}
#image-focus-overlay .image-number:hover::before,
#image-focus-overlay .image-number:hover::after {
opacity: 1.0;
}
#image-focus-overlay .image-number.hidden {
top: -1.25em;
}
/*=-------------------=*/
/*= Slideshow buttons =*/
/*=-------------------=*/
#image-focus-overlay .slideshow-buttons {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
justify-content: space-between;
pointer-events: none;
}
#image-focus-overlay .slideshow-buttons button {
font-size: 3rem;
color: var(--SA-image-focus-overlay-slideshow-button-color);
border: none;
background-color: transparent;
position: relative;
left: 0;
transition:
left 0.3s ease;
pointer-events: auto;
cursor: pointer;
width: 4rem;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
}
#image-focus-overlay .slideshow-buttons button.next {
padding: 0.25em 0.25em 0.25em 0.375em;
}
#image-focus-overlay .slideshow-buttons button.previous {
padding: 0.25em 0.375em 0.25em 0.25em;
}
#image-focus-overlay .slideshow-buttons button svg {
pointer-events: none;
fill: currentColor;
}
#image-focus-overlay .slideshow-buttons button::selection {
background-color: transparent;
}
@media all and (hover: hover) {
#image-focus-overlay .slideshow-buttons button:hover {
background-color: var(--SA-image-focus-overlay-slideshow-button-hover-background-color);
color: var(--SA-image-focus-overlay-slideshow-button-hover-color);
}
#image-focus-overlay .slideshow-buttons button:not(:disabled):hover svg {
filter:
drop-shadow(0 0 1px var(--SA-image-focus-overlay-slideshow-button-hover-drop-shadow-color))
drop-shadow(0 0 3px var(--SA-image-focus-overlay-slideshow-button-hover-drop-shadow-color));
}
}
@media all and (hover: none) {
#image-focus-overlay .slideshow-buttons button:not(:disabled) {
background-color: var(--SA-image-focus-overlay-slideshow-button-hover-background-color);
color: var(--SA-image-focus-overlay-slideshow-button-hover-color);
}
#image-focus-overlay .slideshow-buttons button:not(:disabled) svg {
filter:
drop-shadow(0 0 1px var(--SA-image-focus-overlay-slideshow-button-hover-drop-shadow-color))
drop-shadow(0 0 3px var(--SA-image-focus-overlay-slideshow-button-hover-drop-shadow-color));
}
}
#image-focus-overlay .slideshow-buttons button:active {
transform: none;
color: var(--SA-image-focus-overlay-slideshow-button-active-color);
}
#image-focus-overlay .slideshow-buttons button:disabled {
text-shadow: none;
background-color: transparent;
color: var(--SA-image-focus-overlay-slideshow-button-disabled-color);
cursor: default;
opacity: 0.4;
}
#image-focus-overlay .slideshow-button.previous.hidden {
left: -1.75em;
}
#image-focus-overlay .slideshow-button.next.hidden {
left: 1.75em;
}
/*=---------=*/
/*= Tooltip =*/
/*=---------=*/
.image-wrapper.focusable::after {
content: "Click to enlarge";
display: block;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0.5em;
padding: 0.3em 0.75em 0.35em 0.75em;
font-size: 1rem;
font-family: var(--SA-image-focus-sans-serif-font-stack);
background-color: var(--SA-image-focus-image-hover-tooltip-background-color);
color: var(--SA-image-focus-image-hover-tooltip-text-color);
border-radius: 0.25em;
opacity: 0.0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.image-wrapper.focusable.small-image::after {
content: "";
background-color: var(--SA-image-focus-image-hover-tooltip-inverted-background-color);
background-image: url('/static/img/icon/icons.svg?v=1754602014#magnifying-glass-plus-light');
background-size: 56px 56px;
background-origin: content-box;
background-repeat: no-repeat;
background-position: center;
filter: invert(1);
bottom: 0;
height: 100%;
width: 100%;
padding: 0.5em;
box-sizing: border-box;
border-radius: 0;
}
.image-wrapper::after {
width: fit-content;
}
.image-wrapper.focusable:hover::after {
opacity: 1.0;
}
/*******************/
/* FLOATING HEADER */
/*******************/
#floating-header {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: calc(3rem + var(--GW-floating-header-scroll-indicator-thickness));
background-color: var(--GW-body-background-color);
box-sizing: border-box;
box-shadow: 0 2px 6px var(--GW-floating-header-box-shadow-color);
transition:
bottom 0.2s ease-out;
}
#floating-header.hidden {
bottom: calc(-1 * (3rem + var(--GW-floating-header-scroll-indicator-thickness)));
}
#floating-header.hidden .link-chain .link.page-title {
display: none;
}
#floating-header .link-chain {
padding: 3px 6px 6px 6px;
font-size: calc(1rem * 8/9);
text-align: center;
}
#floating-header .link-chain .link {
font-weight: 600;
}
#floating-header .link-chain .link + .link::before {
content: "\200B\2002·\2002"
}
#floating-header .link-chain .link.ellipsis::before {
content: "\200B\2002";
}
#floating-header .link-chain .link.page-title {
font-variant-caps: small-caps;
font-weight: normal;
letter-spacing: -0.25px;
}
#floating-header .link-chain.truncate-page-title .link.page-title,
#floating-header.hidden .link-chain .link.page-title {
display: inline-block;
white-space: nowrap;
max-width: calc(100% - 12px);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
#floating-header .scroll-indicator {
height: var(--GW-floating-header-scroll-indicator-thickness);
margin: 0 -8px;
background-image: linear-gradient(var(--GW-floating-header-scroll-indicator-color),
var(--GW-floating-header-scroll-indicator-color));
background-position: 0 0;
background-repeat: no-repeat;
background-size: 0 0;
}
/*┌─────────────────────────────────────┐*/
/*│ Desktop version (for wide screens). │*/
/*└─────────────────────────────────────┘*/
@media (hover: hover) and (max-width: 1760px) {
#floating-header {
display: none;
}
}
@media (hover: hover) and (min-width: 1761px) {
#floating-header {
width: calc(50vw - (var(--GW-body-max-width) / 2 + 64px));
max-width: var(--GW-sidenotes-max-width);
min-height: unset;
box-shadow:
0 0 0 1px var(--GW-body-background-color),
0 0 3px var(--GW-body-background-color),
0 0 5px var(--GW-body-background-color),
0 0 9px var(--GW-body-background-color),
0 0 17px var(--GW-body-background-color);
border-bottom: 1px solid var(--GW-floating-header-scroll-indicator-color);
pointer-events: none;
left: unset;
right: calc(50% + (var(--GW-body-max-width) / 2) + 64px);
bottom: unset;
top: 0;
}
#floating-header.hidden {
bottom: unset;
top: -2.5em;
}
#floating-header > * {
pointer-events: auto;
}
#floating-header .scroll-indicator {
margin: 0;
}
#floating-header .link-chain {
padding: 7px 10px 8px 10px;
}
#floating-header .link-chain .link {
display: block;
}
#floating-header .link-chain .link.page-title {
margin: 0 0.75em;
}
#floating-header .link-chain .link.page-title + .link {
margin-top: 0.5em;
}
#floating-header .link-chain .link:not(.page-title) {
text-align: left;
padding-left: calc((var(--link-index) - 1) * 1.25em);
}
#floating-header .link-chain .link:not(.page-title) a {
font-size: calc(1em * (1 - (0.05 * (var(--link-index) - 1))));
}
#floating-header .link-chain .link::before {
display: none;
}
/* No floating header on /index.
*/
body.page-index #floating-header {
display: none;
}
/* Back-to-top link on home page.
*/
body.page-index #back-to-top {
left: calc((100% - 1430px - 50px)/2);
right: unset;
}
}
/***************/
/* READER MODE */
/***************/
/*┌───────────────────────────────────────────┐*/
/*│ Masked links key toggle info alert panel. │*/
/*└───────────────────────────────────────────┘*/
#masked-links-key-toggle-info-alert {
position: absolute;
background-color: var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-background-color);
color: var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-color);
text-shadow:
0 0 1px var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color),
0 0 3px var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color),
0 0 5px var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color);
padding: 0.5em 1em;
left: 2px;
bottom: 1.5em;
font-family: var(--GW-sans-serif-font-stack);
font-weight: 700;
pointer-events: none;
}
#masked-links-key-toggle-info-alert.hidden {
visibility: hidden;
opacity: 0;
transition:
visibility 0.15s ease,
opacity 0.15s ease;
}
#masked-links-key-toggle-info-alert .icon {
display: inline-flex;
width: 1.25em;
filter: drop-shadow(0 0 3px var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color));
margin: 0 0.75em 0 0;
position: relative;
top: 0.15em;
}
#masked-links-key-toggle-info-alert .key {
border: 1px solid var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-key-icon-border-color);
padding: 0.05em 0.375em 0.125em 0.375em;
display: inline-block;
border-radius: 4px;
margin: 0 0.1875em 0 0.125em;
background-color: var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-key-icon-background-color);
box-shadow:
1px 1px 3px 0 var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color);
font-variant-caps: small-caps;
}
/******************/
/* MODE SELECTORS */
/******************/
.mode-selector button:disabled {
cursor: default;
}
/**********************************/
/* Mode selectors in page toolbar.
*/
#page-toolbar .dark-mode-selector {
order: 1;
}
#page-toolbar .reader-mode-selector {
order: 2;
}
#page-toolbar .extracts-mode-selector {
order: 3;
}
#page-toolbar #search-widget {
order: 4;
}
#page-toolbar #help-widget {
order: 5;
}
#page-toolbar .mode-selector button .label {
text-underline-position: from-font;
text-decoration: none;
}
#page-toolbar .mode-selector button.selected .label {
text-decoration: underline from-font;
}
#page-toolbar .mode-selector button.active .label {
text-decoration: dotted underline from-font;
}
/* Vertical layout.
*/
#page-toolbar.vertical .mode-selector {
padding: 2px 0;
}
#page-toolbar.vertical .mode-selector button + button {
margin-top: 3px;
}
/* Mobile layout.
*/
#page-toolbar.mobile .mode-selector {
padding: 2px 0;
}
/* Specific mode selectors & buttons.
*/
#page-toolbar.vertical .extracts-mode-selector button.select-mode-on .icon {
padding: 5px;
}
#page-toolbar.vertical .extracts-mode-selector button.select-mode-off .icon {
padding: 2px;
}
#page-toolbar.mobile .extracts-mode-selector button.select-mode-on .icon {
padding: 7px;
}
#page-toolbar.mobile .extracts-mode-selector button.select-mode-off .icon {
padding: 4px;
}
#page-toolbar.mobile .dark-mode-selector button .icon {
padding: 6px;
}
/*************************/
/* Inline mode selectors.
*/
.mode-selector-inline {
display: inline-flex;
position: relative;
padding: 0.25em;
bottom: -0.15em;
margin: -0.2em 0;
}
.mode-selector-inline button .icon {
width: 1.125em;
height: 1em;
box-sizing: border-box;
display: flex;
opacity: 0.4;
}
@media all and (hover: hover) {
.mode-selector-inline button .icon {
transition:
opacity 0.1s ease;
}
.mode-selector-inline button:hover .icon {
opacity: 1.0;
}
}
.mode-selector-inline button .label {
font-size: 0.75em;
margin-left: 0.25em;
position: relative;
}
.mode-selector-inline button + button {
margin-left: 0.625em;
}
.mode-selector-inline button:hover .label::after,
.mode-selector-inline button.selected .label::after,
.mode-selector-inline button.active:not(:hover) .label::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.mode-selector-inline button:hover .label::after,
.mode-selector-inline button.selected .label::after {
border-bottom: 1px solid currentColor;
}
.mode-selector-inline button.active:not(:hover) .label::after {
border-bottom: 1px dotted currentColor;
}
.mode-selector-inline button:not(:disabled):active .label {
transform: translateY(2px);
}
.mode-selector-inline button:not(:disabled):active .label::after {
transform: translateY(-2px);
}
/* Specific mode selectors & buttons.
*/
.mode-selector-inline.dark-mode-selector {
margin-left: -0.2em;
margin-right: -0.1em;
}
.mode-selector-inline.dark-mode-selector button + button {
margin-left: 0.5em;
}
.mode-selector-inline.dark-mode-selector button .icon {
margin-right: -2px;
}
.mode-selector-inline.reader-mode-selector {
margin-left: -0.1em;
}
.mode-selector-inline.reader-mode-selector button .icon {
padding: 0 1px;
margin: 0 1px 0 -1px;
}
.mode-selector-inline.extracts-mode-selector {
margin-left: -0.1em;
margin-right: -0.1em;
}
.mode-selector-inline.extracts-mode-selector button.select-mode-on .icon {
padding: 1px 0 0 0;
}
.mode-selector-inline.toolbar-toggle-widget {
margin-left: -0.15em;
margin-right: -0.15em;
}
.mode-selector-inline.toolbar-toggle-widget button {
transition:
transform var(--GW-page-toolbar-collapse-duration) ease-out;
}
.mode-selector-inline.toolbar-toggle-widget button:active {
transform: scale(0.95);
}
.mode-selector-inline.toolbar-toggle-widget.toolbar-collapsed button {
transform: rotateZ(0.5turn);
}
.mode-selector-inline.toolbar-toggle-widget.toolbar-collapsed button:active {
transform: rotateZ(0.5turn) scale(0.95);
}
.mode-selector-inline.toolbar-toggle-widget button .icon {
width: 1em;
}
/* Pre-replacement elements (styled to prevent reflow).
*/
[class*="-mode-selector-inline"] {
display: inline-block;
}
.dark-mode-selector-inline {
width: 9.65em;
margin-left: -0.2em;
margin-right: -0.1em;
}
.reader-mode-selector-inline {
width: 9.00em;
margin-left: -0.1em;
}
.extracts-mode-selector-inline {
width: 5.60em;
margin-left: -0.1em;
margin-right: -0.1em;
}
.search-mode-selector-inline {
width: 1.10em;
}
.help-mode-selector-inline {
width: 0.85em;
}
.toolbar-mode-selector-inline {
width: 1.50em;
margin-left: -0.15em;
margin-right: -0.15em;
}
@media only screen and (max-width: 649px) {
.dark-mode-selector-inline {
width: 9.625em;
}
.reader-mode-selector-inline {
width: 9.000em;
}
.extracts-mode-selector-inline {
width: 5.590em;
}
.search-mode-selector-inline {
width: 1.100em;
}
.help-mode-selector-inline {
width: 0.800em;
}
.toolbar-mode-selector-inline {
width: 1.500em;
}
}
/* Special layout fix.
NOTE: The specific class name used here (`inline-mode-selector`) is
*intentionally* different from the class (`mode-selector-inline`) that is
used for actual mode selectors. These classes should not match!
*/
.parenthesized-set.inline-mode-selector {
white-space: nowrap;
}
/*****************/
/* LINKS WIDGETS */
/*****************/
/* (e.g. Search, Help)
*/
#page-toolbar .link-widget a {
display: block;
}
#page-toolbar .link-widget a .icon {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
}
#page-toolbar .link-widget a svg {
display: block;
aspect-ratio: 1 / 1;
}
/*****************/
/* SEARCH WIDGET */
/*****************/
#page-toolbar #search-widget a .icon {
padding: 5px;
}
#page-toolbar.mobile #search-widget a .icon {
padding: 7px;
}
/***************/
/* HELP WIDGET */
/***************/
#page-toolbar #help-widget a .icon {
padding: 3px;
}
#page-toolbar.mobile #help-widget a .icon {
padding: 5px;
}
/******************************/
/* GENERAL ACTIVITY INDICATOR */
/******************************/
#general-activity-indicator {
position: fixed;
width: 1em;
bottom: 0.25em;
left: 0.25em;
visibility: hidden;
}
#general-activity-indicator svg {
display: block;
width: 100%;
}
#general-activity-indicator.on {
visibility: visible;
}
#general-activity-indicator.on svg {
animation: fa-spin 0.75s infinite steps(8);
}
@keyframes fa-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media all and (max-width: 649px) {
display: none;
}
/****************/
/* TRANSCLUSION */
/****************/
a.include-loading:empty,
a.include-loading-failed:empty {
margin: 0;
}
.markdownBody a.include-loading:empty,
.markdownBody a.include-loading-failed:empty {
background: none;
}
a.include-loading.include-spinner {
--spinner-image: url('/static/img/icon/icons.svg?v=1754602014#circle-notch-solid');
pointer-events: none;
}
/* Loading spinner.
*/
a.include-loading.include-spinner::after {
--dark-mode-invert-filter: invert(1);
display: inline-block;
animation: fa-spin 2s infinite linear;
position: relative;
opacity: 0.5;
top: 0.25em;
}
a.include-loading.include-spinner:empty::after {
content: "";
background-image: var(--spinner-image);
width: 1.25em;
height: 1.25em;
margin: 0;
}
a.include-loading.include-spinner:not(:empty)::after,
a.include-loading.include-spinner[data-link-icon]:not(:empty)::after {
background-image: var(--spinner-image);
}
a.include-loading.include-spinner:not(:empty)::after {
--spinner-size: 0.9em;
background-size: var(--spinner-size);
content: "";
font-size: var(--spinner-size);
width: var(--spinner-size);
height: var(--spinner-size);
margin: 0 0.1em 0 0.2em;
top: unset;
bottom: 0;
}
a.include-loading.include-spinner[data-link-icon]:not(:empty)::after {
padding: 0;
background-position: 0 0;
}
/*****************/
/* Block context.
*/
.markdownBody a.block-context-highlighted,
.markdownBody a.block-context-highlighted-temp,
.markdownBody a > span.block-context-highlighted {
position: relative;
z-index: 2;
background-color: var(--background-color);
box-shadow:
3px 1px 0 2px var(--background-color),
-3px 1px 0 2px var(--background-color),
3px 1px 0 3px var(--GW-highlighted-link-outline-color),
-3px 1px 0 3px var(--GW-highlighted-link-outline-color),
3px 1px 0 4px var(--background-color),
-3px 1px 0 4px var(--background-color),
3px 1px 0 5px var(--GW-highlighted-link-outline-color),
-3px 1px 0 5px var(--GW-highlighted-link-outline-color);
}
.markdownBody a.block-context-highlighted,
.markdownBody a > span.block-context-highlighted {
margin: 0 8px;
}
.markdownBody :not(a) > span.block-context-highlighted:not(:empty) {
--background-color: var(--GW-block-context-span-highlight-color);
background-color: var(--background-color);
padding: 0 0.25em;
box-shadow: 0 0 0 0.1em var(--background-color);
}
.markdownBody div.block-context-highlighted .block-context-highlight-here::before,
.markdownBody :not(a) > span.block-context-highlighted:empty::before {
content: "";
background-image: url('/static/img/icon/icons.svg?v=1754602014#manicule-right');
background-origin: content-box;
background-clip: content-box;
background-repeat: no-repeat;
display: inline-block;
width: 1.75em;
height: 1.125em;
position: relative;
top: 0.25em;
margin-right: 0.5em;
opacity: 0.85;
}
/****************/
/* PRINT STYLES */
/****************/
@media print {
:root {
--GW-TOC-background-color: transparent;
--GW-abstract-background-color: transparent;
--GW-code-element-background-color: transparent;
--GW-math-block-background-color: transparent;
}
blockquote {
--GW-blockquote-background-color: transparent !important;
}
/* Fix for figure top border spanning page breaks.
*/
figure {
position: relative;
top: 2px;
}
.figure-outer-wrapper {
margin: -2px auto 2px auto;
}
#skip-to-content-link,
#ui-elements-container,
#sidebar,
#page-metadata .page-metadata-fields .backlinks,
#page-metadata .page-metadata-fields .similars,
#page-metadata .page-metadata-fields .link-bibliography,
#navigation,
#noscript-warning-header,
#TOC .toc-collapse-toggle-button,
#footer,
#footer-decoration-container,
.recently-modified-icon-hook,
.reader-mode-note {
display: none;
}
#link-bibliography-section,
.link-bibliography-append {
display: none;
}
.TOC li:has(#toc-link-bibliography-section) {
display: none;
}
.similars-list li:has(.similar-links-search) {
display: none;
}
/* Links.
*/
.markdownBody a:link .indicator-hook,
.markdownBody a:link .link-icon-hook {
display: none;
}
.markdownBody a:link.has-indicator-hook {
padding: 0;
margin: 0;
}
.markdownBody a:link,
.markdownBody a:link * {
text-shadow: none;
}
.markdownBody a:link,
.markdownBody a:link.has-annotation {
background-image: none;
}
.markdownBody a:link,
.markdownBody a:visited {
color: inherit;
}
.markdownBody p a:link {
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-position: from-font;
text-underline-offset: -0.05em;
}
.markdownBody p a:link.link-dropcap {
text-decoration: none;
}
/* Label the page tags, as offline/in-print, they will look quite
mysterious.
*/
#page-metadata .link-tags p::before {
content: "tags: ";
font-style: normal;
}
body {
margin: 0;
}
main {
margin: 1em;
}
h1, h2, h3, h4, h5, h6 {
margin-left: 0;
}
}
/***********/
/* CONSOLE */
/***********/
#console {
position: absolute;
background-color: #fff;
bottom: 0;
left: 0;
right: 0;
border-top: 3px double #000;
font-family: var(--GW-monospaced-font-stack);
max-height: 50vh;
display: flex;
flex-flow: column;
z-index: 1;
opacity: 1;
transition:
opacity 0.1s ease-out,
bottom 0.1s ease-out;
}
#console.hidden {
transition:
opacity 0.1s ease-in,
bottom 0.1s ease-in;
}
#console .console-scroll-view {
border-bottom: 1px solid #000;
min-height: 2em;
overflow-y: scroll;
overscroll-behavior: none;
display: flex;
flex-flow: column;
}
#console .console-content-view {
flex: 1 0 auto;
padding: 2px;
font-size: 0.8rem;
line-height: calc(22/16);
tab-size: 4;
}
#console .console-content-view p {
margin: 0;
white-space: pre-wrap;
word-break: break-all;
}
#console .console-command-line {
display: flex;
height: 1.75em;
}
#console .console-command-line-prompt {
padding: 0 0.5em 0 0.25em;
display: flex;
line-height: 1.75;
font-size: 1rem;
}
#console .console-command-line-prompt::after {
content: ">";
padding: 0 0 0 0.5em;
margin: 0 0 0 0.375em;
border-left: 1px solid #000;
}
#console .console-command-line-entry-field {
flex: 1 0 auto;
}
#console .console-command-line-entry-field input {
appearance: none;
border: none;
background-color: inherit;
height: 100%;
display: block;
width: 100%;
padding: 0 0.5em 0 0;
font-family: var(--GW-monospaced-font-stack);
font-size: 1rem;
}
#console .console-command-line-entry-field input:focus {
outline: none;
}
/************************/
/* POP-FRAME INDICATORS */
/************************/
/* If a link has an automatic or custom link annotation (eg. a paper abstract,
or excerpts), subtly mark it with a dog-ear/tag-like icon, so users don’t
get frustrated hovering over links which have no useful annotation (which
is an unfortunate number).
At some point, if enough links get annotated & annotation is the default,
we might flip this to be a warning for non-annotated links.
We exclude it on the homepage because every linked page has a
description/abstract, and the triangles everywhere add a lot of visual
clutter.
*/
.markdownBody a.has-indicator-hook {
margin-left: 0.1em;
position: relative;
z-index: 1;
/* This is currently broken in Safari. Since it’s not important enough to
figure out a way to scope it to only non-Safari browsers, I’m disabling it
for now. This should be revisited in a year.
—SA 2023-09-24
*/
/*
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
*/
}
.markdownBody a.has-indicator-hook .indicator-hook {
position: relative;
padding-left: 0.3em;
}
.markdownBody a:not(.has-indicator-hook) .indicator-hook {
display: none;
}
.markdownBody a.has-indicator-hook .indicator-hook::before {
content: " ";
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 1px;
height: 100%;
color: inherit;
background-image:
linear-gradient(var(--link-underline-background-color),
var(--link-underline-background-color)),
linear-gradient(var(--link-underline-background-color),
var(--link-underline-background-color)),
linear-gradient(var(--link-underline-gradient-line-color),
var(--link-underline-gradient-line-color));
background-size:
1px 0.6em,
1px 0.1em,
1px 1em;
background-position:
0 0,
0 100%,
0 calc(100% - 0.1em);
background-repeat: no-repeat;
}
/* Dotted underlines for annotated links.
*/
.markdownBody a.has-annotation,
.markdownBody a.has-annotation-partial {
background-image: linear-gradient(to right,
var(--link-underline-gradient-line-color) 50%,
var(--link-underline-background-color) 50%);
background-size: 2px 1px;
}
.markdownBody a.has-annotation.decorate-not {
background-image: none;
}
/* Colored (on hover) links.
*/
a[data-link-icon-color]:hover {
--link-underline-gradient-line-color: var(--link-icon-color-hover);
}
/**************/
/* LINK ICONS */
/**************/
/*******************************************************************************/
/* The philosophy of link icons is that the hyperlink text & surrounding
context often leaves much out, which would be impossible to express inline
conveniently (such as filetypes like PDF: a link being PDF is no longer a
big deal for desktop readers, whose browser will open them quickly,
natively, and render accurately, but due to the unfortunate state of mobile
PDF viewing, mobile readers still care and may prefer not to open a PDF).
Link icons provide some additional information in a compact iconic form
which doesn't interrupt the text or require manual annotation, and are
useful for denoting the logical source, the topic, the file format, or
anything else one might be able to infer using regexes on a URL.
To visualize the current set of link icons, see /lorem#link-icons.
Link icons for domains can be auto-generated by extracting favicons from the
domain (eg. https://www.pmwiki.org/wiki/Cookbook/ExternalLinksFavicons );
this would be useful for many sites, particularly user-contributed ones, but
I don't use this approach on Gwern.net for several reasons:
1. most favicons look bad on their own (often they're too low-resolution to
use inline) and aren't even recognizable by a reader anyway;
2. most favicons need tweaking to fit into Gwern.net to avoid shattering the
monochrome theme, and to get proper margins/spacing/opacity in both light
& dark mode;
3. domains and icons are long-tailed: most domains are linked only 1 or 2
times, so even if they are high quality and usable as-is, readers would
not recognize or benefit from them, and if they did, the benefit would be
astronomically tiny (because they'd see it once or twice, max).
Because Gwern.net is written just by myself, it is not hard to add new icons
as the need arises and a domain or filetype becomes common enough that an
icon might be useful, and the icons need to be manually-edited anyway.
*/
/* Note: some file extension link types have are selected additionally by
origin on Gwern.net, because they frequently appear at the ends of ordinary
web page URLs.
*/
/*=================*/
/*= COMMON STYLES =*/
/*=================*/
.markdownBody a.has-icon {
margin-right: 0.1em;
}
.markdownBody a.has-icon.icon-disable .link-icon-hook {
display: none;
}
/*******************/
/* Graphical icons.
*/
a[data-link-icon-type*='svg'] {
--link-icon-size-default: 0.55em;
--link-icon-offset-x-default: 0.20em;
--link-icon-offset-y-default: 0.15em;
--link-icon-opacity-default: 0.55;
}
a[data-link-icon-type*='svg'] .link-icon-hook::after {
--dark-mode-invert-filter: invert(1);
content: "";
position: relative;
bottom: var(--link-icon-offset-y, var(--link-icon-offset-y-default));
padding: 0 var(--link-icon-size, var(--link-icon-size-default)) 0 0;
margin: 0 0 0 var(--link-icon-offset-x, var(--link-icon-offset-x-default));
background-image: var(--link-icon-url);
background-size: var(--link-icon-size, var(--link-icon-size-default));
background-position-x: center;
background-position-y: 1ex;
background-repeat: no-repeat;
opacity: var(--link-icon-opacity, var(--link-icon-opacity-default));
}
a[data-link-icon-type*='svg']:hover .link-icon-hook::after {
opacity: calc(var(--link-icon-opacity, var(--link-icon-opacity-default)) * 0.55);
}
/* Quad-letter (rendered) SVG icons.
*/
a[data-link-icon-type*='svg'][data-link-icon-type*='quad'] {
--link-icon-size-default: 0.75em;
--link-icon-offset-x-default: 0.15em;
--link-icon-offset-y-default: 0.30em;
--link-icon-opacity-default: 0.80;
}
a[data-link-icon-type*='svg'][data-link-icon-type*='quad'] .link-icon-hook::after {
background-position-y: 0.75ex;
}
/* Quad-letter (rendered) SVG icons in a sans-serif font.
*/
a[data-link-icon-type*='svg'][data-link-icon-type*='quad'][data-link-icon-type*='sans'] {
--link-icon-size-default: 0.80em;
}
/* Quad-letter (rendered) SVG icons in a monospaced font.
*/
a[data-link-icon-type*='svg'][data-link-icon-type*='quad'][data-link-icon-type*='mono'] {
--link-icon-size-default: 0.85em;
}
/* Colored graphical link icons.
*/
a[data-link-icon-type*='svg'][data-link-icon-color]:hover .link-icon-hook::after {
--dark-mode-invert-filter: none;
background-image: var(--link-icon-url-hover, var(--link-icon-url));
opacity: 1.0;
}
/* When link colors are reversed relative to the rest of the page (e.g., in
some admonition types), a graphical link icon must also be inverted.
*/
.markdownBody .colors-invert a[data-link-icon-type*='svg'] .link-icon-hook::after {
filter: invert(1);
}
/*****************/
/* Textual icons.
*/
a[data-link-icon-type*='text'] {
--link-icon-size-default: 0.75em;
--link-icon-offset-x-default: 0.12em;
--link-icon-offset-y-default: 0.25em;
--link-icon-opacity-default: 0.83;
--link-icon-font-default: Noto Emoji, Quivira, var(--GW-serif-font-stack);
--link-icon-font-weight-default: 600;
--link-icon-font-style-default: normal;
--link-icon-text-decoration-default: none;
}
a[data-link-icon-type*='text'] .link-icon-hook::after {
content: var(--link-icon);
font-size: var(--link-icon-size, var(--link-icon-size-default));
font-weight: var(--link-icon-font-weight, var(--link-icon-font-weight-default));
font-style: var(--link-icon-font-style, var(--link-icon-font-style-default));
font-family: var(--link-icon-font, var(--link-icon-font-default));
text-decoration: var(--link-icon-text-decoration, var(--link-icon-text-decoration-default));
margin: 0 0 0 var(--link-icon-offset-x, var(--link-icon-offset-x-default));
vertical-align: baseline;
position: relative;
bottom: var(--link-icon-offset-y, var(--link-icon-offset-y-default));
opacity: var(--link-icon-opacity, var(--link-icon-opacity-default));
padding: 0;
background-image: none;
background-size: unset;
line-height: 1;
overflow-wrap: normal;
}
a[data-link-icon-type*='sans'] {
--link-icon-font-default: Noto Emoji, Quivira, var(--GW-sans-serif-font-stack);
}
a[data-link-icon-type*='mono'] {
--link-icon-opacity-default: 0.7;
--link-icon-font-default: Noto Emoji, Quivira, var(--GW-monospaced-font-stack);
}
a[data-link-icon-type*='bold'] {
--link-icon-font-weight-default: 700;
}
a[data-link-icon-type*='italic'] {
--link-icon-size-default: 0.80em;
--link-icon-offset-x-default: 0.10em;
--link-icon-font-style-default: italic;
}
a[data-link-icon-type*='overline'] {
--link-icon-offset-y-default: 0.20em;
--link-icon-text-decoration-default: overline;
}
/* Triple-letter ‘tri’ initials: too few for quad, but too big for regular
font size/offset. Common with TLA orgs.
*/
a[data-link-icon-type*='tri'] {
--link-icon-size-default: 0.65em;
--link-icon-offset-x-default: 0.20em;
--link-icon-offset-y-default: 0.40em;
--link-icon-opacity-default: 0.90;
}
/* Tri-letter icons in a sans face.
*/
a[data-link-icon-type*='tri'][data-link-icon-type*='mono'] {
/* Nothing, for now. */
}
/* Tri-letter icons in a monospaced face.
*/
a[data-link-icon-type*='tri'][data-link-icon-type*='mono'] {
--link-icon-opacity-default: 0.7;
}
/* Quad-letter ‘quad’ square icons.
NOTE: Currently unused, due to SVG rendering of quad icons.
—SA 2025-02-25
*/
a[data-link-icon-type*='text'][data-link-icon-type*='quad'] .link-icon-hook::after {
text-indent: 0;
overflow-wrap: break-word;
display: inline-block;
text-align: center;
left: 0;
bottom: 0.3em;
font-size: 0.52em;
font-weight: bold;
letter-spacing: 0.05em;
line-height: 0.85;
width: 1.7em;
opacity: 0.83;
}
/* Quad-letter square icons in a sans face.
NOTE: Currently unused, due to SVG rendering of quad icons.
—SA 2025-02-25
*/
a[data-link-icon-type*='text'][data-link-icon-type*='quad'][data-link-icon-type*='sans'] .link-icon-hook::after {
/* Nothing, for now. */
}
/* Quad-letter square icons in a monospaced face.
NOTE: Currently unused, due to SVG rendering of quad icons.
—SA 2025-02-25
*/
a[data-link-icon-type*='text'][data-link-icon-type*='quad'][data-link-icon-type*='mono'] .link-icon-hook::after {
line-height: 0.90;
}
/******************************/
/* Colored textual link icons.
*/
a[data-link-icon-type*='text'][data-link-icon-color]:hover .link-icon-hook::after {
color: var(--link-icon-color-hover, currentColor);
opacity: 1.0;
}
/*===========================================*/
/*= ICONS FOR CERTAIN LINK TYPES: BY TARGET =*/
/*===========================================*/
/*=----------------------------=*/
/*= Within-page (anchor) links =*/
/*=----------------------------=*/
a[data-link-icon='¶'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.25em;
--link-icon-offset-y: 0.35em;
--link-icon-opacity: 0.7;
--link-icon-font-weight: 400;
}
a[data-link-icon='↑'],
a[data-link-icon='↓'] {
--link-icon-size: 1em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.20em;
}
/*=------------------------------=*/
/*= Internal (within-site) links =*/
/*=------------------------------=*/
a[data-link-icon='gwern'] {
--link-icon-size: 0.60em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.6;
}
/*=------------------------------------------=*/
/*= Cross-directory links on tag index pages =*/
/*=------------------------------------------=*/
a[data-link-icon='arrow-up-left'],
a[data-link-icon='arrow-down-right'],
a[data-link-icon='arrow-right'] {
--link-icon-size: 0.65em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.15em;
--link-icon-opacity: 0.8;
}
/*=-------------------------------=*/
/*= Textual per-domain link icons =*/
/*=-------------------------------=*/
/******************/
/* Logotype icons.
*/
a[data-link-icon='𝛘'] { /* Arxiv */
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.60em;
--link-icon-opacity: 0.7;
}
a[data-link-icon='❐'] { /* Booru */
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.15em;
}
a[data-link-icon='⧖'] { /* Longecity */
--link-icon-size: 0.90em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.10em;
--link-icon-opacity: 0.70;
}
a[data-link-icon='♡'] { /* Fandom/Wikia */
--link-icon-offset-x: 0.05em;
--link-icon-offset-x: 0.10em;
--link-icon-opacity: 1.0;
}
a[data-link-icon='♡'] .link-icon-hook::after {
text-shadow: 0 0 0 currentcolor;
}
a[data-link-icon='MS'] {
--link-icon-size: 0.65em;
--link-icon-offset-y: 0.35em;
}
a[data-link-icon='n'] { /* Nature */
--link-icon-size: 0.90em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.30em;
--link-icon-opacity: 0.85;
}
a[data-link-icon='s'] {
--link-icon-size: 1.00em;
}
a[data-link-icon='Ss'] {
--link-icon-offset-x: 0.15em;
}
a[data-link-icon='Vox'] {
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.10em;
}
a[data-link-icon='ψ'] {
--link-icon-offset-y: 0.40em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='ℵ'] { /* Unsong ALEF */
--link-icon-size: 0.85em;
}
a[data-link-icon='▅▇▃'] {
--link-icon-size: 0.50em;
--link-icon-offset-x: 0.25em;
--link-icon-opacity: 0.7;
}
a[data-link-icon='▅▇▃'] .link-icon-hook::after {
margin-right: 0.15em;
}
a[data-link-icon='▲'] { /* Melting Asphalt (Kevin Simler) */
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='▽'] { /* The Verge */
--link-icon-size: 0.90em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.15em;
}
a[data-link-icon='∇'] { /* The Gradient.pub */
--link-icon-size: 0.85em;
--link-icon-opacity: 0.7;
}
a[data-link-icon='✉'] { /* ENVELOPE / letter / \9993 */
--link-icon-size: 1.10em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.05em;
--link-icon-opacity: 0.75;
--link-icon-font-weight: 700;
}
a[data-link-icon='M𝐑'] {
--link-icon-opacity: 0.75;
}
a[data-link-icon='𝐁'] {
--link-icon-opacity: 0.77;
}
a[data-link-icon='𝐌'] {
--link-icon-opacity: 0.7;
}
a[data-link-icon='𝛌'] {
--link-icon-size: 1.00em;
--link-icon-opacity: 0.6;
}
a[data-link-icon='𝛘'] {
--link-icon-offset-y: 0.40em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='෴'] { /* Moustache / antilop.cc */
--link-icon-offset-y: 0.50em;
}
a[data-link-icon='🤖'] { /* ROBOT FACE U+1F916 beepb00p.xyz */
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.30em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='GPP'] { /* Game Programming Patterns */
--link-icon-size: 0.60em;
--link-icon-offset-y: 0.60em;
}
a[data-link-icon='⛨'] { /* Cambridge */
--link-icon-size: 1.00em;
--link-icon-offset-x: 0.10em; /* NOTE: this may be too much for Chrome, but the FF needs it */
--link-icon-offset-y: 0.05em;
--link-icon-font-weight: 400;
}
a[data-link-icon='𝒩𝒴'] { /* nymag.com New York Magazine */
--link-icon-opacity: 0.7;
}
a[data-link-icon='𝕳'] { /* NZ Herald */
--link-icon-offset-y: 0.40em;
--link-icon-opacity: 0.7;
}
a[data-link-icon='𝔐'] { /* Daily Mail */
--link-icon-size: 0.75em;
}
a[data-link-icon='𝛌'] { /* Haskell */
--link-icon-size: 0.85em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
}
a[data-link-icon='𝓝'] { /* Nintil */
--link-icon-size: 0.85em;
--link-icon-opacity: 0.9;
}
a[data-link-icon='𝓥'] { /* Variety */
--link-icon-size: 0.85em;
--link-icon-opacity: 0.9;
}
a[data-link-icon='ρ'] { /* Project Rho */
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.50em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='ℰ'] { /* Esquire */
--link-icon-size: 0.8em;
--link-icon-opacity: 0.9;
}
a[data-link-icon='𝓡 𝐒'] { /* Rolling Stone */
--link-icon-size: 0.65em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='≈'] { /* similar-links (ALMOST EQUAL TO) */
--link-icon-size: 1em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='♔'] { /* WBW / Wait But Why */
--link-icon-size: 1em;
--link-icon-opacity: 0.75;
--link-icon-offset-y: 0.20em;
}
a[data-link-icon='☀'] { /* Low Tech Magazine */
--link-icon-size: 0.90em;
--link-icon-offset-y: 0.15em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='🖋'] { /* NovelAI */
--link-icon-size: 0.65em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.35em;
}
a[data-link-icon='𝕆'] { /* Outside Online */
--link-icon-size: 0.85em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.15em;
}
a[data-link-icon='☯'] { /* Touhou Wiki */
--link-icon-size: 0.85em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
}
a[data-link-icon='jt'] { /* Japan Times */
--link-icon-offset-x: 0.20em;
}
/***********************************/
/* Quad-letter ‘quad’ square icons.
*/
a[data-link-icon='VICE'] {
--link-icon-offset-x: 0.10em;
}
/*=---------------------------------=*/
/*= Graphical per-domain link icons =*/
/*=---------------------------------=*/
a[data-link-icon='alcor'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='alphabet'] {
--link-icon-size: 0.60em;
--link-icon-opacity: 0.6;
}
a[data-link-icon='amazon'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='anthropic'] {
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.10em;
}
a[data-link-icon='apple'] {
--link-icon-size: 0.60em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.5;
}
a[data-link-icon='arrows-pointing-inwards-to-dot'] { /* bl backlinks ‘implosion’ */
--link-icon-size: 0.90em;
--link-icon-offset-y: 0.22em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.70;
}
a[data-link-icon='atlas-obscura'] {
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.85;
}
a[data-link-icon='audio-waveform-lines'] { /* Radiolab */
--link-icon-size: 0.60em;
--link-icon-offset-y: 0.30em;
}
a[data-link-icon='bibliography'] { /* lb link-bibliography ‘table of contents’ */
--link-icon-size: 0.69em;
--link-icon-offset-y: 0.12em;
--link-icon-opacity: 0.60;
}
a[data-link-icon='bitcoin'] {
--link-icon-size: 0.55em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='cbs'] {
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.5;
}
a[data-link-icon='chi-dna'] {
--link-icon-size: 0.58em;
--link-icon-offset-x: 0.15em;
--link-icon-opacity: 0.85;
}
a[data-link-icon='chicago-tribune'] { /* fraktur C */
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='cochrane-collaboration'] {
--link-icon-size: 0.75em;
--link-icon-opacity: 0.7;
}
a[data-link-icon='connected-papers'] {
--link-icon-size: 0.60em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.30em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='creative-commons'] {
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.8;
}
a[data-link-icon='deepmind'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.7;
}
a[data-link-icon='deepseek'] {
--link-icon-size: 0.8em;
}
a[data-link-icon='distillpub'] {
--link-icon-size: 0.45em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.5;
}
a[data-link-icon='dropbox'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.55;
}
a[data-link-icon='econlib'] { /* torch */
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.30em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='eleutherai'] {
--link-icon-size: 0.85em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.15em;
--link-icon-opacity: 0.85;
}
a[data-link-icon='emacs'] {
--link-icon-opacity: 0.65;
}
a[data-link-icon='erowid'] {
--link-icon-size: 0.95em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.9;
}
a[data-link-icon='facebook'] {
--link-icon-size: 0.50em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.5;
}
a[data-link-icon='github'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='google-scholar'] {
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.10em;
--link-icon-opacity: 0.60;
}
a[data-link-icon='hacker-news'] { /* HN / YC / Y Combinator */
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.60;
}
a[data-link-icon='hoover-institution'] {
--link-icon-size: 0.50em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.45em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='internet-archive'] {
--link-icon-size: 0.55em;
--link-icon-opacity: 0.6;
}
a[data-link-icon='laion'] {
--link-icon-size: 0.70em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='maggie-appleton'] {
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.5;
}
a[data-link-icon='magnifying-glass'] { /* eye glass for Retraction Watch; cf. .icon-magnifying-glass */
--link-icon-size: 0.75em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='mega'] {
--link-icon-size: 0.75em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.50;
}
a[data-link-icon='metaculus'] {
--link-icon-size: 0.55em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='midjourney'] {
--link-icon-size: 0.90em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='miri'] {
--link-icon-size: 1.05em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='nasa'] {
--link-icon-size: 0.75em;
--link-icon-offset-y: 0.30em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='nautilus'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='new-york-times'] {
--link-icon-size: 0.65em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.15em;
--link-icon-opacity: 0.6;
}
a[data-link-icon='nlm-ncbi'] {
--link-icon-size: 0.60em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.9;
}
a[data-link-icon='openai'] {
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.15em;
--link-icon-opacity: 0.7;
}
a[data-link-icon='open-philanthropy'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.95;
}
a[data-link-icon='patreon'] {
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.15em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='plos'] {
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.10em;
--link-icon-opacity: 0.80;
}
a[data-link-icon='quanta'] {
--link-icon-size: 0.90em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.9;
}
a[data-link-icon='raven'] { /* LibGen/Sci-Hub */
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.10em;
}
a[data-link-icon='reddit'] {
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.5;
}
a[data-link-icon='scholarpedia'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
}
a[data-link-icon='springerlink'] { /* WHITE CHESS KNIGHT '♘'-style SVG icon */
--link-icon-size: 0.85em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.4em;
--link-icon-opacity: 0.70;
}
a[data-link-icon='stack-exchange'] {
--link-icon-size: 0.60em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.55;
}
a[data-link-icon='stat-news'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.30em;
--link-icon-opacity: 1.0;
}
a[data-link-icon='substack'] {
--link-icon-size: 0.55em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.55;
}
a[data-link-icon='tensorflow'] {
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.6;
}
a[data-link-icon='tex'] { /* CTAN etc; TeX logotype (actually uses Source Serif) */
--link-icon-size: 1.10em;
--link-icon-offset-x: 0.05em;
--link-icon-opacity: 0.85;
}
a[data-link-icon='tiktok'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.15em;
}
a[data-link-icon='the-guardian'] {
--link-icon-size: 0.80em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.55;
}
a[data-link-icon='the-new-yorker'] {
--link-icon-size: 0.65em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='the-pirate-bay'] {
--link-icon-size: 0.90em;
--link-icon-offset-x: 0.20em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='the-telegraph'] {
--link-icon-size: 0.60em;
--link-icon-offset-x: 0.10em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.75;
}
a[data-link-icon='tumblr'] {
--link-icon-size: 0.47em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.45;
}
a[data-link-icon='twitter'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.5;
}
a[data-link-icon='upton-tea'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.05em;
--link-icon-opacity: 0.55;
}
a[data-link-icon='video'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.40em;
--link-icon-opacity: 0.55;
}
a[data-link-icon='wandb'] {
--link-icon-size: 0.70em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.65;
}
a[data-link-icon='washington-post'] {
--link-icon-size: 0.85em;
--link-icon-offset-x: 0.20em;
--link-icon-offset-y: 0.25em;
--link-icon-opacity: 0.85;
}
a[data-link-icon='wired'] {
--link-icon-size: 0.75em;
--link-icon-offset-x: 0.15em;
--link-icon-offset-y: 0.20em;
--link-icon-opacity: 0.55;
}
a[data-link-icon='youtube'] {
--link-icon-size: 0.88em;
--link-icon-offset-x: 0.15em;
--link-icon-opacity: 0.5;
}
a[data-link-icon='yud'] {
--link-icon-offset-y: 0.25em;
}
a[data-link-icon='deepseek'] {
--link-icon-size: 1.05em;
--link-icon-offset-x: 0.10em;
}
a[data-link-icon='✤'] { /* Ganbreeder/Artbreeder */
--link-icon-opacity: 0.60;
}
a[data-link-icon='☤'] { /* Karolinska */
--link-icon-opacity: 0.50;
}
a[data-link-icon='sourceforge'] {
--link-icon-size: 0.8em;
--link-icon-offset-x: 0.10em;
}
a[data-link-icon='worldcat'] {
--link-icon-size: 0.70em;
--link-icon-offset-x: 0.10em;
}
/* Similar to the 'W' Wikipedia icon, we shrink the PDF icon on desktop aggressively because there are *so* many. However, they are then illegible on a physical smartphone screen held normally (even if they look OK in a desktop browser's simulation). So we need to have a media-query conditional here. */
@media not all and (max-width: 649px) {
a[data-link-icon='pdf'] { /* Adobe Acrobat */
--link-icon-size: 0.45em;
--link-icon-offset-x: 0.10em;
--link-icon-opacity: 0.50;
}
}
@media all and (max-width: 649px) {
a[data-link-icon='pdf'] {
--link-icon-size-default: 0.6em;
--link-icon-offset-y-default: 0.25em;
}
}
a[data-link-icon='caduceus'] { /* medical snake Asclepius icon for hospitals etc */
--link-icon-size: 0.95em;
--link-icon-offset-x: -0.15em;
--link-icon-offset-y: 0.45em;
}
/*=------------------=*/
/*= Wikipedia links. =*/
/*=------------------=*/
a[data-link-icon='wikipedia'] {
--link-icon-size: 0.60em;
--link-icon-offset-x: 0.12em;
--link-icon-offset-y: -0.05em;
--link-icon-opacity: 0.65;
}