/* Gargoyle.css */ /* version 0.9.4 */ /* Yu Shiyang */ /* Usage: - Include in HTML document with - Add the class "g-default-media" to the element Customising: - Override the CSS variables in :root, paying attention to any compatibility variables and media query breakpoints that need to be updated as well - To override the media query breakpoints, - Copy out the media query block into a new stylesheet - Remove "body.g-default-media" from the start of each selector - Update the px values as appropriate - Remove the class "g-default-media" from the element */ /* Contents - Section elements - Text elements - Numbered sections - List elements - Figure elements - Table elements - Inline elements - Inline lists - Inline classes - Action buttons - Unhide content after CSS is loaded */ /* Legacy support Only browsers with >0.1% market share are noted Optional features (unsupported browsers): text-rendering (IE –11) overflow-wrap (IE –11) fallback on deprecated alias word-wrap hyphens -ms- for IE –11, -webkit- for Safari –16.6 & iOS –16.7 hyphens: auto (IE –11) So no need for -ms- if the only values used are auto and none tab-size (IE –11) Must be integer for iOS –12.5 width: max-content (IE –11) align-items: baseline (for Flexbox) (IE –11, possibly Edge –18) gap (for Flexbox) (IE –11) object-fit: cover or scale-down (IE –11) display: contents (IE –11) text-wrap-mode (Chrome –126, Safari –17.1, Firefox –118, IE –11, iOS Safari –16.7, Opera mobile –80) text-wrap-style: pretty (Chrome –126, Safari –18.6, Firefox –146–, IE –11, iOS Safari –18.6, Opera mobile –80) white-space-collapse (Chrome –112, Safari –17.1, Firefox –118, IE –11, iOS Safari –16.7) text-decoration-thickness (IE –11, iOS Safari –11.2) text-underline-position -webkit- for iOS Safari –11.2 Features with fallback mechanisms (unsupported browsers): initial value (IE –11) calc() (IE –11) ! Various known issues for IE11: https://caniuse.com/#feat=calc :has() (Firefox –118, IE –11, iOS Safari –11.2, UC Browser –15.5, QQ Browser –14.9) :not() (IE –11, QQ –14.9) text-align: start or end (IE –11) text-decoration-line (IE –11) -webkit- for iOS Safari 11.2 text-decoration-style (IE –11, Safari –26.1–, iOS Safari –26.1–) ::first-letter (Firefox –128, see ffbug workaround) user-select -webkit- for Safari –26.6–, -ms- for IE –11 content-visibility (IE –11, Safari –17.6, Firefox –118 by default, iOS Safari –17.7, QQ –14.9) Grid Layout for thumbnail list: grid-template-columns use -ms-grid-columns for IE –11 grid-template-areas (IE –11) grid-auto-flow: row (IE –11) gap (for Grid Layout) (IE –11) use grid-gap for iOS –11.2 align-items: baseline (for Grid Layout) (IE –11, possibly Edge –18) grid-column (IE –11) Dependent features for action buttons and link annotations, which will fallback to plain hyperlinks (unsupported browsers): mask-image (IE –11), -webkit- for Chrome –119, iOS –15.3, Opera –117 mask-image SVG (IE –11) mask-image multiple (IE –11) mask-size (IE –11), -webkit- for Chrome –119, iOS –15.3 mask-repeat (IE –11), -webkit- for Chrome –119, iOS –15.3 mask-position (IE –11), -webkit- for Chrome –119, iOS –15.3 Features with no implemented fallback mechanisms (and browsers with no support): @supports (IE –11) @supports: selector() (IE –11, iOS Safari –11.2, Opera Mobile –80) unset (IE –11) */ :root { /* Layout grid: 1.5rem rows, calc(100vw / 12) columns When changing or overriding the following variables, take note: 1) Check for any pre-calculated compatibility variables (ending with -compat) that depend on it and update them; the formula for the pre-calculated value should be given in the accompanying comments 2) Check for any media queries that depend on it and update them; the display size breakpoints given in px units have to be pre-calculated, and their formula should be given in the accompanying comments 3) If the media query breakpoints need to be overridden, */ --g-font-size: 16px; /* NOTE: affects all media queries */ --g-line-height: 1.5rem; --g-skip: var(--g-line-height); --g-span: 1rem; --g-main-color: darkslategrey; --g-background-color: snow; --g-quiet-color: slategrey; --g-highlight-color: lavenderblush; --g-link-color: maroon; --g-visited-color: #600000; --g-code-color: seashell; --g-samp-color: ghostwhite; --g-frame-color: darkslategrey; --g-frame-link-color: maroon; --g-frame-visited-color: #600000; --g-quote-border-color: var(--g-samp-color); --g-aside-bound-color: ghostwhite; --g-table-border-color: lightgrey; --g-kbd-frame-color: lightgrey; --g-kbd-background-color-compat: #e3e3e3; /* lightgrey is #d3d3d3 */ --g-spoiler-color: var(--g-main-color); --g-spoiler-highlight-color: #4f5f5f; /* darkslategrey is #2f4f4f */ --g-inline-list-separator-color: var(--g-quiet-color); --g-large-v: 2.25rem; /* compat */ --g-large-v: calc(1.5 * var(--g-skip)); --g-medium-v: var(--g-skip); --g-small-v: 0.75rem; /* compat */ --g-small-v: calc(0.5 * var(--g-skip)); --g-tiny-v: 0.375rem; /* compat */ --g-tiny-v: calc(0.25 * var(--g-skip)); --g-large-h: 2rem; /* compat */ --g-large-h: calc(2 * var(--g-span)); --g-medium-h: var(--g-span); --g-small-h: 0.5rem; /* compat */ --g-small-h: calc(0.5 * var(--g-span)); --g-small-font-size: 0.833333rem; /* 5/6 of base font size */ --g-small-line-height: 1.125rem; --g-demi-relative-font-size: 0.9375em; /* 15/16 */ --g-inverse-demi-relative-font-size: 1.066667em; /* 16/15 of demi */ --g-demi-font-weight: 500; --g-demi-bold-font-weight: 700; --g-monospace-font-size: var(--g-font-size); --g-monospace-line-height: var(--g-line-height); --g-h1-font-size: 2rem; --g-h1-line-height: var(--g-large-v); --g-h1-demi-relative-font-size: var(--g-demi-relative-font-size); --g-h1-inverse-demi-relative-font-size: var(--g-inverse-demi-relative-font-size); --g-h1-demi-font-weight: var(--g-demi-bold-font-weight); --g-heading-demi-relative-font-size: var(--g-demi-relative-font-size); --g-heading-inverse-demi-relative-font-size: var(--g-inverse-demi-relative-font-size); --g-heading-demi-font-weight: var(--g-demi-bold-font-weight); --g-h2-font-size: 1.666667rem; /* 5/6 of h1 == 5/3 */ --g-h2-line-height: var(--g-line-height); --g-h3-font-size: 1.333333rem; /* 4/5 of h2 == 4/3 */ --g-h3-line-height: var(--g-line-height); --g-h4-font-size: 1.111111rem; /* 5/6 of h3 == 10/9 */ --g-h4-line-height: var(--g-line-height); --g-h5-font-size: var(--g-h4-font-size); --g-h5-line-height: var(--g-line-height); --g-h6-font-size: var(--g-h4-font-size); --g-h6-line-height: var(--g-line-height); --g-link-annotation-size: 0.666667rem; --g-link-annotation-offset: 0rem; --g-sublink-border-width: 0.075rem; --g-sublink-double-border-width: 0.225rem; --g-sublink-baseline-offset: -0.15rem; --g-underline-thickness: from-font; /* divide by 4 as a hieuristic, no need for compat and allow it to be ignored if not supported */ --g-h1-abbr-capital-underline-offset: calc((var(--g-h1-inverse-demi-relative-font-size) - 1em) / 4); --g-heading-abbr-capital-underline-offset: calc((var(--g-heading-inverse-demi-relative-font-size) - 1em) / 4); --g-abbr-capital-underline-offset: calc((var(--g-inverse-demi-relative-font-size) - 1em) / 4); --g-aside-hover-opacity: 0.96; --g-aside-blur-radius: var(--g-border-radius); --g-aside-spread-radius: var(--g-aside-blur-radius); --g-figure-blur-radius: var(--g-border-radius); --g-figure-spread-radius: 12px; /* compat */ --g-figure-spread-radius: calc(var(--g-figure-blur-radius) * 2); --g-inline-height: 1.25rem; --g-inline-padding-h: 0.2em; --g-inline-border-radius: 0.2em; --g-inline-border-radius-line-height-compat: 1.3rem; /* compat; (--g-line-height) - var(--g-inline-border-radius) */ --g-inline-border-radius-monospace-line-height-compat: 1.3rem; /* compat; (--g-monospace-line-height) - var(--g-inline-border-radius) */ --g-border-radius: 6px; --g-frame-width: 2px; --g-frame-border-radius: 2px; --g-item-margin-v: var(--g-small-v); --g-item-margin-h: var(--g-medium-h); --g-h1-margin-top: var(--g-large-v); --g-h1-margin-bottom: var(--g-medium-v); --g-heading-margin-top: var(--g-large-v); --g-heading-margin-bottom: var(--g-small-v); --g-h5-margin-left: var(--g-medium-h); --g-h6-margin-left: 2rem; /* compat */ --g-h6-margin-left: var(--g-large-h); --g-text-margin-top: var(--g-small-v); --g-text-margin-bottom: var(--g-medium-v); --g-text-padding-h: 0.2em; --g-quote-margin-v: var(--g-medium-v); --g-quote-margin-h: var(--g-large-h); --g-quote-border-width: 6px; --g-quote-cite-margin-v: var(--g-small-v); --g-quote-cite-negative-margin-v-compat: -0.75rem; --g-list-margin-top: var(--g-medium-v); --g-list-margin-bottom: var(--g-large-v); --g-list-item-margin-v: var(--g-small-v); --g-list-item-margin-h: var(--g-large-h); --g-image-max-height: 80vh; --g-image-margin-top: var(--g-small-v); --g-image-margin-bottom: var(--g-large-v); --g-image-highlight-padding-v: var(--g-tiny-v); --g-image-highlight-negative-margin-v-compat: -0.375rem; /* compat; -1 * var(--g-thumbnail-list-padding-v) */ --g-image-highlight-padding-h: var(--g-small-h); --g-image-highlight-negative-margin-h-compat: -0.5rem; /* compat; -1 * var(--g-thumbnail-list-padding-h) */ --g-page-bottom: 3rem; /* compat */ --g-page-bottom: calc(2 * var(--g-skip)); --g-main-margin-v: var(--g-medium-v); --g-main-margin-h: var(--g-medium-h); /* NOTE: affects media queries for