/* Libraries */
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
html {
/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.15; /* 1. Correct the line height in all browsers. */
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
tab-size: 4; /* 3 */
}
/*
Sections
========
*/
body {
margin: 0; /* Remove the margin in all browsers. */
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
box-shadow: none;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
.hll {
background-color: #FFFFCC;
}
.c {
color: #408090;
font-style: italic;
}
.err {
border: 1px solid #FF0000;
}
.k {
color: #007020;
font-weight: bold;
}
.o {
color: #666666;
}
.cm {
color: #408090;
font-style: italic;
}
.cp {
color: #007020;
}
.c1 {
color: #408090;
font-style: italic;
}
.cs {
background-color: #FFF0F0;
color: #408090;
}
.gd {
color: #A00000;
}
.ge {
font-style: italic;
}
.gr {
color: #FF0000;
}
.gh {
color: #000080;
font-weight: bold;
}
.gi {
color: #00A000;
}
.go {
color: #303030;
}
.gp {
color: #C65D09;
font-weight: bold;
}
.gs {
font-weight: bold;
}
.gu {
color: #800080;
font-weight: bold;
}
.gt {
color: #0040D0;
}
.kc {
color: #007020;
font-weight: bold;
}
.kd {
color: #007020;
font-weight: bold;
}
.kn {
color: #007020;
font-weight: bold;
}
.kp {
color: #007020;
}
.kr {
color: #007020;
font-weight: bold;
}
.kt {
color: #902000;
}
.m {
color: #208050;
}
.s {
color: #4070A0;
}
.na {
color: #4070A0;
}
.nb {
color: #007020;
}
.nc {
color: #0E84B5;
font-weight: bold;
}
.no {
color: #60ADD5;
}
.nd {
color: #555555;
font-weight: bold;
}
.ni {
color: #D55537;
font-weight: bold;
}
.ne {
color: #007020;
}
.nf {
color: #06287E;
}
.nl {
color: #002070;
font-weight: bold;
}
.nn {
color: #0E84B5;
font-weight: bold;
}
.nt {
color: #062873;
font-weight: bold;
}
.nv {
color: #BB60D5;
}
.ow {
color: #007020;
font-weight: bold;
}
.w {
color: #BBBBBB;
}
.mf {
color: #208050;
}
.mh {
color: #208050;
}
.mi {
color: #208050;
}
.mo {
color: #208050;
}
.sb {
color: #4070A0;
}
.sc {
color: #4070A0;
}
.sd {
color: #4070A0;
font-style: italic;
}
.s2 {
color: #4070A0;
}
.se {
color: #4070A0;
font-weight: bold;
}
.sh {
color: #4070A0;
}
.si {
color: #70A0D0;
font-style: italic;
}
.sx {
color: #C65D09;
}
.sr {
color: #235388;
}
.s1 {
color: #4070A0;
}
.ss {
color: #517918;
}
.bp {
color: #007020;
}
.vc {
color: #BB60D5;
}
.vg {
color: #BB60D5;
}
.vi {
color: #BB60D5;
}
.il {
color: #208050;
}
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}
.m-0 {
margin: 0px 0px !important;
}
.m-t-0 {
margin-top: 0px !important;
}
.m-r-0 {
margin-right: 0px !important;
}
.m-b-0 {
margin-bottom: 0px !important;
}
.m-l-0 {
margin-left: 0px !important;
}
.m-x-0 {
margin-right: 0px !important;
margin-left: 0px !important;
}
.m-y-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.m-1 {
margin: 6px 6px !important;
}
.m-t-1 {
margin-top: 6px !important;
}
.m-r-1 {
margin-right: 6px !important;
}
.m-b-1 {
margin-bottom: 6px !important;
}
.m-l-1 {
margin-left: 6px !important;
}
.m-x-1 {
margin-right: 6px !important;
margin-left: 6px !important;
}
.m-y-1 {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.m-2 {
margin: 12px 12px !important;
}
.m-t-2 {
margin-top: 12px !important;
}
.m-r-2 {
margin-right: 12px !important;
}
.m-b-2 {
margin-bottom: 12px !important;
}
.m-l-2 {
margin-left: 12px !important;
}
.m-x-2 {
margin-right: 12px !important;
margin-left: 12px !important;
}
.m-y-2 {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.m-3 {
margin: 18px 18px !important;
}
.m-t-3 {
margin-top: 18px !important;
}
.m-r-3 {
margin-right: 18px !important;
}
.m-b-3 {
margin-bottom: 18px !important;
}
.m-l-3 {
margin-left: 18px !important;
}
.m-x-3 {
margin-right: 18px !important;
margin-left: 18px !important;
}
.m-y-3 {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
.p-0 {
padding: 0px 0px !important;
}
.p-t-0 {
padding-top: 0px !important;
}
.p-r-0 {
padding-right: 0px !important;
}
.p-b-0 {
padding-bottom: 0px !important;
}
.p-l-0 {
padding-left: 0px !important;
}
.p-x-0 {
padding-right: 0px !important;
padding-left: 0px !important;
}
.p-y-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.p-1 {
padding: 6px 6px !important;
}
.p-t-1 {
padding-top: 6px !important;
}
.p-r-1 {
padding-right: 6px !important;
}
.p-b-1 {
padding-bottom: 6px !important;
}
.p-l-1 {
padding-left: 6px !important;
}
.p-x-1 {
padding-right: 6px !important;
padding-left: 6px !important;
}
.p-y-1 {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.p-2 {
padding: 12px 12px !important;
}
.p-t-2 {
padding-top: 12px !important;
}
.p-r-2 {
padding-right: 12px !important;
}
.p-b-2 {
padding-bottom: 12px !important;
}
.p-l-2 {
padding-left: 12px !important;
}
.p-x-2 {
padding-right: 12px !important;
padding-left: 12px !important;
}
.p-y-2 {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.p-3 {
padding: 18px 18px !important;
}
.p-t-3 {
padding-top: 18px !important;
}
.p-r-3 {
padding-right: 18px !important;
}
.p-b-3 {
padding-bottom: 18px !important;
}
.p-l-3 {
padding-left: 18px !important;
}
.p-x-3 {
padding-right: 18px !important;
padding-left: 18px !important;
}
.p-y-3 {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.clear {
content: ".";
display: block;
margin: 0px;
height: 0px;
clear: both;
line-height: 0px;
}
.center {
text-align: center;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Base styles */
html {
-webkit-font-smoothing: subpixel-antialiased;
}
body {
color: var(--color-foreground);
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
line-height: 1.5em;
overflow-wrap: break-word;
word-wrap: break-word;
}
ul,
ol {
margin-top: 0;
margin-bottom: 15px;
padding-left: 40px;
line-height: 1.2em;
}
ul ul,
ul ol,
ol ul,
ol ol {
margin-bottom: 0;
}
blockquote {
margin-left: 1ex;
border-left: 3px solid #ccc;
padding-left: 1em;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: normal;
font-family: Cambria, Georgia, serif;
line-height: 125%;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
margin: 1em 0 0.5em;
font-weight: 500;
}
h3 {
font-size: 1.5rem;
}
p {
margin: 0.8em 0 0.5em;
}
p:first-child {
margin-top: 0;
}
a {
color: var(--color-links);
}
a:hover, a:active {
color: var(--color-foreground);
}
a:visited {
color: var(--color-links-visited);
}
code {
background-color: var(--color-highlight-bg);
font-family: "Ubuntu Mono", Monaco, monospace;
font-style: normal;
}
pre {
font-family: "Ubuntu Mono", Monaco, monospace;
font-style: normal;
background: none repeat scroll 0 0 var(--color-highlight-bg);
color: var(--color-highlight-fg);
letter-spacing: 0.015em;
line-height: 130%;
padding: 0.7em;
white-space: pre;
word-wrap: break-word;
overflow-y: scroll;
width: auto;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
}
time,
address {
display: inline;
}
ins {
text-decoration: none;
}
table {
margin: 1em 0;
border-collapse: collapse;
}
td,
th {
border: 2px solid var(--color-table-border);
padding: 1px 5px;
}
th {
background-color: var(--color-table-header-bg);
color: var(--color-table-header-fg);
}
tbody tr {
background-color: var(--color-table-row-even-bg);
}
tbody tr:nth-child(odd) {
background-color: var(--color-table-row-odd-bg);
}
hr {
margin: 40px 5% 60px 5%;
color: #d6d6d6;
box-shadow: 0.1em 0.1em 0.1em #efefef;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
}
body {
margin: 1em;
max-width: 800px;
}
.display-inline-block {
display: inline-block;
}
.metadata {
font-size: 95%;
font-style: italic;
color: hsl(0, 0%, 47%);
}
.metadata a {
color: hsl(0, 0%, 47%);
}
.metadata a:hover, .metadata a:active, .metadata a:visited {
color: hsl(0, 0%, 47%);
}
.metadata p {
margin: 0;
}
.categories-list {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid var(--color-table-border);
}
.tag {
display: inline-block;
margin-right: 1ex;
padding: 0.3em;
border-radius: 0.5em;
background-color: var(--color-tag-bg);
color: var(--color-tag-fg);
line-height: 1em;
font-size: 0.9em;
}
.tag:visited, .tag:hover, .tag:active {
color: var(--color-tag-fg);
}
.right, .inline-media-right {
float: right;
}
.left, .inline-media-left {
float: left;
}
.inline-media-left {
margin-right: 10px;
}
.inline-media-right {
margin-left: 10px;
}
.update {
padding: 1ex;
border: 1px solid hsl(60, 40%, 50%);
background-color: hsl(65, 90%, 90%);
}
.border {
border: 1px solid black;
}
.list-unstyled, .list-inline {
padding-left: 0;
list-style-type: "";
}
.list-inline {
margin-left: -5px;
}
.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.simple-footnotes {
border-top: 1px solid #888;
padding-top: 1em;
}
/* Sections */
header {
margin: 1em 0;
border-bottom: 1px solid var(--color-table-border);
}
header h1 {
font-size: 1rem;
font-weight: bold;
}
header h1 a {
text-decoration: none;
}
header nav > ul {
list-style-type: "";
margin: 0;
padding: 0;
}
header nav > ul > li {
display: inline;
text-transform: lowercase;
}
.article-list {
list-style-type: "";
margin-top: 2em;
padding-left: 0;
}
.article-list > li {
margin-bottom: 0.5em;
}
.article-list > li > time {
margin-right: 1em;
}
.content h1 {
font-family: serif;
margin: 0 0 0.3em;
}
.content h1 a {
color: inherit;
border-bottom: none;
}
.content h2 {
margin-top: 1.5em;
font-family: serif;
}
.content p.right {
margin-left: 1ex;
}
.content img,
.content video {
max-width: 100%;
height: auto;
}
.content .subheading {
font-style: italic;
font-size: 80%;
color: #999;
margin: 1ex 0;
}
footer {
display: flex;
flex-direction: column;
border-top: 1px dotted #d6d6d6;
margin-top: 3rem;
padding: 1rem 0;
font-size: 0.8em;
}
@media (min-width: 769px) {
footer {
flex-direction: row;
}
}
footer > ul {
flex: 1;
}
.footer--photo {
display: none;
}
@media (min-width: 769px) {
.footer--icons {
text-align: right;
}
}
.footer--icons svg {
height: 30px;
width: 30px;
display: inline-block;
}
.footer--icons li {
display: inline-block;
list-style-type: "";
flex: 0 0 auto;
}
:root {
--color-background: hsl(6, 100%, 98%);
--color-foreground: hsl(60, 0.7%, 30%);
--color-links: hsl(205, 95%, 27%);
--color-links-visited: hsl(242.2, 78.3%, 51.2%);
--color-highlight-bg: #f0f0f0;
--color-highlight-fg: var(--color-foreground);
--color-tag-bg: var(--color-links);
--color-tag-fg: var(--color-background);
--color-table-border: #888;
--color-table-header-bg: inherit;
--color-table-header-fg: inherit;
--color-table-row-even-bg: inherit;
--color-table-row-odd-bg: inherit;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: hsl(210, 3.7%, 10.6%);
--color-foreground: #efefef;
--color-links: hsl(204.6, 70%, 58.2%);
--color-links-visited: hsl(242.1, 63.5%, 73.1%);
--color-highlight-bg: #041f29;
--color-highlight-fg: #51d7ff;
--color-tag-bg: var(--color-links);
--color-tag-fg: var(--color-background);
--color-table-border: #6d6c6c;
--color-table-header-bg: #1b1b1b;
--color-table-row-even-bg: #464646;
--color-table-row-odd-bg: #333;
}
}
body {
background-color: var(--color-background);
}
/* Article */
article.summary {
margin-bottom: 40px;
clear: both;
}
article.summary > div {
margin-left: 28%;
}
article.summary .metadata {
width: 23%;
float: left;
margin: 0 1% 2% 0;
}
.figure {
text-align: center;
}
.figure > img {
border: 1px solid #ddd;
padding: 4px;
}
figure {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding: 4px;
margin: 10px;
float: right;
}
figure > img {
margin: 0;
padding: 0;
border: 0 none;
}
figcaption {
margin-bottom: 0;
}
/* Listings */
ol.archive li {
margin: 8px 0;
}
ol.archive li time,
ol.archive li .tags {
line-height: 140%;
font-size: 0.8em;
margin: 0;
}
.pagination {
width: 100px;
margin: 1em auto;
}
.recent-posts {
list-style-type: "";
}
.recent-posts h3 {
margin-bottom: 0;
}
.recent-posts li p {
margin: 0;
font-size: 90%;
color: #444;
}