diff --git a/.gitignore b/.gitignore
index f60b43ac..ce6238b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,8 @@
-_site
-.sass-cache
-.jekyll-cache
-.jekyll-metadata
-vendor
-Gemfile.lock
-.bundle
-/.idea/
\ No newline at end of file
+.bundle/
+.jekyll-cache/
+.jekyll-metadata/
+.sass-cache/
+/Gemfile.lock
+/_site/
+/.idea/
+/vendor/
diff --git a/_data/settings.yaml b/_data/settings.yaml
index bd8f1555..2496b218 100644
--- a/_data/settings.yaml
+++ b/_data/settings.yaml
@@ -19,8 +19,10 @@ appearance_skin_light:
- mint
- plum
- sunrise
- - catppuccin_latte
- - catppuccin_mocha
+ - catppuccin-latte
+ - catppuccin-frappe
+ - catppuccin-macchiato
+ - catppuccin-mocha
appearance_skin_dark:
type: radio
default: dark
@@ -35,5 +37,7 @@ appearance_skin_dark:
- mint
- plum
- sunrise
- - catppuccin_latte
- - catppuccin_mocha
+ - catppuccin-latte
+ - catppuccin-frappe
+ - catppuccin-macchiato
+ - catppuccin-mocha
diff --git a/_includes/head/custom.html b/_includes/head/custom.html
index 55de7508..9f365f21 100644
--- a/_includes/head/custom.html
+++ b/_includes/head/custom.html
@@ -1,2 +1 @@
-
diff --git a/_sass/minimal-mistakes-plus.scss b/_sass/minimal-mistakes-plus.scss
index b675223b..ded51149 100644
--- a/_sass/minimal-mistakes-plus.scss
+++ b/_sass/minimal-mistakes-plus.scss
@@ -1,4 +1,37 @@
-@import "minimal-mistakes";
+@import "minimal-mistakes/copyright";
+
+@import "minimal-mistakes-plus/common";
+
+/* Mixins and functions */
+@import "minimal-mistakes/vendor/breakpoint/breakpoint";
+@include breakpoint-set("to ems", true);
+@import "minimal-mistakes/vendor/magnific-popup/magnific-popup"; // Magnific Popup
+@import "minimal-mistakes/vendor/susy/susy";
+
+/* Core CSS */
+@import "minimal-mistakes-plus/reset";
+@import "minimal-mistakes-plus/base";
+@import "minimal-mistakes-plus/forms";
+@import "minimal-mistakes-plus/tables";
+@import "minimal-mistakes/animations";
+
+/* Components */
+@import "minimal-mistakes-plus/buttons";
+@import "minimal-mistakes-plus/notices";
+@import "minimal-mistakes-plus/masthead";
+@import "minimal-mistakes-plus/navigation";
+@import "minimal-mistakes-plus/footer";
+@import "minimal-mistakes-plus/search";
+@import "minimal-mistakes/syntax";
+
+/* Utility classes */
+@import "minimal-mistakes-plus/utilities";
+
+/* Layout specific */
+@import "minimal-mistakes-plus/page";
+@import "minimal-mistakes-plus/archive";
+@import "minimal-mistakes-plus/sidebar";
+@import "minimal-mistakes/print";
blockquote {
margin-inline: 0;
diff --git a/_sass/minimal-mistakes-plus/_archive.scss b/_sass/minimal-mistakes-plus/_archive.scss
new file mode 100644
index 00000000..cbcfb417
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_archive.scss
@@ -0,0 +1,431 @@
+/* ==========================================================================
+ ARCHIVE
+ ========================================================================== */
+
+.archive {
+ margin-top: 1em;
+ margin-bottom: 2em;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ float: inline-end;
+ width: calc(100% - #{$right-sidebar-width-narrow});
+ padding-inline-end: $right-sidebar-width-narrow;
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ width: calc(100% - #{$right-sidebar-width});
+ padding-inline-end: $right-sidebar-width;
+ }
+}
+
+.archive__item {
+ position: relative;
+
+ a {
+ position: relative;
+ z-index: 10;
+ }
+
+ a[rel="permalink"] {
+ position: static;
+ }
+}
+
+.archive__subtitle {
+ margin: 1.414em 0 0.5em;
+ padding-bottom: 0.5em;
+ font-size: $type-size-5;
+ color: $muted-text-color;
+ border-bottom: 1px solid $border-color;
+
+ + .list__item .archive__item-title {
+ margin-top: 0.5em;
+ }
+}
+
+.archive__item-title {
+ margin-bottom: 0.25em;
+ font-family: $sans-serif-narrow;
+ line-height: initial;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ a[rel="permalink"]::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ }
+
+ a + a {
+ opacity: 0.5;
+ }
+}
+
+/* remove border*/
+.page__content {
+ .archive__item-title {
+ margin-top: 1em;
+ border-bottom: none;
+ }
+}
+
+.archive__item-excerpt {
+ margin-top: 0;
+ font-size: $type-size-6;
+
+ & + p {
+ text-indent: 0;
+ }
+
+ a {
+ position: relative;
+ }
+}
+
+.archive__item-teaser {
+ position: relative;
+ border-radius: $border-radius;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ }
+}
+
+.archive__item-caption {
+ position: absolute;
+ bottom: 0;
+ inset-inline-end: 0;
+ margin: 0 auto;
+ padding: 2px 5px;
+ color: #fff;
+ font-family: $caption-font-family;
+ font-size: $type-size-8;
+ background: #000;
+ text-align: end;
+ z-index: 5;
+ opacity: 0.5;
+ border-radius: $border-radius 0 0 0;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ padding: 5px 10px;
+ }
+
+ a {
+ color: #fff;
+ text-decoration: none;
+ }
+}
+
+/*
+ List view
+ ========================================================================== */
+
+.list__item {
+ .page__meta {
+ margin: 0 0 4px;
+ font-size: 0.6em;
+ }
+}
+
+/*
+ Grid view
+ ========================================================================== */
+
+.archive {
+ .grid__wrapper {
+ /* extend grid elements to the right */
+
+ @include breakpoint(map-get($default-config, "large")) {
+ margin-inline-end: calc(-1 * #{$right-sidebar-width-narrow});
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ margin-inline-end: calc(-1 * #{$right-sidebar-width});
+ }
+ }
+}
+
+.grid__item {
+ margin-bottom: 2em;
+
+ @include breakpoint(map-get($default-config, "small")) {
+ float: inline-start;
+ width: span(5 of 10);
+
+ &:nth-child(2n + 1) {
+ clear: both;
+ margin-inline-start: 0;
+ }
+
+ &:nth-child(2n + 2) {
+ clear: none;
+ margin-inline-start: gutter(of 10);
+ }
+ }
+
+ @include breakpoint(map-get($default-config, "medium")) {
+ margin-inline: 0; /* override margin*/
+ width: span(3 of 12);
+
+ &:nth-child(2n + 1) {
+ clear: none;
+ }
+
+ &:nth-child(4n + 1) {
+ clear: both;
+ }
+
+ &:nth-child(4n + 2) {
+ clear: none;
+ margin-inline-start: gutter(1 of 12);
+ }
+
+ &:nth-child(4n + 3) {
+ clear: none;
+ margin-inline-start: gutter(1 of 12);
+ }
+
+ &:nth-child(4n + 4) {
+ clear: none;
+ margin-inline-start: gutter(1 of 12);
+ }
+ }
+
+ .page__meta {
+ margin: 0 0 4px;
+ font-size: 0.6em;
+ }
+
+ .page__meta-sep {
+ display: block;
+
+ &::before {
+ display: none;
+ }
+ }
+
+ .archive__item-title {
+ margin-top: 0.5em;
+ font-size: $type-size-5;
+ }
+
+ .archive__item-excerpt {
+ display: none;
+
+ @include breakpoint(map-get($default-config, "medium")) {
+ display: block;
+ font-size: $type-size-6;
+ }
+ }
+
+ .archive__item-teaser {
+ @include breakpoint(map-get($default-config, "small")) {
+ max-height: 200px;
+ }
+
+ @include breakpoint(map-get($default-config, "medium")) {
+ max-height: 120px;
+ }
+ }
+}
+
+/*
+ Features
+ ========================================================================== */
+
+.feature__wrapper {
+ @include clearfix();
+ margin-bottom: 2em;
+ border-bottom: 1px solid $border-color;
+
+ .archive__item-title {
+ margin-bottom: 0;
+ }
+}
+
+.feature__item {
+ position: relative;
+ margin-bottom: 2em;
+ font-size: 1.125em;
+
+ @include breakpoint(map-get($default-config, "small")) {
+ float: inline-start;
+ margin-bottom: 0;
+ width: span(4 of 12);
+
+ &:nth-child(3n + 1) {
+ clear: both;
+ margin-inline-start: 0;
+ }
+
+ &:nth-child(3n + 2) {
+ clear: none;
+ margin-inline-start: gutter(of 12);
+ }
+
+ &:nth-child(3n + 3) {
+ clear: none;
+ margin-inline-start: gutter(of 12);
+ }
+
+ .feature__item-teaser {
+ max-height: 200px;
+ overflow: hidden;
+ }
+ }
+
+ .archive__item-body {
+ padding-inline: gutter(1 of 12);
+ }
+
+ a.btn::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ }
+
+ &--left, &--right {
+ position: relative;
+ margin-inline: 0;
+ width: 100%;
+ clear: both;
+ font-size: 1.125em;
+
+ a.btn::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ }
+
+ .archive__item-teaser {
+ margin-bottom: 2em;
+ }
+ }
+
+ &--left {
+ float: inline-start;
+
+ .archive__item {
+ float: inline-start;
+ }
+
+ @include breakpoint(map-get($default-config, "small")) {
+ .archive__item-teaser {
+ float: inline-start;
+ width: span(5 of 12);
+ }
+
+ .archive__item-body {
+ float: inline-end;
+ width: span(7 of 12);
+ padding-inline-start: gutter(0.5 of 12);
+ padding-inline-end: gutter(1 of 12);
+ }
+ }
+ }
+
+ &--right {
+ float: inline-end;
+
+ .archive__item {
+ float: inline-end;
+ }
+
+ @include breakpoint(map-get($default-config, "small")) {
+ text-align: end;
+
+ .archive__item-teaser {
+ float: inline-end;
+ width: span(5 of 12);
+ }
+
+ .archive__item-body {
+ float: inline-start;
+ width: span(7 of 12);
+ padding-inline-start: gutter(1 of 12);
+ padding-inline-end: gutter(0.5 of 12);
+ }
+ }
+ }
+
+ &--center {
+ position: relative;
+ float: inline-start;
+ margin-inline: 0;
+ width: 100%;
+ clear: both;
+ font-size: 1.125em;
+
+ .archive__item {
+ float: inline-start;
+ width: 100%;
+ }
+
+ .archive__item-teaser {
+ margin-bottom: 2em;
+ }
+
+ a.btn::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ }
+
+ @include breakpoint(map-get($default-config, "small")) {
+ text-align: center;
+
+ .archive__item-teaser {
+ margin: 0 auto;
+ width: span(5 of 12);
+ }
+
+ .archive__item-body {
+ margin: 0 auto;
+ width: span(7 of 12);
+ }
+ }
+ }
+}
+
+/* Place inside an archive layout */
+
+.archive {
+ .feature__wrapper {
+ .archive__item-title {
+ margin-top: 0.25em;
+ font-size: 1em;
+ }
+ }
+
+ .feature__item,
+ .feature__item--left,
+ .feature__item--center,
+ .feature__item--right {
+ font-size: 1em;
+ }
+}
+
+/*
+ Wide Pages
+ ========================================================================== */
+
+.wide {
+ .archive {
+ @include breakpoint(map-get($default-config, "large")) {
+ padding-inline-end: 0;
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ padding-inline-end: 0;
+ }
+ }
+}
+
+/* Place inside a single layout */
+
+.layout--single {
+ .feature__wrapper {
+ display: inline-block;
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_base.scss b/_sass/minimal-mistakes-plus/_base.scss
new file mode 100644
index 00000000..30268954
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_base.scss
@@ -0,0 +1,341 @@
+/* ==========================================================================
+ BASE ELEMENTS
+ ========================================================================== */
+
+html {
+ /* sticky footer fix */
+ position: relative;
+ min-height: 100%;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ color: $text-color;
+ font-family: $global-font-family;
+ line-height: 1.5;
+
+ &.overflow--hidden {
+ /* when primary navigation is visible, the content in the background won't scroll */
+ overflow: hidden;
+ }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 2em 0 0.5em;
+ line-height: 1.2;
+ font-family: $header-font-family;
+ font-weight: bold;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: $h-size-1;
+}
+
+h2 {
+ font-size: $h-size-2;
+}
+
+h3 {
+ font-size: $h-size-3;
+}
+
+h4 {
+ font-size: $h-size-4;
+}
+
+h5 {
+ font-size: $h-size-5;
+}
+
+h6 {
+ font-size: $h-size-6;
+}
+
+small,
+.small {
+ font-size: $type-size-6;
+}
+
+p {
+ margin-bottom: 1.3em;
+}
+
+u,
+ins {
+ text-decoration: none;
+ border-bottom: 1px solid $text-color;
+ a {
+ color: inherit;
+ }
+}
+
+del a {
+ color: inherit;
+}
+
+/* reduce orphans and widows when printing */
+
+p,
+pre,
+blockquote,
+ul,
+ol,
+dl,
+figure,
+table,
+fieldset {
+ orphans: 3;
+ widows: 3;
+}
+
+/* abbreviations */
+
+abbr[title],
+abbr[data-original-title] {
+ text-decoration: none;
+ cursor: help;
+ border-bottom: 1px dotted $text-color;
+}
+
+/* blockquotes */
+
+blockquote {
+ margin-block: 2em;
+ margin-inline-end: 1em;
+ padding-inline: 1em;
+ font-style: italic;
+ border-inline-start: 0.25em solid $primary-color;
+
+ cite {
+ font-style: italic;
+
+ &::before {
+ content: "\2014";
+ padding-inline-end: 5px;
+ }
+ }
+}
+
+/* links */
+
+a {
+ &:focus {
+ @extend %tab-focus;
+ }
+
+ &:visited {
+ color: $link-color-visited;
+ }
+
+ &:hover {
+ color: $link-color-hover;
+ outline: 0;
+ }
+}
+
+/* buttons */
+
+button:focus {
+ @extend %tab-focus;
+}
+
+/* code */
+
+tt,
+code,
+kbd,
+samp,
+pre {
+ font-family: $monospace;
+}
+
+pre {
+ overflow-x: auto; /* add scrollbars to wide code blocks*/
+}
+
+/* horizontal rule */
+
+hr {
+ display: block;
+ margin: 1em 0;
+ border: 0;
+ border-top: 1px solid $border-color;
+}
+
+/* lists */
+
+ul li,
+ol li {
+ margin-bottom: 0.5em;
+}
+
+li ul,
+li ol {
+ margin-top: 0.5em;
+}
+
+/*
+ Media and embeds
+ ========================================================================== */
+
+/* Figures and images */
+
+figure {
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: start;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ margin: 2em 0;
+
+ img,
+ iframe,
+ .fluid-width-video-wrapper {
+ margin-bottom: 1em;
+ }
+
+ img {
+ width: 100%;
+ border-radius: $border-radius;
+ -webkit-transition: $global-transition;
+ transition: $global-transition;
+ }
+
+ > a {
+ display: block;
+ }
+
+ &.half {
+ > a,
+ > img {
+ @include breakpoint(map-get($default-config, "small")) {
+ width: calc(50% - 0.5em);
+ }
+ }
+
+ figcaption {
+ width: 100%;
+ }
+ }
+
+ &.third {
+ > a,
+ > img {
+ @include breakpoint(map-get($default-config, "small")) {
+ width: calc(33.3333% - 0.5em);
+ }
+ }
+
+ figcaption {
+ width: 100%;
+ }
+ }
+}
+
+/* Figure captions */
+
+figcaption {
+ margin-bottom: 0.5em;
+ color: $muted-text-color;
+ font-family: $caption-font-family;
+ font-size: $type-size-6;
+
+ a {
+ -webkit-transition: $global-transition;
+ transition: $global-transition;
+
+ &:hover {
+ color: $link-color-hover;
+ }
+ }
+}
+
+/* Fix IE9 SVG bug */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/*
+ Navigation lists
+ ========================================================================== */
+
+/**
+ * Removes margins, padding, and bullet points from navigation lists
+ *
+ * Example usage:
+ *
+ */
+
+nav {
+ ul {
+ margin: 0;
+ padding: 0;
+ }
+
+ li {
+ list-style: none;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ /* override white-space for nested lists */
+ ul li,
+ ol li {
+ margin-bottom: 0;
+ }
+
+ li ul,
+ li ol {
+ margin-top: 0;
+ }
+}
+
+/*
+ Global animation transition
+ ========================================================================== */
+
+b,
+i,
+strong,
+em,
+blockquote,
+p,
+q,
+span,
+figure,
+img,
+h1,
+h2,
+header,
+input,
+a,
+tr,
+td,
+form button,
+input[type="submit"],
+.btn,
+.highlight,
+.archive__item-teaser {
+ -webkit-transition: $global-transition;
+ transition: $global-transition;
+}
diff --git a/_sass/minimal-mistakes-plus/_buttons.scss b/_sass/minimal-mistakes-plus/_buttons.scss
new file mode 100644
index 00000000..5e5f827e
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_buttons.scss
@@ -0,0 +1,104 @@
+/* ==========================================================================
+ BUTTONS
+ ========================================================================== */
+
+/*
+ Default button
+ ========================================================================== */
+
+.btn {
+ /* default */
+ display: inline-block;
+ margin-bottom: 0.25em;
+ padding: 0.5em 1em;
+ font-family: $sans-serif;
+ font-size: $type-size-6;
+ font-weight: bold;
+ text-align: center;
+ text-decoration: none;
+ border-width: 0;
+ border-radius: $border-radius;
+ cursor: pointer;
+
+ .icon {
+ margin-inline-end: 0.5em;
+ }
+
+ .icon + .hidden {
+ margin-inline-start: -0.5em; /* override for hidden text*/
+ }
+
+ /* button colors */
+ $buttoncolors:
+ (primary, $primary-color),
+ (inverse, #fff),
+ (light-outline, transparent),
+ (success, $success-color),
+ (warning, $warning-color),
+ (danger, $danger-color),
+ (info, $info-color),
+ /* brands */
+ (bluesky, $bluesky-color),
+ (facebook, $facebook-color),
+ (linkedin, $linkedin-color),
+ (mastodon, $mastodon-color),
+ (twitter, $twitter-color),
+ (x, $x-color);
+
+ @each $buttoncolor, $color in $buttoncolors {
+ &--#{$buttoncolor} {
+ background-color: $color;
+ color: skin-var("func-yiq-contrast-button-color-#{$buttoncolor}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold");
+ @if ($buttoncolor == inverse) {
+ border: 1px solid $border-color;
+ }
+ @if ($buttoncolor == light-outline) {
+ border: 1px solid #fff;
+ }
+
+ &:visited {
+ background-color: $color;
+ color: skin-var("func-yiq-contrast-button-color-#{$buttoncolor}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold");
+ }
+
+ &:hover {
+ background-color: skin-var("func-mix-000-button-color-#{$buttoncolor}-20");
+ color: skin-var("func-yiq-contrast-button-color-#{$buttoncolor}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold");
+ }
+ }
+ }
+
+ /* fills width of parent container */
+ &--block {
+ display: block;
+ width: 100%;
+
+ + .btn--block {
+ margin-top: 0.25em;
+ }
+ }
+
+ /* disabled */
+ &--disabled {
+ pointer-events: none;
+ cursor: not-allowed;
+ filter: alpha(opacity=65);
+ box-shadow: none;
+ opacity: 0.65;
+ }
+
+ /* extra large button */
+ &--x-large {
+ font-size: $type-size-4;
+ }
+
+ /* large button */
+ &--large {
+ font-size: $type-size-5;
+ }
+
+ /* small button */
+ &--small {
+ font-size: $type-size-7;
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_common.scss b/_sass/minimal-mistakes-plus/_common.scss
new file mode 100644
index 00000000..bdfe3550
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_common.scss
@@ -0,0 +1,691 @@
+@function yiq-is-light($color, $threshold) {
+ $red: red($color);
+ $green: green($color);
+ $blue: blue($color);
+
+ $yiq: (($red * 299) + ($green * 587) + ($blue*114)) / 1000;
+
+ @return if($yiq >= $threshold, true, false);
+}
+
+@function yiq-contrast-color($color, $dark, $light, $threshold) {
+ @return if(yiq-is-light($color, $threshold), $dark, $light);
+}
+
+@function num-key($num, $str: "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz") {
+ @if $num < 0 {
+ @return "-#{num62(-$num)}";
+ }
+
+ $size: str-length($str);
+ @if $num < $size {
+ $i: $num + 1;
+ @return str-slice($str, $i, $i);
+ }
+
+ $result: "";
+ @while $num > 0 {
+ $i: ($num % $size) + 1;
+ $result: str-slice($str, $i, $i) + $result;
+ $num: floor($num / 62);
+ }
+
+ @return $result;
+}
+
+$compress_css_variables: false !default;
+
+$skin-key-map: ();
+@function skin-key($key) {
+ $real-key: map-get($skin-key-map, $key);
+ @if not $real-key {
+ $real-key: if($compress_css_variables, num-key(length($skin-key-map)), mm-#{$key});
+ $skin-key-map: map-merge($skin-key-map, ($key: $real-key)) !global;
+ }
+ @return $real-key;
+}
+
+@function skin-var($key) {
+ $real-key: map-get($skin-key-map, $key);
+ @if not $real-key {
+ @warn("skin-key-map: not found #{$key}");
+ }
+ @return var(--#{$real-key});
+}
+
+@mixin clearfix {
+ clear: both;
+
+ &::after {
+ clear: both;
+ content: "";
+ display: table;
+ }
+}
+
+$configs: () !default;
+
+$default-config: () !default;
+
+$default-config: map-merge((
+ "doc-font-size": 16px,
+ "paragraph-indent": false,
+ "indent-var": 1.3em,
+ "helvetica": (Helvetica, "Helvetica Neue", Arial, sans-serif),
+ "georgia": (Georgia, serif),
+ "times": (Times, serif),
+ "bodoni": ("Bodoni MT", serif),
+ "calisto": ("Calisto MT", serif),
+ "garamond": (Garamond, serif),
+ "monospace-code": (ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace),
+ "handwritten": ('Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive),
+ "default-sans-serif": (-apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif),
+ "default-serif": (Georgia, Times, serif),
+ "default-monospace": (Monaco, Consolas, "Lucida Console", monospace),
+ "emoji-native": ('Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'),
+ "type-size-1": 2.441em,
+ "type-size-2": 1.953em,
+ "type-size-3": 1.563em,
+ "type-size-4": 1.25em,
+ "type-size-5": 1em,
+ "type-size-6": 0.75em,
+ "type-size-7": 0.6875em,
+ "type-size-8": 0.625em,
+ "h-size-1": 1.563em,
+ "h-size-2": 1.25em,
+ "h-size-3": 1.125em,
+ "h-size-4": 1.0625em,
+ "h-size-5": 1.03125em,
+ "h-size-6": 1em,
+ "gray": #7a8288,
+ "background-color": #fff,
+ "code-background-color": #fafafa,
+ "primary-color": #6f777d,
+ "success-color": #3fa63f,
+ "warning-color": #d67f05,
+ "danger-color": #ee5f5b,
+ "info-color": #3b9cba,
+ "yiq-contrasted-light-default": #fff,
+ "yiq-contrasted-threshold": 175,
+ // "yiq-debug": false,
+ "behance-color": #1769ff,
+ "bitbucket-color": #205081,
+ "bluesky-color": #1083fe,
+ "discord-color": #5865f2,
+ "dribbble-color": #ea4c89,
+ "facebook-color": #3b5998,
+ "flickr-color": #ff0084,
+ "foursquare-color": #0072b1,
+ "github-color": #171516,
+ "gitlab-color": #e24329,
+ "instagram-color": #cd3376,
+ "keybase-color": #ef7639,
+ "lastfm-color": #d51007,
+ "linkedin-color": #007bb6,
+ "mastodon-color": #2b90d9,
+ "pinterest-color": #cb2027,
+ "reddit-color": #ff4500,
+ "rss-color": #fa9b39,
+ "signal-color": #3a76f0,
+ "soundcloud-color": #ff3300,
+ "stackoverflow-color": #fe7a15,
+ "telegram-color": #2aabee,
+ "tumblr-color": #32506d,
+ "twitter-color": #55acee,
+ "x-color": #0f1419,
+ "vimeo-color": #1ab7ea,
+ "vine-color": #00bf8f,
+ "whatsapp-color": #25d366,
+ "xing-color": #006567,
+ "youtube-color": #bb0000,
+ "notice-background-mix": 80%,
+ "code-notice-background-mix": 90%,
+ "base00": #263238,
+ "base01": #2e3c43,
+ "base02": #314549,
+ "base03": #546e7a,
+ "base04": #b2ccd6,
+ "base05": #eeffff,
+ "base06": #eeffff,
+ "base07": #ffffff,
+ "base08": #f07178,
+ "base09": #f78c6c,
+ "base0a": #ffcb6b,
+ "base0b": #c3e88d,
+ "base0c": #89ddff,
+ "base0d": #82aaff,
+ "base0e": #c792ea,
+ "base0f": #ff5370,
+ "small": 600px,
+ "medium": 768px,
+ "medium-wide": 900px,
+ "large": 1024px,
+ "x-large": 1280px,
+ "right-sidebar-width-narrow": 200px,
+ "right-sidebar-width": 300px,
+ "right-sidebar-width-wide": 400px,
+ "border-radius": 4px,
+ "box-shadow": (0 1px 1px rgba(0, 0, 0, 0.125)),
+ "nav-height": 2em,
+ "nav-toggle-height": 2rem,
+ "navicon-width": 1.5rem,
+ "navicon-height": 0.25rem,
+ "global-transition": (all 0.2s ease-in-out),
+ "intro-transition": (intro 0.3s both),
+), $default-config);
+
+$configs: map-merge($configs, ("default": $default-config));
+
+@each $name, $config in $configs {
+ $config: map-merge($default-config, $config);
+
+ $doc-font-size: map-get($config, "doc-font-size");
+ @if $doc-font-size {
+ @if not map-get($config, "doc-font-size-medium") {
+ $config: map-merge($config, ("doc-font-size-medium": $doc-font-size * 1.125));
+ }
+ @if not map-get($config, "doc-font-size-medium") {
+ $config: map-merge($config, ("doc-font-size-medium": $doc-font-size * 1.125));
+ }
+ @if not map-get($config, "doc-font-size-large") {
+ $config: map-merge($config, ("doc-font-size-large": $doc-font-size * 1.25));
+ }
+ @if not map-get($config, "doc-font-size-x-large") {
+ $config: map-merge($config, ("doc-font-size-x-large": $doc-font-size * 1.375));
+ }
+ }
+
+ $default-serif: map-get($config, "default-serif");
+ @if $default-serif {
+ @if not map-get($config, "serif") {
+ $config: map-merge($config, ("serif": $default-serif));
+ }
+ }
+
+ $default-sans-serif: map-get($config, "default-sans-serif");
+ @if $default-sans-serif {
+ @if not map-get($config, "sans-serif") {
+ $config: map-merge($config, ("sans-serif": $default-sans-serif));
+ }
+ }
+
+ $sans-serif: map-get($config, "sans-serif");
+ @if $sans-serif {
+ @if not map-get($config, "sans-serif-narrow") {
+ $config: map-merge($config, ("sans-serif-narrow": $sans-serif));
+ }
+ @if not map-get($config, "global-font-family") {
+ $config: map-merge($config, ("global-font-family": $sans-serif));
+ }
+ @if not map-get($config, "header-font-family") {
+ $config: map-merge($config, ("header-font-family": $sans-serif));
+ }
+ }
+
+ $default-monospace: map-get($config, "default-monospace");
+ @if $default-monospace {
+ @if not map-get($config, "monospace") {
+ $config: map-merge($config, ("monospace": $default-monospace));
+ }
+ }
+
+ $serif: map-get($config, "serif");
+ @if $serif {
+ @if not map-get($config, "caption-font-family") {
+ $config: map-merge($config, ("caption-font-family": $serif));
+ }
+ }
+
+ $gray: map-get($config, "gray");
+ @if $gray {
+ @if not map-get($config, "dark-gray") {
+ $config: map-merge($config, ("dark-gray": mix(#000, $gray, 50%)));
+ }
+ @if not map-get($config, "darker-gray") {
+ $config: map-merge($config, ("darker-gray": mix(#000, $gray, 60%)));
+ }
+ @if not map-get($config, "light-gray") {
+ $config: map-merge($config, ("light-gray": mix(#fff, $gray, 50%)));
+ }
+ @if not map-get($config, "lighter-gray") {
+ $config: map-merge($config, ("lighter-gray": mix(#fff, $gray, 90%)));
+ }
+ }
+
+ $light-gray: map-get($config, "light-gray");
+ @if $light-gray {
+ @if not map-get($config, "code-background-color-dark") {
+ $config: map-merge($config, ("code-background-color-dark": $light-gray));
+ }
+ }
+
+ $dark-gray: map-get($config, "dark-gray");
+ @if $dark-gray {
+ @if not map-get($config, "text-color") {
+ $config: map-merge($config, ("text-color": $dark-gray));
+ }
+ @if not map-get($config, "yiq-contrasted-dark-default") {
+ $config: map-merge($config, ("yiq-contrasted-dark-default": $dark-gray));
+ }
+ }
+
+ $text-color: map-get($config, "text-color");
+ @if $text-color {
+ @if not map-get($config, "muted-text-color") {
+ $config: map-merge($config, ("muted-text-color": mix(#fff, $text-color, 20%)));
+ }
+ @if not map-get($config, "func-rgba-text-color-6") {
+ $config: map-merge($config, ("func-rgba-text-color-6": rgba($text-color, 0.06)));
+ }
+ }
+
+ $lighter-gray: map-get($config, "lighter-gray");
+ @if $lighter-gray {
+ @if not map-get($config, "border-color") {
+ $config: map-merge($config, ("border-color": $lighter-gray));
+ }
+ @if not map-get($config, "form-background-color") {
+ $config: map-merge($config, ("form-background-color": $lighter-gray));
+ }
+ @if not map-get($config, "footer-background-color") {
+ $config: map-merge($config, ("footer-background-color": $lighter-gray));
+ }
+ }
+
+ $primary-color: map-get($config, "primary-color");
+ @if $primary-color {
+ @if not map-get($config, "focus-color") {
+ $config: map-merge($config, ("focus-color": $primary-color));
+ }
+ @if not map-get($config, "active-color") {
+ $config: map-merge($config, ("active-color": mix(#fff, $primary-color, 80%)));
+ }
+ @if not map-get($config, "masthead-link-color") {
+ $config: map-merge($config, ("masthead-link-color": $primary-color));
+ }
+ @if not map-get($config, "masthead-link-color-hover") {
+ $config: map-merge($config, ("masthead-link-color-hover": mix(#000, $primary-color, 25%)));
+ }
+ @if not map-get($config, "navicon-link-color-hover") {
+ $config: map-merge($config, ("navicon-link-color-hover": mix(#fff, $primary-color, 75%)));
+ }
+ @if not map-get($config, "func-rgba-primary-color-70") {
+ $config: map-merge($config, ("func-rgba-primary-color-70": rgba($primary-color, 0.7)));
+ }
+ }
+
+ $info-color: map-get($config, "info-color");
+ @if $info-color {
+ @if not map-get($config, "link-color") {
+ $config: map-merge($config, ("link-color": mix(#000, $info-color, 20%)));
+ }
+ }
+
+ $link-color: map-get($config, "link-color");
+ @if $link-color {
+ @if not map-get($config, "link-color-hover") {
+ $config: map-merge($config, ("link-color-hover": mix(#000, $link-color, 25%)));
+ }
+ @if not map-get($config, "link-color-visited") {
+ $config: map-merge($config, ("link-color-visited": mix(#fff, $link-color, 15%)));
+ }
+ }
+
+ $x-large: map-get($config, "x-large");
+ @if $x-large {
+ @if not map-get($config, "max-width") {
+ $config: map-merge($config, ("max-width": $x-large));
+ }
+ }
+
+ $border-color: map-get($config, "border-color");
+ @if $border-color {
+ @if not map-get($config, "func-mix-000-border-color-25") {
+ $config: map-merge($config, ("func-mix-000-border-color-25": mix(#000, $border-color, 25%)));
+ }
+ }
+
+ $primary-color: map-get($config, "primary-color");
+ @if $primary-color {
+ @if not map-get($config, "func-mix-000-primary-color-25") {
+ $config: map-merge($config, ("func-mix-000-primary-color-25": mix(#000, $primary-color, 25%)));
+ }
+ }
+
+ $gray: map-get($config, "gray");
+ @if $gray {
+ @if not map-get($config, "func-mix-fff-gray-25") {
+ $config: map-merge($config, ("func-mix-fff-gray-25": mix(#fff, $gray, 25%)));
+ }
+ }
+
+ $background-color: map-get($config, "background-color");
+ $notice-background-mix: map-get($config, "notice-background-mix");
+ $code-notice-background-mix: map-get($config, "code-notice-background-mix");
+
+ $notice-color-keys: (
+ "light-gray",
+ "primary-color",
+ "info-color",
+ "warning-color",
+ "success-color",
+ "danger-color"
+ );
+ @each $notice-color-key in $notice-color-keys {
+ $notice-color: map-get($config, $notice-color-key);
+ @if $notice-color {
+ @if $background-color and $notice-background-mix {
+ @if not map-get($config, "func-mix-background-color-#{$notice-color-key}-notice-background-mix") {
+ $config: map-merge($config, ("func-mix-background-color-#{$notice-color-key}-notice-background-mix": mix($background-color, $notice-color, $notice-background-mix)));
+ }
+ }
+ @if $background-color and $code-notice-background-mix {
+ @if not map-get($config, "func-mix-background-color-#{$notice-color-key}-code-notice-background-mix") {
+ $config: map-merge($config, ("func-mix-background-color-#{$notice-color-key}-code-notice-background-mix": mix($background-color, $notice-color, $code-notice-background-mix)));
+ }
+ }
+ @if not map-get($config, "func-rgba-#{$notice-color-key}-25") {
+ $config: map-merge($config, ("func-rgba-#{$notice-color-key}-25": rgba($notice-color, 0.25)));
+ }
+ @if not map-get($config, "func-mix-000-#{$notice-color-key}-10") {
+ $config: map-merge($config, ("func-mix-000-#{$notice-color-key}-10": mix(#000, $notice-color, 10%)));
+ }
+ @if not map-get($config, "func-mix-000-#{$notice-color-key}-50") {
+ $config: map-merge($config, ("func-mix-000-#{$notice-color-key}-50": mix(#000, $notice-color, 50%)));
+ }
+ }
+ }
+
+ $yiq-contrasted-dark-default: map-get($config, "yiq-contrasted-dark-default");
+ $yiq-contrasted-light-default: map-get($config, "yiq-contrasted-light-default");
+ $yiq-contrasted-threshold: map-get($config, "yiq-contrasted-threshold");
+
+ @if $yiq-contrasted-dark-default and $yiq-contrasted-light-default and $yiq-contrasted-threshold {
+ $button-colors: (
+ "primary": map-get($config, "primary-color"),
+ "inverse": #fff,
+ "light-outline": transparent,
+ "success": map-get($config, "success-color"),
+ "warning": map-get($config, "warning-color"),
+ "danger": map-get($config, "danger-color"),
+ "info": map-get($config, "info-color"),
+ "bluesky": map-get($config, "bluesky-color"),
+ "facebook": map-get($config, "facebook-color"),
+ "linkedin": map-get($config, "linkedin-color"),
+ "mastodon": map-get($config, "mastodon-color"),
+ "twitter": map-get($config, "twitter-color"),
+ "x": map-get($config, "x-color"),
+ );
+
+ @each $button-color-key, $button-color in $button-colors {
+ @if $button-color {
+ @if not map-get($config, "func-yiq-contrast-button-color-#{$button-color-key}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold") {
+ $config: map-merge($config, ("func-yiq-contrast-button-color-#{$button-color-key}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold": yiq-contrast-color($button-color, $yiq-contrasted-dark-default, $yiq-contrasted-light-default, $yiq-contrasted-threshold)));
+ }
+ @if not map-get($config, "func-mix-000-button-color-#{$button-color-key}-20") {
+ $config: map-merge($config, ("func-mix-000-button-color-#{$button-color-key}-20": mix(#000, $button-color, 20)));
+ }
+ }
+ }
+
+ $muted-text-color: map-get($config, "muted-text-color");
+ @if $muted-text-color {
+ @if not map-get($config, "func-yiq-contrast-muted-text-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold") {
+ $config: map-merge($config, ("func-yiq-contrast-muted-text-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold": yiq-contrast-color($muted-text-color, $yiq-contrasted-dark-default, $yiq-contrasted-light-default, $yiq-contrasted-threshold)));
+ }
+ @if not map-get($config, "func-rgba-muted-text-color-50") {
+ $config: map-merge($config, ("func-rgba-muted-text-color-50": rgba($muted-text-color, 0.5)));
+ }
+ }
+
+ $active-color: map-get($config, "active-color");
+ @if $active-color {
+ @if not map-get($config, "func-yiq-contrast-active-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold") {
+ $config: map-merge($config, ("func-yiq-contrast-active-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold": yiq-contrast-color($active-color, $yiq-contrasted-dark-default, $yiq-contrasted-light-default, $yiq-contrasted-threshold)));
+ }
+ }
+ }
+
+ $configs: map-merge($configs, (#{$name}: $config))
+}
+
+$default-config: map-get($configs, "default");
+
+@each $name, $config in $configs {
+ $selector: if($name == "default", ":root", "[data-skin=#{$name}]:root");
+ #{$selector} {
+ @each $key, $value in $config {
+ @if str-slice($key, 1, 8) != "private-" {
+ @if $name == "default" or map-get($default-config, $key) != map-get($config, $key) {
+ --#{skin-key($key)}: #{$value};
+ }
+ }
+ }
+ }
+}
+
+/* ==========================================================================
+ Variables
+ ========================================================================== */
+
+/*
+ Typography
+ ========================================================================== */
+
+$doc-font-size: skin-var("doc-font-size");
+$doc-font-size-medium: skin-var("doc-font-size-medium");
+$doc-font-size-large: skin-var("doc-font-size-large");
+$doc-font-size-x-large: skin-var("doc-font-size-x-large");
+
+/* paragraph indention */
+$paragraph-indent: skin-var("paragraph-indent");
+$indent-var: skin-var("indent-var");
+
+/* Modern font stack */
+/* https://github.com/system-fonts/modern-font-stacks */
+
+/* Sans serif - modern font stack */
+$system-ui: system-ui, sans-serif;
+$humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+$geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
+$classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
+$neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+$industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
+$rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
+
+/* sans serif typefaces - defined in Minimal Mistakes */
+$helvetica: skin-var("helvetica");
+
+/* Serif - modern font stack */
+$transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
+$old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;;
+$monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
+$slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
+$antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
+$didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
+
+/* serif typefaces - defined in Minimal Mistakes */
+$georgia: skin-var("georgia");
+$times: skin-var("times");
+$bodoni: skin-var("bodoni");
+$calisto: skin-var("calisto");
+$garamond: skin-var("garamond");
+
+/* Monospace - modern font stack */
+$monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+/* Handwritten - modern font stack */
+$handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
+
+/* Defaults used in Minimal mistakes */
+$default-sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
+$default-serif: Georgia, Times, serif;
+$default-monospace: Monaco, Consolas, "Lucida Console", monospace;
+
+/* Emoji native from modern font stack - add to the end of the font-face for native emojis */
+$emoji-native: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+/* system typefaces */
+$serif: skin-var("serif");
+$sans-serif: skin-var("sans-serif");
+$sans-serif-narrow: skin-var("sans-serif-narrow");
+$monospace: skin-var("monospace");
+
+$global-font-family: skin-var("global-font-family");
+$header-font-family: skin-var("header-font-family");
+$caption-font-family: skin-var("caption-font-family");
+
+/* type scale */
+$type-size-1: skin-var("type-size-1");
+$type-size-2: skin-var("type-size-2");
+$type-size-3: skin-var("type-size-3");
+$type-size-4: skin-var("type-size-4");
+$type-size-5: skin-var("type-size-5");
+$type-size-6: skin-var("type-size-6");
+$type-size-7: skin-var("type-size-7");
+$type-size-8: skin-var("type-size-8");
+
+/* headline scale */
+$h-size-1: skin-var("h-size-1");
+$h-size-2: skin-var("h-size-2");
+$h-size-3: skin-var("h-size-3");
+$h-size-4: skin-var("h-size-4");
+$h-size-5: skin-var("h-size-5");
+$h-size-6: skin-var("h-size-6");
+
+/*
+ Colors
+ ========================================================================== */
+
+$gray: skin-var("gray");
+$dark-gray: skin-var("dark-gray");
+$darker-gray: skin-var("darker-gray");
+$light-gray: skin-var("light-gray");
+$lighter-gray: skin-var("lighter-gray");
+
+$background-color: skin-var("background-color");
+$code-background-color: skin-var("code-background-color");
+$code-background-color-dark: skin-var("code-background-color-dark");
+$text-color: skin-var("text-color");
+$muted-text-color: skin-var("muted-text-color");
+$border-color: skin-var("border-color");
+$form-background-color: skin-var("form-background-color");
+$footer-background-color: skin-var("footer-background-color");
+
+$primary-color: skin-var("primary-color");
+$success-color: skin-var("success-color");
+$warning-color: skin-var("warning-color");
+$danger-color: skin-var("danger-color");
+$info-color: skin-var("info-color");
+$focus-color: skin-var("focus-color");
+$active-color: skin-var("active-color");
+
+/* YIQ color contrast */
+$yiq-contrasted-dark-default: skin-var("yiq-contrasted-dark-default");
+$yiq-contrasted-light-default: skin-var("yiq-contrasted-light-default");
+$yiq-contrasted-threshold: skin-var("yiq-contrasted-threshold");
+// $yiq-debug: skin-var("yiq-debug");
+
+/* brands */
+$behance-color: skin-var("behance-color");
+$bitbucket-color: skin-var("bitbucket-color");
+$bluesky-color: skin-var("bluesky-color");
+$discord-color: skin-var("discord-color");
+$dribbble-color: skin-var("dribbble-color");
+$facebook-color: skin-var("facebook-color");
+$flickr-color: skin-var("flickr-color");
+$foursquare-color: skin-var("foursquare-color");
+$github-color: skin-var("github-color");
+$gitlab-color: skin-var("gitlab-color");
+$instagram-color: skin-var("instagram-color");
+$keybase-color: skin-var("keybase-color");
+$lastfm-color: skin-var("lastfm-color");
+$linkedin-color: skin-var("linkedin-color");
+$mastodon-color: skin-var("mastodon-color");
+$pinterest-color: skin-var("pinterest-color");
+$reddit-color: skin-var("reddit-color");
+$rss-color: skin-var("rss-color");
+$signal-color: skin-var("signal-color");
+$soundcloud-color: skin-var("soundcloud-color");
+$stackoverflow-color: skin-var("stackoverflow-color");
+$telegram-color: skin-var("telegram-color");
+$tumblr-color: skin-var("tumblr-color");
+$twitter-color: skin-var("twitter-color");
+$x-color: skin-var("x-color");
+$vimeo-color: skin-var("vimeo-color");
+$vine-color: skin-var("vine-color");
+$whatsapp-color: skin-var("whatsapp-color");
+$xing-color: skin-var("xing-color");
+$youtube-color: skin-var("youtube-color");
+
+$black-color: #000000;
+
+/* links */
+$link-color: skin-var("link-color");
+$link-color-hover: skin-var("link-color-hover");
+$link-color-visited: skin-var("link-color-visited");
+$masthead-link-color: skin-var("masthead-link-color");
+$masthead-link-color-hover: skin-var("masthead-link-color-hover");
+$navicon-link-color-hover: skin-var("navicon-link-color-hover");
+
+/* notices */
+$notice-background-mix: skin-var("notice-background-mix");
+$code-notice-background-mix: skin-var("code-notice-background-mix");
+
+/* syntax highlighting (base16) */
+$base00: skin-var("base00");
+$base01: skin-var("base01");
+$base02: skin-var("base02");
+$base03: skin-var("base03");
+$base04: skin-var("base04");
+$base05: skin-var("base05");
+$base06: skin-var("base06");
+$base07: skin-var("base07");
+$base08: skin-var("base08");
+$base09: skin-var("base09");
+$base0a: skin-var("base0a");
+$base0b: skin-var("base0b");
+$base0c: skin-var("base0c");
+$base0d: skin-var("base0d");
+$base0e: skin-var("base0e");
+$base0f: skin-var("base0f");
+
+/*
+ Breakpoints
+ ========================================================================== */
+
+$small: skin-var("small");
+$medium: skin-var("medium");
+$medium-wide: skin-var("medium-wide");
+$large: skin-var("large");
+$x-large: skin-var("x-large");
+$max-width: skin-var("max-width");
+
+/*
+ Grid
+ ========================================================================== */
+
+$right-sidebar-width-narrow: skin-var("right-sidebar-width-narrow");
+$right-sidebar-width: skin-var("right-sidebar-width");
+$right-sidebar-width-wide: skin-var("right-sidebar-width-wide");
+
+/*
+ Other
+ ========================================================================== */
+
+$border-radius: skin-var("border-radius");
+$box-shadow: skin-var("box-shadow");
+$nav-height: skin-var("nav-height");
+$nav-toggle-height: skin-var("nav-toggle-height");
+$navicon-width: skin-var("navicon-width");
+$navicon-height: skin-var("navicon-height");
+$global-transition: skin-var("global-transition");
+$intro-transition: skin-var("intro-transition");
+
+%tab-focus {
+ /* Default*/
+ outline: thin dotted $focus-color;
+ /* Webkit*/
+ outline: 5px auto $focus-color;
+ outline-offset: -2px;
+}
diff --git a/_sass/minimal-mistakes-plus/_footer.scss b/_sass/minimal-mistakes-plus/_footer.scss
new file mode 100644
index 00000000..741612f9
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_footer.scss
@@ -0,0 +1,83 @@
+/* ==========================================================================
+ FOOTER
+ ========================================================================== */
+
+.page__footer {
+ @include clearfix;
+ float: inline-start;
+ margin-inline: 0;
+ width: 100%;
+ margin-top: 3em;
+ color: $muted-text-color;
+ -webkit-animation: $intro-transition;
+ animation: $intro-transition;
+ -webkit-animation-delay: 0.45s;
+ animation-delay: 0.45s;
+ background-color: $footer-background-color;
+
+ footer {
+ @include clearfix;
+ margin-inline: auto;
+ margin-top: 2em;
+ max-width: 100%;
+ padding: 0 1em 2em;
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ max-width: $x-large;
+ }
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .fas,
+ .fab,
+ .far,
+ .fal {
+ color: $muted-text-color;
+ }
+}
+
+.page__footer-copyright {
+ font-family: $global-font-family;
+ font-size: $type-size-7;
+}
+
+.page__footer-follow {
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ }
+
+ li {
+ display: inline-block;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ font-family: $sans-serif-narrow;
+ font-size: $type-size-6;
+ text-transform: uppercase;
+ }
+
+ li + li::before {
+ content: "";
+ padding-inline-end: 5px;
+ }
+
+ a {
+ padding-inline-end: 10px;
+ font-weight: bold;
+ }
+
+ .social-icons {
+ a {
+ white-space: nowrap;
+ }
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_forms.scss b/_sass/minimal-mistakes-plus/_forms.scss
new file mode 100644
index 00000000..fc4cbbe2
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_forms.scss
@@ -0,0 +1,348 @@
+/* ==========================================================================
+ Forms
+ ========================================================================== */
+
+form {
+ margin-bottom: 5px;
+ padding: 1em;
+ background-color: $form-background-color;
+
+ fieldset {
+ margin-bottom: 5px;
+ padding: 0;
+ border-width: 0;
+ }
+
+ legend {
+ display: block;
+ width: 100%;
+ margin-bottom: 5px * 2;
+ margin-inline-start: -7px;
+ padding: 0;
+ color: $text-color;
+ border: 0;
+ white-space: normal;
+ }
+
+ p {
+ margin-bottom: (5px / 2);
+ }
+
+ ul {
+ list-style-type: none;
+ margin: 0 0 5px 0;
+ padding: 0;
+ }
+
+ br {
+ display: none;
+ }
+}
+
+label,
+input,
+button,
+select,
+textarea {
+ vertical-align: baseline;
+}
+
+input,
+button,
+select,
+textarea {
+ box-sizing: border-box;
+ font-family: $sans-serif;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.25em;
+ color: $text-color;
+ cursor: pointer;
+
+ small {
+ font-size: $type-size-6;
+ }
+
+ input,
+ textarea,
+ select {
+ display: block;
+ }
+}
+
+input,
+textarea,
+select {
+ display: inline-block;
+ width: 100%;
+ padding: 0.25em;
+ margin-bottom: 0.5em;
+ color: $text-color;
+ background-color: $background-color;
+ border: $border-color;
+ border-radius: $border-radius;
+ box-shadow: $box-shadow;
+}
+
+.input-mini {
+ width: 60px;
+}
+
+.input-small {
+ width: 90px;
+}
+
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin: 3px 0;
+ line-height: normal;
+ cursor: pointer;
+ border-radius: 0;
+ border: 0 \9;
+ box-shadow: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+
+input[type="image"] {
+ border: 0;
+}
+
+input[type="file"] {
+ width: auto;
+ padding: initial;
+ line-height: initial;
+ border: initial;
+ background-color: transparent;
+ background-color: initial;
+ box-shadow: none;
+}
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ width: auto;
+ height: auto;
+ cursor: pointer;
+}
+
+select {
+ width: auto;
+ background-color: #fff;
+}
+
+select[multiple],
+select[size] {
+ height: auto;
+}
+
+textarea {
+ resize: vertical;
+ height: auto;
+ overflow: auto;
+ vertical-align: top;
+}
+
+input[type="hidden"] {
+ display: none;
+}
+
+.form {
+ position: relative;
+}
+
+.radio,
+.checkbox {
+ padding-inline-start: 18px;
+ font-weight: normal;
+}
+
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+ float: inline-start;
+ margin-inline-start: -18px;
+}
+
+.radio.inline,
+.checkbox.inline {
+ display: inline-block;
+ padding-top: 5px;
+ margin-bottom: 0;
+ vertical-align: middle;
+}
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+ margin-inline-start: 10px;
+}
+
+/*
+ Disabled state
+ ========================================================================== */
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/*
+ Focus & active state
+ ========================================================================== */
+
+input:focus,
+textarea:focus {
+ border-color: $primary-color;
+ outline: 0;
+ outline: thin dotted \9;
+ box-shadow: inset 0 1px 3px skin-var("func-rgba-text-color-6"),
+ 0 0 5px skin-var("func-rgba-primary-color-70");
+}
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
+ box-shadow: none;
+}
+
+/*
+ Help text
+ ========================================================================== */
+
+.help-block,
+.help-inline {
+ color: $muted-text-color;
+}
+
+.help-block {
+ display: block;
+ margin-bottom: 1em;
+ line-height: 1em;
+}
+
+.help-inline {
+ display: inline-block;
+ vertical-align: middle;
+ padding-inline-start: 5px;
+}
+
+/*
+ .form-group
+ ========================================================================== */
+
+.form-group {
+ margin-bottom: 5px;
+ padding: 0;
+ border-width: 0;
+}
+
+/*
+ .form-inline
+ ========================================================================== */
+
+.form-inline input,
+.form-inline textarea,
+.form-inline select {
+ display: inline-block;
+ margin-bottom: 0;
+}
+
+.form-inline label {
+ display: inline-block;
+}
+
+.form-inline .radio,
+.form-inline .checkbox,
+.form-inline .radio {
+ padding-inline-start: 0;
+ margin-bottom: 0;
+ vertical-align: middle;
+}
+
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+ float: inline-start;
+ margin-inline-start: 0;
+ margin-inline-end: 3px;
+}
+
+/*
+ .form-search
+ ========================================================================== */
+
+.form-search input,
+.form-search textarea,
+.form-search select {
+ display: inline-block;
+ margin-bottom: 0;
+}
+
+.form-search .search-query {
+ padding-inline: 14px;
+ margin-bottom: 0;
+ border-radius: 14px;
+}
+
+.form-search label {
+ display: inline-block;
+}
+
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio {
+ padding-inline-start: 0;
+ margin-bottom: 0;
+ vertical-align: middle;
+}
+
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"] {
+ float: inline-start;
+ margin-inline-start: 0;
+ margin-inline-end: 3px;
+}
+
+/*
+ .form--loading
+ ========================================================================== */
+
+.form--loading::before {
+ content: "";
+}
+
+.form--loading .form__spinner {
+ display: block;
+}
+
+.form::before {
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.7);
+ z-index: 10;
+}
+
+.form__spinner {
+ display: none;
+ position: absolute;
+ top: 50%;
+ inset-inline-start: 50%;
+ z-index: 11;
+}
diff --git a/_sass/minimal-mistakes-plus/_masthead.scss b/_sass/minimal-mistakes-plus/_masthead.scss
new file mode 100644
index 00000000..824fcf8a
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_masthead.scss
@@ -0,0 +1,91 @@
+/* ==========================================================================
+ MASTHEAD
+ ========================================================================== */
+
+.masthead {
+ position: relative;
+ border-bottom: 1px solid $border-color;
+ -webkit-animation: $intro-transition;
+ animation: $intro-transition;
+ -webkit-animation-delay: 0.15s;
+ animation-delay: 0.15s;
+ z-index: 20;
+
+ &__inner-wrap {
+ @include clearfix;
+ margin-inline: auto;
+ padding: 1em;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ font-family: $sans-serif-narrow;
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ max-width: $max-width;
+ }
+
+ nav {
+ z-index: 10;
+ }
+
+ a {
+ text-decoration: none;
+ }
+ }
+}
+
+.site-logo img {
+ max-height: 2rem;
+}
+
+.site-title {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-item-align: center;
+ align-self: center;
+ font-weight: bold;
+ // z-index: 20;
+}
+
+.site-subtitle {
+ display: block;
+ font-size: $type-size-8;
+}
+
+.masthead__menu {
+ float: inline-start;
+ margin-inline: 0;
+ width: 100%;
+ clear: both;
+
+ .site-nav {
+ margin-inline-start: 0;
+
+ @include breakpoint(map-get($default-config, "small")) {
+ float: inline-end;
+ }
+ }
+
+ ul {
+ margin: 0;
+ padding: 0;
+ clear: both;
+ list-style-type: none;
+ }
+}
+
+.masthead__menu-item {
+ display: block;
+ list-style-type: none;
+ white-space: nowrap;
+
+ &--lg {
+ padding-inline-end: 2em;
+ font-weight: 700;
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_navigation.scss b/_sass/minimal-mistakes-plus/_navigation.scss
new file mode 100644
index 00000000..ad395faf
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_navigation.scss
@@ -0,0 +1,574 @@
+/* ==========================================================================
+ NAVIGATION
+ ========================================================================== */
+
+/*
+ Breadcrumb navigation links
+ ========================================================================== */
+
+.breadcrumbs {
+ @include clearfix;
+ margin: 0 auto;
+ max-width: 100%;
+ padding-inline: 1em;
+ font-family: $sans-serif;
+ -webkit-animation: $intro-transition;
+ animation: $intro-transition;
+ -webkit-animation-delay: 0.3s;
+ animation-delay: 0.3s;
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ max-width: $x-large;
+ }
+
+ ol {
+ padding: 0;
+ list-style: none;
+ font-size: $type-size-6;
+
+ // TODO
+ @include breakpoint(map-get($default-config, "large")) {
+ float: inline-end;
+ width: calc(100% - #{$right-sidebar-width-narrow});
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ width: calc(100% - #{$right-sidebar-width});
+ }
+ }
+
+ li {
+ display: inline;
+ }
+
+ .current {
+ font-weight: bold;
+ }
+}
+
+/*
+ Post pagination navigation links
+ ========================================================================== */
+
+.pagination {
+ @include clearfix();
+ float: inline-start;
+ margin-top: 1em;
+ padding-top: 1em;
+ width: 100%;
+
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ font-family: $sans-serif;
+ }
+
+ li {
+ display: block;
+ float: inline-start;
+ margin-inline-start: -1px;
+
+ a {
+ display: block;
+ margin-bottom: 0.25em;
+ padding: 0.5em 1em;
+ font-family: $sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 1.5;
+ text-align: center;
+ text-decoration: none;
+ color: $muted-text-color;
+ border: 1px solid skin-var("func-mix-000-border-color-25");
+ border-radius: 0;
+
+ &:hover {
+ color: $link-color-hover;
+ }
+
+ &.current,
+ &.current.disabled {
+ color: #fff;
+ background: $primary-color;
+ }
+
+ &.disabled {
+ color: skin-var("func-rgba-muted-text-color-50");
+ pointer-events: none;
+ cursor: not-allowed;
+ }
+ }
+
+ &:first-child {
+ margin-inline-start: 0;
+
+ a {
+ border-start-start-radius: $border-radius;
+ border-end-start-radius: $border-radius;
+ }
+ }
+
+ &:last-child {
+ a {
+ border-start-end-radius: $border-radius;
+ border-end-end-radius: $border-radius;
+ }
+ }
+ }
+
+ /* next/previous buttons */
+ &--pager {
+ display: block;
+ padding: 1em 2em;
+ float: inline-start;
+ width: 50%;
+ font-family: $sans-serif;
+ font-size: $type-size-5;
+ font-weight: bold;
+ text-align: center;
+ text-decoration: none;
+ color: $muted-text-color;
+ border: 1px solid skin-var("func-mix-000-border-color-25");
+ border-radius: $border-radius;
+
+ &:hover {
+ background-color: $muted-text-color;
+ color: skin-var("func-yiq-contrast-muted-text-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold");
+ }
+
+ &:first-child {
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+ }
+
+ &:last-child {
+ margin-inline-start: -1px;
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+ }
+
+ &.disabled {
+ color: skin-var("func-rgba-muted-text-color-50");
+ pointer-events: none;
+ cursor: not-allowed;
+ }
+ }
+}
+
+.page__content + .pagination,
+.page__meta + .pagination,
+.page__share + .pagination,
+.page__comments + .pagination {
+ margin-top: 2em;
+ padding-top: 2em;
+ border-top: 1px solid $border-color;
+}
+
+/*
+ Priority plus navigation
+ ========================================================================== */
+
+.greedy-nav {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ min-height: $nav-height;
+ background: $background-color;
+
+ a {
+ display: block;
+ margin: 0 1rem;
+ color: $masthead-link-color;
+ text-decoration: none;
+ -webkit-transition: none;
+ transition: none;
+
+ &:hover {
+ color: $masthead-link-color-hover;
+ }
+
+ &.site-logo {
+ margin-inline-start: 0;
+ margin-inline-end: 0.5rem;
+ }
+
+ &.site-title {
+ margin-inline-start: 0;
+ }
+ }
+
+ img {
+ -webkit-transition: none;
+ transition: none;
+ }
+
+ &__toggle {
+ -ms-flex-item-align: center;
+ align-self: center;
+ height: $nav-toggle-height;
+ border: 0;
+ outline: none;
+ background-color: transparent;
+ cursor: pointer;
+ }
+
+ .visible-links {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow: hidden;
+
+ li {
+ -webkit-box-flex: 0;
+ -ms-flex: none;
+ flex: none;
+ }
+
+ a {
+ position: relative;
+
+ &:before {
+ content: "";
+ position: absolute;
+ inset-inline-start: 0;
+ bottom: 0;
+ height: 4px;
+ background: $primary-color;
+ width: 100%;
+ -webkit-transition: $global-transition;
+ transition: $global-transition;
+ -webkit-transform: scaleX(0) translate3d(0, 0, 0);
+ transform: scaleX(0) translate3d(0, 0, 0); // hide
+ }
+
+ &:hover:before {
+ -webkit-transform: scaleX(1);
+ -ms-transform: scaleX(1);
+ transform: scaleX(1); // reveal
+ }
+ }
+ }
+
+ .hidden-links {
+ position: absolute;
+ top: 100%;
+ inset-inline-end: 0;
+ margin-top: 15px;
+ padding: 5px;
+ border: 1px solid $border-color;
+ border-radius: $border-radius;
+ background: $background-color;
+ -webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
+ 0 2px 10px 0 rgba(#000, 0.12);
+ box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
+
+ &.hidden {
+ display: none;
+ }
+
+ a {
+ margin: 0;
+ padding: 10px 20px;
+ font-size: $type-size-5;
+
+ &:hover {
+ color: $masthead-link-color-hover;
+ background: $navicon-link-color-hover;
+ }
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: -11px;
+ inset-inline-end: 10px;
+ width: 0;
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: $border-color transparent;
+ display: block;
+ z-index: 0;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: -10px;
+ inset-inline-end: 10px;
+ width: 0;
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: $background-color transparent;
+ display: block;
+ z-index: 1;
+ }
+
+ li {
+ display: block;
+ border-bottom: 1px solid $border-color;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+}
+
+.no-js {
+ .greedy-nav {
+ .visible-links {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ overflow: visible;
+ }
+ }
+}
+
+/*
+ Navigation list
+ ========================================================================== */
+
+.nav__list {
+ margin-bottom: 1.5em;
+
+ input[type="checkbox"],
+ label {
+ display: none;
+ }
+
+ @include breakpoint(max-width map-get($default-config, "large") - 1px) {
+ label {
+ position: relative;
+ display: inline-block;
+ padding: 0.5em 2.5em 0.5em 1em;
+ color: $gray;
+ font-size: $type-size-6;
+ font-weight: bold;
+ border: 1px solid $light-gray;
+ border-radius: $border-radius;
+ z-index: 20;
+ -webkit-transition: 0.2s ease-out;
+ transition: 0.2s ease-out;
+ cursor: pointer;
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ inset-inline-end: 1em;
+ top: 1.25em;
+ width: 0.75em;
+ height: 0.125em;
+ line-height: 1;
+ background-color: $gray;
+ -webkit-transition: 0.2s ease-out;
+ transition: 0.2s ease-out;
+ }
+
+ &:after {
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ }
+
+ &:hover {
+ color: #fff;
+ border-color: $gray;
+ background-color: mix(white, #000, 20%);
+
+ &:before,
+ &:after {
+ background-color: #fff;
+ }
+ }
+ }
+
+ /* selected*/
+ input:checked + label {
+ color: white;
+ background-color: mix(white, #000, 20%);
+
+ &:before,
+ &:after {
+ background-color: #fff;
+ }
+ }
+
+ /* on hover show expand*/
+ label:hover:after {
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ }
+
+ input:checked + label:hover:after {
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ }
+
+ ul {
+ margin-bottom: 1em;
+ }
+
+ a {
+ display: block;
+ padding: 0.25em 0;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ padding-top: 0.125em;
+ padding-bottom: 0.125em;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+}
+
+.nav__list .nav__items {
+ margin: 0;
+ font-size: 1.25rem;
+
+ a {
+ color: inherit;
+ }
+
+ .active {
+ margin-inline-start: -0.5em;
+ padding-inline: 0.5em;
+ font-weight: bold;
+ }
+
+ @include breakpoint(max-width map-get($default-config, "large") - 1px) {
+ position: relative;
+ max-height: 0;
+ opacity: 0%;
+ overflow: hidden;
+ z-index: 10;
+ -webkit-transition: 0.3s ease-in-out;
+ transition: 0.3s ease-in-out;
+ -webkit-transform: translate(0, 10%);
+ -ms-transform: translate(0, 10%);
+ transform: translate(0, 10%);
+ }
+}
+
+@include breakpoint(max-width map-get($default-config, "large") - 1px) {
+ .nav__list input:checked ~ .nav__items {
+ -webkit-transition: 0.5s ease-in-out;
+ transition: 0.5s ease-in-out;
+ max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/
+ overflow: visible;
+ opacity: 1;
+ margin-top: 1em;
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+}
+
+.nav__title {
+ margin: 0;
+ padding: 0.5rem 0.75rem;
+ font-family: $sans-serif-narrow;
+ font-size: $type-size-5;
+ font-weight: bold;
+}
+
+.nav__sub-title {
+ display: block;
+ margin: 0.5rem 0;
+ padding: 0.25rem 0;
+ font-family: $sans-serif-narrow;
+ font-size: $type-size-6;
+ font-weight: bold;
+ text-transform: uppercase;
+ border-bottom: 1px solid $border-color;
+}
+
+/*
+ Table of contents navigation
+ ========================================================================== */
+
+.toc {
+ font-family: $sans-serif-narrow;
+ color: $gray;
+ background-color: $background-color;
+ border: 1px solid $border-color;
+ border-radius: $border-radius;
+ -webkit-box-shadow: $box-shadow;
+ box-shadow: $box-shadow;
+
+ .nav__title {
+ color: #fff;
+ font-size: $type-size-6;
+ background: $primary-color;
+ border-start-start-radius: $border-radius;
+ border-start-end-radius: $border-radius;
+ }
+
+ // Scrollspy marks toc items as .active when they are in focus
+ .active a {
+ background-color: $active-color;
+ color: skin-var("func-yiq-contrast-active-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold");
+ }
+}
+
+.toc__menu {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ list-style: none;
+ font-size: $type-size-6;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ font-size: $type-size-7;
+ }
+
+ a {
+ display: block;
+ padding: 0.25rem 0.75rem;
+ color: $muted-text-color;
+ font-weight: bold;
+ line-height: 1.5;
+ border-bottom: 1px solid $border-color;
+
+ &:hover {
+ color: $text-color;
+ }
+ }
+
+ li ul > li a {
+ padding-inline-start: 1.25rem;
+ font-weight: normal;
+ }
+
+ li ul li ul > li a {
+ padding-inline-start: 1.75rem;
+ }
+
+ li ul li ul li ul > li a {
+ padding-inline-start: 2.25rem;
+ }
+
+ li ul li ul li ul li ul > li a {
+ padding-inline-start: 2.75rem;
+ }
+
+ li ul li ul li ul li ul li ul > li a {
+ padding-inline-start: 3.25rem;
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_notices.scss b/_sass/minimal-mistakes-plus/_notices.scss
new file mode 100644
index 00000000..9ddcd1c1
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_notices.scss
@@ -0,0 +1,115 @@
+/* ==========================================================================
+ NOTICE TEXT BLOCKS
+ ========================================================================== */
+
+/**
+ * Default Kramdown usage (no indents!):
+ *
+ * #### Headline for the Notice
+ * Text for the notice
+ *
+ */
+
+@mixin notice($notice-color-key) {
+ margin: 2em 0 !important; /* override*/
+ padding: 1em;
+ color: $text-color;
+ font-family: $global-font-family;
+ font-size: $type-size-6 !important;
+ text-indent: initial; /* override*/
+ background-color: skin-var("func-mix-background-color-#{$notice-color-key}-notice-background-mix");
+ border-radius: $border-radius;
+ box-shadow: 0 1px 1px skin-var("func-rgba-#{$notice-color-key}-25");
+
+ h4 {
+ margin-top: 0 !important; /* override*/
+ margin-bottom: 0.75em;
+ line-height: inherit;
+ }
+
+ @at-root .page__content #{&} h4 {
+ /* using at-root to override .page-content h4 font size*/
+ margin-bottom: 0;
+ font-size: 1em;
+ }
+
+ p {
+ &:last-child {
+ margin-bottom: 0 !important; /* override*/
+ }
+ }
+
+ h4 + p {
+ /* remove space above paragraphs that appear directly after notice headline*/
+ margin-top: 0;
+ padding-top: 0;
+ }
+
+ a {
+ color: skin-var("func-mix-000-#{$notice-color-key}-10");
+
+ &:hover {
+ color: skin-var("func-mix-000-#{$notice-color-key}-50");
+ }
+ }
+
+ @at-root #{selector-unify(&, "blockquote")} {
+ border-inline-start-color: skin-var("func-mix-000-#{$notice-color-key}-10");
+ }
+
+ code {
+ background-color: skin-var("func-mix-background-color-#{$notice-color-key}-code-notice-background-mix");
+ }
+
+ pre code {
+ background-color: inherit;
+ }
+
+ ul {
+ &:last-child {
+ margin-bottom: 0; /* override*/
+ }
+ }
+}
+
+/* Default notice */
+
+.notice,
+.markdown-alert {
+ @include notice("light-gray");
+}
+
+/* Primary notice */
+
+.notice--primary,
+.markdown-alert-important {
+ @include notice("primary-color");
+}
+
+/* Info notice */
+
+.notice--info,
+.markdown-alert-note {
+ @include notice("info-color");
+}
+
+/* Warning notice */
+
+.notice--warning,
+.markdown-alert-warning {
+ @include notice("warning-color");
+}
+
+/* Success notice */
+
+.notice--success,
+.markdown-alert-tip {
+ @include notice("success-color");
+}
+
+/* Danger notice */
+
+.notice--danger,
+.markdown-alert-caution {
+ @include notice("danger-color");
+}
diff --git a/_sass/minimal-mistakes-plus/_page.scss b/_sass/minimal-mistakes-plus/_page.scss
new file mode 100644
index 00000000..49fd4334
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_page.scss
@@ -0,0 +1,567 @@
+/* ==========================================================================
+ SINGLE PAGE/POST
+ ========================================================================== */
+
+#main {
+ @include clearfix;
+ margin-inline: auto;
+ padding-inline: 1em;
+ -webkit-animation: $intro-transition;
+ animation: $intro-transition;
+ max-width: 100%;
+ -webkit-animation-delay: 0.15s;
+ animation-delay: 0.15s;
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ max-width: $max-width;
+ }
+}
+
+body {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ min-height: 100vh;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.initial-content,
+.search-content {
+ flex: 1 0 auto;
+}
+
+.page {
+ @include breakpoint(map-get($default-config, "large")) {
+ float: inline-end;
+ width: calc(100% - #{$right-sidebar-width-narrow});
+ padding-inline-end: $right-sidebar-width-narrow;
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ width: calc(100% - #{$right-sidebar-width});
+ padding-inline-end: $right-sidebar-width;
+ }
+
+ .page__inner-wrap {
+ float: inline-start;
+ margin-top: 1em;
+ margin-inline: 0;
+ width: 100%;
+ clear: both;
+
+ .page__content,
+ .page__meta,
+ .page__share {
+ position: relative;
+ float: inline-start;
+ margin-inline: 0;
+ width: 100%;
+ clear: both;
+ }
+ }
+}
+
+.page__title {
+ margin-top: 0;
+ line-height: 1;
+
+ a {
+ color: $text-color;
+ text-decoration: none;
+ }
+
+ & + .page__meta {
+ margin-top: -0.5em;
+ }
+}
+
+.page__lead {
+ font-family: $global-font-family;
+ font-size: $type-size-4;
+}
+
+.page__content {
+ h2 {
+ padding-bottom: 0.5em;
+ border-bottom: 1px solid $border-color;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ .header-link {
+ position: relative;
+ inset-inline-start: 0.5em;
+ opacity: 0;
+ font-size: 0.8em;
+ -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+ -moz-transition: opacity 0.2s ease-in-out 0.1s;
+ -o-transition: opacity 0.2s ease-in-out 0.1s;
+ transition: opacity 0.2s ease-in-out 0.1s;
+ }
+
+ &:hover .header-link {
+ opacity: 1;
+ }
+ }
+
+ p,
+ li,
+ dl {
+ font-size: 1em;
+ }
+
+ /* paragraph indents */
+ p {
+ margin: 0 0 $indent-var;
+
+ /* sibling indentation*/
+ @if $paragraph-indent == true {
+ & + p {
+ text-indent: $indent-var;
+ margin-top: -($indent-var);
+ }
+ }
+ }
+
+ a:not(.btn) {
+ &:hover {
+ text-decoration: underline;
+
+ img {
+ box-shadow: 0 0 10px rgba(#000, 0.25);
+ }
+ }
+ }
+
+ :not(pre) > code {
+ padding-top: 0.1rem;
+ padding-bottom: 0.1rem;
+ font-size: 0.8em;
+ background: $code-background-color;
+ border-radius: $border-radius;
+
+ &::before,
+ &::after {
+ letter-spacing: -0.2em;
+ content: "\00a0"; /* non-breaking space*/
+ }
+ }
+
+ dt {
+ margin-top: 1em;
+ font-family: $sans-serif;
+ font-weight: bold;
+ }
+
+ dd {
+ margin-inline-start: 1em;
+ font-family: $sans-serif;
+ font-size: $type-size-6;
+ }
+
+ .small {
+ font-size: $type-size-6;
+ }
+
+ /* blockquote citations */
+ blockquote + .small {
+ margin-top: -1.5em;
+ padding-inline-start: 1.25rem;
+ }
+
+ /* vertical alignment for first content */
+ :first-child,
+ aside + :nth-child(2) {
+ margin-top: 0em;
+ }
+}
+
+.page__hero {
+ position: relative;
+ margin-bottom: 2em;
+ @include clearfix;
+ -webkit-animation: $intro-transition;
+ animation: $intro-transition;
+ -webkit-animation-delay: 0.25s;
+ animation-delay: 0.25s;
+
+ &--overlay {
+ position: relative;
+ margin-bottom: 2em;
+ padding: 3em 0;
+ @include clearfix;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ -webkit-animation: $intro-transition;
+ animation: $intro-transition;
+ -webkit-animation-delay: 0.25s;
+ animation-delay: 0.25s;
+
+ a {
+ color: #fff;
+ }
+
+ .wrapper {
+ padding-inline: 1em;
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ max-width: $x-large;
+ }
+ }
+
+ .page__title,
+ .page__meta,
+ .page__lead,
+ .btn {
+ color: #fff;
+ text-shadow: 1px 1px 4px rgba(#000, 0.5);
+ }
+
+ .page__lead {
+ max-width: $medium;
+ }
+
+ .page__title {
+ font-size: $type-size-2;
+
+ @include breakpoint(map-get($default-config, "small")) {
+ font-size: $type-size-1;
+ }
+ }
+ }
+}
+
+.page__hero-image {
+ width: 100%;
+ height: auto;
+ -ms-interpolation-mode: bicubic;
+}
+
+.page__hero-caption {
+ position: absolute;
+ bottom: 0;
+ inset-inline-end: 0;
+ margin: 0 auto;
+ padding: 2px 5px;
+ color: #fff;
+ font-family: $caption-font-family;
+ font-size: $type-size-7;
+ background: #000;
+ text-align: end;
+ z-index: 5;
+ opacity: 0.5;
+ border-radius: $border-radius 0 0 0;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ padding: 5px 10px;
+ }
+
+ a {
+ color: #fff;
+ text-decoration: none;
+ }
+}
+
+/*
+ Social sharing
+ ========================================================================== */
+
+.page__share {
+ margin-top: 2em;
+ padding-top: 1em;
+ border-top: 1px solid $border-color;
+
+ @include breakpoint(max-width map-get($default-config, "small")) {
+ .btn span {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ }
+ }
+}
+
+.page__share-title {
+ margin-bottom: 10px;
+ font-size: $type-size-6;
+ text-transform: uppercase;
+}
+
+/*
+ Page meta
+ ========================================================================== */
+
+.page__meta {
+ margin-top: 2em;
+ color: $muted-text-color;
+ font-family: $sans-serif;
+ font-size: $type-size-6;
+
+ p {
+ margin: 0;
+ }
+
+ a {
+ color: inherit;
+ }
+}
+
+.page__meta-title {
+ margin-bottom: 10px;
+ font-size: $type-size-6;
+ text-transform: uppercase;
+}
+
+.page__meta-sep::before {
+ content: "\2022";
+ padding-inline: 0.5em;
+}
+
+/*
+ Page taxonomy
+ ========================================================================== */
+
+.page__taxonomy {
+ .sep {
+ display: none;
+ }
+
+ strong {
+ margin-inline-end: 10px;
+ }
+}
+
+.page__taxonomy-item {
+ display: inline-block;
+ margin-inline-end: 5px;
+ margin-bottom: 8px;
+ padding: 5px 10px;
+ text-decoration: none;
+ border: 1px solid skin-var("func-mix-000-border-color-25");
+ border-radius: $border-radius;
+
+ &:hover {
+ text-decoration: none;
+ color: $link-color-hover;
+ }
+}
+
+.taxonomy__section {
+ margin-bottom: 2em;
+ padding-bottom: 1em;
+
+ &:not(:last-child) {
+ border-bottom: solid 1px $border-color;
+ }
+
+ .archive__item-title {
+ margin-top: 0;
+ }
+
+ .archive__subtitle {
+ clear: both;
+ border: 0;
+ }
+
+ + .taxonomy__section {
+ margin-top: 2em;
+ }
+}
+
+.taxonomy__title {
+ margin-bottom: 0.5em;
+ color: $muted-text-color;
+}
+
+.taxonomy__count {
+ color: $muted-text-color;
+}
+
+.taxonomy__index {
+ display: grid;
+ grid-column-gap: 2em;
+ grid-template-columns: repeat(2, 1fr);
+ margin: 1.414em 0;
+ padding: 0;
+ font-size: 0.75em;
+ list-style: none;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0.25em 0;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ color: inherit;
+ text-decoration: none;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.back-to-top {
+ display: block;
+ clear: both;
+ color: $muted-text-color;
+ font-size: 0.6em;
+ text-transform: uppercase;
+ text-align: end;
+ text-decoration: none;
+}
+
+/*
+ Comments
+ ========================================================================== */
+
+.page__comments {
+ float: inline-start;
+ margin-inline: 0;
+ width: 100%;
+ clear: both;
+}
+
+.page__comments-title {
+ margin-top: 2rem;
+ margin-bottom: 10px;
+ padding-top: 2rem;
+ font-size: $type-size-6;
+ border-top: 1px solid $border-color;
+ text-transform: uppercase;
+}
+
+.page__comments-form {
+ -webkit-transition: $global-transition;
+ transition: $global-transition;
+
+ &.disabled {
+ input,
+ button,
+ textarea,
+ label {
+ pointer-events: none;
+ cursor: not-allowed;
+ filter: alpha(opacity=65);
+ box-shadow: none;
+ opacity: 0.65;
+ }
+ }
+}
+
+.comment {
+ @include clearfix();
+ margin: 1em 0;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.comment__avatar-wrapper {
+ float: inline-start;
+ width: 60px;
+ height: 60px;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ width: 100px;
+ height: 100px;
+ }
+}
+
+.comment__avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ width: 80px;
+ height: 80px;
+ padding: 5px;
+ border: 1px solid $border-color;
+ }
+}
+
+.comment__content-wrapper {
+ float: inline-end;
+ width: calc(100% - 60px);
+
+ @include breakpoint(map-get($default-config, "large")) {
+ width: calc(100% - 100px);
+ }
+}
+
+.comment__author {
+ margin: 0;
+
+ a {
+ text-decoration: none;
+ }
+}
+
+.comment__date {
+ @extend .page__meta;
+ margin: 0;
+
+ a {
+ text-decoration: none;
+ }
+}
+
+/*
+ Related
+ ========================================================================== */
+
+.page__related {
+ @include clearfix();
+ float: inline-start;
+ margin-top: 2em;
+ padding-top: 1em;
+ border-top: 1px solid $border-color;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ float: inline-end;
+ width: calc(100% - #{$right-sidebar-width-narrow});
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ width: calc(100% - #{$right-sidebar-width});
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+.page__related-title {
+ margin-bottom: 10px;
+ font-size: $type-size-6;
+ text-transform: uppercase;
+}
+
+/*
+ Wide Pages
+ ========================================================================== */
+
+.wide {
+ .page, .page__related {
+ @include breakpoint(map-get($default-config, "large")) {
+ padding-inline-end: 0;
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ padding-inline-end: 0;
+ }
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_reset.scss b/_sass/minimal-mistakes-plus/_reset.scss
new file mode 100644
index 00000000..316afefb
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_reset.scss
@@ -0,0 +1,184 @@
+/* ==========================================================================
+ STYLE RESETS
+ ========================================================================== */
+
+* { box-sizing: border-box; }
+
+html {
+ /* apply a natural box layout model to all elements */
+ box-sizing: border-box;
+ background-color: $background-color;
+ font-size: $doc-font-size;
+
+ @include breakpoint(map-get($default-config, "medium")) {
+ font-size: $doc-font-size-medium;
+ }
+
+ @include breakpoint(map-get($default-config, "large")) {
+ font-size: $doc-font-size-large;
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ font-size: $doc-font-size-x-large;
+ }
+
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+/* Remove margin */
+
+body { margin: 0; }
+
+/* Selected elements */
+
+::-moz-selection {
+ color: #fff;
+ background: #000;
+}
+
+::selection {
+ color: #fff;
+ background: #000;
+}
+
+/* Display HTML5 elements in IE6-9 and FF3 */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+ display: block;
+}
+
+/* Display block in IE6-9 and FF3 */
+
+audio,
+canvas,
+video {
+ display: inline-block;
+}
+
+/* Prevents modern browsers from displaying 'audio' without controls */
+
+audio:not([controls]) {
+ display: none;
+}
+
+a {
+ color: $link-color;
+}
+
+/* Apply focus state */
+
+a:focus {
+ @extend %tab-focus;
+}
+
+/* Remove outline from links */
+
+a:hover,
+a:active {
+ outline: 0;
+}
+
+/* Prevent sub and sup affecting line-height in all browsers */
+
+sub,
+sup {
+ position: relative;
+ font-size: 75%;
+ line-height: 0;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* img border in anchor's and image quality */
+
+img {
+ /* Responsive images (ensure images don't scale beyond their parents) */
+ max-width: 100%; /* part 1: Set a maximum relative to the parent*/
+ width: auto\9; /* IE7-8 need help adjusting responsive images*/
+ height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/
+
+ vertical-align: middle;
+ border: 0;
+ -ms-interpolation-mode: bicubic;
+}
+
+/* Prevent max-width from affecting Google Maps */
+
+#map_canvas img,
+.google-maps img {
+ max-width: none;
+}
+
+/* Consistent form font size in all browsers, margin changes, misc */
+
+button,
+input,
+select,
+textarea {
+ margin: 0;
+ font-size: 100%;
+ vertical-align: middle;
+}
+
+button,
+input {
+ line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner { /* inner padding and border oddities in FF3/4*/
+ padding: 0;
+ border: 0;
+}
+
+button,
+html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS*/
+ cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
+}
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+ cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
+}
+
+input[type="search"] { /* Appearance in Safari/Chrome*/
+ box-sizing: border-box;
+ -webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5*/
+}
+
+textarea {
+ overflow: auto; /* remove vertical scrollbar in IE6-9*/
+ vertical-align: top; /* readability and alignment cross-browser*/
+}
diff --git a/_sass/minimal-mistakes-plus/_search.scss b/_sass/minimal-mistakes-plus/_search.scss
new file mode 100644
index 00000000..dfbe24fd
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_search.scss
@@ -0,0 +1,129 @@
+/* ==========================================================================
+ SEARCH
+ ========================================================================== */
+
+.layout--search {
+ .archive__item-teaser {
+ margin-bottom: 0.25em;
+ }
+}
+
+.search__toggle {
+ margin-inline: 1rem;
+ height: $nav-toggle-height;
+ border: 0;
+ outline: none;
+ color: $primary-color;
+ background-color: transparent;
+ cursor: pointer;
+ -webkit-transition: 0.2s;
+ transition: 0.2s;
+
+ &:hover {
+ color: skin-var("func-mix-000-primary-color-25");
+ }
+}
+
+.search-icon {
+ width: 100%;
+ height: 100%;
+}
+
+.search-content {
+ display: none;
+ visibility: hidden;
+ padding-top: 1em;
+ padding-bottom: 1em;
+
+ &__inner-wrap {
+ width: 100%;
+ margin-inline: auto;
+ padding-inline: 1em;
+ -webkit-animation: $intro-transition;
+ animation: $intro-transition;
+ -webkit-animation-delay: 0.15s;
+ animation-delay: 0.15s;
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ max-width: $max-width;
+ }
+
+ }
+
+ &__form {
+ background-color: transparent;
+ }
+
+ .search-input {
+ display: block;
+ margin-bottom: 0;
+ padding: 0;
+ border: none;
+ outline: none;
+ box-shadow: none;
+ background-color: transparent;
+ font-size: $type-size-3;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ font-size: $type-size-2;
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ font-size: $type-size-1;
+ }
+ }
+
+ &.is--visible {
+ display: block;
+ visibility: visible;
+
+ &::after {
+ content: "";
+ display: block;
+ }
+ }
+
+ .results__found {
+ margin-top: 0.5em;
+ font-size: $type-size-6;
+ }
+
+ .archive__item {
+ margin-bottom: 2em;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ width: 75%;
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ width: 50%;
+ }
+ }
+
+ .archive__item-title {
+ margin-top: 0;
+ }
+
+ .archive__item-excerpt {
+ margin-bottom: 0;
+ }
+}
+
+/* Algolia search */
+
+.ais-search-box {
+ max-width: 100% !important;
+ margin-bottom: 2em;
+}
+
+.archive__item-title .ais-Highlight {
+ color: $primary-color;
+ font-style: normal;
+ text-decoration: underline;
+}
+
+.archive__item-excerpt .ais-Highlight {
+ color: $primary-color;
+ font-style: normal;
+ font-weight: bold;
+}
diff --git a/_sass/minimal-mistakes-plus/_sidebar.scss b/_sass/minimal-mistakes-plus/_sidebar.scss
new file mode 100644
index 00000000..b91e4cd3
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_sidebar.scss
@@ -0,0 +1,349 @@
+/* ==========================================================================
+ SIDEBAR
+ ========================================================================== */
+
+/*
+ Default
+ ========================================================================== */
+
+.sidebar {
+ @include clearfix();
+ // @include breakpoint(max-width $large) {
+ // /* fix z-index order of follow links */
+ // position: relative;
+ // z-index: 10;
+ // -webkit-transform: translate3d(0, 0, 0);
+ // transform: translate3d(0, 0, 0);
+ // }
+
+ @include breakpoint(map-get($default-config, "large")) {
+ float: inline-start;
+ width: calc(#{$right-sidebar-width-narrow} - 1em);
+ opacity: 0.75;
+ -webkit-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ &.sticky {
+ overflow-y: auto;
+ /* calculate height of nav list
+ viewport height - nav height - masthead x-padding
+ */
+ max-height: calc(100vh - #{$nav-height} - 2em);
+ }
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ width: calc(#{$right-sidebar-width} - 1em);
+ }
+
+ > * {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ }
+
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin-bottom: 0;
+ font-family: $sans-serif-narrow;
+ }
+
+ p,
+ li {
+ font-family: $sans-serif;
+ font-size: $type-size-6;
+ line-height: 1.5;
+ }
+
+ img {
+ width: 100%;
+
+ &.emoji {
+ width: 20px;
+ height: 20px;
+ }
+ }
+}
+
+.sidebar__right {
+ margin-bottom: 1em;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ position: absolute;
+ top: 0;
+ inset-inline-end: 0;
+ width: $right-sidebar-width-narrow;
+ margin-inline-end: calc(-1 * #{$right-sidebar-width-narrow});
+ padding-inline-start: 1em;
+ z-index: 10;
+
+ &.sticky {
+ @include clearfix();
+ position: -webkit-sticky;
+ position: sticky;
+ top: 2em;
+ float: inline-end;
+
+ .toc {
+ .toc__menu {
+ overflow-y: auto;
+ max-height: calc(100vh - 7em);
+ }
+ }
+ }
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ width: $right-sidebar-width;
+ margin-inline-end: calc(-1 * #{$right-sidebar-width});
+ }
+}
+
+.splash .sidebar__right {
+ @include breakpoint(map-get($default-config, "large")) {
+ position: relative;
+ float: inline-end;
+ margin-inline-end: 0;
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ margin-inline-end: 0;
+ }
+}
+
+/*
+ Author profile and links
+ ========================================================================== */
+
+.author__avatar {
+ display: table-cell;
+ vertical-align: top;
+ width: 36px;
+ height: 36px;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ display: block;
+ width: auto;
+ height: auto;
+ }
+
+ img {
+ max-width: 110px;
+ border-radius: 50%;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ padding: 5px;
+ border: 1px solid $border-color;
+ }
+ }
+}
+
+.author__content {
+ display: table-cell;
+ vertical-align: top;
+ padding-inline: 15px 25px;
+ line-height: 1;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ display: block;
+ width: 100%;
+ padding-inline: 0;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+.author__name {
+ margin: 0;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+}
+.sidebar .author__name {
+ font-family: $sans-serif;
+ font-size: $type-size-5;
+}
+
+.author__bio {
+ margin: 0;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ margin-top: 10px;
+ margin-bottom: 20px;
+ }
+}
+
+.author__urls-wrapper {
+ position: relative;
+ display: table-cell;
+ vertical-align: middle;
+ font-family: $sans-serif;
+ z-index: 20;
+ cursor: pointer;
+
+ li:last-child {
+ a {
+ margin-bottom: 0;
+ }
+ }
+
+ .author__urls {
+ span.label {
+ padding-inline-start: 5px;
+ }
+ }
+
+ @include breakpoint(map-get($default-config, "large")) {
+ display: block;
+ }
+
+ button {
+ position: relative;
+ margin-bottom: 0;
+
+ &:before {
+ @supports (pointer-events: none) {
+ content: '';
+ position: fixed;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ }
+ }
+
+ &.open {
+ &:before {
+ pointer-events: auto;
+ }
+ }
+
+ @include breakpoint(map-get($default-config, "large")) {
+ display: none;
+ }
+ }
+}
+
+.author__urls {
+ display: none;
+ position: absolute;
+ inset-inline-end: 0;
+ margin-top: 15px;
+ padding: 10px;
+ list-style-type: none;
+ border: 1px solid $border-color;
+ border-radius: $border-radius;
+ background: $background-color;
+ box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
+ cursor: default;
+
+ &.is--visible {
+ display: block;
+ }
+
+ @include breakpoint(map-get($default-config, "large")) {
+ display: block;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ &::before {
+ display: block;
+ content: "";
+ position: absolute;
+ top: -11px;
+ inset-inline-start: calc(50% - 10px);
+ width: 0;
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: $border-color transparent;
+ z-index: 0;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ display: none;
+ }
+ }
+
+ &:after {
+ display: block;
+ content: "";
+ position: absolute;
+ top: -10px;
+ inset-inline-start: calc(50% - 10px);
+ width: 0;
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: $background-color transparent;
+ z-index: 1;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ display: none;
+ }
+ }
+
+ ul {
+ padding: 10px;
+ list-style-type: none;
+ }
+
+ li {
+ white-space: nowrap;
+ }
+
+ a {
+ display: block;
+ margin-bottom: 5px;
+ padding-block: 2px;
+ padding-inline-end: 5px;
+ color: inherit;
+ font-size: $type-size-5;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+/*
+ Wide Pages
+ ========================================================================== */
+
+.wide .sidebar__right {
+ margin-bottom: 1em;
+
+ @include breakpoint(map-get($default-config, "large")) {
+ position: initial;
+ top: initial;
+ inset-inline-end: initial;
+ width: initial;
+ margin-inline-end: initial;
+ padding-inline-start: initial;
+ z-index: initial;
+
+ &.sticky {
+ float: none;
+ }
+ }
+
+ @include breakpoint(map-get($default-config, "x-large")) {
+ width: initial;
+ margin-inline-end: initial;
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_tables.scss b/_sass/minimal-mistakes-plus/_tables.scss
new file mode 100644
index 00000000..142474d9
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_tables.scss
@@ -0,0 +1,39 @@
+/* ==========================================================================
+ TABLES
+ ========================================================================== */
+
+table {
+ display: block;
+ margin-bottom: 1em;
+ width: 100%;
+ font-family: $global-font-family;
+ font-size: $type-size-6;
+ border-collapse: collapse;
+ overflow-x: auto;
+
+ & + table {
+ margin-top: 1em;
+ }
+}
+
+thead {
+ background-color: $border-color;
+ border-bottom: 2px solid skin-var("func-mix-000-border-color-25");
+}
+
+th {
+ padding: 0.5em;
+ font-weight: bold;
+ text-align: start;
+}
+
+td {
+ padding: 0.5em;
+ border-bottom: 1px solid skin-var("func-mix-000-border-color-25");
+}
+
+tr,
+td,
+th {
+ vertical-align: middle;
+}
diff --git a/_sass/minimal-mistakes-plus/_utilities.scss b/_sass/minimal-mistakes-plus/_utilities.scss
new file mode 100644
index 00000000..65cf9a87
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_utilities.scss
@@ -0,0 +1,582 @@
+/* ==========================================================================
+ UTILITY CLASSES
+ ========================================================================== */
+
+/*
+ Visibility
+ ========================================================================== */
+
+/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
+
+.hidden,
+.is--hidden {
+ display: none;
+ visibility: hidden;
+}
+
+/* for preloading images */
+
+.load {
+ display: none;
+}
+
+.transparent {
+ opacity: 0;
+}
+
+/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
+
+.visually-hidden,
+.screen-reader-text,
+.screen-reader-text span,
+.screen-reader-shortcut,
+.sr-only,
+.sr-only-focusable:not(:focus) {
+ position: absolute !important;
+ clip: rect(0, 0, 0, 0);
+ height: 1px !important;
+ width: 1px !important;
+ padding: 0 !important;
+ border: 0 !important;
+ margin: -1px;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+body:hover .visually-hidden a,
+body:hover .visually-hidden input,
+body:hover .visually-hidden button {
+ display: none !important;
+}
+
+/* screen readers */
+
+.screen-reader-text:focus,
+.screen-reader-shortcut:focus {
+ clip: auto !important;
+ height: auto !important;
+ width: auto !important;
+ display: block;
+ font-size: 1em;
+ font-weight: bold;
+ padding: 15px 23px 14px;
+ background: #fff;
+ z-index: 100000;
+ text-decoration: none;
+ box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+}
+
+/*
+ Skip links
+ ========================================================================== */
+
+.skip-link {
+ position: fixed;
+ z-index: 20;
+ margin: 0;
+ font-family: $sans-serif;
+ white-space: nowrap;
+}
+
+.skip-link li {
+ height: 0;
+ width: 0;
+ list-style: none;
+}
+
+/*
+ Type
+ ========================================================================== */
+
+$text-alignments: left, right, start, end, center, justify;
+@each $alignment in $text-alignments {
+ .text-#{$alignment} {
+ text-align: $alignment;
+ }
+}
+
+.text-nowrap {
+ white-space: nowrap;
+}
+
+/*
+ Task lists
+ ========================================================================== */
+
+.task-list {
+ padding: 0;
+
+ li {
+ list-style-type: none;
+ }
+
+ .task-list-item-checkbox {
+ margin-inline-end: 0.5em;
+ opacity: 1;
+ }
+}
+
+.task-list .task-list {
+ margin-inline-start: 1em;
+}
+
+/*
+ Alignment
+ ========================================================================== */
+
+/* clearfix */
+
+.cf {
+ clear: both;
+}
+
+.wrapper {
+ margin-inline: auto;
+ width: 100%;
+}
+
+/*
+ Images
+ ========================================================================== */
+
+/* image align left */
+
+.align-left {
+ display: block;
+ margin-inline: auto;
+
+ @include breakpoint(map-get($default-config, "small")) {
+ float: left;
+ margin-right: 1em;
+ }
+}
+
+/* image align right */
+
+.align-right {
+ display: block;
+ margin-inline: auto;
+
+ @include breakpoint(map-get($default-config, "small")) {
+ float: right;
+ margin-left: 1em;
+ }
+}
+
+/* image align center */
+
+.align-center {
+ display: block;
+ margin-inline: auto;
+}
+
+/* file page content container */
+
+.full {
+ @include breakpoint(map-get($default-config, "large")) {
+ margin-inline-end: -1 * span(2.5 of 12) !important;
+ }
+}
+
+/*
+ Icons
+ ========================================================================== */
+
+.icon {
+ display: inline-block;
+ fill: currentColor;
+ width: 1em;
+ height: 1.1em;
+ line-height: 1;
+ position: relative;
+ top: -0.1em;
+ vertical-align: middle;
+}
+
+/* social icons*/
+
+.social-icons {
+ .fas,
+ .fab,
+ .far,
+ .fal {
+ color: $text-color;
+ }
+
+ @each $color, $icons in (
+ $behance-color: ".fa-behance, .fa-behance-square, .fa-square-behance",
+ $bitbucket-color: ".fa-bitbucket",
+ $bluesky-color: ".fa-bluesky, .fa-square-bluesky",
+ $discord-color: ".fa-discord",
+ $dribbble-color: ".fa-dribbble, .fa-dribbble-square, .fa-square-dribbble",
+ $facebook-color: ".fa-facebook, .fa-facebook-square, .fa-square-facebook, .fa-facebook-f",
+ $flickr-color: ".fa-flickr",
+ $foursquare-color: ".fa-foursquare",
+ $github-color: ".fa-github, .fa-github-alt, .fa-github-square, .fa-square-github",
+ $gitlab-color: ".fa-gitlab",
+ $instagram-color: ".fa-instagram, .fa-square-instagram",
+ $keybase-color: ".fa-keybase",
+ $lastfm-color: ".fa-lastfm, .fa-lastfm-square, .fa-square-lastfm",
+ $linkedin-color: ".fa-linkedin, .fa-linkedin-in",
+ $mastodon-color: ".fa-mastodon",
+ $pinterest-color: ".fa-pinterest, .fa-pinterest-p, .fa-pinterest-square, .fa-square-pinterest",
+ $reddit-color: ".fa-reddit",
+ $rss-color: ".fa-rss, .fa-rss-square, .fa-square-rss",
+ $signal-color: ".fa-signal-messenger",
+ $soundcloud-color: ".fa-soundcloud",
+ $stackoverflow-color: ".fa-stack-exchange, .fa-stack-overflow",
+ $telegram-color: ".fa-telegram",
+ $tumblr-color: ".fa-tumblr, .fa-tumblr-square, .fa-square-tumblr",
+ $twitter-color: ".fa-twitter, .fa-twitter-square",
+ $x-color: ".fa-x-twitter, .fa-square-x-twitter",
+ $vimeo-color: ".fa-vimeo, .fa-vimeo-square, .fa-square-vimeo, .fa-vimeo-v",
+ $vine-color: ".fa-vine",
+ $whatsapp-color: ".fa-whatsapp",
+ $xing-color: ".fa-xing, .fa-xing-square, .fa-square-xing",
+ $youtube-color: ".fa-youtube",
+
+ // Avoid "Duplicate key #000000 in map" error
+ $black-color: ".fa-threads, .fa-square-threads, .fa-tiktok",
+ ) {
+ #{$icons} {
+ color: $color;
+ }
+ }
+}
+
+/*
+ Navicons
+ ========================================================================== */
+
+.navicon {
+ position: relative;
+ width: $navicon-width;
+ height: $navicon-height;
+ background: $primary-color;
+ margin: auto;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ inset-inline-start: 0;
+ width: $navicon-width;
+ height: $navicon-height;
+ background: $primary-color;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+ }
+
+ &:before {
+ top: calc(-2 * #{$navicon-height});
+ }
+
+ &:after {
+ bottom: calc(-2 * #{$navicon-height});
+ }
+}
+
+.close .navicon {
+ /* hide the middle line*/
+ background: transparent;
+
+ /* overlay the lines by setting both their top values to 0*/
+ &:before,
+ &:after {
+ -webkit-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ top: 0;
+ width: $navicon-width;
+ }
+
+ /* rotate the lines to form the x shape*/
+ &:before {
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ }
+ &:after {
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ }
+}
+
+.greedy-nav__toggle {
+ &:before {
+ @supports (pointer-events: none) {
+ content: '';
+ position: fixed;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ background-color: $background-color;
+ -webkit-transition: $global-transition;
+ transition: $global-transition;
+ pointer-events: none;
+ }
+ }
+
+ &.close {
+ &:before {
+ opacity: 0.9;
+ -webkit-transition: $global-transition;
+ transition: $global-transition;
+ pointer-events: auto;
+ }
+ }
+}
+
+.greedy-nav__toggle:hover {
+ .navicon,
+ .navicon:before,
+ .navicon:after {
+ background: skin-var("func-mix-000-primary-color-25");
+ }
+
+ &.close {
+ .navicon {
+ background: transparent;
+ }
+ }
+}
+
+/*
+ Sticky, fixed to top content
+ ========================================================================== */
+
+.sticky {
+ @include breakpoint(map-get($default-config, "large")) {
+ @include clearfix();
+ position: -webkit-sticky;
+ position: sticky;
+ top: 2em;
+
+ > * {
+ display: block;
+ }
+ }
+}
+
+/*
+ Wells
+ ========================================================================== */
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: $border-radius;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+/*
+ Modals
+ ========================================================================== */
+
+.show-modal {
+ overflow: hidden;
+ position: relative;
+
+ &::before {
+ position: absolute;
+ content: "";
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 999;
+ background-color: rgba(255, 255, 255, 0.85);
+ }
+
+ .modal {
+ display: block;
+ }
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ width: 300px;
+ top: 50%;
+ inset-inline-start: 50%;
+ margin-inline-start: -150px;
+ margin-top: -150px;
+ min-height: 0;
+ z-index: 9999;
+ background: #fff;
+ border: 1px solid $border-color;
+ border-radius: $border-radius;
+ box-shadow: $box-shadow;
+
+ &__title {
+ margin: 0;
+ padding: 0.5em 1em;
+ }
+
+ &__supporting-text {
+ padding: 0 1em 0.5em 1em;
+ }
+
+ &__actions {
+ padding: 0.5em 1em;
+ border-top: 1px solid $border-color;
+ }
+}
+
+/*
+ Footnotes
+ ========================================================================== */
+
+.footnote {
+ color: skin-var("func-mix-fff-gray-25");
+ text-decoration: none;
+}
+
+.footnotes {
+ color: skin-var("func-mix-fff-gray-25");
+
+ ol,
+ li,
+ p {
+ margin-bottom: 0;
+ font-size: $type-size-6;
+ }
+}
+
+a.reversefootnote {
+ color: $gray;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+/*
+ Required
+ ========================================================================== */
+
+.required {
+ color: $danger-color;
+ font-weight: bold;
+}
+
+/*
+ Google Custom Search Engine
+ ========================================================================== */
+
+.gsc-control-cse {
+ table,
+ tr,
+ td {
+ border: 0; /* remove table borders widget */
+ }
+}
+
+/*
+ Responsive Video Embed
+ ========================================================================== */
+
+.responsive-video-container {
+ position: relative;
+ margin-bottom: 1em;
+ padding-bottom: 56.25%;
+ height: 0;
+ overflow: hidden;
+ max-width: 100%;
+
+ iframe,
+ object,
+ embed {
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+// full screen video fixes
+:-webkit-full-screen-ancestor {
+ .masthead,
+ .page__footer {
+ position: static;
+ }
+}
+
+/*
+ Copy block to clipboard
+ ========================================================================== */
+
+// a