From: Vladimír Vondruš Date: Fri, 15 Sep 2017 18:18:48 +0000 (+0200) Subject: css: provide postprocessed versions of CSS files. X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=be53bd6860a21ce6b12627ab596d0cc4d274d407;p=blog.git css: provide postprocessed versions of CSS files. Makes the whole thing work on IE and Edge! Yay! --- diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css new file mode 100644 index 00000000..07848326 --- /dev/null +++ b/css/m-dark.compiled.css @@ -0,0 +1,1565 @@ +/* Generated using `./postprocess.py m-dark.css pygments-dark.css`. Do not edit. */ + +/* Important basics */ +*, ::before, ::after { + box-sizing: border-box; +} +body { + font-size: 1rem; + margin: 0; +} + +/* 12-column layout. Inspired by Bootstrap and + https://www.w3schools.com/css/css_rwd_grid.asp */ +.m-container { + width: 100%; + margin: auto; + padding-left: 1rem; + padding-right: 1rem; +} +.m-row { + margin-left: -1rem; + margin-right: -1rem; +} +.m-row:after { /* avoid rows floating around each other */ + content: ' '; + clear: both; + display: table; +} +[class*='m-col-'] { + position: relative; + padding: 1rem; +} +[class*='m-clearfix-']::after { + display: block; + content: ' '; + clear: both; +} +[class*='m-show-'] { + display: none; +} +[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s, +[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m, +[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l { + margin-left: -1rem; + margin-right: -1rem; +} +.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s, +.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m, +.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l .m-row > [class*='m-col-'].m-center-l { + margin-left: 0; + margin-right: 0; +} + +.m-container.m-nopad, [class*='m-col-'].m-nopad, +.m-container.m-nopadx, [class*='m-col-'].m-nopadx, +.m-container.m-nopadl, [class*='m-col-'].m-nopadl { + padding-left: 0; +} +.m-container.m-nopad, [class*='m-col-'].m-nopad, +.m-container.m-nopadx, [class*='m-col-'].m-nopadx, +.m-container.m-nopadr, [class*='m-col-'].m-nopadr { + padding-right: 0; +} +[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt { + padding-top: 0; +} +[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb { + padding-bottom: 0; +} + +/* 12-column layout -- T (portrait phones) */ +[class*='m-col-t-'] { float: left; } + +[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t { + padding-top: 0px; + padding-bottom: 0px; +} + +.m-left-t { + float: left; +} +.m-right-t, [class*='m-col-t-'].m-right-t { + float: right; +} +.m-center-t, [class*='m-col-t-'].m-center-t { + float: none; +} +[class*='m-col-t-'].m-left-t { + margin-left: -1rem; +} +[class*='m-col-t-'].m-right-t { + margin-right: -1rem; +} +.m-row > [class*='m-col-t-'].m-left-t { + margin-left: 0; +} +.m-row > [class*='m-col-t-'].m-right-t { + margin-right: 0; +} +.m-center-t, [class*='m-col-t-'].m-center-t { + margin-left: auto; + margin-right: auto; + float: none; +} + +.m-col-t-1 { width: calc(1 * 100% / 12); } +.m-col-t-2 { width: calc(2 * 100% / 12); } +.m-col-t-3 { width: calc(3 * 100% / 12); } +.m-col-t-4 { width: calc(4 * 100% / 12); } +.m-col-t-5 { width: calc(5 * 100% / 12); } +.m-col-t-6 { width: calc(6 * 100% / 12); } +.m-col-t-7 { width: calc(7 * 100% / 12); } +.m-col-t-8 { width: calc(8 * 100% / 12); } +.m-col-t-9 { width: calc(9 * 100% / 12); } +.m-col-t-10 { width: calc(10 * 100% / 12); } +.m-col-t-11 { width: calc(11 * 100% / 12); } +.m-col-t-12 { width: calc(12 * 100% / 12); } + +.m-push-t-1 { left: calc(1 * 100% / 12); } +.m-push-t-2 { left: calc(2 * 100% / 12); } +.m-push-t-3 { left: calc(3 * 100% / 12); } +.m-push-t-4 { left: calc(4 * 100% / 12); } +.m-push-t-5 { left: calc(5 * 100% / 12); } +.m-push-t-6 { left: calc(6 * 100% / 12); } +.m-push-t-7 { left: calc(7 * 100% / 12); } +.m-push-t-8 { left: calc(8 * 100% / 12); } +.m-push-t-9 { left: calc(9 * 100% / 12); } +.m-push-t-10 { left: calc(10 * 100% / 12); } +.m-push-t-11 { left: calc(11 * 100% / 12); } + +.m-pull-t-1 { right: calc(1 * 100% / 12); } +.m-pull-t-2 { right: calc(2 * 100% / 12); } +.m-pull-t-3 { right: calc(3 * 100% / 12); } +.m-pull-t-4 { right: calc(4 * 100% / 12); } +.m-pull-t-5 { right: calc(5 * 100% / 12); } +.m-pull-t-6 { right: calc(6 * 100% / 12); } +.m-pull-t-7 { right: calc(7 * 100% / 12); } +.m-pull-t-8 { right: calc(8 * 100% / 12); } +.m-pull-t-9 { right: calc(9 * 100% / 12); } +.m-pull-t-10 { right: calc(10 * 100% / 12); } +.m-pull-t-11 { right: calc(11 * 100% / 12); } + +/* 12-column layout -- S, 576px and up (landscape phones) */ +@media screen and (min-width: 576px) { + .m-container { width: 560px; } + + #m-container-inflatable .m-col-s-10 .m-container-inflate { + margin-left: -10%; + margin-right: -10%; + } + + [class*='m-col-s-'] { float: left; } + + [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s { + padding-top: 0px; + padding-bottom: 0px; + } + + .m-left-s { + float: left; + } + .m-right-s, [class*='m-col-s-'].m-right-s { + float: right; + } + [class*='m-col-s-'].m-left-s { + margin-left: -1rem; + margin-right: 0; + } + [class*='m-col-s-'].m-right-s { + margin-left: 0; + margin-right: -1rem; + } + .m-row > [class*='m-col-s-'].m-left-s { + margin-left: 0; + } + .m-row > [class*='m-col-s-'].m-right-s { + margin-right: 0; + } + .m-center-s, [class*='m-col-s-'].m-center-s { + margin-left: auto; + margin-right: auto; + float: none; + } + + .m-col-s-1 { width: calc(1 * 100% / 12); } + .m-col-s-2 { width: calc(2 * 100% / 12); } + .m-col-s-3 { width: calc(3 * 100% / 12); } + .m-col-s-4 { width: calc(4 * 100% / 12); } + .m-col-s-5 { width: calc(5 * 100% / 12); } + .m-col-s-6 { width: calc(6 * 100% / 12); } + .m-col-s-7 { width: calc(7 * 100% / 12); } + .m-col-s-8 { width: calc(8 * 100% / 12); } + .m-col-s-9 { width: calc(9 * 100% / 12); } + .m-col-s-10 { width: calc(10 * 100% / 12); } + .m-col-s-11 { width: calc(11 * 100% / 12); } + .m-col-s-12 { width: calc(12 * 100% / 12); } + + .m-push-s-0 { left: calc(0 * 100% / 12); } + .m-push-s-1 { left: calc(1 * 100% / 12); } + .m-push-s-2 { left: calc(2 * 100% / 12); } + .m-push-s-3 { left: calc(3 * 100% / 12); } + .m-push-s-4 { left: calc(4 * 100% / 12); } + .m-push-s-5 { left: calc(5 * 100% / 12); } + .m-push-s-6 { left: calc(6 * 100% / 12); } + .m-push-s-7 { left: calc(7 * 100% / 12); } + .m-push-s-8 { left: calc(8 * 100% / 12); } + .m-push-s-9 { left: calc(9 * 100% / 12); } + .m-push-s-10 { left: calc(10 * 100% / 12); } + .m-push-s-11 { left: calc(11 * 100% / 12); } + + .m-pull-s-0 { right: calc(0 * 100% / 12); } + .m-pull-s-1 { right: calc(1 * 100% / 12); } + .m-pull-s-2 { right: calc(2 * 100% / 12); } + .m-pull-s-3 { right: calc(3 * 100% / 12); } + .m-pull-s-4 { right: calc(4 * 100% / 12); } + .m-pull-s-5 { right: calc(5 * 100% / 12); } + .m-pull-s-6 { right: calc(6 * 100% / 12); } + .m-pull-s-7 { right: calc(7 * 100% / 12); } + .m-pull-s-8 { right: calc(8 * 100% / 12); } + .m-pull-s-9 { right: calc(9 * 100% / 12); } + .m-pull-s-10 { right: calc(10 * 100% / 12); } + .m-pull-s-11 { right: calc(11 * 100% / 12); } + + .m-clearfix-t::after { display: none; } + + .m-hide-s { display: none; } + .m-show-s { display: block; } + + .m-col-s-none { + width: auto; + float: none; + } +} + +/* 12-column layout -- M, 768px and up (tablets, small desktops) */ +@media screen and (min-width: 768px) { + .m-container { width: 750px; } + + #m-container-inflatable .m-col-m-10 .m-container-inflate { + margin-left: -10%; + margin-right: -10%; + } + + [class*='m-col-m-'] { float: left; } + + [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m { + padding-top: 0px; + padding-bottom: 0px; + } + + .m-left-m { + float: left; + } + .m-right-m, [class*='m-col-m-'].m-right-m { + float: right; + } + [class*='m-col-m-'].m-left-m { + margin-left: -1rem; + margin-right: 0; + } + [class*='m-col-m-'].m-right-m { + margin-left: 0; + margin-right: -1rem; + } + .m-row > [class*='m-col-m-'].m-left-m { + margin-left: 0; + } + .m-row > [class*='m-col-m-'].m-right-m { + margin-right: 0; + } + .m-center-m, [class*='m-col-m-'].m-center-m { + margin-left: auto; + margin-right: auto; + float: none; + } + + .m-col-m-1 { width: calc(1 * 100% / 12); } + .m-col-m-2 { width: calc(2 * 100% / 12); } + .m-col-m-3 { width: calc(3 * 100% / 12); } + .m-col-m-4 { width: calc(4 * 100% / 12); } + .m-col-m-5 { width: calc(5 * 100% / 12); } + .m-col-m-6 { width: calc(6 * 100% / 12); } + .m-col-m-7 { width: calc(7 * 100% / 12); } + .m-col-m-8 { width: calc(8 * 100% / 12); } + .m-col-m-9 { width: calc(9 * 100% / 12); } + .m-col-m-10 { width: calc(10 * 100% / 12); } + .m-col-m-11 { width: calc(11 * 100% / 12); } + .m-col-m-12 { width: calc(12 * 100% / 12); } + + .m-push-m-0 { left: calc(0 * 100% / 12); } + .m-push-m-1 { left: calc(1 * 100% / 12); } + .m-push-m-2 { left: calc(2 * 100% / 12); } + .m-push-m-3 { left: calc(3 * 100% / 12); } + .m-push-m-4 { left: calc(4 * 100% / 12); } + .m-push-m-5 { left: calc(5 * 100% / 12); } + .m-push-m-6 { left: calc(6 * 100% / 12); } + .m-push-m-7 { left: calc(7 * 100% / 12); } + .m-push-m-8 { left: calc(8 * 100% / 12); } + .m-push-m-9 { left: calc(9 * 100% / 12); } + .m-push-m-10 { left: calc(10 * 100% / 12); } + .m-push-m-11 { left: calc(11 * 100% / 12); } + + .m-pull-m-0 { right: calc(0 * 100% / 12); } + .m-pull-m-1 { right: calc(1 * 100% / 12); } + .m-pull-m-2 { right: calc(2 * 100% / 12); } + .m-pull-m-3 { right: calc(3 * 100% / 12); } + .m-pull-m-4 { right: calc(4 * 100% / 12); } + .m-pull-m-5 { right: calc(5 * 100% / 12); } + .m-pull-m-6 { right: calc(6 * 100% / 12); } + .m-pull-m-7 { right: calc(7 * 100% / 12); } + .m-pull-m-8 { right: calc(8 * 100% / 12); } + .m-pull-m-9 { right: calc(9 * 100% / 12); } + .m-pull-m-10 { right: calc(10 * 100% / 12); } + .m-pull-m-11 { right: calc(11 * 100% / 12); } + + .m-clearfix-s::after { display: none; } + + .m-hide-m { display: none; } + .m-show-m { display: block; } + + .m-col-m-none { + width: auto; + float: none; + } +} + +/* 12-column layout -- L, 992px and up (desktops, very large tablets) */ +@media screen and (min-width: 992px) { + .m-container { width: 960px; } + + #m-container-inflatable .m-col-l-10 .m-container-inflate { + margin-left: -10%; + margin-right: -10%; + } + + [class*='m-col-l-'] { float: left; } + + [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l { + padding-top: 0px; + padding-bottom: 0px; + } + + .m-left-l { + float: left; + } + .m-right-l, [class*='m-col-l-'].m-right-l { + float: right; + } + [class*='m-col-l-'].m-left-l { + margin-left: -1rem; + margin-right: 0; + } + [class*='m-col-l-'].m-right-l { + margin-left: 0; + margin-right: -1rem; + } + .m-row > [class*='m-col-l-'].m-left-l { + margin-left: 0; + } + .m-row > [class*='m-col-l-'].m-right-l { + margin-right: 0; + } + .m-center-l, [class*='m-col-l-'].m-center-l { + margin-left: auto; + margin-right: auto; + float: none; + } + + .m-col-l-1 { width: calc(1 * 100% / 12); } + .m-col-l-2 { width: calc(2 * 100% / 12); } + .m-col-l-3 { width: calc(3 * 100% / 12); } + .m-col-l-4 { width: calc(4 * 100% / 12); } + .m-col-l-5 { width: calc(5 * 100% / 12); } + .m-col-l-6 { width: calc(6 * 100% / 12); } + .m-col-l-7 { width: calc(7 * 100% / 12); } + .m-col-l-8 { width: calc(8 * 100% / 12); } + .m-col-l-9 { width: calc(9 * 100% / 12); } + .m-col-l-10 { width: calc(10 * 100% / 12); } + .m-col-l-11 { width: calc(11 * 100% / 12); } + .m-col-l-12 { width: calc(12 * 100% / 12); } + + .m-push-l-0 { left: calc(0 * 100% / 12); } + .m-push-l-1 { left: calc(1 * 100% / 12); } + .m-push-l-2 { left: calc(2 * 100% / 12); } + .m-push-l-3 { left: calc(3 * 100% / 12); } + .m-push-l-4 { left: calc(4 * 100% / 12); } + .m-push-l-5 { left: calc(5 * 100% / 12); } + .m-push-l-6 { left: calc(6 * 100% / 12); } + .m-push-l-7 { left: calc(7 * 100% / 12); } + .m-push-l-8 { left: calc(8 * 100% / 12); } + .m-push-l-9 { left: calc(9 * 100% / 12); } + .m-push-l-10 { left: calc(10 * 100% / 12); } + .m-push-l-11 { left: calc(11 * 100% / 12); } + + .m-pull-l-0 { right: calc(0 * 100% / 12); } + .m-pull-l-1 { right: calc(1 * 100% / 12); } + .m-pull-l-2 { right: calc(2 * 100% / 12); } + .m-pull-l-3 { right: calc(3 * 100% / 12); } + .m-pull-l-4 { right: calc(4 * 100% / 12); } + .m-pull-l-5 { right: calc(5 * 100% / 12); } + .m-pull-l-6 { right: calc(6 * 100% / 12); } + .m-pull-l-7 { right: calc(7 * 100% / 12); } + .m-pull-l-8 { right: calc(8 * 100% / 12); } + .m-pull-l-9 { right: calc(9 * 100% / 12); } + .m-pull-l-10 { right: calc(10 * 100% / 12); } + .m-pull-l-11 { right: calc(11 * 100% / 12); } + + .m-clearfix-m::after { display: none; } + + .m-hide-l { display: none; } + .m-show-l { display: block; } + + .m-col-l-none { + width: auto; + float: none; + } +} + +#m-container-inflatable { + overflow-x: hidden; /* needed by image grid :( */ +} + +/* kate: indent-width 2; */ + +/* Globals */ +html { + font-size: 16px; + background-color: #2f363f; +} +body { + font-family: 'Source Sans Pro', sans-serif; + color: #dcdcdc; +} + +/* Block elements */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 0.5rem; + font-weight: bold; +} +p, ul, ol, dl { + margin-top: 0; +} +ul, ol { + padding-left: 2rem; +} +ul ol, ul ul, ol ol, ol ul { + margin-bottom: 0; +} +main p { + text-indent: 1.5rem; + text-align: justify; +} +main p.m-noindent { + text-indent: 0; + text-align: left; +} +blockquote { + margin-top: 0; + margin-left: 1rem; + margin-right: 1rem; + padding: 1rem; + border-left-style: solid; + border-left-width: 0.25rem; +} +hr { + width: 75%; + border-width: 0.0625rem; + border-style: solid; +} +blockquote, hr { + border-color: #405363; +} +pre { + font-family: 'Source Code Pro', monospace, monospace, monospace; /* https://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ + font-size: 0.9rem; + padding: 0.5rem 1rem; + color: #e6e6e6; + background-color: #34424d; + border-radius: 0.2rem; + overflow-x: auto; + margin-top: 0; /* stupid defaults */ +} + +/* Inline elements */ +abbr { + cursor: help; + text-decoration: underline dotted; +} +sub, sup { /* https://gist.github.com/unruthless/413930 */ + font-size: 0.75rem; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.35rem; } +sub { bottom: -0.2rem; } +a { + color: #5b9dd9; +} +a:hover, a:focus, a:active { + color: #a5c9ea; +} +mark { + padding: 0.0625rem; + background-color: #c7cf2f; + color: #2f83cc; +} +code { + font-family: 'Source Code Pro', monospace, monospace, monospace; + font-size: 0.9rem; + padding: 0.125rem; + color: #e6e6e6; + background-color: #34424d; +} + +/* Header navigation */ +body > header { + width: 100%; +} +body > header > nav { + margin-left: auto; + margin-right: auto; + color: #ffffff; +} +body > header { + background-color: #22272e; +} +body > header > nav a { + text-decoration: none; + text-transform: none; + line-height: 1.5rem; + display: inline-block; + vertical-align: middle; + margin-left: -0.5rem; + padding-left: 0.5rem; + border-style: solid; + border-color: transparent; + border-width: 0 0 0 0.25rem; + color: #ffffff; +} +body > header > nav a#m-navbar-brand { + text-transform: uppercase; + font-size: 1.125rem; +} +body > header > nav #m-navbar-collapse { + padding-bottom: 1rem; +} +body > header > nav a#m-navbar-current { + color: #5b9dd9; + border-color: #5b9dd9; +} +body > header > nav li { + border-style: solid; + border-color: transparent; + border-width: 0 0 0 0.25rem; + margin-left: -0.5rem; +} +body > header > nav li a { + margin: 0 0 0 -0.25rem; + width: 100%; +} +body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide { + line-height: 3rem; + font-weight: bold; +} +body > header > nav ol { + list-style-type: none; + padding-left: 1rem; + margin: 0; +} +body > header > nav [class*='m-col-'] { + padding-top: 0; + padding-bottom: 0; +} +body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active { + color: #a5c9ea; +} +body > header > nav li:hover { + border-color: #a5c9ea; +} +body > header > nav li a:hover, body > header > nav li a:focus, body > header > nav li a:active { + border-color: #a5c9ea; + background-color: #292f37; +} + +/* Header navigation -- collapsible part */ +body > header > nav #m-navbar-hide { + display: none; +} +body > header > nav:target #m-navbar-collapse { + display: block; +} +body > header > nav:target #m-navbar-show { + display: none; +} +body > header > nav:target #m-navbar-hide { + display: inline-block; +} + +/* Header navigation -- 768px and up (tablets, desktops) */ +@media screen and (min-width: 768px) { + body > header > nav #m-navbar-show, body > header > nav #m-navbar-hide, + body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide { + display: none; + } + body > header > nav #m-navbar-collapse { + padding-bottom: 0; + } + body > header > nav a { + line-height: 3rem; + margin-left: 0; + padding-left: 1rem; + padding-right: 1rem; + white-space: nowrap; + } + body > header > nav li ol { + background-color: #22272e; + } + body > header > nav ol ol li { + margin-left: 0; + padding-left: 0; + border-left-width: 0; + } + body > header > nav ol ol li a { + margin-left: 0; + padding-left: 0.75rem; + } + body > header > nav #m-navbar-collapse > .m-row > ol > li { + margin-left: 0; + border-left-width: 0; + } + body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-collapse > .m-row > ol > li > a { + line-height: 2.75rem; + margin-left: 0; + border-width: 0 0 0.25rem 0; + } + body > header > nav #m-navbar-collapse ol { + padding-left: 0; + padding-right: 0; + } + body > header > nav #m-navbar-collapse > .m-row > ol, body > header > nav #m-navbar-collapse > .m-row > ol > li { + float: left; + } + body > header > nav #m-navbar-collapse ol ol { + z-index: 99999; + position: absolute; + visibility: hidden; + min-width: 7.5rem; + } + body > header > nav #m-navbar-collapse li:hover ol { + visibility: visible; + } +} + +/* Footer navigation */ +body > footer { + width: 100%; +} +body > footer > nav { + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 0.85rem; + text-align: center; + color: #c5c5c5; + background-color: #444e5c; +} +body > footer > nav h3, body > footer > nav h3 a { + text-transform: uppercase; + font-weight: normal; +} +body > footer > nav ul { + list-style-type: none; + padding: 0; + margin: 0; +} +body > footer > nav a { + text-decoration: none; + text-transform: none; + color: #ffffff; +} +body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:active { + color: #a5c9ea; +} + +/* Main content */ +body > main { + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Article elements */ +article > header h1 { + font-size: 2rem; +} +article > header h1, article > header h1 a, +article section > h2, article section > h2 a, +article section > h3, article section > h3 a, +article section > h4, article section > h4 a, +article section > h5, article section > h5 a, +article section > h6, article section > h6 a { + color: #a5c9ea; +} +article > header h1 a:hover, article > header h1 a:focus, article > header h1 a:active, +article section > h2 a:hover, article section > h2 a:focus, article section > h2 a:active, +article section > h3 a:hover, article section > h3 a:focus, article section > h3 a:active, +article section > h4 a:hover, article section > h4 a:focus, article section > h4 a:active, +article section > h5 a:hover, article section > h5 a:focus, article section > h5 a:active, +article section > h6 a:hover, article section > h6 a:focus, article section > h6 a:active { + color: #dcdcdc; +} +article > header .m-date { + display: block; + width: 2.5rem; + float: left; + text-align: center; + line-height: 95%; + font-size: 0.75rem; + font-weight: normal; + white-space: nowrap; + border-right-style: solid; + border-right-width: 0.125rem; + border-color: #a5c9ea; + padding-right: 0.75rem; + margin-top: -0.1rem; + margin-right: 0.75rem; + margin-bottom: 0.25rem; +} +article > header .m-date-day { + display: block; + font-weight: bold; + padding-top: 0.2rem; + padding-bottom: 0.15rem; + font-size: 1.25rem; +} +article > header p { + color: #f0f0f0; + font-size: 1.125rem; +} +article > header h1::after { + content: " "; + clear: both; + display: table; +} +article > footer { + color: #c5c5c5; +} +article > footer p { + font-style: italic; + font-size: 0.85rem; + text-indent: 0; +} + +/* Article -- dynamic section headers */ +article section:target { + margin-left: -1.0rem; + border-left-style: solid; + border-left-width: 0.25rem; + padding-left: 0.75rem; + border-color: #a5c9ea; +} +article > header h1 a, article section > h2 a, article section > h3 a, +article section > h4 a, article section > h5 a, article section > h6 a { + text-decoration: none; +} + +/* Jumbo article */ +article.m-jumbo { + margin-top: -1rem; +} +article.m-jumbo > header .m-jumbo-image { + background-size: cover; + background-color: #666666; + background-position: center center; + background-repeat: no-repeat; + font-size: 2.5vh; + height: 60vh; + margin-bottom: 1rem; + padding-top: 1rem; +} +article.m-jumbo > header .m-jumbo-cover { + background: linear-gradient(transparent 0%, transparent 50%, #2f363f 100%); + width: 100%; + height: 100%; +} +article.m-jumbo > header h1, article.m-jumbo > header h2 { + text-align: center; + font-weight: bold; +} +article.m-jumbo > header h1 { + font-size: 10vh; +} +article.m-jumbo > header h2 { + font-size: 3vh; +} +article.m-jumbo > header a { + text-decoration: none; +} + +article.m-jumbo > header, article.m-jumbo > header h1, article.m-jumbo > header a { + color: #ffffff; +} +article.m-jumbo > header a:hover, article.m-jumbo > header a:focus, article.m-jumbo > header a:active { + color: #f0f0f0; +} + +article.m-jumbo.m-inverted > header, article.m-jumbo.m-inverted > header h1, article.m-jumbo.m-inverted > header a { + color: #000000; +} +article.m-jumbo.m-inverted > header a:hover, article.m-jumbo.m-inverted > header a:focus, article.m-jumbo.m-inverted > header a:active { + color: #0f0f0f; +} + +/* Article pagination */ +.m-article-pagination { + text-align: center; + padding: 1rem; +} + +/* Right navigation panel */ +nav.m-navpanel { + text-align: center; +} +nav.m-navpanel h3 { + text-transform: uppercase; + font-weight: normal; +} +nav.m-navpanel ol { + text-transform: lowercase; +} +nav.m-navpanel ol, nav.m-navpanel ul { + list-style-type: none; + padding: 0; +} +nav.m-navpanel a { + color: #ffffff; + text-decoration: none; +} +nav.m-navpanel a:hover, nav.m-navpanel a:focus, nav.m-navpanel a:active { + color: #a5c9ea; +} + +/* Tag cloud */ +ul.m-tagcloud li { display: inline; } +ul.m-tagcloud li.m-tag-1 { font-size: 0.75rem; } +ul.m-tagcloud li.m-tag-2 { font-size: 0.825rem; } +ul.m-tagcloud li.m-tag-3 { font-size: 1rem; } +ul.m-tagcloud li.m-tag-4 { font-size: 1.25rem; } +ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; } + +/* Utility */ +div.m-scroll { + max-width: 100%; + overflow-x: auto; +} +.m-fullwidth { + width: 100%; +} +.m-text-center, .m-text-center.m-noindent { + text-align: center; +} +.m-text-left, .m-text-left.m-noindent { + text-align: left; +} +.m-text-right, .m-text-right.m-noindent { + text-align: right; +} + +/* Lists */ +ul.m-unstyled, ol.m-unstyled { + list-style-type: none; + padding-left: 0; +} +ul[class*='m-block-'], ol[class*='m-block-'] { + padding-left: 0; +} +ul[class*='m-block-'] li, ol[class*='m-block-'] li { + display: inline; +} +ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after { + content: " | "; +} +@media screen and (min-width: 576px) { + ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; } + ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; } + ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; } +} +@media screen and (min-width: 768px) { + ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; } + ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; } + ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; } +} +@media screen and (min-width: 992px) { + ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; } + ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; } + ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; } +} + +/* Special paragraph styling */ +p.m-poem { + text-indent: 0; + text-align: left; + margin-left: 1.5rem; +} +p.m-transition { + color: #405363; + text-indent: 0; + text-align: center; + font-size: 2rem; +} + +/* Definition list styling */ +dl.m-diary { + margin-bottom: 1.25rem; +} +dl.m-diary:last-child { + margin-bottom: 0.25rem; +} +dl.m-diary dt { + font-weight: bold; + width: 3.5rem; + float: left; + clear: both; + padding-top: 0.25rem; +} +dl.m-diary dd { + padding-top: 0.25rem; + padding-left: 3.5rem; +} + +/* Note, frame, block */ +.m-note { + border-radius: 0.2rem; + padding: 1rem; +} +.m-frame { + background-color: #2f363f; + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; + border-color: #405363; + padding: 0.875rem; +} +.m-block { + border-style: solid; + border-width: 0.0625rem; + border-left-width: 0.25rem; + border-radius: 0.2rem; + border-color: #405363; + padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem; +} + +/* Tables */ +table.m-table { + border-collapse: collapse; +} +div.m-scroll > table.m-table:last-child { + margin-bottom: 0.0625rem; +} +table.m-table tbody tr:hover { + background-color: #405363; +} +table.m-table th, table.m-table td { + vertical-align: top; + border-style: solid; + border-top-width: 0.0625rem; + border-left-width: 0; + border-right-width: 0; + border-bottom-width: 0; + border-color: #405363; +} +table.m-table caption { + padding-bottom: 0.5rem; +} +table.m-table thead tr:first-child th, table.m-table thead tr:first-child td { + border-top-width: 0.125rem; +} +table.m-table thead th, table.m-table thead td { + border-bottom-width: 0.125rem; + vertical-align: bottom; +} +table.m-table tfoot th, table.m-table tfoot td { + border-top-width: 0.125rem; +} +table.m-table th, table.m-table td { + padding: 0.5rem; +} +table.m-table th { + text-align: left; +} +table.m-table td.m-default, th.m-default, +table.m-table td.m-primary, th.m-primary, +table.m-table td.m-success, th.m-success, +table.m-table td.m-warning, th.m-warning, +table.m-table td.m-danger, th.m-danger, +table.m-table td.m-info, th.m-info, +table.m-table td.m-dim, th.m-dim { + padding-left: 0.4375rem; + padding-right: 0.4375rem; + border-left-width: 0.0625rem; +/* border-right-width: 0.0625rem; causes horizontal scrollbar */ +} + +table.m-table tr.m-default td, table.m-table td.m-default, +table.m-table tr.m-default th, table.m-table th.m-default, +table.m-table tr.m-primary td, table.m-table td.m-primary, +table.m-table tr.m-primary th, table.m-table th.m-primary, +table.m-table tr.m-success td, table.m-table td.m-success, +table.m-table tr.m-success th, table.m-table th.m-success, +table.m-table tr.m-warning td, table.m-table td.m-warning, +table.m-table tr.m-warning th, table.m-table th.m-warning, +table.m-table tr.m-danger td, table.m-table td.m-danger, +table.m-table tr.m-danger th, table.m-table th.m-danger, +table.m-table tr.m-info td, table.m-table td.m-info, +table.m-table tr.m-info th, table.m-table th.m-info, +table.m-table tr.m-dim td, table.m-table td.m-dim, +table.m-table tr.m-dim th, table.m-table th.m-dim { + border-color: #2f363f; +} + +/* Colored block */ +.m-block.m-default { border-left-color: #405363; } +.m-block.m-default h3 { color: #dcdcdc; } +.m-block.m-primary { border-left-color: #2f83cc; } +.m-block.m-primary h3 { color: #2f83cc; } +.m-block.m-success { border-left-color: #3bd267; } +.m-block.m-success h3 { color: #3bd267; } +.m-block.m-warning { border-left-color: #c7cf2f; } +.m-block.m-warning h3 { color: #c7cf2f; } +.m-block.m-danger { border-left-color: #cd3431; } +.m-block.m-danger h3 { color: #cd3431; } +.m-block.m-info { border-left-color: #a5c9ea; } +.m-block.m-info h3 { color: #a5c9ea; } +.m-block.m-dim { + border-left-color: #747474; + color: #747474; +} +.m-block.m-dim a { color: #acacac; } +.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active { + color: #747474; +} +.m-block.m-flat { border-color: transparent; } +.m-block.m-flat h3 { color: #dcdcdc; } + +/* Colored note, table coloring */ +.m-note.m-default { background-color: #34424d; } +.m-note.m-default, table.m-table tr.m-default td, table.m-table td.m-default, + table.m-table tr.m-default th, table.m-table th.m-default { + /* No background for default table to keep the row hover */ + color: #dcdcdc; +} +.m-note.m-primary a:hover, table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover, + table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover, +.m-note.m-primary a:focus, table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus, + table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus, +.m-note.m-primary a:active, table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active, + table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active { + color: #a5c9ea; +} +.m-note.m-primary a, table.m-table tr.m-primary td a, table.m-table td.m-primary a, + table.m-table tr.m-primary th a, table.m-table th.m-primary a { + color: #5b9dd9; +} + +.m-note.m-primary, table.m-table tr.m-primary td, table.m-table td.m-primary, + table.m-table tr.m-primary th, table.m-table th.m-primary { + background-color: #a5c2db; + color: #2f363f; +} +.m-note.m-primary a, table.m-table tr.m-primary td a, table.m-table td.m-primary a, + table.m-table tr.m-primary th a, table.m-table th.m-primary a { + color: #2a75b6; +} +.m-note.m-primary a:hover, table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover, + table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover, +.m-note.m-primary a:focus, table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus, + table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus, +.m-note.m-primary a:active, table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active, + table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active { + color: #2f363f; +} +.m-note.m-success, table.m-table tr.m-success td, table.m-table td.m-success, + table.m-table tr.m-success th, table.m-table th.m-success { + background-color: #2a703f; + color: #acecbe; +} +.m-note.m-success a, table.m-table tr.m-success td a, table.m-table td.m-success a, + table.m-table tr.m-success th a, table.m-table th.m-success a { + color: #3bd267; +} +.m-note.m-success a:hover, table.m-table tr.m-success td a:hover, table.m-table td.m-success a:hover, + table.m-table tr.m-success th a:hover, table.m-table th.m-success a:hover, +.m-note.m-success a:focus, table.m-table tr.m-success td a:focus, table.m-table td.m-success a:focus, + table.m-table tr.m-success th a:focus, table.m-table th.m-success a:focus, +.m-note.m-success a:active, table.m-table tr.m-success td a:active, table.m-table td.m-success a:active, + table.m-table tr.m-success th a:active, table.m-table th.m-success a:active { + color: #acecbe; +} +.m-note.m-warning, table.m-table tr.m-warning td, table.m-table td.m-warning, + table.m-table tr.m-warning th, table.m-table th.m-warning { + background-color: #6d702a; + color: #e9ecae; +} +.m-note.m-warning a, table.m-table tr.m-warning td a, table.m-table td.m-warning a, + table.m-table tr.m-warning th a, table.m-table th.m-warning a { + color: #b8bf2b; +} +.m-note.m-warning a:hover, table.m-table tr.m-warning td a:hover, table.m-table td.m-warning a:hover, + table.m-table tr.m-warning th a:hover, table.m-table th.m-warning a:hover, +.m-note.m-warning a:focus, table.m-table tr.m-warning td a:focus, table.m-table td.m-warning a:focus, + table.m-table tr.m-warning th a:focus, table.m-table th.m-warning a:focus, +.m-note.m-warning a:active, table.m-table tr.m-warning td a:active, table.m-table td.m-warning a:active, + table.m-table tr.m-warning th a:active, table.m-table th.m-warning a:active { + color: #e9ecae; +} +.m-note.m-danger, table.m-table tr.m-danger td, table.m-table td.m-danger, + table.m-table tr.m-danger th, table.m-table th.m-danger { + background-color: #702b2a; + color: #ff9391; +} +.m-note.m-danger a, table.m-table tr.m-danger td a, table.m-table td.m-danger a, + table.m-table tr.m-danger th a, table.m-table th.m-danger a { + color: #d85c59; +} +.m-note.m-danger a:hover, table.m-table tr.m-danger td a:hover, table.m-table td.m-danger a:hover, + table.m-table tr.m-danger th a:hover, table.m-table th.m-danger a:hover, +.m-note.m-danger a:focus, table.m-table tr.m-danger td a:focus, table.m-table td.m-danger a:focus, + table.m-table tr.m-danger th a:focus, table.m-table th.m-danger a:focus, +.m-note.m-danger a:active, table.m-table tr.m-danger td a:active, table.m-table td.m-danger a:active, + table.m-table tr.m-danger th a:active, table.m-table th.m-danger a:active { + color: #ff9391; +} +.m-note.m-info, table.m-table tr.m-info td, table.m-table td.m-info, + table.m-table tr.m-info th, table.m-table th.m-info { + background-color: #2a4f70; + color: #a5caeb; +} +.m-note.m-info a, table.m-table tr.m-info td a, table.m-table td.m-info a, + table.m-table tr.m-info th a, table.m-table th.m-info a { + color: #5297d7; +} +.m-note.m-info a:hover, table.m-table tr.m-info td a:hover, table.m-table td.m-info a:hover, + table.m-table tr.m-info th a:hover, table.m-table th.m-info a:hover, +.m-note.m-info a:focus, table.m-table tr.m-info td a:focus, table.m-table td.m-info a:focus, + table.m-table tr.m-info th a:focus, table.m-table th.m-info a:focus, +.m-note.m-info a:active, table.m-table tr.m-info td a:active, table.m-table td.m-info a:active, + table.m-table tr.m-info th a:active, table.m-table th.m-info a:active { + color: #a5caeb; +} +.m-note.m-dim, table.m-table tr.m-dim td, table.m-table td.m-dim, + table.m-table tr.m-dim th, table.m-table th.m-dim { + background-color: #2d3236; + color: #747474; +} +.m-note.m-dim a, table.m-table tr.m-dim td a, table.m-table td.m-dim a, + table.m-table tr.m-dim th a, table.m-table th.m-dim a { + color: #acacac; +} +.m-note.m-dim a:hover, table.m-table tr.m-dim td a:hover, table.m-table td.m-dim a:hover, + table.m-table tr.m-dim th a:hover, table.m-table th.m-dim a:hover, +.m-note.m-dim a:focus, table.m-table tr.m-dim td a:focus, table.m-table td.m-dim a:focus, + table.m-table tr.m-dim th a:focus, table.m-table th.m-dim a:focus, +.m-note.m-dim a:active, table.m-table tr.m-dim td a:active, table.m-table td.m-dim a:active, + table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active { + color: #747474; +} + +/* Colored text */ +.m-text.m-default { color: #dcdcdc; } +.m-text.m-primary { color: #2f83cc; } +.m-text.m-success { color: #3bd267; } +.m-text.m-warning { color: #c7cf2f; } +.m-text.m-danger { color: #cd3431; } +.m-text.m-info { color: #a5c9ea; } +.m-text.m-dim { color: #747474; } +.m-text.m-dim a { color: #acacac; } +.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active { + color: #747474; +} + +/* Image */ +img.m-image { + display: block; + margin-left: auto; + margin-right: auto; +} +div.m-image { + text-align: center; +} +img.m-image, div.m-image img { + max-width: 100%; + border-radius: 0.2rem; +} +div.m-image.m-fullwidth img { + width: 100%; +} + +/* Figure */ +figure.m-figure { + max-width: 100%; + margin-top: 0; + margin-left: auto; + margin-right: auto; + position: relative; + display: table; +} +figure.m-figure:before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; /* so it doesn't make the contents inactive */ + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; + border-color: #405363; +} +figure.m-figure.m-flat:before { + border-color: transparent; +} +figure.m-figure > * { + margin-left: 1rem; + margin-right: 1rem; +} +figure.m-figure:after { + content: ' '; + display: block; + margin-top: 1rem; + height: 1px; +} +figure.m-figure img { + position: relative; /* so it's above the border */ + margin-left: 0; + margin-right: 0; + margin-bottom: 0; + border-top-left-radius: 0.2rem; + border-top-right-radius: 0.2rem; +} +figure.m-figure figcaption { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + font-weight: bold; + font-size: 1.17rem; /* taken from webkit defaults for h3 */ +} +figure.m-figure a img { + margin-left: -1rem; + margin-right: -1rem; +} +figure.m-figure.m-fullwidth { + display: block; +} +figure.m-figure.m-fullwidth img { + width: 100%; +} + +/* Code figure */ +figure.m-code-figure { + margin-top: 0; + margin-left: 0; + margin-right: 0; + position: relative; + padding: 1rem; +} +figure.m-code-figure:before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; /* so it doesn't make the contents inactive */ + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; + border-color: #34424d; /* to match the
 background */
+}
+figure.m-code-figure.m-flat:before {
+  border-color: transparent;
+}
+figure.m-code-figure > pre:first-child {
+  position: relative; /* so it's above the border */
+  margin: -1rem -1rem 1rem -1rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+article section:target figure.m-code-figure {
+  z-index: 1; /* so the selection border isn't above figure border */
+}
+
+/* Image grid */
+.m-imagegrid > figure {
+  display: block;
+  float: left;
+  position: relative;
+  margin: 0;
+}
+.m-imagegrid > figure > div,
+.m-imagegrid > figure > figcaption,
+.m-imagegrid > figure > a > div,
+.m-imagegrid > figure > a > figcaption {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-color: #2f363f;
+  border-style: solid;
+  border-width: 0.25rem;
+  padding: 0.5rem;
+}
+.m-imagegrid > figure > figcaption,
+.m-imagegrid > figure > a > figcaption {
+  color: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+}
+.m-imagegrid > figure > div::before,
+.m-imagegrid > figure > figcaption::before,
+.m-imagegrid > figure > a > div::before,
+.m-imagegrid > figure > a > figcaption::before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: bottom;
+  width: 0;
+}
+.m-imagegrid > figure:hover > figcaption,
+.m-imagegrid > figure:hover > a > figcaption {
+  background: linear-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.85) 100%);
+  color: #ffffff;
+}
+.m-imagegrid > figure > img,
+.m-imagegrid > figure > a > img {
+  width: 100%;
+  height: 100%;
+}
+.m-imagegrid::after {
+  display: block;
+  content: ' ';
+  clear: both;
+}
+
+@media screen and (max-width: 767px) {
+  .m-imagegrid > figure {
+    float: none;
+    width: 100% !important;
+  }
+}
+
+/* Inflatable content */
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
+#m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
+  margin: 0 -1rem 1rem -1rem;
+}
+
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid {
+  margin: 0 -1.25rem 1rem -1.25rem;
+}
+@media screen and (min-width: 576px) {
+  #m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+@media screen and (min-width: 768px) {
+  #m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+@media screen and (min-width: 992px) {
+  #m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+
+/* Active sections in inflatable content affect left border of some components */
+#m-container-inflatable section:target > .m-note,
+#m-container-inflatable section:target > .m-frame,
+#m-container-inflatable section:target > .m-block,
+#m-container-inflatable section:target > pre.m-code,
+#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+#m-container-inflatable section:target section > .m-note,
+#m-container-inflatable section:target section > .m-frame,
+#m-container-inflatable section:target section > .m-block,
+#m-container-inflatable section:target section > pre.m-code,
+#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+  margin-left: -1.0rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: 0.75rem;
+}
+#m-container-inflatable section:target > figure.m-code-figure::before,
+#m-container-inflatable section:target section > figure.m-code-figure::before {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left-width: 0.25rem;
+}
+#m-container-inflatable section:target > pre.m-code,
+#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+#m-container-inflatable section:target section > pre.m-code,
+#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+  border-color: #405363;
+}
+#m-container-inflatable section:target > .m-note.m-default,
+#m-container-inflatable section:target section > .m-note.m-default {
+  border-left-color: #405363;
+}
+#m-container-inflatable section:target > .m-note.m-primary,
+#m-container-inflatable section:target section > .m-note.m-primary {
+  border-left-color: #2f83cc;
+}
+#m-container-inflatable section:target > .m-note.m-success,
+#m-container-inflatable section:target section > .m-note.m-success {
+  border-left-color: #3bd267;
+}
+#m-container-inflatable section:target > .m-note.m-warning,
+#m-container-inflatable section:target section > .m-note.m-warning {
+  border-left-color: #c7cf2f;
+}
+#m-container-inflatable section:target > .m-note.m-danger,
+#m-container-inflatable section:target section > .m-note.m-danger {
+  border-left-color: #cd3431;
+}
+#m-container-inflatable section:target > .m-note.m-info,
+#m-container-inflatable section:target section > .m-note.m-info {
+  border-left-color: #a5c9ea;
+}
+#m-container-inflatable section:target > .m-note.m-dim,
+#m-container-inflatable section:target section > .m-note.m-dim {
+  border-left-color: #747474;
+}
+
+/* Code block (uses Pygments CSS classes) */
+pre.m-code span.hll {
+  border-color: #405363;
+  margin-left: -1.0rem;
+  margin-right: -1.0rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  padding-left: 0.75rem;
+}
+pre.m-code.m-inverted {
+  color: rgba(230, 230, 230, 0.33);
+}
+pre.m-code.m-inverted > span {
+  opacity: 0.3333;
+}
+pre.m-code.m-inverted > span.hll {
+  color: #dcdcdc;
+  opacity: 1;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* Math block, inline math */
+div.m-math {
+  text-align: center;
+}
+
+/* Colored math block, inline math */
+div.m-math svg, svg.m-math { fill: #dcdcdc; }
+div.m-math.m-default svg, svg.m-math.m-default { fill: #dcdcdc; }
+div.m-math.m-primary svg, svg.m-math.m-primary { fill: #2f83cc; }
+div.m-math.m-success svg, svg.m-math.m-success { fill: #3bd267; }
+div.m-math.m-warning svg, svg.m-math.m-warning { fill: #c7cf2f; }
+div.m-math.m-danger svg, svg.m-math.m-danger { fill: #cd3431; }
+div.m-math.m-info svg, svg.m-math.m-info { fill: #a5c9ea; }
+div.m-math.m-dim svg, svg.m-math.m-dim { fill: #747474; }
+
+/* Spacing after every block element, but not after the last */
+p, ul, ol, dl, blockquote, hr, pre, figure.m-code-figure,
+article, article > header, article section,
+.m-note, .m-frame, .m-block,
+div.m-scroll, table.m-table, div.m-image, img.m-image,
+figure.m-figure, .m-imagegrid, div.m-math {
+  margin-bottom: 1rem;
+}
+p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child,
+hr:last-child, pre:last-child, figure.m-code-figure:last-child,
+article:last-child, article section:last-child,
+.m-note:last-child, .m-frame:last-child, .m-block:last-child,
+table.m-table:last-child, img.m-image:last-child, div.m-image:last-child,
+figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child {
+  margin-bottom: 0;
+}
+
+/* kate: indent-width 2; */
+
+.m-code .hll { background-color: #405363 }
+.m-code .c { color: #a5c9ea } /* Comment */
+.m-code .k { color: #ffffff; font-weight: bold } /* Keyword */
+.m-code .n { color: #dcdcdc } /* Name */
+.m-code .o { color: #aaaaaa } /* Operator */
+.m-code .p { color: #aaaaaa } /* Punctuation */
+.m-code .ch { color: #a5c9ea } /* Comment.Hashbang */
+.m-code .cm { color: #a5c9ea } /* Comment.Multiline */
+.m-code .cp { color: #3bd267 } /* Comment.Preproc */
+.m-code .cpf { color: #c7cf2f } /* Comment.PreprocFile */
+.m-code .c1 { color: #a5c9ea } /* Comment.Single */
+.m-code .cs { color: #a5c9ea } /* Comment.Special */
+.m-code .kc { color: #ffffff; font-weight: bold } /* Keyword.Constant */
+.m-code .kd { color: #ffffff; font-weight: bold } /* Keyword.Declaration */
+.m-code .kn { color: #ffffff; font-weight: bold } /* Keyword.Namespace */
+.m-code .kp { color: #ffffff; font-weight: bold } /* Keyword.Pseudo */
+.m-code .kr { color: #ffffff; font-weight: bold } /* Keyword.Reserved */
+.m-code .kt { color: #ffffff; font-weight: bold } /* Keyword.Type */
+.m-code .m { color: #c7cf2f } /* Literal.Number */
+.m-code .s { color: #e07f7c } /* Literal.String */
+.m-code .na { color: #dcdcdc } /* Name.Attribute */
+.m-code .nb { color: #ffffff; font-weight: bold } /* Name.Builtin */
+.m-code .nc { color: #dcdcdc } /* Name.Class */
+.m-code .no { color: #dcdcdc } /* Name.Constant */
+.m-code .nd { color: #dcdcdc } /* Name.Decorator */
+.m-code .ni { color: #dcdcdc } /* Name.Entity */
+.m-code .ne { color: #dcdcdc } /* Name.Exception */
+.m-code .nf { color: #dcdcdc } /* Name.Function */
+.m-code .nl { color: #dcdcdc } /* Name.Label */
+.m-code .nn { color: #dcdcdc } /* Name.Namespace */
+.m-code .nx { color: #dcdcdc } /* Name.Other */
+.m-code .py { color: #dcdcdc } /* Name.Property */
+.m-code .nt { color: #dcdcdc } /* Name.Tag */
+.m-code .nv { color: #c7cf2f } /* Name.Variable */
+.m-code .ow { color: #aaaaaa } /* Operator.Word */
+.m-code .mb { color: #c7cf2f } /* Literal.Number.Bin */
+.m-code .mf { color: #c7cf2f } /* Literal.Number.Float */
+.m-code .mh { color: #c7cf2f } /* Literal.Number.Hex */
+.m-code .mi { color: #c7cf2f } /* Literal.Number.Integer */
+.m-code .mo { color: #c7cf2f } /* Literal.Number.Oct */
+.m-code .sa { color: #e07f7c } /* Literal.String.Affix */
+.m-code .sb { color: #e07f7c } /* Literal.String.Backtick */
+.m-code .sc { color: #e07cdc } /* Literal.String.Char */
+.m-code .dl { color: #e07f7c } /* Literal.String.Delimiter */
+.m-code .sd { color: #e07f7c } /* Literal.String.Doc */
+.m-code .s2 { color: #e07f7c } /* Literal.String.Double */
+.m-code .se { color: #e07f7c } /* Literal.String.Escape */
+.m-code .sh { color: #e07f7c } /* Literal.String.Heredoc */
+.m-code .si { color: #e07f7c } /* Literal.String.Interpol */
+.m-code .sx { color: #e07f7c } /* Literal.String.Other */
+.m-code .sr { color: #e07f7c } /* Literal.String.Regex */
+.m-code .s1 { color: #e07f7c } /* Literal.String.Single */
+.m-code .ss { color: #e07f7c } /* Literal.String.Symbol */
+.m-code .bp { color: #ffffff; font-weight: bold } /* Name.Builtin.Pseudo */
+.m-code .fm { color: #dcdcdc } /* Name.Function.Magic */
+.m-code .vc { color: #c7cf2f } /* Name.Variable.Class */
+.m-code .vg { color: #c7cf2f } /* Name.Variable.Global */
+.m-code .vi { color: #c7cf2f } /* Name.Variable.Instance */
+.m-code .vm { color: #c7cf2f } /* Name.Variable.Magic */
+.m-code .il { color: #c7cf2f } /* Literal.Number.Integer.Long */
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
new file mode 100644
index 00000000..6bfdb482
--- /dev/null
+++ b/css/m-light.compiled.css
@@ -0,0 +1,1504 @@
+/* Generated using `./postprocess.py m-light.css`. Do not edit. */
+
+/* Important basics */
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+body {
+  font-size: 1rem;
+  margin: 0;
+}
+
+/* 12-column layout. Inspired by Bootstrap and
+   https://www.w3schools.com/css/css_rwd_grid.asp */
+.m-container {
+  width: 100%;
+  margin: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.m-row {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+.m-row:after { /* avoid rows floating around each other */
+  content: ' ';
+  clear: both;
+  display: table;
+}
+[class*='m-col-'] {
+  position: relative;
+  padding: 1rem;
+}
+[class*='m-clearfix-']::after {
+  display: block;
+  content: ' ';
+  clear: both;
+}
+[class*='m-show-'] {
+  display: none;
+}
+[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s,
+[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m,
+[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s,
+.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m,
+.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l  .m-row > [class*='m-col-'].m-center-l {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.m-container.m-nopad, [class*='m-col-'].m-nopad,
+.m-container.m-nopadx, [class*='m-col-'].m-nopadx,
+.m-container.m-nopadl, [class*='m-col-'].m-nopadl {
+  padding-left: 0;
+}
+.m-container.m-nopad, [class*='m-col-'].m-nopad,
+.m-container.m-nopadx, [class*='m-col-'].m-nopadx,
+.m-container.m-nopadr, [class*='m-col-'].m-nopadr {
+  padding-right: 0;
+}
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt {
+  padding-top: 0;
+}
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb {
+  padding-bottom: 0;
+}
+
+/* 12-column layout -- T (portrait phones) */
+[class*='m-col-t-'] { float: left; }
+
+[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.m-left-t {
+  float: left;
+}
+.m-right-t, [class*='m-col-t-'].m-right-t {
+  float: right;
+}
+.m-center-t, [class*='m-col-t-'].m-center-t {
+  float: none;
+}
+[class*='m-col-t-'].m-left-t {
+  margin-left: -1rem;
+}
+[class*='m-col-t-'].m-right-t {
+  margin-right: -1rem;
+}
+.m-row > [class*='m-col-t-'].m-left-t {
+  margin-left: 0;
+}
+.m-row > [class*='m-col-t-'].m-right-t {
+  margin-right: 0;
+}
+.m-center-t, [class*='m-col-t-'].m-center-t {
+  margin-left: auto;
+  margin-right: auto;
+  float: none;
+}
+
+.m-col-t-1  { width: calc(1  * 100% / 12); }
+.m-col-t-2  { width: calc(2  * 100% / 12); }
+.m-col-t-3  { width: calc(3  * 100% / 12); }
+.m-col-t-4  { width: calc(4  * 100% / 12); }
+.m-col-t-5  { width: calc(5  * 100% / 12); }
+.m-col-t-6  { width: calc(6  * 100% / 12); }
+.m-col-t-7  { width: calc(7  * 100% / 12); }
+.m-col-t-8  { width: calc(8  * 100% / 12); }
+.m-col-t-9  { width: calc(9  * 100% / 12); }
+.m-col-t-10 { width: calc(10 * 100% / 12); }
+.m-col-t-11 { width: calc(11 * 100% / 12); }
+.m-col-t-12 { width: calc(12 * 100% / 12); }
+
+.m-push-t-1  { left: calc(1  * 100% / 12); }
+.m-push-t-2  { left: calc(2  * 100% / 12); }
+.m-push-t-3  { left: calc(3  * 100% / 12); }
+.m-push-t-4  { left: calc(4  * 100% / 12); }
+.m-push-t-5  { left: calc(5  * 100% / 12); }
+.m-push-t-6  { left: calc(6  * 100% / 12); }
+.m-push-t-7  { left: calc(7  * 100% / 12); }
+.m-push-t-8  { left: calc(8  * 100% / 12); }
+.m-push-t-9  { left: calc(9  * 100% / 12); }
+.m-push-t-10 { left: calc(10 * 100% / 12); }
+.m-push-t-11 { left: calc(11 * 100% / 12); }
+
+.m-pull-t-1  { right: calc(1  * 100% / 12); }
+.m-pull-t-2  { right: calc(2  * 100% / 12); }
+.m-pull-t-3  { right: calc(3  * 100% / 12); }
+.m-pull-t-4  { right: calc(4  * 100% / 12); }
+.m-pull-t-5  { right: calc(5  * 100% / 12); }
+.m-pull-t-6  { right: calc(6  * 100% / 12); }
+.m-pull-t-7  { right: calc(7  * 100% / 12); }
+.m-pull-t-8  { right: calc(8  * 100% / 12); }
+.m-pull-t-9  { right: calc(9  * 100% / 12); }
+.m-pull-t-10 { right: calc(10 * 100% / 12); }
+.m-pull-t-11 { right: calc(11 * 100% / 12); }
+
+/* 12-column layout -- S, 576px and up (landscape phones) */
+@media screen and (min-width: 576px) {
+  .m-container { width: 560px; }
+
+  #m-container-inflatable .m-col-s-10 .m-container-inflate {
+    margin-left: -10%;
+    margin-right: -10%;
+  }
+
+  [class*='m-col-s-'] { float: left; }
+
+  [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .m-left-s {
+    float: left;
+  }
+  .m-right-s, [class*='m-col-s-'].m-right-s {
+    float: right;
+  }
+  [class*='m-col-s-'].m-left-s {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  [class*='m-col-s-'].m-right-s {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
+  .m-row > [class*='m-col-s-'].m-left-s {
+    margin-left: 0;
+  }
+  .m-row > [class*='m-col-s-'].m-right-s {
+    margin-right: 0;
+  }
+  .m-center-s, [class*='m-col-s-'].m-center-s {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
+
+  .m-col-s-1  { width: calc(1  * 100% / 12); }
+  .m-col-s-2  { width: calc(2  * 100% / 12); }
+  .m-col-s-3  { width: calc(3  * 100% / 12); }
+  .m-col-s-4  { width: calc(4  * 100% / 12); }
+  .m-col-s-5  { width: calc(5  * 100% / 12); }
+  .m-col-s-6  { width: calc(6  * 100% / 12); }
+  .m-col-s-7  { width: calc(7  * 100% / 12); }
+  .m-col-s-8  { width: calc(8  * 100% / 12); }
+  .m-col-s-9  { width: calc(9  * 100% / 12); }
+  .m-col-s-10 { width: calc(10 * 100% / 12); }
+  .m-col-s-11 { width: calc(11 * 100% / 12); }
+  .m-col-s-12 { width: calc(12 * 100% / 12); }
+
+  .m-push-s-0  { left: calc(0  * 100% / 12); }
+  .m-push-s-1  { left: calc(1  * 100% / 12); }
+  .m-push-s-2  { left: calc(2  * 100% / 12); }
+  .m-push-s-3  { left: calc(3  * 100% / 12); }
+  .m-push-s-4  { left: calc(4  * 100% / 12); }
+  .m-push-s-5  { left: calc(5  * 100% / 12); }
+  .m-push-s-6  { left: calc(6  * 100% / 12); }
+  .m-push-s-7  { left: calc(7  * 100% / 12); }
+  .m-push-s-8  { left: calc(8  * 100% / 12); }
+  .m-push-s-9  { left: calc(9  * 100% / 12); }
+  .m-push-s-10 { left: calc(10 * 100% / 12); }
+  .m-push-s-11 { left: calc(11 * 100% / 12); }
+
+  .m-pull-s-0  { right: calc(0  * 100% / 12); }
+  .m-pull-s-1  { right: calc(1  * 100% / 12); }
+  .m-pull-s-2  { right: calc(2  * 100% / 12); }
+  .m-pull-s-3  { right: calc(3  * 100% / 12); }
+  .m-pull-s-4  { right: calc(4  * 100% / 12); }
+  .m-pull-s-5  { right: calc(5  * 100% / 12); }
+  .m-pull-s-6  { right: calc(6  * 100% / 12); }
+  .m-pull-s-7  { right: calc(7  * 100% / 12); }
+  .m-pull-s-8  { right: calc(8  * 100% / 12); }
+  .m-pull-s-9  { right: calc(9  * 100% / 12); }
+  .m-pull-s-10 { right: calc(10 * 100% / 12); }
+  .m-pull-s-11 { right: calc(11 * 100% / 12); }
+
+  .m-clearfix-t::after { display: none; }
+
+  .m-hide-s { display: none; }
+  .m-show-s { display: block; }
+
+  .m-col-s-none {
+    width: auto;
+    float: none;
+  }
+}
+
+/* 12-column layout -- M, 768px and up (tablets, small desktops) */
+@media screen and (min-width: 768px) {
+  .m-container { width: 750px; }
+
+  #m-container-inflatable .m-col-m-10 .m-container-inflate {
+    margin-left: -10%;
+    margin-right: -10%;
+  }
+
+  [class*='m-col-m-'] { float: left; }
+
+  [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .m-left-m {
+    float: left;
+  }
+  .m-right-m, [class*='m-col-m-'].m-right-m {
+    float: right;
+  }
+  [class*='m-col-m-'].m-left-m {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  [class*='m-col-m-'].m-right-m {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
+  .m-row > [class*='m-col-m-'].m-left-m {
+    margin-left: 0;
+  }
+  .m-row > [class*='m-col-m-'].m-right-m {
+    margin-right: 0;
+  }
+  .m-center-m, [class*='m-col-m-'].m-center-m {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
+
+  .m-col-m-1  { width: calc(1  * 100% / 12); }
+  .m-col-m-2  { width: calc(2  * 100% / 12); }
+  .m-col-m-3  { width: calc(3  * 100% / 12); }
+  .m-col-m-4  { width: calc(4  * 100% / 12); }
+  .m-col-m-5  { width: calc(5  * 100% / 12); }
+  .m-col-m-6  { width: calc(6  * 100% / 12); }
+  .m-col-m-7  { width: calc(7  * 100% / 12); }
+  .m-col-m-8  { width: calc(8  * 100% / 12); }
+  .m-col-m-9  { width: calc(9  * 100% / 12); }
+  .m-col-m-10 { width: calc(10 * 100% / 12); }
+  .m-col-m-11 { width: calc(11 * 100% / 12); }
+  .m-col-m-12 { width: calc(12 * 100% / 12); }
+
+  .m-push-m-0  { left: calc(0  * 100% / 12); }
+  .m-push-m-1  { left: calc(1  * 100% / 12); }
+  .m-push-m-2  { left: calc(2  * 100% / 12); }
+  .m-push-m-3  { left: calc(3  * 100% / 12); }
+  .m-push-m-4  { left: calc(4  * 100% / 12); }
+  .m-push-m-5  { left: calc(5  * 100% / 12); }
+  .m-push-m-6  { left: calc(6  * 100% / 12); }
+  .m-push-m-7  { left: calc(7  * 100% / 12); }
+  .m-push-m-8  { left: calc(8  * 100% / 12); }
+  .m-push-m-9  { left: calc(9  * 100% / 12); }
+  .m-push-m-10 { left: calc(10 * 100% / 12); }
+  .m-push-m-11 { left: calc(11 * 100% / 12); }
+
+  .m-pull-m-0  { right: calc(0  * 100% / 12); }
+  .m-pull-m-1  { right: calc(1  * 100% / 12); }
+  .m-pull-m-2  { right: calc(2  * 100% / 12); }
+  .m-pull-m-3  { right: calc(3  * 100% / 12); }
+  .m-pull-m-4  { right: calc(4  * 100% / 12); }
+  .m-pull-m-5  { right: calc(5  * 100% / 12); }
+  .m-pull-m-6  { right: calc(6  * 100% / 12); }
+  .m-pull-m-7  { right: calc(7  * 100% / 12); }
+  .m-pull-m-8  { right: calc(8  * 100% / 12); }
+  .m-pull-m-9  { right: calc(9  * 100% / 12); }
+  .m-pull-m-10 { right: calc(10 * 100% / 12); }
+  .m-pull-m-11 { right: calc(11 * 100% / 12); }
+
+  .m-clearfix-s::after { display: none; }
+
+  .m-hide-m { display: none; }
+  .m-show-m { display: block; }
+
+  .m-col-m-none {
+    width: auto;
+    float: none;
+  }
+}
+
+/* 12-column layout -- L, 992px and up (desktops, very large tablets) */
+@media screen and (min-width: 992px) {
+  .m-container { width: 960px; }
+
+  #m-container-inflatable .m-col-l-10 .m-container-inflate {
+    margin-left: -10%;
+    margin-right: -10%;
+  }
+
+  [class*='m-col-l-'] { float: left; }
+
+  [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .m-left-l {
+    float: left;
+  }
+  .m-right-l, [class*='m-col-l-'].m-right-l {
+    float: right;
+  }
+  [class*='m-col-l-'].m-left-l {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  [class*='m-col-l-'].m-right-l {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
+  .m-row > [class*='m-col-l-'].m-left-l {
+    margin-left: 0;
+  }
+  .m-row > [class*='m-col-l-'].m-right-l {
+    margin-right: 0;
+  }
+  .m-center-l, [class*='m-col-l-'].m-center-l {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
+
+  .m-col-l-1  { width: calc(1  * 100% / 12); }
+  .m-col-l-2  { width: calc(2  * 100% / 12); }
+  .m-col-l-3  { width: calc(3  * 100% / 12); }
+  .m-col-l-4  { width: calc(4  * 100% / 12); }
+  .m-col-l-5  { width: calc(5  * 100% / 12); }
+  .m-col-l-6  { width: calc(6  * 100% / 12); }
+  .m-col-l-7  { width: calc(7  * 100% / 12); }
+  .m-col-l-8  { width: calc(8  * 100% / 12); }
+  .m-col-l-9  { width: calc(9  * 100% / 12); }
+  .m-col-l-10 { width: calc(10 * 100% / 12); }
+  .m-col-l-11 { width: calc(11 * 100% / 12); }
+  .m-col-l-12 { width: calc(12 * 100% / 12); }
+
+  .m-push-l-0  { left: calc(0  * 100% / 12); }
+  .m-push-l-1  { left: calc(1  * 100% / 12); }
+  .m-push-l-2  { left: calc(2  * 100% / 12); }
+  .m-push-l-3  { left: calc(3  * 100% / 12); }
+  .m-push-l-4  { left: calc(4  * 100% / 12); }
+  .m-push-l-5  { left: calc(5  * 100% / 12); }
+  .m-push-l-6  { left: calc(6  * 100% / 12); }
+  .m-push-l-7  { left: calc(7  * 100% / 12); }
+  .m-push-l-8  { left: calc(8  * 100% / 12); }
+  .m-push-l-9  { left: calc(9  * 100% / 12); }
+  .m-push-l-10 { left: calc(10 * 100% / 12); }
+  .m-push-l-11 { left: calc(11 * 100% / 12); }
+
+  .m-pull-l-0  { right: calc(0  * 100% / 12); }
+  .m-pull-l-1  { right: calc(1  * 100% / 12); }
+  .m-pull-l-2  { right: calc(2  * 100% / 12); }
+  .m-pull-l-3  { right: calc(3  * 100% / 12); }
+  .m-pull-l-4  { right: calc(4  * 100% / 12); }
+  .m-pull-l-5  { right: calc(5  * 100% / 12); }
+  .m-pull-l-6  { right: calc(6  * 100% / 12); }
+  .m-pull-l-7  { right: calc(7  * 100% / 12); }
+  .m-pull-l-8  { right: calc(8  * 100% / 12); }
+  .m-pull-l-9  { right: calc(9  * 100% / 12); }
+  .m-pull-l-10 { right: calc(10 * 100% / 12); }
+  .m-pull-l-11 { right: calc(11 * 100% / 12); }
+
+  .m-clearfix-m::after { display: none; }
+
+  .m-hide-l { display: none; }
+  .m-show-l { display: block; }
+
+  .m-col-l-none {
+    width: auto;
+    float: none;
+  }
+}
+
+#m-container-inflatable {
+  overflow-x: hidden;  /* needed by image grid :( */
+}
+
+/* kate: indent-width 2; */
+
+/* Globals */
+html {
+  font-size: 16px;
+  background-color: #ffffff;
+}
+body {
+  font-family: 'Libre Baskerville', serif;
+  color: #000000;
+}
+
+/* Block elements */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: normal;
+}
+p, ul, ol, dl {
+  margin-top: 0;
+}
+ul, ol {
+  padding-left: 2rem;
+}
+ul ol, ul ul, ol ol, ol ul {
+  margin-bottom: 0;
+}
+main p {
+  text-indent: 1.5rem;
+  text-align: justify;
+}
+main p.m-noindent {
+  text-indent: 0;
+  text-align: left;
+}
+blockquote {
+  margin-top: 0;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 1rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+}
+hr {
+  width: 75%;
+  border-width: 0.0625rem;
+  border-style: solid;
+}
+blockquote, hr {
+  border-color: #f7e3db;
+}
+pre {
+  font-family: 'Source Code Pro', monospace, monospace, monospace; /* https://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
+  font-size: 0.9rem;
+  padding: 0.5rem 1rem;
+  color: #5b5b5b;
+  background-color: #fbf0ec;
+  border-radius: 0.2rem;
+  overflow-x: auto;
+  margin-top: 0; /* stupid defaults */
+}
+
+/* Inline elements */
+abbr {
+  cursor: help;
+  text-decoration: underline dotted;
+}
+sub, sup { /* https://gist.github.com/unruthless/413930 */
+  font-size: 0.75rem;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup { top: -0.35rem; }
+sub { bottom: -0.2rem; }
+a {
+  color: #ea7944;
+}
+a:hover, a:focus, a:active {
+  color: #cb4b16;
+}
+mark {
+  padding: 0.0625rem;
+  background-color: #e6e69c;
+  color: #4c93d3;
+}
+code {
+  font-family: 'Source Code Pro', monospace, monospace, monospace;
+  font-size: 0.9rem;
+  padding: 0.125rem;
+  color: #5b5b5b;
+  background-color: #fbf0ec;
+}
+
+/* Header navigation */
+body > header {
+  width: 100%;
+}
+body > header > nav {
+  margin-left: auto;
+  margin-right: auto;
+  color: #000000;
+}
+body > header {
+  background-color: rgba(255, 255, 255, 0.75);
+}
+body > header > nav a {
+  text-decoration: none;
+  text-transform: lowercase;
+  line-height: 1.5rem;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: -0.5rem;
+  padding-left: 0.5rem;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 0 0 0 0.25rem;
+  color: #000000;
+}
+body > header > nav a#m-navbar-brand {
+  text-transform: lowercase;
+  font-size: 1.125rem;
+}
+body > header > nav #m-navbar-collapse {
+  padding-bottom: 1rem;
+}
+body > header > nav a#m-navbar-current {
+  color: #ea7944;
+  border-color: #ea7944;
+}
+body > header > nav li {
+  border-style: solid;
+  border-color: transparent;
+  border-width: 0 0 0 0.25rem;
+  margin-left: -0.5rem;
+}
+body > header > nav li a {
+  margin: 0 0 0 -0.25rem;
+  width: 100%;
+}
+body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
+  line-height: 3rem;
+  font-weight: normal;
+}
+body > header > nav ol {
+  list-style-type: none;
+  padding-left: 1rem;
+  margin: 0;
+}
+body > header > nav [class*='m-col-'] {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active {
+  color: #cb4b16;
+}
+body > header > nav li:hover {
+  border-color: #cb4b16;
+}
+body > header > nav li a:hover, body > header > nav li a:focus, body > header > nav li a:active {
+  border-color: #cb4b16;
+  background-color: rgba(255, 255, 255, 0.95);
+}
+
+/* Header navigation -- collapsible part */
+body > header > nav #m-navbar-hide {
+  display: none;
+}
+body > header > nav:target #m-navbar-collapse {
+  display: block;
+}
+body > header > nav:target #m-navbar-show {
+  display: none;
+}
+body > header > nav:target #m-navbar-hide {
+  display: inline-block;
+}
+
+/* Header navigation -- 768px and up (tablets, desktops) */
+@media screen and (min-width: 768px) {
+  body > header > nav #m-navbar-show, body > header > nav #m-navbar-hide,
+  body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide {
+    display: none;
+  }
+  body > header > nav #m-navbar-collapse {
+    padding-bottom: 0;
+  }
+  body > header > nav a {
+    line-height: 3rem;
+    margin-left: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    white-space: nowrap;
+  }
+  body > header > nav li ol {
+    background-color: rgba(255, 255, 255, 0.75);
+  }
+  body > header > nav ol ol li {
+    margin-left: 0;
+    padding-left: 0;
+    border-left-width: 0;
+  }
+  body > header > nav ol ol li a {
+    margin-left: 0;
+    padding-left: 0.75rem;
+  }
+  body > header > nav #m-navbar-collapse > .m-row > ol > li {
+    margin-left: 0;
+    border-left-width: 0;
+  }
+  body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-collapse > .m-row > ol > li > a {
+    line-height: 2.75rem;
+    margin-left: 0;
+    border-width: 0.25rem 0 0 0;
+  }
+  body > header > nav #m-navbar-collapse ol {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  body > header > nav #m-navbar-collapse > .m-row > ol, body > header > nav #m-navbar-collapse > .m-row > ol > li {
+    float: left;
+  }
+  body > header > nav #m-navbar-collapse ol ol {
+    z-index: 99999;
+    position: absolute;
+    visibility: hidden;
+    min-width: 7.5rem;
+  }
+  body > header > nav #m-navbar-collapse li:hover ol {
+    visibility: visible;
+  }
+}
+
+/* Footer navigation */
+body > footer {
+  width: 100%;
+}
+body > footer > nav {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  font-size: 0.85rem;
+  text-align: center;
+  color: #7c7c7c;
+  background-color: #eeeeee;
+}
+body > footer > nav h3, body > footer > nav h3 a {
+  text-transform: uppercase;
+  font-weight: normal;
+}
+body > footer > nav ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+body > footer > nav a {
+  text-decoration: none;
+  text-transform: lowercase;
+  color: #191919;
+}
+body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:active {
+  color: #494949;
+}
+
+/* Main content */
+body > main {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* Article elements */
+article > header h1 {
+  font-size: 2rem;
+}
+article > header h1, article > header h1 a,
+article section > h2, article section > h2 a,
+article section > h3, article section > h3 a,
+article section > h4, article section > h4 a,
+article section > h5, article section > h5 a,
+article section > h6, article section > h6 a {
+  color: #cb4b16;
+}
+article > header h1 a:hover, article > header h1 a:focus, article > header h1 a:active,
+article section > h2 a:hover, article section > h2 a:focus, article section > h2 a:active,
+article section > h3 a:hover, article section > h3 a:focus, article section > h3 a:active,
+article section > h4 a:hover, article section > h4 a:focus, article section > h4 a:active,
+article section > h5 a:hover, article section > h5 a:focus, article section > h5 a:active,
+article section > h6 a:hover, article section > h6 a:focus, article section > h6 a:active {
+  color: #802f0e;
+}
+article > header .m-date {
+  display: block;
+  width: 2.5rem;
+  float: left;
+  text-align: center;
+  line-height: 95%;
+  font-size: 0.75rem;
+  font-weight: normal;
+  white-space: nowrap;
+  border-right-style: solid;
+  border-right-width: 0.125rem;
+  border-color: #cb4b16;
+  padding-right: 0.75rem;
+  margin-top: -0.1rem;
+  margin-right: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+article > header .m-date-day {
+  display: block;
+  font-weight: bold;
+  padding-top: 0.2rem;
+  padding-bottom: 0.15rem;
+  font-size: 1.25rem;
+}
+article > header p {
+  color: #7a7a7a;
+  font-size: 1.125rem;
+}
+article > header h1::after {
+  content: " ";
+  clear: both;
+  display: table;
+}
+article > footer {
+  color: #969696;
+}
+article > footer p {
+  font-style: italic;
+  font-size: 0.85rem;
+  text-indent: 0;
+}
+
+/* Article -- dynamic section headers */
+article section:target {
+  margin-left: -1.0rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  padding-left: 0.75rem;
+  border-color: #cb4b16;
+}
+article > header h1 a, article section > h2 a, article section > h3 a,
+article section > h4 a, article section > h5 a, article section > h6 a {
+  text-decoration: none;
+}
+
+/* Jumbo article */
+article.m-jumbo {
+  margin-top: -1rem;
+}
+article.m-jumbo > header .m-jumbo-image {
+  background-size: cover;
+  background-color: #666666;
+  background-position: center center;
+  background-repeat: no-repeat;
+  font-size: 2.5vh;
+  height: 60vh;
+  margin-bottom: 1rem;
+  padding-top: 1rem;
+}
+article.m-jumbo > header .m-jumbo-cover {
+  background: linear-gradient(transparent 0%, transparent 50%, #ffffff 100%);
+  width: 100%;
+  height: 100%;
+}
+article.m-jumbo > header h1, article.m-jumbo > header h2 {
+  text-align: center;
+  font-weight: bold;
+}
+article.m-jumbo > header h1 {
+  font-size: 10vh;
+}
+article.m-jumbo > header h2 {
+  font-size: 3vh;
+}
+article.m-jumbo > header a {
+  text-decoration: none;
+}
+
+article.m-jumbo > header, article.m-jumbo > header h1, article.m-jumbo > header a {
+  color: #ffffff;
+}
+article.m-jumbo > header a:hover, article.m-jumbo > header a:focus, article.m-jumbo > header a:active {
+  color: #f0f0f0;
+}
+
+article.m-jumbo.m-inverted > header, article.m-jumbo.m-inverted > header h1, article.m-jumbo.m-inverted > header a {
+  color: #000000;
+}
+article.m-jumbo.m-inverted > header a:hover, article.m-jumbo.m-inverted > header a:focus, article.m-jumbo.m-inverted > header a:active {
+  color: #0f0f0f;
+}
+
+/* Article pagination */
+.m-article-pagination {
+  text-align: center;
+  padding: 1rem;
+}
+
+/* Right navigation panel */
+nav.m-navpanel {
+  text-align: center;
+}
+nav.m-navpanel h3 {
+  text-transform: uppercase;
+  font-weight: normal;
+}
+nav.m-navpanel ol {
+  text-transform: lowercase;
+}
+nav.m-navpanel ol, nav.m-navpanel ul {
+  list-style-type: none;
+  padding: 0;
+}
+nav.m-navpanel a {
+  color: #292929;
+  text-decoration: none;
+}
+nav.m-navpanel a:hover, nav.m-navpanel a:focus, nav.m-navpanel a:active {
+  color: #cb4b16;
+}
+
+/* Tag cloud */
+ul.m-tagcloud li { display: inline; }
+ul.m-tagcloud li.m-tag-1 { font-size: 0.75rem; }
+ul.m-tagcloud li.m-tag-2 { font-size: 0.825rem; }
+ul.m-tagcloud li.m-tag-3 { font-size: 1rem; }
+ul.m-tagcloud li.m-tag-4 { font-size: 1.25rem; }
+ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; }
+
+/* Utility */
+div.m-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.m-fullwidth {
+  width: 100%;
+}
+.m-text-center, .m-text-center.m-noindent {
+  text-align: center;
+}
+.m-text-left, .m-text-left.m-noindent {
+  text-align: left;
+}
+.m-text-right, .m-text-right.m-noindent {
+  text-align: right;
+}
+
+/* Lists */
+ul.m-unstyled, ol.m-unstyled {
+  list-style-type: none;
+  padding-left: 0;
+}
+ul[class*='m-block-'], ol[class*='m-block-'] {
+  padding-left: 0;
+}
+ul[class*='m-block-'] li, ol[class*='m-block-'] li {
+  display: inline;
+}
+ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
+  content: " | ";
+}
+@media screen and (min-width: 576px) {
+  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+}
+@media screen and (min-width: 768px) {
+  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+}
+@media screen and (min-width: 992px) {
+  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+}
+
+/* Special paragraph styling */
+p.m-poem {
+  text-indent: 0;
+  text-align: left;
+  margin-left: 1.5rem;
+}
+p.m-transition {
+  color: #f7e3db;
+  text-indent: 0;
+  text-align: center;
+  font-size: 2rem;
+}
+
+/* Definition list styling */
+dl.m-diary {
+  margin-bottom: 1.25rem;
+}
+dl.m-diary:last-child {
+  margin-bottom: 0.25rem;
+}
+dl.m-diary dt {
+  font-weight: bold;
+  width: 3.5rem;
+  float: left;
+  clear: both;
+  padding-top: 0.25rem;
+}
+dl.m-diary dd {
+  padding-top: 0.25rem;
+  padding-left: 3.5rem;
+}
+
+/* Note, frame, block */
+.m-note {
+  border-radius: 0.2rem;
+  padding: 1rem;
+}
+.m-frame {
+  background-color: #ffffff;
+  border-style: solid;
+  border-width: 0.125rem;
+  border-radius: 0.2rem;
+  border-color: #f7e3db;
+  padding: 0.875rem;
+}
+.m-block {
+  border-style: solid;
+  border-width: 0.0625rem;
+  border-left-width: 0.25rem;
+  border-radius: 0.2rem;
+  border-color: #f7e3db;
+  padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem;
+}
+
+/* Tables */
+table.m-table {
+  border-collapse: collapse;
+}
+div.m-scroll > table.m-table:last-child {
+  margin-bottom: 0.0625rem;
+}
+table.m-table tbody tr:hover {
+  background-color: #f7e3db;
+}
+table.m-table th, table.m-table td {
+  vertical-align: top;
+  border-style: solid;
+  border-top-width: 0.0625rem;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-bottom-width: 0;
+  border-color: #f7e3db;
+}
+table.m-table caption {
+  padding-bottom: 0.5rem;
+}
+table.m-table thead tr:first-child th, table.m-table thead tr:first-child td {
+  border-top-width: 0.125rem;
+}
+table.m-table thead th, table.m-table thead td {
+  border-bottom-width: 0.125rem;
+  vertical-align: bottom;
+}
+table.m-table tfoot th, table.m-table tfoot td {
+  border-top-width: 0.125rem;
+}
+table.m-table th, table.m-table td {
+  padding: 0.5rem;
+}
+table.m-table th {
+  text-align: left;
+}
+table.m-table td.m-default, th.m-default,
+table.m-table td.m-primary, th.m-primary,
+table.m-table td.m-success, th.m-success,
+table.m-table td.m-warning, th.m-warning,
+table.m-table td.m-danger, th.m-danger,
+table.m-table td.m-info, th.m-info,
+table.m-table td.m-dim, th.m-dim {
+  padding-left: 0.4375rem;
+  padding-right: 0.4375rem;
+  border-left-width: 0.0625rem;
+/*   border-right-width: 0.0625rem; causes horizontal scrollbar */
+}
+
+table.m-table tr.m-default td, table.m-table td.m-default,
+table.m-table tr.m-default th, table.m-table th.m-default,
+table.m-table tr.m-primary td, table.m-table td.m-primary,
+table.m-table tr.m-primary th, table.m-table th.m-primary,
+table.m-table tr.m-success td, table.m-table td.m-success,
+table.m-table tr.m-success th, table.m-table th.m-success,
+table.m-table tr.m-warning td, table.m-table td.m-warning,
+table.m-table tr.m-warning th, table.m-table th.m-warning,
+table.m-table tr.m-danger td, table.m-table td.m-danger,
+table.m-table tr.m-danger th, table.m-table th.m-danger,
+table.m-table tr.m-info td, table.m-table td.m-info,
+table.m-table tr.m-info th, table.m-table th.m-info,
+table.m-table tr.m-dim td, table.m-table td.m-dim,
+table.m-table tr.m-dim th, table.m-table th.m-dim {
+  border-color: #ffffff;
+}
+
+/* Colored block */
+.m-block.m-default { border-left-color: #f7e3db; }
+.m-block.m-default h3 { color: #000000; }
+.m-block.m-primary { border-left-color: #cb4b16; }
+.m-block.m-primary h3 { color: #cb4b16; }
+.m-block.m-success { border-left-color: #31c25d; }
+.m-block.m-success h3 { color: #31c25d; }
+.m-block.m-warning { border-left-color: #c7cf2f; }
+.m-block.m-warning h3 { color: #c7cf2f; }
+.m-block.m-danger { border-left-color: #f60000; }
+.m-block.m-danger h3 { color: #f60000; }
+.m-block.m-info { border-left-color: #2e7dc5; }
+.m-block.m-info h3 { color: #2e7dc5; }
+.m-block.m-dim {
+  border-left-color: #bdbdbd;
+  color: #bdbdbd;
+}
+.m-block.m-dim a { color: #c0c0c0; }
+.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active {
+  color: #949494;
+}
+.m-block.m-flat { border-color: transparent; }
+.m-block.m-flat h3 { color: #000000; }
+
+/* Colored note, table coloring */
+.m-note.m-default { background-color: #fbf0ec; }
+.m-note.m-default, table.m-table tr.m-default td, table.m-table td.m-default,
+                   table.m-table tr.m-default th, table.m-table th.m-default {
+  /* No background for default table to keep the row hover */
+  color: #000000;
+}
+.m-note.m-primary a:hover, table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover,
+                           table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover,
+.m-note.m-primary a:focus, table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus,
+                           table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus,
+.m-note.m-primary a:active, table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active,
+                            table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active {
+  color: #cb4b16;
+}
+.m-note.m-primary a, table.m-table tr.m-primary td a, table.m-table td.m-primary a,
+                     table.m-table tr.m-primary th a, table.m-table th.m-primary a {
+  color: #ea7944;
+}
+
+.m-note.m-primary, table.m-table tr.m-primary td, table.m-table td.m-primary,
+                   table.m-table tr.m-primary th, table.m-table th.m-primary {
+  background-color: #ef9069;
+  color: #fbe4d9;
+}
+.m-note.m-primary a, table.m-table tr.m-primary td a, table.m-table td.m-primary a,
+                     table.m-table tr.m-primary th a, table.m-table th.m-primary a {
+  color: #782f0d;
+}
+.m-note.m-primary a:hover, table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover,
+                           table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover,
+.m-note.m-primary a:focus, table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus,
+                           table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus,
+.m-note.m-primary a:active, table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active,
+                            table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active {
+  color: #2f1205;
+}
+.m-note.m-success, table.m-table tr.m-success td, table.m-table td.m-success,
+                   table.m-table tr.m-success th, table.m-table th.m-success {
+  background-color: #4dd376;
+  color: #f4fcf6;
+}
+.m-note.m-success a, table.m-table tr.m-success td a, table.m-table td.m-success a,
+                     table.m-table tr.m-success th a, table.m-table th.m-success a {
+  color: #c5f2d1;
+}
+.m-note.m-success a:hover, table.m-table tr.m-success td a:hover, table.m-table td.m-success a:hover,
+                           table.m-table tr.m-success th a:hover, table.m-table th.m-success a:hover,
+.m-note.m-success a:focus, table.m-table tr.m-success td a:focus, table.m-table td.m-success a:focus,
+                           table.m-table tr.m-success th a:focus, table.m-table th.m-success a:focus,
+.m-note.m-success a:active, table.m-table tr.m-success td a:active, table.m-table td.m-success a:active,
+                            table.m-table tr.m-success th a:active, table.m-table th.m-success a:active {
+  color: #dcf6e3;
+}
+.m-note.m-warning, table.m-table tr.m-warning td, table.m-table td.m-warning,
+                   table.m-table tr.m-warning th, table.m-table th.m-warning {
+  background-color: #d1d34d;
+  color: #fcfcf4;
+}
+.m-note.m-warning a, table.m-table tr.m-warning td a, table.m-table td.m-warning a,
+                     table.m-table tr.m-warning th a, table.m-table th.m-warning a {
+  color: #f0f1c7;
+}
+.m-note.m-warning a:hover, table.m-table tr.m-warning td a:hover, table.m-table td.m-warning a:hover,
+                           table.m-table tr.m-warning th a:hover, table.m-table th.m-warning a:hover,
+.m-note.m-warning a:focus, table.m-table tr.m-warning td a:focus, table.m-table td.m-warning a:focus,
+                           table.m-table tr.m-warning th a:focus, table.m-table th.m-warning a:focus,
+.m-note.m-warning a:active, table.m-table tr.m-warning td a:active, table.m-table td.m-warning a:active,
+                            table.m-table tr.m-warning th a:active, table.m-table th.m-warning a:active {
+  color: #f6f6dc;
+}
+.m-note.m-danger, table.m-table tr.m-danger td, table.m-table td.m-danger,
+                  table.m-table tr.m-danger th, table.m-table th.m-danger {
+  background-color: #e23e3e;
+  color: #fdf3f3;
+}
+.m-note.m-danger a, table.m-table tr.m-danger td a, table.m-table td.m-danger a,
+                    table.m-table tr.m-danger th a, table.m-table th.m-danger a {
+  color: #f2c7c6;
+}
+.m-note.m-danger a:hover, table.m-table tr.m-danger td a:hover, table.m-table td.m-danger a:hover,
+                          table.m-table tr.m-danger th a:hover, table.m-table th.m-danger a:hover,
+.m-note.m-danger a:focus, table.m-table tr.m-danger td a:focus, table.m-table td.m-danger a:focus,
+                          table.m-table tr.m-danger th a:focus, table.m-table th.m-danger a:focus,
+.m-note.m-danger a:active, table.m-table tr.m-danger td a:active, table.m-table td.m-danger a:active,
+                           table.m-table tr.m-danger th a:active, table.m-table th.m-danger a:active {
+  color: #f6dddc;
+}
+.m-note.m-info, table.m-table tr.m-info td, table.m-table td.m-info,
+                table.m-table tr.m-info th, table.m-table th.m-info {
+  background-color: #4c93d3;
+  color: #f4f8fc;
+}
+.m-note.m-info a, table.m-table tr.m-info td a, table.m-table td.m-info a,
+                  table.m-table tr.m-info th a, table.m-table th.m-info a {
+  color: #c6ddf2;
+}
+.m-note.m-info a:hover, table.m-table tr.m-info td a:hover, table.m-table td.m-info a:hover,
+                        table.m-table tr.m-info th a:hover, table.m-table th.m-info a:hover,
+.m-note.m-info a:focus, table.m-table tr.m-info td a:focus, table.m-table td.m-info a:focus,
+                        table.m-table tr.m-info th a:focus, table.m-table th.m-info a:focus,
+.m-note.m-info a:active, table.m-table tr.m-info td a:active, table.m-table td.m-info a:active,
+                         table.m-table tr.m-info th a:active, table.m-table th.m-info a:active {
+  color: #dbeaf7;
+}
+.m-note.m-dim, table.m-table tr.m-dim td, table.m-table td.m-dim,
+               table.m-table tr.m-dim th, table.m-table th.m-dim {
+  background-color: #f1f1f1;
+  color: #7c7c7c;
+}
+.m-note.m-dim a, table.m-table tr.m-dim td a, table.m-table td.m-dim a,
+                 table.m-table tr.m-dim th a, table.m-table th.m-dim a {
+  color: #c0c0c0;
+}
+.m-note.m-dim a:hover, table.m-table tr.m-dim td a:hover, table.m-table td.m-dim a:hover,
+                       table.m-table tr.m-dim th a:hover, table.m-table th.m-dim a:hover,
+.m-note.m-dim a:focus, table.m-table tr.m-dim td a:focus, table.m-table td.m-dim a:focus,
+                       table.m-table tr.m-dim th a:focus, table.m-table th.m-dim a:focus,
+.m-note.m-dim a:active, table.m-table tr.m-dim td a:active, table.m-table td.m-dim a:active,
+                        table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active {
+  color: #949494;
+}
+
+/* Colored text */
+.m-text.m-default { color: #000000; }
+.m-text.m-primary { color: #cb4b16; }
+.m-text.m-success { color: #31c25d; }
+.m-text.m-warning { color: #c7cf2f; }
+.m-text.m-danger { color: #f60000; }
+.m-text.m-info { color: #2e7dc5; }
+.m-text.m-dim { color: #bdbdbd; }
+.m-text.m-dim a { color: #c0c0c0; }
+.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
+  color: #949494;
+}
+
+/* Image */
+img.m-image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+div.m-image {
+  text-align: center;
+}
+img.m-image, div.m-image img {
+  max-width: 100%;
+  border-radius: 0.2rem;
+}
+div.m-image.m-fullwidth img {
+  width: 100%;
+}
+
+/* Figure */
+figure.m-figure {
+  max-width: 100%;
+  margin-top: 0;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  display: table;
+}
+figure.m-figure:before {
+  position: absolute;
+  content: ' ';
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1; /* so it doesn't make the contents inactive */
+  border-style: solid;
+  border-width: 0.125rem;
+  border-radius: 0.2rem;
+  border-color: #f7e3db;
+}
+figure.m-figure.m-flat:before {
+  border-color: transparent;
+}
+figure.m-figure > * {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+figure.m-figure:after {
+  content: ' ';
+  display: block;
+  margin-top: 1rem;
+  height: 1px;
+}
+figure.m-figure img {
+  position: relative; /* so it's above the border */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  border-top-left-radius: 0.2rem;
+  border-top-right-radius: 0.2rem;
+}
+figure.m-figure figcaption {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: normal;
+  font-size: 1.17rem; /* taken from webkit defaults for h3 */
+}
+figure.m-figure a img {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+figure.m-figure.m-fullwidth {
+  display: block;
+}
+figure.m-figure.m-fullwidth img {
+  width: 100%;
+}
+
+/* Code figure */
+figure.m-code-figure {
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  position: relative;
+  padding: 1rem;
+}
+figure.m-code-figure:before {
+  position: absolute;
+  content: ' ';
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1; /* so it doesn't make the contents inactive */
+  border-style: solid;
+  border-width: 0.125rem;
+  border-radius: 0.2rem;
+  border-color: #fbf0ec; /* to match the 
 background */
+}
+figure.m-code-figure.m-flat:before {
+  border-color: transparent;
+}
+figure.m-code-figure > pre:first-child {
+  position: relative; /* so it's above the border */
+  margin: -1rem -1rem 1rem -1rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+article section:target figure.m-code-figure {
+  z-index: 1; /* so the selection border isn't above figure border */
+}
+
+/* Image grid */
+.m-imagegrid > figure {
+  display: block;
+  float: left;
+  position: relative;
+  margin: 0;
+}
+.m-imagegrid > figure > div,
+.m-imagegrid > figure > figcaption,
+.m-imagegrid > figure > a > div,
+.m-imagegrid > figure > a > figcaption {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-color: #ffffff;
+  border-style: solid;
+  border-width: 0.25rem;
+  padding: 0.5rem;
+}
+.m-imagegrid > figure > figcaption,
+.m-imagegrid > figure > a > figcaption {
+  color: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+}
+.m-imagegrid > figure > div::before,
+.m-imagegrid > figure > figcaption::before,
+.m-imagegrid > figure > a > div::before,
+.m-imagegrid > figure > a > figcaption::before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: bottom;
+  width: 0;
+}
+.m-imagegrid > figure:hover > figcaption,
+.m-imagegrid > figure:hover > a > figcaption {
+  background: linear-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.85) 100%);
+  color: #ffffff;
+}
+.m-imagegrid > figure > img,
+.m-imagegrid > figure > a > img {
+  width: 100%;
+  height: 100%;
+}
+.m-imagegrid::after {
+  display: block;
+  content: ' ';
+  clear: both;
+}
+
+@media screen and (max-width: 767px) {
+  .m-imagegrid > figure {
+    float: none;
+    width: 100% !important;
+  }
+}
+
+/* Inflatable content */
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
+#m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
+  margin: 0 -1rem 1rem -1rem;
+}
+
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid {
+  margin: 0 -1.25rem 1rem -1.25rem;
+}
+@media screen and (min-width: 576px) {
+  #m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+@media screen and (min-width: 768px) {
+  #m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+@media screen and (min-width: 992px) {
+  #m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+
+/* Active sections in inflatable content affect left border of some components */
+#m-container-inflatable section:target > .m-note,
+#m-container-inflatable section:target > .m-frame,
+#m-container-inflatable section:target > .m-block,
+#m-container-inflatable section:target > pre.m-code,
+#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+#m-container-inflatable section:target section > .m-note,
+#m-container-inflatable section:target section > .m-frame,
+#m-container-inflatable section:target section > .m-block,
+#m-container-inflatable section:target section > pre.m-code,
+#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+  margin-left: -1.0rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: 0.75rem;
+}
+#m-container-inflatable section:target > figure.m-code-figure::before,
+#m-container-inflatable section:target section > figure.m-code-figure::before {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left-width: 0.25rem;
+}
+#m-container-inflatable section:target > pre.m-code,
+#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+#m-container-inflatable section:target section > pre.m-code,
+#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+  border-color: #f7e3db;
+}
+#m-container-inflatable section:target > .m-note.m-default,
+#m-container-inflatable section:target section > .m-note.m-default {
+  border-left-color: #f7e3db;
+}
+#m-container-inflatable section:target > .m-note.m-primary,
+#m-container-inflatable section:target section > .m-note.m-primary {
+  border-left-color: #cb4b16;
+}
+#m-container-inflatable section:target > .m-note.m-success,
+#m-container-inflatable section:target section > .m-note.m-success {
+  border-left-color: #31c25d;
+}
+#m-container-inflatable section:target > .m-note.m-warning,
+#m-container-inflatable section:target section > .m-note.m-warning {
+  border-left-color: #c7cf2f;
+}
+#m-container-inflatable section:target > .m-note.m-danger,
+#m-container-inflatable section:target section > .m-note.m-danger {
+  border-left-color: #f60000;
+}
+#m-container-inflatable section:target > .m-note.m-info,
+#m-container-inflatable section:target section > .m-note.m-info {
+  border-left-color: #2e7dc5;
+}
+#m-container-inflatable section:target > .m-note.m-dim,
+#m-container-inflatable section:target section > .m-note.m-dim {
+  border-left-color: #bdbdbd;
+}
+
+/* Code block (uses Pygments CSS classes) */
+pre.m-code span.hll {
+  border-color: #f7e3db;
+  margin-left: -1.0rem;
+  margin-right: -1.0rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  padding-left: 0.75rem;
+}
+pre.m-code.m-inverted {
+  color: rgba(91, 91, 91, 0.33);
+}
+pre.m-code.m-inverted > span {
+  opacity: 0.3333;
+}
+pre.m-code.m-inverted > span.hll {
+  color: #000000;
+  opacity: 1;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* Math block, inline math */
+div.m-math {
+  text-align: center;
+}
+
+/* Colored math block, inline math */
+div.m-math svg, svg.m-math { fill: #000000; }
+div.m-math.m-default svg, svg.m-math.m-default { fill: #000000; }
+div.m-math.m-primary svg, svg.m-math.m-primary { fill: #cb4b16; }
+div.m-math.m-success svg, svg.m-math.m-success { fill: #31c25d; }
+div.m-math.m-warning svg, svg.m-math.m-warning { fill: #c7cf2f; }
+div.m-math.m-danger svg, svg.m-math.m-danger { fill: #f60000; }
+div.m-math.m-info svg, svg.m-math.m-info { fill: #2e7dc5; }
+div.m-math.m-dim svg, svg.m-math.m-dim { fill: #bdbdbd; }
+
+/* Spacing after every block element, but not after the last */
+p, ul, ol, dl, blockquote, hr, pre, figure.m-code-figure,
+article, article > header, article section,
+.m-note, .m-frame, .m-block,
+div.m-scroll, table.m-table, div.m-image, img.m-image,
+figure.m-figure, .m-imagegrid, div.m-math {
+  margin-bottom: 1rem;
+}
+p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child,
+hr:last-child, pre:last-child, figure.m-code-figure:last-child,
+article:last-child, article section:last-child,
+.m-note:last-child, .m-frame:last-child, .m-block:last-child,
+table.m-table:last-child, img.m-image:last-child, div.m-image:last-child,
+figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child {
+  margin-bottom: 0;
+}
+
+/* kate: indent-width 2; */
diff --git a/css/postprocess.py b/css/postprocess.py
new file mode 100755
index 00000000..5d9b5f17
--- /dev/null
+++ b/css/postprocess.py
@@ -0,0 +1,101 @@
+#!/usr/bin/env python
+
+import argparse
+import re
+import os
+
+import_rx = re.compile("^@import url\\('(?P[^']+)'\\);$")
+opening_brace_rx = re.compile("^\\s*:root\s*{\\s*$")
+closing_brace_rx = re.compile("^\\s*}\\s*$")
+comment_rx = re.compile("^\\s*(/\\*.*\\*/)?\\s*$")
+variable_declaration_rx = re.compile("^\\s*(?P--[a-z-]+)\\s*:\\s*(?P[^;]+)\\s*;\\s*$")
+variable_use_rx = re.compile("^(?P.+)var\\((?P--[a-z-]+)\\)(?P.+)$")
+
+def postprocess(files):
+    directory = os.path.dirname(files[0])
+    basename, ext = os.path.splitext(files[0])
+    out_file = basename + ".compiled" + ext
+
+    with open(out_file, mode='w') as out:
+        variables = {}
+        imported_files = []
+
+        not_just_variable_declarations = False
+
+        # Put a helper comment on top
+        out.write("/* Generated using `./postprocess.py {}`. Do not edit. */\n".format(' '.join(files)))
+
+        # Parse the top-level file
+        with open(files[0]) as f:
+            in_variable_declarations = False
+            for line in f:
+                # Import statement: add the file at the beginning of th
+                match = import_rx.match(line)
+                if match:
+                    imported_files += [match['file']]
+                    continue
+
+                # Opening brace of variable declaration block
+                match = opening_brace_rx.match(line)
+                if match:
+                    in_variable_declarations = True
+                    continue
+
+                # Variable declaration
+                match = variable_declaration_rx.match(line)
+                if match and in_variable_declarations:
+                    variables[match['key']] = match['value']
+                    continue
+
+                # Comment or empty line, ignore
+                if comment_rx.match(line):
+                    continue
+
+                # Closing brace of variable declaration block. If it was not
+                # just variable declarations, put the closing brace to the
+                # output as well.
+                match = closing_brace_rx.match(line)
+                if match and in_variable_declarations:
+                    if not_just_variable_declarations: out.write("}\n")
+                    in_variable_declarations = False
+                    continue
+
+                # Something else, copy verbatim to the output. If inside
+                # variable declaration block, include also the opening brace
+                # and remeber to put the closing brace there as well
+                if in_variable_declarations:
+                    out.write(":root {\n")
+                    not_just_variable_declarations = True
+                out.write(line)
+
+        # Now open the imported files and replace variables
+        for file in imported_files + files[1:]:
+            out.write('\n')
+
+            with open(file) as f:
+                for line in f:
+                    # Variable use, replace with actual value
+                    # TODO: more variables on the same line?
+                    match = variable_use_rx.match(line)
+                    if match and match['key'] in variables:
+                        out.write(match['before'])
+                        out.write(variables[match['key']])
+                        out.write(match['after'])
+                        out.write("\n")
+                        continue
+
+                    # Something else, copy verbatim to the output
+                    out.write(line)
+
+    return 0
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description=r"""
+Postprocessor for removing @import statements and variables from CSS files.
+
+Combines all files into a new *.compiled.css file. The basename is taken
+implicitly from the first argument.""")
+    parser.add_argument('files', nargs='+', help='input CSS file(s)')
+    args = parser.parse_args()
+
+    exit(postprocess(args.files))
diff --git a/pelican-theme/static/inc/m-dark.compiled.css b/pelican-theme/static/inc/m-dark.compiled.css
new file mode 120000
index 00000000..9f1a0d2b
--- /dev/null
+++ b/pelican-theme/static/inc/m-dark.compiled.css
@@ -0,0 +1 @@
+../../../css/m-dark.compiled.css
\ No newline at end of file
diff --git a/pelican-theme/static/inc/m-light.compiled.css b/pelican-theme/static/inc/m-light.compiled.css
new file mode 120000
index 00000000..605faa48
--- /dev/null
+++ b/pelican-theme/static/inc/m-light.compiled.css
@@ -0,0 +1 @@
+../../../css/m-light.compiled.css
\ No newline at end of file