|
|
|
@@ -4,277 +4,344 @@
|
|
|
|
|
- Support footnotes or asides for notes sections.
|
|
|
|
|
- Serve fonts from the local server rather than Google's API.
|
|
|
|
|
- Support a "display title" in an [extra] section to allow for <br> elements
|
|
|
|
|
or other manual control over title display. */
|
|
|
|
|
@charset "utf-8";
|
|
|
|
|
@use '_pagination.scss';
|
|
|
|
|
@use '_codeblocks.scss';
|
|
|
|
|
|
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
/* Fonts and Text Sizes */
|
|
|
|
|
--default-serif-font: "Noto Serif", serif;
|
|
|
|
|
--default-sans-font: "Noto Sans", sans-serif;
|
|
|
|
|
--default-mono-font: "Noto Sans Mono", monospace;
|
|
|
|
|
--default-font-size: 16px;
|
|
|
|
|
--header-font-size: 2.0em;
|
|
|
|
|
/* Not sure I like this as the default, but it keeps inline code blocks from
|
|
|
|
|
or other manual control over title display.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
@charset "utf-8";
|
|
|
|
|
@use "parts/pagination.scss";
|
|
|
|
|
@use "parts/codeblocks.scss";
|
|
|
|
|
|
|
|
|
|
@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono");
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
/* Fonts and Text Sizes */
|
|
|
|
|
--default-serif-font: "Noto Serif", serif;
|
|
|
|
|
--default-sans-font: "Noto Sans", sans-serif;
|
|
|
|
|
--default-mono-font: "Noto Sans Mono", monospace;
|
|
|
|
|
--default-font-size: 16px;
|
|
|
|
|
--header-font-size: 2em;
|
|
|
|
|
/* Not sure I like this as the default, but it keeps inline code blocks from
|
|
|
|
|
overlapping. */
|
|
|
|
|
--default-line-height: 1.5;
|
|
|
|
|
|
|
|
|
|
/* Gruvbox Dark Colors */
|
|
|
|
|
--background-color: #1d2021;
|
|
|
|
|
--foreground-color: #ebdbb2;
|
|
|
|
|
--link-color: #458588;
|
|
|
|
|
--muted-color: #928374;
|
|
|
|
|
--primary-accent-color: #b16286;
|
|
|
|
|
--secondary-accent-color: #689d6a;
|
|
|
|
|
--code-background-color: #282828;
|
|
|
|
|
--inline-code-background-color: #3c3836;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.accent {
|
|
|
|
|
color: var(--primary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Required for sticky footer. */
|
|
|
|
|
html, body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
display: flex; /* Required for sticky footer. */
|
|
|
|
|
flex-direction: column; /* Required for sticky footer. */
|
|
|
|
|
margin: 0;
|
|
|
|
|
line-height: var(--default-line-height);
|
|
|
|
|
font-size: var(--default-font-size);
|
|
|
|
|
font-family: var(--default-serif-font);
|
|
|
|
|
background-color: var(--background-color);
|
|
|
|
|
color: var(--foreground-color);
|
|
|
|
|
border-top: 0.5em solid var(--primary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
|
flex: 1 0 auto; /* Required for sticky footer. */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* FIXME: For reasons that utterly bewilder me, an <article> with this id needs
|
|
|
|
|
--default-line-height: 1.5;
|
|
|
|
|
|
|
|
|
|
/* Gruvbox Dark Colors */
|
|
|
|
|
--background-color: #1d2021;
|
|
|
|
|
--foreground-color: #ebdbb2;
|
|
|
|
|
--link-color: #458588;
|
|
|
|
|
--muted-color: #928374;
|
|
|
|
|
--primary-accent-color: #b16286;
|
|
|
|
|
--secondary-accent-color: #689d6a;
|
|
|
|
|
--code-background-color: #282828;
|
|
|
|
|
--inline-code-background-color: #3c3836;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.accent {
|
|
|
|
|
color: var(--primary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Required for sticky footer. */
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
display: flex; /* Required for sticky footer. */
|
|
|
|
|
flex-direction: column; /* Required for sticky footer. */
|
|
|
|
|
margin: 0;
|
|
|
|
|
line-height: var(--default-line-height);
|
|
|
|
|
font-size: var(--default-font-size);
|
|
|
|
|
font-family: var(--default-serif-font);
|
|
|
|
|
background-color: var(--background-color);
|
|
|
|
|
color: var(--foreground-color);
|
|
|
|
|
border-top: 0.5em solid var(--primary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
|
flex: 1 0 auto; /* Required for sticky footer. */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* FIXME: For reasons that utterly bewilder me, an <article> with this id needs
|
|
|
|
|
to be inside a <main> with no id. I have a strong feeling I've done
|
|
|
|
|
something wrong here. */
|
|
|
|
|
#content {
|
|
|
|
|
max-width: 48em;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
padding-right: 1.4em;
|
|
|
|
|
padding-left: 1.4em;
|
|
|
|
|
padding-bottom: 1.4em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
overflow: hidden; /* FIXME: This WILL cut off titles that are too long! */
|
|
|
|
|
margin-top: 1.4em;
|
|
|
|
|
margin-bottom: 1.4em;
|
|
|
|
|
margin-left: 1em;
|
|
|
|
|
margin-right: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header > h1 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: var(--header-font-size);
|
|
|
|
|
font-family: var(--default-sans-font);
|
|
|
|
|
padding-top: 2.8rem;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
margin-bottom: 0.7rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header .post-meta {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-top: 0.5em;
|
|
|
|
|
padding-bottom: 0.9em;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-meta time {
|
|
|
|
|
// TODO: This color doesn't look great in with a light color scheme...
|
|
|
|
|
color: var(--muted-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2, h3, h4, h5, h6 {
|
|
|
|
|
padding-top: 1.2rem;
|
|
|
|
|
margin-bottom: 0.2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
padding-top: 0.4em;
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
blockquote {
|
|
|
|
|
/* Default text uses serif, so use sans-serif to differentiate quoted text. */
|
|
|
|
|
font-family: var(--default-sans-font);
|
|
|
|
|
font-style: italic;
|
|
|
|
|
/* Indent blockquotes, but align the start with where text in code begins. */
|
|
|
|
|
margin: 0 1.25rem;
|
|
|
|
|
padding-left: 1.25rem;
|
|
|
|
|
padding-right: 1.25rem;
|
|
|
|
|
border-left: 3px solid var(--secondary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: var(--link-color);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Anchor links --------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/* Add a # to the left of a subheading when it references an internal link... */
|
|
|
|
|
:where(h2, h3, h4, h5, h6) > a[href^="#"]::before {
|
|
|
|
|
content: "#";
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 1.2rem;
|
|
|
|
|
margin-left: -1.2rem;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ... but only display the internal anchor link when hovered over. */
|
|
|
|
|
:where(h2, h3, h4, h5, h6):hover > a[href^="#"]::before {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* When internal links are linked directly, display with the accent color. */
|
|
|
|
|
:where(h2, h3, h4, h5, h6):target > a[href^="#"]::before {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
color: var(--primary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Media ---------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
img, video {
|
|
|
|
|
/* Media should fill the width of its container if possible. */
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
figure {
|
|
|
|
|
/* Don't add margins to figures. */
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
figcaption {
|
|
|
|
|
/* De-emphasize figure captions. */
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
color: var(--muted-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Tables --------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
/* FIXME: Use flexbox for centering? Frankly, this is still bad on mobile.
|
|
|
|
|
#content {
|
|
|
|
|
max-width: 48em;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
padding-right: 1.4em;
|
|
|
|
|
padding-left: 1.4em;
|
|
|
|
|
padding-bottom: 1.4em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
overflow: hidden; /* FIXME: This WILL cut off titles that are too long! */
|
|
|
|
|
margin-top: 1.4em;
|
|
|
|
|
margin-bottom: 1.4em;
|
|
|
|
|
margin-left: 1em;
|
|
|
|
|
margin-right: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header > h1 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: var(--header-font-size);
|
|
|
|
|
font-family: var(--default-sans-font);
|
|
|
|
|
padding-top: 2.8rem;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
margin-bottom: 0.7rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header .post-meta {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-top: 0.5em;
|
|
|
|
|
padding-bottom: 0.9em;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-meta time {
|
|
|
|
|
// TODO: This color doesn't look great in with a light color scheme...
|
|
|
|
|
color: var(--muted-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2,
|
|
|
|
|
h3,
|
|
|
|
|
h4,
|
|
|
|
|
h5,
|
|
|
|
|
h6 {
|
|
|
|
|
padding-top: 1.2rem;
|
|
|
|
|
margin-bottom: 0.2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
padding-top: 0.4em;
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
blockquote {
|
|
|
|
|
/* Default text uses serif, so use sans-serif to differentiate quoted text. */
|
|
|
|
|
font-family: var(--default-sans-font);
|
|
|
|
|
font-style: italic;
|
|
|
|
|
/* Indent blockquotes, but align the start with where text in code begins. */
|
|
|
|
|
margin: 0 1.25rem;
|
|
|
|
|
padding-left: 1.25rem;
|
|
|
|
|
padding-right: 1.25rem;
|
|
|
|
|
border-left: 3px solid var(--secondary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: var(--link-color);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Anchor links --------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/* Add a # to the left of a subheading when it references an internal link... */
|
|
|
|
|
:where(h2, h3, h4, h5, h6) > a[href^="#"]::before {
|
|
|
|
|
content: "#";
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 1.2rem;
|
|
|
|
|
margin-left: -1.2rem;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ... but only display the internal anchor link when hovered over. */
|
|
|
|
|
:where(h2, h3, h4, h5, h6):hover > a[href^="#"]::before {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* When internal links are linked directly, display with the accent color. */
|
|
|
|
|
:where(h2, h3, h4, h5, h6):target > a[href^="#"]::before {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
color: var(--primary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Media ---------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
img,
|
|
|
|
|
video {
|
|
|
|
|
/* Media should fill the width of its container if possible. */
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
figure {
|
|
|
|
|
/* Don't add margins to figures. */
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
figcaption {
|
|
|
|
|
/* De-emphasize figure captions. */
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
color: var(--muted-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Tables --------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
/* FIXME: Use flexbox for centering? Frankly, this is still bad on mobile.
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
*/
|
|
|
|
|
display: block;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
text-align: left;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Headers in a row (column scoped) get a colored bottom border. */
|
|
|
|
|
th[scope="col"] {
|
|
|
|
|
padding-top: 0.4em;
|
|
|
|
|
border-bottom: 3px solid var(--secondary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Headers in a column (row scoped) get a colored right border. */
|
|
|
|
|
th[scope="row"] {
|
|
|
|
|
border-right: 3px solid var(--secondary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td {
|
|
|
|
|
text-align: center;
|
|
|
|
|
border: 1px solid var(--muted-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th, td {
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
padding-left: 0.4em;
|
|
|
|
|
padding-right: 0.4em;
|
|
|
|
|
border: 1px solid var(--muted-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Footer, nav, and copyright ------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
footer {
|
|
|
|
|
border-top: 0.5em solid var(--primary-accent-color);
|
|
|
|
|
text-align: center;
|
|
|
|
|
/* FIXME: Using the code background color could look awkward if a post ends
|
|
|
|
|
display: block;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
text-align: left;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Headers in a row (column scoped) get a colored bottom border. */
|
|
|
|
|
th[scope="col"] {
|
|
|
|
|
padding-top: 0.4em;
|
|
|
|
|
border-bottom: 3px solid var(--secondary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Headers in a column (row scoped) get a colored right border. */
|
|
|
|
|
th[scope="row"] {
|
|
|
|
|
border-right: 3px solid var(--secondary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td {
|
|
|
|
|
text-align: center;
|
|
|
|
|
border: 1px solid var(--muted-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th,
|
|
|
|
|
td {
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
padding-left: 0.4em;
|
|
|
|
|
padding-right: 0.4em;
|
|
|
|
|
border: 1px solid var(--muted-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Footer, nav, and copyright ------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
footer {
|
|
|
|
|
border-top: 0.5em solid var(--primary-accent-color);
|
|
|
|
|
text-align: center;
|
|
|
|
|
/* FIXME: Using the code background color could look awkward if a post ends
|
|
|
|
|
in a code snippet. */
|
|
|
|
|
background-color: var(--code-background-color);
|
|
|
|
|
padding: 1.4em;
|
|
|
|
|
flex-shrink: 0; /* Required for sticky footer. */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer a {
|
|
|
|
|
color: var(--secondary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Give footer nav links some breathing room. */
|
|
|
|
|
footer > nav > a {
|
|
|
|
|
// margin: 0 1.4em;
|
|
|
|
|
margin: 0 0.4em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* FIXME: This could probably go away with global margin/padding adjustments. */
|
|
|
|
|
footer p {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer p, footer a {
|
|
|
|
|
font-family: var(--default-sans-font);
|
|
|
|
|
/* It doesn't seem as though Google fonts support direct usage of OpenType
|
|
|
|
|
background-color: var(--code-background-color);
|
|
|
|
|
padding: 1.4em;
|
|
|
|
|
flex-shrink: 0; /* Required for sticky footer. */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer a {
|
|
|
|
|
color: var(--secondary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Give footer nav links some breathing room. */
|
|
|
|
|
footer > nav > a {
|
|
|
|
|
// margin: 0 1.4em;
|
|
|
|
|
margin: 0 0.4em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* FIXME: This could probably go away with global margin/padding adjustments. */
|
|
|
|
|
footer p {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer p,
|
|
|
|
|
footer a {
|
|
|
|
|
font-family: var(--default-sans-font);
|
|
|
|
|
/* It doesn't seem as though Google fonts support direct usage of OpenType
|
|
|
|
|
features like 'c2sc' and 'smcp'.
|
|
|
|
|
|
|
|
|
|
FIXME: It's not clear why numerals don't seem to obey this property. */
|
|
|
|
|
font-variant-caps: all-small-caps;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Media Queries ------------------------------------------------------ */
|
|
|
|
|
|
|
|
|
|
@media(min-width: 470px) {
|
|
|
|
|
:root { --default-font-size: 17px; }
|
|
|
|
|
/* Above this size, increase the header margins. Smaller sizes benefit from
|
|
|
|
|
font-variant-caps: all-small-caps;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pagination {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
list-style: none;
|
|
|
|
|
|
|
|
|
|
.page-item .disabled {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-numbers {
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
color: var(--link-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pre {
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 0.25rem 1.25rem;
|
|
|
|
|
font-size: 85%;
|
|
|
|
|
border-left: 0.25rem solid var(--primary-accent-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
code {
|
|
|
|
|
padding: 0 0.4rem;
|
|
|
|
|
// background-color: #3c3836;
|
|
|
|
|
background-color: var(--inline-code-background-color);
|
|
|
|
|
/* Inline code blocks look less aggresive with a little rounding. */
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pre,
|
|
|
|
|
code {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
font-family: var(--default-mono-font);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Without this the <code> tag gains a little padding that offsets text by like
|
|
|
|
|
2 pixels. Let's *not* do that. */
|
|
|
|
|
pre > code {
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: var(--code-background-color);
|
|
|
|
|
// Code inside a pre block doesn't need rounded borders.
|
|
|
|
|
border-radius: unset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---- Media Queries ------------------------------------------------------ */
|
|
|
|
|
|
|
|
|
|
@media (min-width: 470px) {
|
|
|
|
|
:root {
|
|
|
|
|
--default-font-size: 17px;
|
|
|
|
|
}
|
|
|
|
|
/* Above this size, increase the header margins. Smaller sizes benefit from
|
|
|
|
|
extra breathing room in the title. */
|
|
|
|
|
header {
|
|
|
|
|
margin-left: 2.8em;
|
|
|
|
|
margin-right: 2.8em;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media(min-width: 625px) {
|
|
|
|
|
:root { --default-font-size: 18px; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media(min-width: 802px) {
|
|
|
|
|
:root { --default-font-size: 19px; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media(min-width: 1003px) {
|
|
|
|
|
:root { --default-font-size: 20px; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media(min-width: 1225px) {
|
|
|
|
|
:root { --default-font-size: 21px; }
|
|
|
|
|
/* On larger devices, give the anchor link some more space. */
|
|
|
|
|
:where(h2, h3, h4, h5, h6) > a[href^="#"]::before {
|
|
|
|
|
width: 1.8rem;
|
|
|
|
|
margin-left: -1.8rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media(min-width: 1496px) {
|
|
|
|
|
:root { --default-font-size: 22px; }
|
|
|
|
|
}
|
|
|
|
|
header {
|
|
|
|
|
margin-left: 2.8em;
|
|
|
|
|
margin-right: 2.8em;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 625px) {
|
|
|
|
|
:root {
|
|
|
|
|
--default-font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 802px) {
|
|
|
|
|
:root {
|
|
|
|
|
--default-font-size: 19px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 1003px) {
|
|
|
|
|
:root {
|
|
|
|
|
--default-font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 1225px) {
|
|
|
|
|
:root {
|
|
|
|
|
--default-font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
/* On larger devices, give the anchor link some more space. */
|
|
|
|
|
:where(h2, h3, h4, h5, h6) > a[href^="#"]::before {
|
|
|
|
|
width: 1.8rem;
|
|
|
|
|
margin-left: -1.8rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 1496px) {
|
|
|
|
|
:root {
|
|
|
|
|
--default-font-size: 22px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
