Static placement of minima theme, minor customizations

11 files changed, 1256 insertions, 0 deletions

diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
new file mode 100644
index 0000000..ea8d8f2
--- /dev/null
+++ b/_sass/minima/_base.scss
@@ -0,0 +1,281 @@
+html {
+  font-size: $base-font-size;
+}
+
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  margin: 0;
+  padding: 0;
+
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  color: $text-color;
+  background-color: $background-color;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: "kern" 1;
+     -moz-font-feature-settings: "kern" 1;
+       -o-font-feature-settings: "kern" 1;
+          font-feature-settings: "kern" 1;
+  font-kerning: normal;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  overflow-wrap: break-word;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+  margin-bottom: $spacing-unit * .5;
+}
+
+hr {
+  margin-top: $spacing-unit;
+  margin-bottom: $spacing-unit;
+}
+
+/**
+ * `main` element
+ */
+main {
+  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
+}
+
+
+
+/**
+ * Images
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+  display: block;
+}
+
+figcaption {
+  font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $base-font-weight;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+  color: $link-base-color;
+  text-decoration: none;
+
+  &:visited {
+    color: $link-visited-color;
+  }
+
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: underline;
+  }
+
+  .social-media-list &:hover {
+    text-decoration: none;
+
+    .username {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: $brand-color;
+  border-left: 4px solid $border-color-01;
+  padding-left: $spacing-unit * .5;
+  @include relative-font-size(1.125);
+  font-style: italic;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  i, em {
+    font-style: normal;
+  }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+  font-family: $code-font-family;
+  font-size: 0.9375em;
+  border: 1px solid $border-color-01;
+  border-radius: 3px;
+  background-color: $code-background-color;
+}
+
+code {
+  padding: 1px 5px;
+}
+
+pre {
+  padding: 8px 12px;
+  overflow-x: auto;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+.highlight {
+  border-radius: 3px;
+  background: $code-background-color;
+  @extend %vertical-rhythm;
+
+  .highlighter-rouge & {
+    background: $code-background-color;
+  }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+  max-width: calc(#{$content-width} - (#{$spacing-unit}));
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $spacing-unit * .5;
+  padding-left: $spacing-unit * .5;
+  @extend %clearfix;
+
+  @media screen and (min-width: $on-large) {
+    max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+  }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+
+
+/**
+ * Icons
+ */
+
+.orange {
+  color: #f66a0a;
+}
+
+.grey {
+  color: #828282;
+}
+
+.svg-icon {
+  width: 1.25em;
+  height: 1.25em;
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+
+
+/**
+ * Tables
+ */
+table {
+  margin-bottom: $spacing-unit;
+  width: 100%;
+  text-align: $table-text-align;
+  color: $table-text-color;
+  border-collapse: collapse;
+  border: 1px solid $table-border-color;
+  tr {
+    &:nth-child(even) {
+      background-color: $table-zebra-color;
+    }
+  }
+  th, td {
+    padding: ($spacing-unit * 33.3333333333 * .01) ($spacing-unit * .5);
+  }
+  th {
+    background-color: $table-header-bg-color;
+    border: 1px solid $table-header-border;
+  }
+  td {
+    border: 1px solid $table-border-color;
+  }
+
+  @include media-query($on-laptop) {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+            -ms-overflow-style: -ms-autohiding-scrollbar;
+  }
+}
diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
new file mode 100644
index 0000000..426f390
--- /dev/null
+++ b/_sass/minima/_layout.scss
@@ -0,0 +1,341 @@
+/**
+ * Site header
+ */
+.site-header {
+  border-top: 5px solid $border-color-03;
+  border-bottom: 1px solid $border-color-01;
+  min-height: $spacing-unit * 1.865;
+  line-height: $base-line-height * $base-font-size * 2.25;
+
+  // Positioning context for the mobile navigation icon
+  position: relative;
+}
+
+.site-title {
+  @include relative-font-size(1.625);
+  font-weight: 300;
+  letter-spacing: -1px;
+  margin-bottom: 0;
+  float: left;
+
+  @include media-query($on-palm) {
+    padding-right: 45px;
+  }
+
+  &,
+  &:visited {
+    color: $site-title-color;
+  }
+}
+
+.site-nav {
+  position: absolute;
+  top: 9px;
+  right: $spacing-unit * .5;
+  background-color: $background-color;
+  border: 1px solid $border-color-01;
+  border-radius: 5px;
+  text-align: right;
+
+  .nav-trigger {
+    display: none;
+  }
+
+  .menu-icon {
+    float: right;
+    width: 36px;
+    height: 26px;
+    line-height: 0;
+    padding-top: 10px;
+    text-align: center;
+
+    > svg path {
+      fill: $border-color-03;
+    }
+  }
+
+  label[for="nav-trigger"] {
+    display: block;
+    float: right;
+    width: 36px;
+    height: 36px;
+    z-index: 2;
+    cursor: pointer;
+  }
+
+  input ~ .trigger {
+    clear: both;
+    display: none;
+  }
+
+  input:checked ~ .trigger {
+    display: block;
+    padding-bottom: 5px;
+  }
+
+  .page-link {
+    color: $text-color;
+    line-height: $base-line-height;
+    display: block;
+    padding: 5px 10px;
+
+    // Gaps between nav items, but not on the last one
+    &:not(:last-child) {
+      margin-right: 0;
+    }
+    margin-left: 20px;
+  }
+
+  @media screen and (min-width: $on-medium) {
+    position: static;
+    float: right;
+    border: none;
+    background-color: inherit;
+
+    label[for="nav-trigger"] {
+      display: none;
+    }
+
+    .menu-icon {
+      display: none;
+    }
+
+    input ~ .trigger {
+      display: block;
+    }
+
+    .page-link {
+      display: inline;
+      padding: 0;
+
+      &:not(:last-child) {
+        margin-right: 20px;
+      }
+      margin-left: auto;
+    }
+  }
+}
+
+
+
+/**
+ * Site footer
+ */
+.site-footer {
+  border-top: 1px solid $border-color-01;
+  padding: $spacing-unit 0;
+}
+
+.footer-heading {
+  @include relative-font-size(1.125);
+  margin-bottom: $spacing-unit * .5;
+}
+
+.feed-subscribe .svg-icon {
+  padding: 5px 5px 2px 0
+}
+
+.contact-list,
+.social-media-list {
+  list-style: none;
+  margin-left: 0;
+}
+
+.footer-col-wrapper,
+.social-links {
+  @include relative-font-size(0.9375);
+  color: $brand-color;
+}
+
+.footer-col {
+  margin-bottom: $spacing-unit * .5;
+}
+
+.footer-col-1,
+.footer-col-2 {
+  width: calc(50% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+  width: calc(100% - (#{$spacing-unit} / 2));
+}
+
+@media screen and (min-width: $on-large) {
+  .footer-col-1 {
+    width: calc(35% - (#{$spacing-unit} / 2));
+  }
+
+  .footer-col-2 {
+    width: calc(20% - (#{$spacing-unit} / 2));
+  }
+
+  .footer-col-3 {
+    width: calc(45% - (#{$spacing-unit} / 2));
+  }
+}
+
+@media screen and (min-width: $on-medium) {
+  .footer-col-wrapper {
+    display: flex
+  }
+
+  .footer-col {
+    width: calc(100% - (#{$spacing-unit} / 2));
+    padding: 0 ($spacing-unit * .5);
+
+    &:first-child {
+      padding-right: $spacing-unit * .5;
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+      padding-left: $spacing-unit * .5;
+    }
+  }
+}
+
+
+
+/**
+ * Page content
+ */
+.page-content {
+  padding: $spacing-unit 0;
+  flex: 1 0 auto;
+}
+
+.page-heading {
+  @include relative-font-size(2);
+}
+
+.post-list-heading {
+  @include relative-font-size(1.75);
+}
+
+.post-list {
+  margin-left: 0;
+  list-style: none;
+
+  > li {
+    margin-bottom: $spacing-unit;
+  }
+}
+
+.post-meta {
+  font-size: $small-font-size;
+  color: $brand-color;
+}
+
+.post-link {
+  display: block;
+  @include relative-font-size(1.2);
+}
+
+
+
+/**
+ * Posts
+ */
+.post-header {
+  margin-bottom: $spacing-unit;
+}
+
+.post-title,
+.post-content h1 {
+  @include relative-font-size(2.625);
+  letter-spacing: -1px;
+  line-height: 1.15;
+
+  @media screen and (min-width: $on-large) {
+    @include relative-font-size(2.625);
+  }
+}
+
+.post-content {
+  margin-bottom: $spacing-unit;
+
+  h1, h2, h3, h4, h5, h6 { margin-top: $spacing-unit }
+
+  h2 {
+    @include relative-font-size(1.75);
+
+    @media screen and (min-width: $on-large) {
+      @include relative-font-size(2);
+    }
+  }
+
+  h3 {
+    @include relative-font-size(1.375);
+
+    @media screen and (min-width: $on-large) {
+      @include relative-font-size(1.625);
+    }
+  }
+
+  h4 {
+    @include relative-font-size(1.25);
+  }
+
+  h5 {
+    @include relative-font-size(1.125);
+  }
+  h6 {
+    @include relative-font-size(1.0625);
+  }
+}
+
+
+.social-media-list {
+  display: table;
+  margin: 0 auto;
+  li {
+    float: left;
+    margin: 5px 10px 5px 0;
+    &:last-of-type { margin-right: 0 }
+    a {
+      display: block;
+      padding: 10px 12px;
+      border: 1px solid $border-color-01;
+      &:hover { border-color: $border-color-02 }
+    }
+  }
+}
+
+
+
+/**
+ * Pagination navbar
+ */
+.pagination {
+  margin-bottom: $spacing-unit;
+  @extend .social-media-list;
+  li {
+    a, div {
+      min-width: 41px;
+      text-align: center;
+      box-sizing: border-box;
+    }
+    div {
+      display: block;
+      padding: $spacing-unit * .25;
+      border: 1px solid transparent;
+
+      &.pager-edge {
+        color: $border-color-01;
+        border: 1px dashed;
+      }
+    }
+  }
+}
+
+
+
+/**
+ * Grid helpers
+ */
+@media screen and (min-width: $on-large) {
+  .one-half {
+    width: calc(50% - (#{$spacing-unit} / 2));
+  }
+}
diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss
new file mode 100644
index 0000000..7c1417f
--- /dev/null
+++ b/_sass/minima/custom-styles.scss
@@ -0,0 +1,2 @@
+// Placeholder to allow defining custom styles that override everything else.
+// (Use `_sass/minima/custom-variables.scss` to override variable defaults)
diff --git a/_sass/minima/custom-variables.scss b/_sass/minima/custom-variables.scss
new file mode 100644
index 0000000..2a2d0fa
--- /dev/null
+++ b/_sass/minima/custom-variables.scss
@@ -0,0 +1 @@
+// Placeholder to allow overriding predefined variables smoothly.
diff --git a/_sass/minima/initialize.scss b/_sass/minima/initialize.scss
new file mode 100644
index 0000000..76efd77
--- /dev/null
+++ b/_sass/minima/initialize.scss
@@ -0,0 +1,50 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default;
+$code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit:     30px !default;
+
+$table-text-align: left !default;
+
+// Width of the content area
+$content-width:    800px !default;
+
+$on-palm:          600px !default;
+$on-laptop:        800px !default;
+
+$on-medium:        $on-palm !default;
+$on-large:         $on-laptop !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//   .wrapper {
+//     padding-right: $spacing-unit / 2;
+//     padding-left: $spacing-unit / 2;
+//   }
+// }
+// Notice the following mixin uses max-width, in a deprecated, desktop-first
+// approach, whereas media queries used elsewhere now use min-width.
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: #{$ratio}rem;
+}
+
+// Import pre-styling-overrides hook and style-partials.
+@import
+  "minima/custom-variables", // Hook to override predefined variables.
+  "minima/base",             // Defines element resets.
+  "minima/layout",           // Defines structure and style based on CSS selectors.
+  "minima/custom-styles"     // Hook to override existing styles.
+;
diff --git a/_sass/minima/skins/auto.scss b/_sass/minima/skins/auto.scss
new file mode 100644
index 0000000..8902e8c
--- /dev/null
+++ b/_sass/minima/skins/auto.scss
@@ -0,0 +1,361 @@
+@charset "utf-8";
+
+// Default color scheme settings
+// These are overridden in classic.css and dark.scss
+
+$color-scheme-auto: true !default;
+$color-scheme-dark: false !default;
+
+
+// Light mode
+// ----------
+
+$lm-brand-color:           #828282 !default;
+$lm-brand-color-light:     lighten($lm-brand-color, 40%) !default;
+$lm-brand-color-dark:      darken($lm-brand-color, 25%) !default;
+
+$lm-site-title-color:      $lm-brand-color-dark !default;
+
+$lm-text-color:            #111111 !default;
+$lm-background-color:      #fdfdfd !default;
+$lm-code-background-color: #eeeeff !default;
+
+$lm-link-base-color:       #2a7ae2 !default;
+$lm-link-visited-color:    darken($lm-link-base-color, 15%) !default;
+$lm-link-hover-color:      $lm-text-color !default;
+
+$lm-border-color-01:       $lm-brand-color-light !default;
+$lm-border-color-02:       lighten($lm-brand-color, 35%) !default;
+$lm-border-color-03:       $lm-brand-color-dark !default;
+
+$lm-table-text-color:      lighten($lm-text-color, 18%) !default;
+$lm-table-zebra-color:     lighten($lm-brand-color, 46%) !default;
+$lm-table-header-bg-color: lighten($lm-brand-color, 43%) !default;
+$lm-table-header-border:   lighten($lm-brand-color, 37%) !default;
+$lm-table-border-color:    $lm-border-color-01 !default;
+
+
+// Syntax highlighting styles should be adjusted appropriately for every "skin"
+// ----------------------------------------------------------------------------
+
+@mixin lm-highlight {
+  .highlight {
+    .c     { color: #998; font-style: italic } // Comment
+    .err   { color: #a61717; background-color: #e3d2d2 } // Error
+    .k     { font-weight: bold } // Keyword
+    .o     { font-weight: bold } // Operator
+    .cm    { color: #998; font-style: italic } // Comment.Multiline
+    .cp    { color: #999; font-weight: bold } // Comment.Preproc
+    .c1    { color: #998; font-style: italic } // Comment.Single
+    .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+    .gd    { color: #000; background-color: #fdd } // Generic.Deleted
+    .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+    .ge    { font-style: italic } // Generic.Emph
+    .gr    { color: #a00 } // Generic.Error
+    .gh    { color: #999 } // Generic.Heading
+    .gi    { color: #000; background-color: #dfd } // Generic.Inserted
+    .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+    .go    { color: #888 } // Generic.Output
+    .gp    { color: #555 } // Generic.Prompt
+    .gs    { font-weight: bold } // Generic.Strong
+    .gu    { color: #aaa } // Generic.Subheading
+    .gt    { color: #a00 } // Generic.Traceback
+    .kc    { font-weight: bold } // Keyword.Constant
+    .kd    { font-weight: bold } // Keyword.Declaration
+    .kp    { font-weight: bold } // Keyword.Pseudo
+    .kr    { font-weight: bold } // Keyword.Reserved
+    .kt    { color: #458; font-weight: bold } // Keyword.Type
+    .m     { color: #099 } // Literal.Number
+    .s     { color: #d14 } // Literal.String
+    .na    { color: #008080 } // Name.Attribute
+    .nb    { color: #0086B3 } // Name.Builtin
+    .nc    { color: #458; font-weight: bold } // Name.Class
+    .no    { color: #008080 } // Name.Constant
+    .ni    { color: #800080 } // Name.Entity
+    .ne    { color: #900; font-weight: bold } // Name.Exception
+    .nf    { color: #900; font-weight: bold } // Name.Function
+    .nn    { color: #555 } // Name.Namespace
+    .nt    { color: #000080 } // Name.Tag
+    .nv    { color: #008080 } // Name.Variable
+    .ow    { font-weight: bold } // Operator.Word
+    .w     { color: #bbb } // Text.Whitespace
+    .mf    { color: #099 } // Literal.Number.Float
+    .mh    { color: #099 } // Literal.Number.Hex
+    .mi    { color: #099 } // Literal.Number.Integer
+    .mo    { color: #099 } // Literal.Number.Oct
+    .sb    { color: #d14 } // Literal.String.Backtick
+    .sc    { color: #d14 } // Literal.String.Char
+    .sd    { color: #d14 } // Literal.String.Doc
+    .s2    { color: #d14 } // Literal.String.Double
+    .se    { color: #d14 } // Literal.String.Escape
+    .sh    { color: #d14 } // Literal.String.Heredoc
+    .si    { color: #d14 } // Literal.String.Interpol
+    .sx    { color: #d14 } // Literal.String.Other
+    .sr    { color: #009926 } // Literal.String.Regex
+    .s1    { color: #d14 } // Literal.String.Single
+    .ss    { color: #990073 } // Literal.String.Symbol
+    .bp    { color: #999 } // Name.Builtin.Pseudo
+    .vc    { color: #008080 } // Name.Variable.Class
+    .vg    { color: #008080 } // Name.Variable.Global
+    .vi    { color: #008080 } // Name.Variable.Instance
+    .il    { color: #099 } // Literal.Number.Integer.Long
+  }
+}
+
+
+// Dark mode
+// ---------
+
+$dm-brand-color:           #999999 !default;
+$dm-brand-color-light:     lighten($dm-brand-color, 5%) !default;
+$dm-brand-color-dark:      darken($dm-brand-color, 35%) !default;
+
+$dm-site-title-color:      $dm-brand-color-light !default;
+
+$dm-text-color:            #bbbbbb !default;
+$dm-background-color:      #181818 !default;
+$dm-code-background-color: #212121 !default;
+
+$dm-link-base-color:       #79b8ff !default;
+$dm-link-visited-color:    $dm-link-base-color !default;
+$dm-link-hover-color:      $dm-text-color !default;
+
+$dm-border-color-01:       $dm-brand-color-dark !default;
+$dm-border-color-02:       $dm-brand-color-light !default;
+$dm-border-color-03:       $dm-brand-color !default;
+
+$dm-table-text-color:      $dm-text-color !default;
+$dm-table-zebra-color:     lighten($dm-background-color, 4%) !default;
+$dm-table-header-bg-color: lighten($dm-background-color, 10%) !default;
+$dm-table-header-border:   lighten($dm-background-color, 21%) !default;
+$dm-table-border-color:    $dm-border-color-01 !default;
+
+
+// Syntax highlighting styles should be adjusted appropriately for every "skin"
+// List of tokens: https://github.com/rouge-ruby/rouge/wiki/List-of-tokens
+// Some colors come from Material Theme Darker:
+// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/settings/specific/darker-hc.ts
+// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/color-set.ts
+// ----------------------------------------------------------------------------
+
+@mixin dm-highlight {
+  .highlight {
+    .c     { color: #545454; font-style: italic } // Comment
+    .err   { color: #f07178; background-color: #e3d2d2 } // Error
+    .k     { color: #89DDFF; font-weight: bold } // Keyword
+    .o     { font-weight: bold } // Operator
+    .cm    { color: #545454; font-style: italic } // Comment.Multiline
+    .cp    { color: #545454; font-weight: bold } // Comment.Preproc
+    .c1    { color: #545454; font-style: italic } // Comment.Single
+    .cs    { color: #545454; font-weight: bold; font-style: italic } // Comment.Special
+    .gd    { color: #000; background-color: #fdd } // Generic.Deleted
+    .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+    .ge    { font-style: italic } // Generic.Emph
+    .gr    { color: #f07178 } // Generic.Error
+    .gh    { color: #999 } // Generic.Heading
+    .gi    { color: #000; background-color: #dfd } // Generic.Inserted
+    .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+    .go    { color: #888 } // Generic.Output
+    .gp    { color: #555 } // Generic.Prompt
+    .gs    { font-weight: bold } // Generic.Strong
+    .gu    { color: #aaa } // Generic.Subheading
+    .gt    { color: #f07178 } // Generic.Traceback
+    .kc    { font-weight: bold } // Keyword.Constant
+    .kd    { font-weight: bold } // Keyword.Declaration
+    .kp    { font-weight: bold } // Keyword.Pseudo
+    .kr    { font-weight: bold } // Keyword.Reserved
+    .kt    { color: #FFCB6B; font-weight: bold } // Keyword.Type
+    .m     { color: #F78C6C } // Literal.Number
+    .s     { color: #C3E88D } // Literal.String
+    .na    { color: #008080 } // Name.Attribute
+    .nb    { color: #EEFFFF } // Name.Builtin
+    .nc    { color: #FFCB6B; font-weight: bold } // Name.Class
+    .no    { color: #008080 } // Name.Constant
+    .ni    { color: #800080 } // Name.Entity
+    .ne    { color: #900; font-weight: bold } // Name.Exception
+    .nf    { color: #82AAFF; font-weight: bold } // Name.Function
+    .nn    { color: #555 } // Name.Namespace
+    .nt    { color: #FFCB6B } // Name.Tag
+    .nv    { color: #EEFFFF } // Name.Variable
+    .ow    { font-weight: bold } // Operator.Word
+    .w     { color: #EEFFFF } // Text.Whitespace
+    .mf    { color: #F78C6C } // Literal.Number.Float
+    .mh    { color: #F78C6C } // Literal.Number.Hex
+    .mi    { color: #F78C6C } // Literal.Number.Integer
+    .mo    { color: #F78C6C } // Literal.Number.Oct
+    .sb    { color: #C3E88D } // Literal.String.Backtick
+    .sc    { color: #C3E88D } // Literal.String.Char
+    .sd    { color: #C3E88D } // Literal.String.Doc
+    .s2    { color: #C3E88D } // Literal.String.Double
+    .se    { color: #EEFFFF } // Literal.String.Escape
+    .sh    { color: #C3E88D } // Literal.String.Heredoc
+    .si    { color: #C3E88D } // Literal.String.Interpol
+    .sx    { color: #C3E88D } // Literal.String.Other
+    .sr    { color: #C3E88D } // Literal.String.Regex
+    .s1    { color: #C3E88D } // Literal.String.Single
+    .ss    { color: #C3E88D } // Literal.String.Symbol
+    .bp    { color: #999 } // Name.Builtin.Pseudo
+    .vc    { color: #FFCB6B } // Name.Variable.Class
+    .vg    { color: #EEFFFF } // Name.Variable.Global
+    .vi    { color: #EEFFFF } // Name.Variable.Instance
+    .il    { color: #F78C6C } // Literal.Number.Integer.Long
+  }
+}
+
+
+// Mode selection
+// --------------
+
+
+// Classic skin (always light mode)
+// Assign outside of the if construct to establish global variable scope
+
+$brand-color: $lm-brand-color;
+$brand-color-light: $lm-brand-color-light;
+$brand-color-dark: $lm-brand-color-dark;
+
+$site-title-color: $lm-site-title-color;
+
+$text-color: $lm-text-color;
+$background-color: $lm-background-color;
+$code-background-color: $lm-code-background-color;
+
+$link-base-color: $lm-link-base-color;
+$link-visited-color: $lm-link-visited-color;
+$link-hover-color: $lm-link-hover-color;
+
+$border-color-01: $lm-border-color-01;
+$border-color-02: $lm-border-color-02;
+$border-color-03: $lm-border-color-03;
+
+$table-text-color: $lm-table-text-color;
+$table-zebra-color: $lm-table-zebra-color;
+$table-header-bg-color: $lm-table-header-bg-color;
+$table-header-border: $lm-table-header-border;
+$table-border-color: $lm-table-border-color;
+
+
+@if $color-scheme-auto {
+
+  // Auto mode
+
+  :root {
+    --minima-brand-color: #{$lm-brand-color};
+    --minima-brand-color-light: #{$lm-brand-color-light};
+    --minima-brand-color-dark: #{$lm-brand-color-dark};
+
+    --minima-site-title-color: #{$lm-site-title-color};
+
+    --minima-text-color: #{$lm-text-color};
+    --minima-background-color: #{$lm-background-color};
+    --minima-code-background-color: #{$lm-code-background-color};
+
+    --minima-link-base-color: #{$lm-link-base-color};
+    --minima-link-visited-color: #{$lm-link-visited-color};
+    --minima-link-hover-color: #{$lm-link-hover-color};
+
+    --minima-border-color-01: #{$lm-border-color-01};
+    --minima-border-color-02: #{$lm-border-color-02};
+    --minima-border-color-03: #{$lm-border-color-03};
+
+    --minima-table-text-color: #{$lm-table-text-color};
+    --minima-table-zebra-color: #{$lm-table-zebra-color};
+    --minima-table-header-bg-color: #{$lm-table-header-bg-color};
+    --minima-table-header-border: #{$lm-table-header-border};
+    --minima-table-border-color: #{$lm-table-border-color};
+  }
+
+  @include lm-highlight;
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --minima-brand-color: #{$dm-brand-color};
+      --minima-brand-color-light: #{$dm-brand-color-light};
+      --minima-brand-color-dark: #{$dm-brand-color-dark};
+
+      --minima-site-title-color: #{$dm-site-title-color};
+
+      --minima-text-color: #{$dm-text-color};
+      --minima-background-color: #{$dm-background-color};
+      --minima-code-background-color: #{$dm-code-background-color};
+
+      --minima-link-base-color: #{$dm-link-base-color};
+      --minima-link-visited-color: #{$dm-link-visited-color};
+      --minima-link-hover-color: #{$dm-link-hover-color};
+
+      --minima-border-color-01: #{$dm-border-color-01};
+      --minima-border-color-02: #{$dm-border-color-02};
+      --minima-border-color-03: #{$dm-border-color-03};
+
+      --minima-table-text-color: #{$dm-table-text-color};
+      --minima-table-zebra-color: #{$dm-table-zebra-color};
+      --minima-table-header-bg-color: #{$dm-table-header-bg-color};
+      --minima-table-header-border: #{$dm-table-header-border};
+      --minima-table-border-color: #{$dm-table-border-color};
+    }
+
+    @include dm-highlight;
+  }
+
+  $brand-color: var(--minima-brand-color);
+  $brand-color-light: var(--minima-brand-color-light);
+  $brand-color-dark: var(--minima-brand-color-dark);
+
+  $site-title-color: var(--minima-site-title-color);
+
+  $text-color: var(--minima-text-color);
+  $background-color: var(--minima-background-color);
+  $code-background-color: var(--minima-code-background-color);
+
+  $link-base-color: var(--minima-link-base-color);
+  $link-visited-color: var(--minima-link-visited-color);
+  $link-hover-color: var(--minima-link-hover-color);
+
+  $border-color-01: var(--minima-border-color-01);
+  $border-color-02: var(--minima-border-color-02);
+  $border-color-03: var(--minima-border-color-03);
+
+  $table-text-color: var(--minima-table-text-color);
+  $table-zebra-color: var(--minima-table-zebra-color);
+  $table-header-bg-color: var(--minima-table-header-bg-color);
+  $table-header-border: var(--minima-table-header-border);
+  $table-border-color: var(--minima-table-border-color);
+
+
+} @else if $color-scheme-dark {
+
+  // Dark skin (always dark mode)
+
+  $brand-color: $dm-brand-color;
+  $brand-color-light: $dm-brand-color-light;
+  $brand-color-dark: $dm-brand-color-dark;
+
+  $site-title-color: $dm-site-title-color;
+
+  $text-color: $dm-text-color;
+  $background-color: $dm-background-color;
+  $code-background-color: $dm-code-background-color;
+
+  $link-base-color: $dm-link-base-color;
+  $link-visited-color: $dm-link-visited-color;
+  $link-hover-color: $dm-link-hover-color;
+
+  $border-color-01: $dm-border-color-01;
+  $border-color-02: $dm-border-color-02;
+  $border-color-03: $dm-border-color-03;
+
+  $table-text-color: $dm-table-text-color;
+  $table-zebra-color: $dm-table-zebra-color;
+  $table-header-bg-color: $dm-table-header-bg-color;
+  $table-header-border: $dm-table-header-border;
+  $table-border-color: $dm-table-border-color;
+
+  @include dm-highlight;
+
+
+} @else {
+
+  // Classic skin syntax highlighting
+  @include lm-highlight;
+
+}
diff --git a/_sass/minima/skins/classic.scss b/_sass/minima/skins/classic.scss
new file mode 100644
index 0000000..e61b078
--- /dev/null
+++ b/_sass/minima/skins/classic.scss
@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+$color-scheme-auto: false;
+$color-scheme-dark: false;
+@import "minima/skins/auto";
diff --git a/_sass/minima/skins/dark.scss b/_sass/minima/skins/dark.scss
new file mode 100644
index 0000000..159226e
--- /dev/null
+++ b/_sass/minima/skins/dark.scss
@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+$color-scheme-auto: false;
+$color-scheme-dark: true;
+@import "minima/skins/auto";
diff --git a/_sass/minima/skins/solarized-dark.scss b/_sass/minima/skins/solarized-dark.scss
new file mode 100644
index 0000000..500dceb
--- /dev/null
+++ b/_sass/minima/skins/solarized-dark.scss
@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+$sol-is-auto: false;
+$sol-is-dark: true;
+@import "minima/skins/solarized";
diff --git a/_sass/minima/skins/solarized-light.scss b/_sass/minima/skins/solarized-light.scss
new file mode 100644
index 0000000..d2fc065
--- /dev/null
+++ b/_sass/minima/skins/solarized-light.scss
@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+$sol-is-auto: false;
+@import "minima/skins/solarized";
diff --git a/_sass/minima/skins/solarized.scss b/_sass/minima/skins/solarized.scss
new file mode 100644
index 0000000..7ac1f5a
--- /dev/null
+++ b/_sass/minima/skins/solarized.scss
@@ -0,0 +1,201 @@
+@charset "utf-8";
+
+// Solarized skin
+// ==============
+// Created by Sander Voerman <mailto:sander@savoerman.nl> using the Solarized
+// color scheme by Ethan Schoonover <https://ethanschoonover.com/solarized>.
+
+// This style sheet implements three options for the minima.skin setting:
+// "solarized-light" for light mode, "solarized-dark" for dark mode, and
+// "solarized" for light or dark mode depending on user preference.
+$sol-is-auto: true !default;
+$sol-is-dark: false !default;
+
+
+// Color scheme
+// ------------
+// The inline comments show the canonical L*a*b values for each color.
+
+$sol-base03:   #002b36;  // 15 -12 -12
+$sol-base02:   #073642;  // 20 -12 -12
+$sol-base01:   #586e75;  // 45 -07 -07
+$sol-base00:   #657b83;  // 50 -07 -07
+$sol-base0:    #839496;  // 60 -06 -03
+$sol-base1:    #93a1a1;  // 65 -05 -02
+$sol-base2:    #eee8d5;  // 92 -00  10
+$sol-base3:    #fdf6e3;  // 97  00  10
+$sol-yellow:   #b58900;  // 60  10  65
+$sol-orange:   #cb4b16;  // 50  50  55
+$sol-red:      #dc322f;  // 50  65  45
+$sol-magenta:  #d33682;  // 50  65 -05
+$sol-violet:   #6c71c4;  // 50  15 -45
+$sol-blue:     #268bd2;  // 55 -10 -45
+$sol-cyan:     #2aa198;  // 60 -35 -05
+$sol-green:    #859900;  // 60 -20  65
+
+
+// Mixed colors
+// ------------
+// While not part of the original Solarized base tones, these derived tones
+// are meant to replicate the visual style of the classic skin. They should
+// not be used in cases where sufficiently contrasting colors are needed.
+
+$sol-light-mix1:  mix($sol-base1, $sol-base3);
+$sol-light-mix2:  mix($sol-blue, $sol-base00);
+$sol-light-mix3:  mix($sol-base2, $sol-base3);
+$sol-dark-mix1:   mix($sol-base01, $sol-base03);
+$sol-dark-mix2:   mix($sol-blue, $sol-base0);
+$sol-dark-mix3:   mix($sol-base02, $sol-base03);
+
+
+// Mode selection
+// --------------
+
+$sol-mono3:    $sol-base3;
+$sol-mono2:    $sol-base2;
+$sol-mono1:    $sol-base1;
+$sol-mono00:   $sol-base00;
+$sol-mono01:   $sol-base01;
+$sol-mix1:     $sol-light-mix1;
+$sol-mix2:     $sol-light-mix2;
+$sol-mix3:     $sol-light-mix3;
+
+@if $sol-is-dark {
+  $sol-mono3:  $sol-base03;
+  $sol-mono2:  $sol-base02;
+  $sol-mono1:  $sol-base01;
+  $sol-mono00: $sol-base0;
+  $sol-mono01: $sol-base1;
+  $sol-mix1:   $sol-dark-mix1;
+  $sol-mix2:   $sol-dark-mix2;
+  $sol-mix3:   $sol-dark-mix3;
+}
+
+@if $sol-is-auto {
+  :root {
+    --solarized-mono3:  #{$sol-base3};
+    --solarized-mono2:  #{$sol-base2};
+    --solarized-mono1:  #{$sol-base1};
+    --solarized-mono00: #{$sol-base00};
+    --solarized-mono01: #{$sol-base01};
+    --solarized-mix1:   #{$sol-light-mix1};
+    --solarized-mix2:   #{$sol-light-mix2};
+    --solarized-mix3:   #{$sol-light-mix3};
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --solarized-mono3:  #{$sol-base03};
+      --solarized-mono2:  #{$sol-base02};
+      --solarized-mono1:  #{$sol-base01};
+      --solarized-mono00: #{$sol-base0};
+      --solarized-mono01: #{$sol-base1};
+      --solarized-mix1:   #{$sol-dark-mix1};
+      --solarized-mix2:   #{$sol-dark-mix2};
+      --solarized-mix3:   #{$sol-dark-mix3};
+    }
+  }
+
+  $sol-mono3:  var(--solarized-mono3);
+  $sol-mono2:  var(--solarized-mono2);
+  $sol-mono1:  var(--solarized-mono1);
+  $sol-mono00: var(--solarized-mono00);
+  $sol-mono01: var(--solarized-mono01);
+  $sol-mix1:   var(--solarized-mix1);
+  $sol-mix2:   var(--solarized-mix2);
+  $sol-mix3:   var(--solarized-mix3);
+}
+
+
+// Minima color variables
+// ----------------------
+
+$brand-color:           $sol-mono1 !default;
+$brand-color-light:     $sol-mix1 !default;
+$brand-color-dark:      $sol-mono00 !default;
+
+$site-title-color:      $sol-mono00 !default;
+
+$text-color:            $sol-mono01 !default;
+$background-color:      $sol-mono3 !default;
+$code-background-color: $sol-mono2 !default;
+
+$link-base-color:       $sol-blue !default;
+$link-visited-color:    $sol-mix2 !default;
+$link-hover-color:      $sol-mono00 !default;
+
+$border-color-01:       $brand-color-light !default;
+$border-color-02:       $sol-mono1 !default;
+$border-color-03:       $sol-mono00 !default;
+
+$table-text-color:      $sol-mono00 !default;
+$table-zebra-color:     $sol-mix3 !default;
+$table-header-bg-color: $sol-mono2 !default;
+$table-header-border:   $sol-mono1 !default;
+$table-border-color:    $sol-mono1 !default;
+
+
+// Syntax highlighting styles
+// --------------------------
+
+.highlight {
+  .c     { color: $sol-mono1; font-style: italic } // Comment
+  .err   { color: $sol-red } // Error
+  .k     { color: $sol-mono01; font-weight: bold } // Keyword
+  .o     { color: $sol-mono01; font-weight: bold } // Operator
+  .cm    { color: $sol-mono1; font-style: italic } // Comment.Multiline
+  .cp    { color: $sol-mono1; font-weight: bold } // Comment.Preproc
+  .c1    { color: $sol-mono1; font-style: italic } // Comment.Single
+  .cs    { color: $sol-mono1; font-weight: bold; font-style: italic } // Comment.Special
+  .gd    { color: $sol-red } // Generic.Deleted
+  .gd .x { color: $sol-red } // Generic.Deleted.Specific
+  .ge    { color: $sol-mono00; font-style: italic } // Generic.Emph
+  .gr    { color: $sol-red } // Generic.Error
+  .gh    { color: $sol-mono1 } // Generic.Heading
+  .gi    { color: $sol-green } // Generic.Inserted
+  .gi .x { color: $sol-green } // Generic.Inserted.Specific
+  .go    { color: $sol-mono00 } // Generic.Output
+  .gp    { color: $sol-mono00 } // Generic.Prompt
+  .gs    { color: $sol-mono01; font-weight: bold } // Generic.Strong
+  .gu    { color: $sol-mono1 } // Generic.Subheading
+  .gt    { color: $sol-red } // Generic.Traceback
+  .kc    { color: $sol-mono01; font-weight: bold } // Keyword.Constant
+  .kd    { color: $sol-mono01; font-weight: bold } // Keyword.Declaration
+  .kp    { color: $sol-mono01; font-weight: bold } // Keyword.Pseudo
+  .kr    { color: $sol-mono01; font-weight: bold } // Keyword.Reserved
+  .kt    { color: $sol-violet; font-weight: bold } // Keyword.Type
+  .m     { color: $sol-cyan } // Literal.Number
+  .s     { color: $sol-magenta } // Literal.String
+  .na    { color: $sol-cyan } // Name.Attribute
+  .nb    { color: $sol-blue } // Name.Builtin
+  .nc    { color: $sol-violet; font-weight: bold } // Name.Class
+  .no    { color: $sol-cyan } // Name.Constant
+  .ni    { color: $sol-violet } // Name.Entity
+  .ne    { color: $sol-violet; font-weight: bold } // Name.Exception
+  .nf    { color: $sol-blue; font-weight: bold } // Name.Function
+  .nn    { color: $sol-mono00 } // Name.Namespace
+  .nt    { color: $sol-blue } // Name.Tag
+  .nv    { color: $sol-cyan } // Name.Variable
+  .ow    { color: $sol-mono01; font-weight: bold } // Operator.Word
+  .w     { color: $sol-mono1 } // Text.Whitespace
+  .mf    { color: $sol-cyan } // Literal.Number.Float
+  .mh    { color: $sol-cyan } // Literal.Number.Hex
+  .mi    { color: $sol-cyan } // Literal.Number.Integer
+  .mo    { color: $sol-cyan } // Literal.Number.Oct
+  .sb    { color: $sol-magenta } // Literal.String.Backtick
+  .sc    { color: $sol-magenta } // Literal.String.Char
+  .sd    { color: $sol-magenta } // Literal.String.Doc
+  .s2    { color: $sol-magenta } // Literal.String.Double
+  .se    { color: $sol-magenta } // Literal.String.Escape
+  .sh    { color: $sol-magenta } // Literal.String.Heredoc
+  .si    { color: $sol-magenta } // Literal.String.Interpol
+  .sx    { color: $sol-magenta } // Literal.String.Other
+  .sr    { color: $sol-green } // Literal.String.Regex
+  .s1    { color: $sol-magenta } // Literal.String.Single
+  .ss    { color: $sol-magenta } // Literal.String.Symbol
+  .bp    { color: $sol-mono1 } // Name.Builtin.Pseudo
+  .vc    { color: $sol-cyan } // Name.Variable.Class
+  .vg    { color: $sol-cyan } // Name.Variable.Global
+  .vi    { color: $sol-cyan } // Name.Variable.Instance
+  .il    { color: $sol-cyan } // Literal.Number.Integer.Long
+}