More actions
(Blanked the page) Tag: Blanking |
No edit summary |
||
Line 1: | Line 1: | ||
/* <pre><nowiki> */ | |||
/* Tolkien Gateway theme */ | |||
/* Import fonts from Google Fonts: EB Garamond, Lora */ | |||
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lora:ital,wght@0,400..700;1,400..700&display=swap'); | |||
/* | |||
* Use customized system fonts as fallback for font stack | |||
* Needed to avoid layout shift | |||
*/ | |||
@font-face { | |||
font-family: 'EB Garamond-fallback'; | |||
size-adjust: 94.29999999999998%; | |||
ascent-override: 101%; | |||
descent-override: 36.40000000000171%; | |||
src: local('Times New Roman'); | |||
} | |||
@font-face { | |||
font-family: 'Lora-fallback'; | |||
size-adjust: 105.20000000000005%; | |||
ascent-override: 92%; | |||
descent-override: 32.60000000000166%; | |||
src: local('Georgia'); | |||
} | |||
/* CSS variables */ | |||
:root { | |||
/* Border */ | |||
/* Border color */ | |||
--tg-border-color-base: rgba(0, 0, 0, 0.08); | |||
--tg-border-color-subtle: rgba(0, 0, 0, 0.05); | |||
--tg-border-color-interactive: rgba(0, 0, 0, 0.11); | |||
/* Border radius */ | |||
--tg-border-radius-sharp: 0; | |||
--tg-border-radius-small: 4px; | |||
--tg-border-radius-medium: 8px; | |||
--tg-border-radius-large: 12px; | |||
--tg-border-radius-pill: 9999px; | |||
--tg-border-radius-circle: 50%; | |||
/* Shorthand */ | |||
--tg-border-base: 1px solid var(--tg-border-color-base); | |||
/* Color */ | |||
/* Text color */ | |||
--tg-color-emphasized: #1a1f15; | |||
--tg-color-base: #2a3025; | |||
--tg-color-subtle: #4e5a42; | |||
--tg-color-inverted-progressive: #fff; | |||
--tg-color-link: #36c; | |||
/* Background color */ | |||
--tg-color-surface-0: #f9f4ee; | |||
--tg-color-surface-1: #fffbf6; | |||
--tg-color-surface-2: #f6ede0; | |||
--tg-color-surface-3: #f0e3cf; | |||
--tg-color-surface-4: #e6d9c5; | |||
--tg-color-surface-5: #e3d2b8; | |||
/* Progressive color */ | |||
--tg-color-progressive: #507b07; | |||
--tg-color-progressive--hover: #588418; | |||
--tg-color-progressive--active: #4a710a; | |||
/* Font */ | |||
/* Font family */ | |||
--tg-font-family-heading: 'EB Garamond', 'EB Garamond-fallback', serif; | |||
--tg-font-family-body: 'Lora', 'Lora-fallback', serif; | |||
/* Font size */ | |||
--tg-font-size-x-small: 0.8125rem; | |||
--tg-font-size-small: 0.875rem; | |||
--tg-font-size-medium: 1rem; | |||
--tg-font-size-large: 1.125rem; | |||
--tg-font-size-x-large: 1.25rem; | |||
--tg-font-size-xx-large: 1.5rem; | |||
--tg-font-size-xxx-large: 2rem; | |||
/* Font weight */ | |||
--tg-font-weight-regular: 400; | |||
--tg-font-weight-medium: 500; | |||
--tg-font-weight-semibold: 600; | |||
/* Line height */ | |||
--tg-line-height-xxx-small: 1.25; | |||
--tg-line-height-xx-small: 1.375; | |||
--tg-line-height: 1.6; | |||
/* Opacity */ | |||
--tg-opacity-pattern: 0.08; | |||
/* Codex token backport */ | |||
/* Quiet color */ | |||
--background-color-button-quiet--hover: rgba(0, 0, 0, 0.07); | |||
--background-color-button-quiet--active: rgba(0, 0, 0, 0.09); | |||
} | |||
html { | |||
/* Force serif fonts to format number on the same line */ | |||
font-variant-numeric: lining-nums; | |||
} | |||
/* Blockquote */ | |||
blockquote { | |||
padding-left: 1rem; | |||
border-left: 2px solid var(--tg-border-color-base); | |||
font-style: italic; | |||
/* Fallback for non-Chromium browsers */ | |||
text-wrap: balance; | |||
/* Only works on Chromium browsers */ | |||
text-wrap: pretty; | |||
} | |||
blockquote cite { | |||
color: var(--tg-color-subtle); | |||
font-size: var(--tg-font-size-x-small); | |||
font-style: normal; | |||
} | |||
blockquote cite::before { | |||
content: '―'; | |||
margin-right: 0.5em; | |||
} | |||
blockquote > p:first-child::before { | |||
content: open-quote; | |||
} | |||
/* <cite> is wrapped in the last <p> */ | |||
blockquote:has(cite) > p:nth-last-child(2)::after, | |||
blockquote:not(:has(cite)) > p:last-child::after { | |||
content: close-quote; | |||
} | |||
/* LINKS */ | |||
a { | |||
/*color: var(--tg-color-link);*/ | |||
} | |||
.underlinelink a { | |||
text-decoration: underline !important; | |||
} | |||
.nounderlinelink a { | |||
text-decoration: none !important; | |||
} | |||
.nounderlinelink a:hover { | |||
text-decoration: underline !important; | |||
} | |||
/* SEQUENCE TEMPLATE */ | |||
td.seqwhite a { | |||
color: #ffffff !important; | |||
} | |||
td.seqwhite div span a { | |||
color: #ffffff !important; | |||
} | |||
td.seqcream a { | |||
color: #fffdd0 !important; | |||
} | |||
td.seqcream div span a { | |||
color: #fffdd0 !important; | |||
} | |||
td.seqgrey a { | |||
color: #2a2a2a !important; | |||
} | |||
td.seqgrey div span a { | |||
color: #2a2a2a !important; | |||
} | |||
/* REFERENCES TEMPLATE */ | |||
ol.references { | |||
font-size: var(--tg-font-size-x-small); | |||
margin-top: 0px; | |||
padding-top: 0px; | |||
} | |||
.references-small { | |||
font-size: 0.75rem; | |||
} | |||
ol.references > li:target { | |||
background-color: #ddeeff; | |||
} | |||
sup.reference:target { | |||
background-color: #ddeeff; | |||
} | |||
/* Infobox customizations so they scale for desktop and mobile appropriately */ | |||
@media only screen and (max-width: 600px) { | |||
.tginfobox { | |||
min-width: 100%; | |||
} | |||
} | |||
@media only screen and (min-width: 601px) { | |||
.tginfobox { | |||
width: 275px; | |||
} | |||
} | |||
@media screen and (max-width: 600px) { | |||
.spotify, | |||
.template-month { | |||
float: center; | |||
margin-left: 10px; | |||
} | |||
} | |||
.pi-type-film .pi-secondary-background { | |||
background: rgb(238, 249, 238); | |||
background: linear-gradient( | |||
90deg, | |||
rgba(238, 249, 238, 1) 0%, | |||
rgba(171, 194, 171, 1) 35%, | |||
rgba(114, 139, 114, 1) 100% | |||
); | |||
} | |||
.pi-data { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.spotify { | |||
float: right; | |||
width: 300px; | |||
height: 100px; | |||
} | |||
@media screen and (max-width: 850px) { | |||
#p-logo-text { | |||
/* Tighten the logo a bit more to the left on mobile devices to prevent overlapping */ | |||
left: 3em; | |||
} | |||
} | |||
/* Print styles */ | |||
@media print { | |||
:root { | |||
/* Border */ | |||
/* Border color */ | |||
--tg-border-color-base: #aaa !important; | |||
--tg-border-color-subtle: #ddd !important; | |||
--tg-border-color-interactive: #000 !important; | |||
/* Color */ | |||
/* Text color */ | |||
--tg-color-emphasized: #000 !important; | |||
--tg-color-base: #222 !important; | |||
--tg-color-subtle: #444 !important; | |||
/* Background color */ | |||
--tg-color-surface-0: #fff !important; | |||
--tg-color-surface-1: #fff !important; | |||
--tg-color-surface-2: #fff !important; | |||
--tg-color-surface-3: #fff !important; | |||
--tg-color-surface-4: #fff !important; | |||
--tg-color-surface-5: #fff !important; | |||
/* Progressive color */ | |||
--tg-color-progressive: #000 !important; | |||
} | |||
} | |||
/* Limit FloatingUI content width */ | |||
.ext-floatingui-floating-content { | |||
max-width: 50ch; | |||
padding: 12px; | |||
} | |||
/* </nowiki></pre> */ |
Latest revision as of 00:14, 12 December 2024
/* <pre><nowiki> */
/* Tolkien Gateway theme */
/* Import fonts from Google Fonts: EB Garamond, Lora */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
/*
* Use customized system fonts as fallback for font stack
* Needed to avoid layout shift
*/
@font-face {
font-family: 'EB Garamond-fallback';
size-adjust: 94.29999999999998%;
ascent-override: 101%;
descent-override: 36.40000000000171%;
src: local('Times New Roman');
}
@font-face {
font-family: 'Lora-fallback';
size-adjust: 105.20000000000005%;
ascent-override: 92%;
descent-override: 32.60000000000166%;
src: local('Georgia');
}
/* CSS variables */
:root {
/* Border */
/* Border color */
--tg-border-color-base: rgba(0, 0, 0, 0.08);
--tg-border-color-subtle: rgba(0, 0, 0, 0.05);
--tg-border-color-interactive: rgba(0, 0, 0, 0.11);
/* Border radius */
--tg-border-radius-sharp: 0;
--tg-border-radius-small: 4px;
--tg-border-radius-medium: 8px;
--tg-border-radius-large: 12px;
--tg-border-radius-pill: 9999px;
--tg-border-radius-circle: 50%;
/* Shorthand */
--tg-border-base: 1px solid var(--tg-border-color-base);
/* Color */
/* Text color */
--tg-color-emphasized: #1a1f15;
--tg-color-base: #2a3025;
--tg-color-subtle: #4e5a42;
--tg-color-inverted-progressive: #fff;
--tg-color-link: #36c;
/* Background color */
--tg-color-surface-0: #f9f4ee;
--tg-color-surface-1: #fffbf6;
--tg-color-surface-2: #f6ede0;
--tg-color-surface-3: #f0e3cf;
--tg-color-surface-4: #e6d9c5;
--tg-color-surface-5: #e3d2b8;
/* Progressive color */
--tg-color-progressive: #507b07;
--tg-color-progressive--hover: #588418;
--tg-color-progressive--active: #4a710a;
/* Font */
/* Font family */
--tg-font-family-heading: 'EB Garamond', 'EB Garamond-fallback', serif;
--tg-font-family-body: 'Lora', 'Lora-fallback', serif;
/* Font size */
--tg-font-size-x-small: 0.8125rem;
--tg-font-size-small: 0.875rem;
--tg-font-size-medium: 1rem;
--tg-font-size-large: 1.125rem;
--tg-font-size-x-large: 1.25rem;
--tg-font-size-xx-large: 1.5rem;
--tg-font-size-xxx-large: 2rem;
/* Font weight */
--tg-font-weight-regular: 400;
--tg-font-weight-medium: 500;
--tg-font-weight-semibold: 600;
/* Line height */
--tg-line-height-xxx-small: 1.25;
--tg-line-height-xx-small: 1.375;
--tg-line-height: 1.6;
/* Opacity */
--tg-opacity-pattern: 0.08;
/* Codex token backport */
/* Quiet color */
--background-color-button-quiet--hover: rgba(0, 0, 0, 0.07);
--background-color-button-quiet--active: rgba(0, 0, 0, 0.09);
}
html {
/* Force serif fonts to format number on the same line */
font-variant-numeric: lining-nums;
}
/* Blockquote */
blockquote {
padding-left: 1rem;
border-left: 2px solid var(--tg-border-color-base);
font-style: italic;
/* Fallback for non-Chromium browsers */
text-wrap: balance;
/* Only works on Chromium browsers */
text-wrap: pretty;
}
blockquote cite {
color: var(--tg-color-subtle);
font-size: var(--tg-font-size-x-small);
font-style: normal;
}
blockquote cite::before {
content: '―';
margin-right: 0.5em;
}
blockquote > p:first-child::before {
content: open-quote;
}
/* <cite> is wrapped in the last <p> */
blockquote:has(cite) > p:nth-last-child(2)::after,
blockquote:not(:has(cite)) > p:last-child::after {
content: close-quote;
}
/* LINKS */
a {
/*color: var(--tg-color-link);*/
}
.underlinelink a {
text-decoration: underline !important;
}
.nounderlinelink a {
text-decoration: none !important;
}
.nounderlinelink a:hover {
text-decoration: underline !important;
}
/* SEQUENCE TEMPLATE */
td.seqwhite a {
color: #ffffff !important;
}
td.seqwhite div span a {
color: #ffffff !important;
}
td.seqcream a {
color: #fffdd0 !important;
}
td.seqcream div span a {
color: #fffdd0 !important;
}
td.seqgrey a {
color: #2a2a2a !important;
}
td.seqgrey div span a {
color: #2a2a2a !important;
}
/* REFERENCES TEMPLATE */
ol.references {
font-size: var(--tg-font-size-x-small);
margin-top: 0px;
padding-top: 0px;
}
.references-small {
font-size: 0.75rem;
}
ol.references > li:target {
background-color: #ddeeff;
}
sup.reference:target {
background-color: #ddeeff;
}
/* Infobox customizations so they scale for desktop and mobile appropriately */
@media only screen and (max-width: 600px) {
.tginfobox {
min-width: 100%;
}
}
@media only screen and (min-width: 601px) {
.tginfobox {
width: 275px;
}
}
@media screen and (max-width: 600px) {
.spotify,
.template-month {
float: center;
margin-left: 10px;
}
}
.pi-type-film .pi-secondary-background {
background: rgb(238, 249, 238);
background: linear-gradient(
90deg,
rgba(238, 249, 238, 1) 0%,
rgba(171, 194, 171, 1) 35%,
rgba(114, 139, 114, 1) 100%
);
}
.pi-data {
display: flex;
align-items: center;
}
.spotify {
float: right;
width: 300px;
height: 100px;
}
@media screen and (max-width: 850px) {
#p-logo-text {
/* Tighten the logo a bit more to the left on mobile devices to prevent overlapping */
left: 3em;
}
}
/* Print styles */
@media print {
:root {
/* Border */
/* Border color */
--tg-border-color-base: #aaa !important;
--tg-border-color-subtle: #ddd !important;
--tg-border-color-interactive: #000 !important;
/* Color */
/* Text color */
--tg-color-emphasized: #000 !important;
--tg-color-base: #222 !important;
--tg-color-subtle: #444 !important;
/* Background color */
--tg-color-surface-0: #fff !important;
--tg-color-surface-1: #fff !important;
--tg-color-surface-2: #fff !important;
--tg-color-surface-3: #fff !important;
--tg-color-surface-4: #fff !important;
--tg-color-surface-5: #fff !important;
/* Progressive color */
--tg-color-progressive: #000 !important;
}
}
/* Limit FloatingUI content width */
.ext-floatingui-floating-content {
max-width: 50ch;
padding: 12px;
}
/* </nowiki></pre> */