aboutsummaryrefslogtreecommitdiff
path: root/_sass/minima
diff options
context:
space:
mode:
Diffstat (limited to '_sass/minima')
-rw-r--r--_sass/minima/_base.scss281
-rw-r--r--_sass/minima/_layout.scss341
-rw-r--r--_sass/minima/custom-styles.scss2
-rw-r--r--_sass/minima/custom-variables.scss1
-rw-r--r--_sass/minima/initialize.scss50
-rw-r--r--_sass/minima/skins/auto.scss361
-rw-r--r--_sass/minima/skins/classic.scss5
-rw-r--r--_sass/minima/skins/dark.scss5
-rw-r--r--_sass/minima/skins/solarized-dark.scss5
-rw-r--r--_sass/minima/skins/solarized-light.scss4
-rw-r--r--_sass/minima/skins/solarized.scss201
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
+}