From 6fa7d296d76fa86c10d532fe377357d5991cb9d8 Mon Sep 17 00:00:00 2001
From: neveler <55753029+neveler@users.noreply.github.com>
Date: Fri, 3 Apr 2026 13:11:48 +0800
Subject: [PATCH 1/8] update .gitignore
---
.gitignore | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
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/
From b120c0fe876e6d75e5f7fc64575b0f4edd9e9c71 Mon Sep 17 00:00:00 2001
From: neveler <55753029+neveler@users.noreply.github.com>
Date: Fri, 3 Apr 2026 13:15:18 +0800
Subject: [PATCH 2/8] copy scss from upstream
---
_sass/minimal-mistakes-plus.scss | 38 +-
_sass/minimal-mistakes-plus/_archive.scss | 431 +++++++++++++
_sass/minimal-mistakes-plus/_base.scss | 341 ++++++++++
_sass/minimal-mistakes-plus/_buttons.scss | 101 +++
_sass/minimal-mistakes-plus/_footer.scss | 83 +++
_sass/minimal-mistakes-plus/_forms.scss | 348 +++++++++++
_sass/minimal-mistakes-plus/_masthead.scss | 91 +++
_sass/minimal-mistakes-plus/_navigation.scss | 571 +++++++++++++++++
_sass/minimal-mistakes-plus/_notices.scss | 115 ++++
_sass/minimal-mistakes-plus/_page.scss | 567 +++++++++++++++++
_sass/minimal-mistakes-plus/_reset.scss | 184 ++++++
_sass/minimal-mistakes-plus/_search.scss | 129 ++++
_sass/minimal-mistakes-plus/_sidebar.scss | 349 +++++++++++
_sass/minimal-mistakes-plus/_syntax.scss | 329 ++++++++++
_sass/minimal-mistakes-plus/_tables.scss | 39 ++
_sass/minimal-mistakes-plus/_utilities.scss | 582 ++++++++++++++++++
.../vendor/breakpoint/_breakpoint.scss | 114 ++++
.../vendor/breakpoint/_context.scss | 95 +++
.../vendor/breakpoint/_helpers.scss | 151 +++++
.../vendor/breakpoint/_legacy-settings.scss | 50 ++
.../vendor/breakpoint/_no-query.scss | 15 +
.../vendor/breakpoint/_parsers.scss | 215 +++++++
.../vendor/breakpoint/_respond-to.scss | 82 +++
.../vendor/breakpoint/_settings.scss | 71 +++
.../vendor/breakpoint/parsers/_double.scss | 33 +
.../vendor/breakpoint/parsers/_query.scss | 82 +++
.../breakpoint/parsers/_resolution.scss | 31 +
.../vendor/breakpoint/parsers/_single.scss | 26 +
.../vendor/breakpoint/parsers/_triple.scss | 36 ++
.../parsers/double/_default-pair.scss | 21 +
.../breakpoint/parsers/double/_default.scss | 22 +
.../parsers/double/_double-string.scss | 22 +
.../parsers/resolution/_resolution.scss | 60 ++
.../breakpoint/parsers/single/_default.scss | 13 +
.../breakpoint/parsers/triple/_default.scss | 18 +
35 files changed, 5454 insertions(+), 1 deletion(-)
create mode 100644 _sass/minimal-mistakes-plus/_archive.scss
create mode 100644 _sass/minimal-mistakes-plus/_base.scss
create mode 100644 _sass/minimal-mistakes-plus/_buttons.scss
create mode 100644 _sass/minimal-mistakes-plus/_footer.scss
create mode 100644 _sass/minimal-mistakes-plus/_forms.scss
create mode 100644 _sass/minimal-mistakes-plus/_masthead.scss
create mode 100644 _sass/minimal-mistakes-plus/_navigation.scss
create mode 100644 _sass/minimal-mistakes-plus/_notices.scss
create mode 100644 _sass/minimal-mistakes-plus/_page.scss
create mode 100644 _sass/minimal-mistakes-plus/_reset.scss
create mode 100644 _sass/minimal-mistakes-plus/_search.scss
create mode 100644 _sass/minimal-mistakes-plus/_sidebar.scss
create mode 100644 _sass/minimal-mistakes-plus/_syntax.scss
create mode 100644 _sass/minimal-mistakes-plus/_tables.scss
create mode 100644 _sass/minimal-mistakes-plus/_utilities.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/_breakpoint.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/_context.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/_helpers.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/_legacy-settings.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/_no-query.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/_parsers.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/_respond-to.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/_settings.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/_double.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/_query.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/_resolution.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/_single.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/_triple.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/double/_default-pair.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/double/_default.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/double/_double-string.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/resolution/_resolution.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/single/_default.scss
create mode 100644 _sass/minimal-mistakes-plus/vendor/breakpoint/parsers/triple/_default.scss
diff --git a/_sass/minimal-mistakes-plus.scss b/_sass/minimal-mistakes-plus.scss
index b675223b..bf82f04a 100644
--- a/_sass/minimal-mistakes-plus.scss
+++ b/_sass/minimal-mistakes-plus.scss
@@ -1,4 +1,40 @@
-@import "minimal-mistakes";
+/* Copyright comment */
+@import "minimal-mistakes/copyright";
+
+/* Variables */
+@import "minimal-mistakes/variables";
+
+/* Mixins and functions */
+@import "minimal-mistakes-plus/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";
+@import "minimal-mistakes/mixins";
+
+/* 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-plus/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..aee71890
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_archive.scss
@@ -0,0 +1,431 @@
+/* ==========================================================================
+ ARCHIVE
+ ========================================================================== */
+
+.archive {
+ margin-top: 1em;
+ margin-bottom: 2em;
+
+ @include breakpoint($large) {
+ float: inline-end;
+ width: calc(100% - #{$right-sidebar-width-narrow});
+ padding-inline-end: $right-sidebar-width-narrow;
+ }
+
+ @include breakpoint($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($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($large) {
+ margin-inline-end: -1 * $right-sidebar-width-narrow;
+ }
+
+ @include breakpoint($x-large) {
+ margin-inline-end: -1 * $right-sidebar-width;
+ }
+ }
+}
+
+.grid__item {
+ margin-bottom: 2em;
+
+ @include breakpoint($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($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($medium) {
+ display: block;
+ font-size: $type-size-6;
+ }
+ }
+
+ .archive__item-teaser {
+ @include breakpoint($small) {
+ max-height: 200px;
+ }
+
+ @include breakpoint($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($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($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($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($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($large) {
+ padding-inline-end: 0;
+ }
+
+ @include breakpoint($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..48e98b29
--- /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($small) {
+ width: calc(50% - 0.5em);
+ }
+ }
+
+ figcaption {
+ width: 100%;
+ }
+ }
+
+ &.third {
+ > a,
+ > img {
+ @include breakpoint($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..3b664d73
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_buttons.scss
@@ -0,0 +1,101 @@
+/* ==========================================================================
+ 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} {
+ @include yiq-contrasted($color);
+ @if ($buttoncolor == inverse) {
+ border: 1px solid $border-color;
+ }
+ @if ($buttoncolor == light-outline) {
+ border: 1px solid #fff;
+ }
+
+ &:visited {
+ @include yiq-contrasted($color);
+ }
+
+ &:hover {
+ @include yiq-contrasted(mix(#000, $color, 20%));
+ }
+ }
+ }
+
+ /* 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/_footer.scss b/_sass/minimal-mistakes-plus/_footer.scss
new file mode 100644
index 00000000..96d0842c
--- /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($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..af29b9f7
--- /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 rgba($text-color, 0.06),
+ 0 0 5px rgba($primary-color, 0.7);
+}
+
+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..80b0ed57
--- /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($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($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..3ba1b66d
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_navigation.scss
@@ -0,0 +1,571 @@
+/* ==========================================================================
+ 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($x-large) {
+ max-width: $x-large;
+ }
+
+ ol {
+ padding: 0;
+ list-style: none;
+ font-size: $type-size-6;
+
+ @include breakpoint($large) {
+ float: inline-end;
+ width: calc(100% - #{$right-sidebar-width-narrow});
+ }
+
+ @include breakpoint($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 mix(#000, $border-color, 25%);
+ border-radius: 0;
+
+ &:hover {
+ color: $link-color-hover;
+ }
+
+ &.current,
+ &.current.disabled {
+ color: #fff;
+ background: $primary-color;
+ }
+
+ &.disabled {
+ color: rgba($muted-text-color, 0.5);
+ 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 mix(#000, $border-color, 25%);
+ border-radius: $border-radius;
+
+ &:hover {
+ @include yiq-contrasted($muted-text-color);
+ }
+
+ &: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: rgba($muted-text-color, 0.5);
+ 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 $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($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 $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 $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 {
+ @include yiq-contrasted($active-color);
+ }
+}
+
+.toc__menu {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ list-style: none;
+ font-size: $type-size-6;
+
+ @include breakpoint($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..da660121
--- /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) {
+ 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: mix($background-color, $notice-color, $notice-background-mix);
+ border-radius: $border-radius;
+ box-shadow: 0 1px 1px rgba($notice-color, 0.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: mix(#000, $notice-color, 10%);
+
+ &:hover {
+ color: mix(#000, $notice-color, 50%);
+ }
+ }
+
+ @at-root #{selector-unify(&, "blockquote")} {
+ border-inline-start-color: mix(#000, $notice-color, 10%);
+ }
+
+ code {
+ background-color: mix($background-color, $notice-color, $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..d4ff10b7
--- /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($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($large) {
+ float: inline-end;
+ width: calc(100% - #{$right-sidebar-width-narrow});
+ padding-inline-end: $right-sidebar-width-narrow;
+ }
+
+ @include breakpoint($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($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($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($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 $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 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($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($large) {
+ width: 100px;
+ height: 100px;
+ }
+}
+
+.comment__avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+
+ @include breakpoint($large) {
+ width: 80px;
+ height: 80px;
+ padding: 5px;
+ border: 1px solid $border-color;
+ }
+}
+
+.comment__content-wrapper {
+ float: inline-end;
+ width: calc(100% - 60px);
+
+ @include breakpoint($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($large) {
+ float: inline-end;
+ width: calc(100% - #{$right-sidebar-width-narrow});
+ }
+
+ @include breakpoint($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($large) {
+ padding-inline-end: 0;
+ }
+
+ @include breakpoint($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..13bd9915
--- /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($medium) {
+ font-size: $doc-font-size-medium;
+ }
+
+ @include breakpoint($large) {
+ font-size: $doc-font-size-large;
+ }
+
+ @include breakpoint($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..4a3a2b37
--- /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: 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($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($large) {
+ font-size: $type-size-2;
+ }
+
+ @include breakpoint($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($large) {
+ width: 75%;
+ }
+
+ @include breakpoint($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..e5144352
--- /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($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($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($large) {
+ position: absolute;
+ top: 0;
+ inset-inline-end: 0;
+ width: $right-sidebar-width-narrow;
+ margin-inline-end: -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($x-large) {
+ width: $right-sidebar-width;
+ margin-inline-end: -1 * $right-sidebar-width;
+ }
+}
+
+.splash .sidebar__right {
+ @include breakpoint($large) {
+ position: relative;
+ float: inline-end;
+ margin-inline-end: 0;
+ }
+
+ @include breakpoint($x-large) {
+ margin-inline-end: 0;
+ }
+}
+
+/*
+ Author profile and links
+ ========================================================================== */
+
+.author__avatar {
+ display: table-cell;
+ vertical-align: top;
+ width: 36px;
+ height: 36px;
+
+ @include breakpoint($large) {
+ display: block;
+ width: auto;
+ height: auto;
+ }
+
+ img {
+ max-width: 110px;
+ border-radius: 50%;
+
+ @include breakpoint($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($large) {
+ display: block;
+ width: 100%;
+ padding-inline: 0;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+.author__name {
+ margin: 0;
+
+ @include breakpoint($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($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($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($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($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($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($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($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($x-large) {
+ width: initial;
+ margin-inline-end: initial;
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_syntax.scss b/_sass/minimal-mistakes-plus/_syntax.scss
new file mode 100644
index 00000000..6d9102d6
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_syntax.scss
@@ -0,0 +1,329 @@
+/* ==========================================================================
+ Syntax highlighting
+ ========================================================================== */
+
+div.highlighter-rouge,
+figure.highlight {
+ position: relative;
+ margin-bottom: 1em;
+ background: $base00;
+ color: $base05;
+ font-family: $monospace;
+ font-size: $type-size-6;
+ line-height: 1.8;
+ border-radius: $border-radius;
+
+ [dir=rtl] & {
+ direction: ltr;
+ text-align: start;
+ }
+
+ > pre,
+ pre.highlight {
+ margin: 0;
+ padding: 1em;
+ }
+}
+
+.highlight table {
+ margin-bottom: 0;
+ font-size: 1em;
+ border: 0;
+
+ td {
+ padding: 0;
+ width: calc(100% - 1em);
+ border: 0;
+
+ /* line numbers*/
+ &.gutter,
+ &.rouge-gutter {
+ padding-inline-end: 1em;
+ width: 1em;
+ color: $base04;
+ border-inline-end: 1px solid $base04;
+ text-align: end;
+ }
+
+ /* code */
+ &.code,
+ &.rouge-code {
+ padding-inline-start: 1em;
+ }
+ }
+
+ pre {
+ margin: 0;
+ }
+}
+
+.highlight pre {
+ width: 100%;
+}
+
+.highlight .hll {
+ background-color: $base06;
+}
+.highlight {
+ .c {
+ /* Comment */
+ color: $base04;
+ }
+ .err {
+ /* Error */
+ color: $base08;
+ }
+ .k {
+ /* Keyword */
+ color: $base0e;
+ }
+ .l {
+ /* Literal */
+ color: $base09;
+ }
+ .n {
+ /* Name */
+ color: $base05;
+ }
+ .o {
+ /* Operator */
+ color: $base0c;
+ }
+ .p {
+ /* Punctuation */
+ color: $base05;
+ }
+ .cm {
+ /* Comment.Multiline */
+ color: $base04;
+ }
+ .cp {
+ /* Comment.Preproc */
+ color: $base04;
+ }
+ .c1 {
+ /* Comment.Single */
+ color: $base04;
+ }
+ .cs {
+ /* Comment.Special */
+ color: $base04;
+ }
+ .gd {
+ /* Generic.Deleted */
+ color: $base08;
+ }
+ .ge {
+ /* Generic.Emph */
+ font-style: italic;
+ }
+ .gh {
+ /* Generic.Heading */
+ color: $base05;
+ font-weight: bold;
+ }
+ .gi {
+ /* Generic.Inserted */
+ color: $base0b;
+ }
+ .gp {
+ /* Generic.Prompt */
+ color: $base04;
+ font-weight: bold;
+ }
+ .gs {
+ /* Generic.Strong */
+ font-weight: bold;
+ }
+ .gu {
+ /* Generic.Subheading */
+ color: $base0c;
+ font-weight: bold;
+ }
+ .kc {
+ /* Keyword.Constant */
+ color: $base0e;
+ }
+ .kd {
+ /* Keyword.Declaration */
+ color: $base0e;
+ }
+ .kn {
+ /* Keyword.Namespace */
+ color: $base0c;
+ }
+ .kp {
+ /* Keyword.Pseudo */
+ color: $base0e;
+ }
+ .kr {
+ /* Keyword.Reserved */
+ color: $base0e;
+ }
+ .kt {
+ /* Keyword.Type */
+ color: $base0a;
+ }
+ .ld {
+ /* Literal.Date */
+ color: $base0b;
+ }
+ .m {
+ /* Literal.Number */
+ color: $base09;
+ }
+ .s {
+ /* Literal.String */
+ color: $base0b;
+ }
+ .na {
+ /* Name.Attribute */
+ color: $base0d;
+ }
+ .nb {
+ /* Name.Builtin */
+ color: $base05;
+ }
+ .nc {
+ /* Name.Class */
+ color: $base0a;
+ }
+ .no {
+ /* Name.Constant */
+ color: $base08;
+ }
+ .nd {
+ /* Name.Decorator */
+ color: $base0c;
+ }
+ .ni {
+ /* Name.Entity */
+ color: $base05;
+ }
+ .ne {
+ /* Name.Exception */
+ color: $base08;
+ }
+ .nf {
+ /* Name.Function */
+ color: $base0d;
+ }
+ .nl {
+ /* Name.Label */
+ color: $base05;
+ }
+ .nn {
+ /* Name.Namespace */
+ color: $base0a;
+ }
+ .nx {
+ /* Name.Other */
+ color: $base0d;
+ }
+ .py {
+ /* Name.Property */
+ color: $base05;
+ }
+ .nt {
+ /* Name.Tag */
+ color: $base0c;
+ }
+ .nv {
+ /* Name.Variable */
+ color: $base08;
+ }
+ .ow {
+ /* Operator.Word */
+ color: $base0c;
+ }
+ .w {
+ /* Text.Whitespace */
+ color: $base05;
+ }
+ .mf {
+ /* Literal.Number.Float */
+ color: $base09;
+ }
+ .mh {
+ /* Literal.Number.Hex */
+ color: $base09;
+ }
+ .mi {
+ /* Literal.Number.Integer */
+ color: $base09;
+ }
+ .mo {
+ /* Literal.Number.Oct */
+ color: $base09;
+ }
+ .sb {
+ /* Literal.String.Backtick */
+ color: $base0b;
+ }
+ .sc {
+ /* Literal.String.Char */
+ color: $base05;
+ }
+ .sd {
+ /* Literal.String.Doc */
+ color: $base04;
+ }
+ .s2 {
+ /* Literal.String.Double */
+ color: $base0b;
+ }
+ .se {
+ /* Literal.String.Escape */
+ color: $base09;
+ }
+ .sh {
+ /* Literal.String.Heredoc */
+ color: $base0b;
+ }
+ .si {
+ /* Literal.String.Interpol */
+ color: $base09;
+ }
+ .sx {
+ /* Literal.String.Other */
+ color: $base0b;
+ }
+ .sr {
+ /* Literal.String.Regex */
+ color: $base0b;
+ }
+ .s1 {
+ /* Literal.String.Single */
+ color: $base0b;
+ }
+ .ss {
+ /* Literal.String.Symbol */
+ color: $base0b;
+ }
+ .bp {
+ /* Name.Builtin.Pseudo */
+ color: $base05;
+ }
+ .vc {
+ /* Name.Variable.Class */
+ color: $base08;
+ }
+ .vg {
+ /* Name.Variable.Global */
+ color: $base08;
+ }
+ .vi {
+ /* Name.Variable.Instance */
+ color: $base08;
+ }
+ .il {
+ /* Literal.Number.Integer.Long */
+ color: $base09;
+ }
+}
+
+.gist {
+ th, td {
+ border-bottom: 0;
+ }
+}
diff --git a/_sass/minimal-mistakes-plus/_tables.scss b/_sass/minimal-mistakes-plus/_tables.scss
new file mode 100644
index 00000000..e2704ee8
--- /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 mix(#000, $border-color, 25%);
+}
+
+th {
+ padding: 0.5em;
+ font-weight: bold;
+ text-align: start;
+}
+
+td {
+ padding: 0.5em;
+ border-bottom: 1px solid 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..b14bb604
--- /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($small) {
+ float: left;
+ margin-right: 1em;
+ }
+}
+
+/* image align right */
+
+.align-right {
+ display: block;
+ margin-inline: auto;
+
+ @include breakpoint($small) {
+ float: right;
+ margin-left: 1em;
+ }
+}
+
+/* image align center */
+
+.align-center {
+ display: block;
+ margin-inline: auto;
+}
+
+/* file page content container */
+
+.full {
+ @include breakpoint($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: (-2 * $navicon-height);
+ }
+
+ &:after {
+ bottom: (-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: mix(#000, $primary-color, 25%);
+ }
+
+ &.close {
+ .navicon {
+ background: transparent;
+ }
+ }
+}
+
+/*
+ Sticky, fixed to top content
+ ========================================================================== */
+
+.sticky {
+ @include breakpoint($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: mix(#fff, $gray, 25%);
+ text-decoration: none;
+}
+
+.footnotes {
+ color: 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