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/_config.yml b/_config.yml
index d0fa6f76..15c257b4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -320,7 +320,7 @@ compress_html:
 
 head_scripts:
   - /assets/js/settings.js
-  - /assets/js/theme.js
+  - /assets/js/init.js
 after_footer_scripts:
   - /assets/js/plugins/jquery.auto-redirect.js
 
diff --git a/_data/settings.yaml b/_data/settings.yaml
index bd8f1555..0c9a83f7 100644
--- a/_data/settings.yaml
+++ b/_data/settings.yaml
@@ -37,3 +37,10 @@ appearance_skin_dark:
     - sunrise
     - catppuccin_latte
     - catppuccin_mocha
+miscellaneous_layout_vertical:
+  type: radio
+  default: april_fools_only
+  options:
+    - april_fools_only
+    - enable
+    - disable
diff --git a/_includes/head.html b/_includes/head.html
index 64861310..c22b10c0 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -8,7 +8,7 @@
 {% endunless %}
 
 {%- comment %} https://docs.google.com/presentation/d/1rmxwWa9P6_xHqonmh5ONXRS-jPc5XKbnv99Rjkhe04s/present {% endcomment -%}
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
 <script>
   document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
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..bef8f836
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_archive.scss
@@ -0,0 +1,437 @@
+/* ==========================================================================
+   ARCHIVE
+   ========================================================================== */
+
+.archive {
+  margin-block-start: 1em;
+  margin-block-end: 2em;
+
+  @include breakpoint($large) {
+    float: inline-end;
+    inline-size: calc(100% - #{$right-sidebar-width-narrow});
+    padding-inline-end: $right-sidebar-width-narrow;
+  }
+
+  @include breakpoint($x-large) {
+    inline-size: 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-inline: 0;
+  margin-block: 1.414em 0.5em;
+  padding-block-end: 0.5em;
+  font-size: $type-size-5;
+  color: $muted-text-color;
+  border-block-end: 1px solid $border-color;
+
+  + .list__item .archive__item-title {
+    margin-block-start: 0.5em;
+  }
+}
+
+.archive__item-title {
+  margin-block-end: 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-block-start: 1em;
+    border-block-end: none;
+  }
+}
+
+.archive__item-excerpt {
+  margin-block-start: 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 {
+    inline-size: 100%;
+  }
+}
+
+.archive__item-caption {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  margin-inline: auto;
+  margin-block: 0;
+  padding-inline: 5px;
+  padding-block: 2px;
+  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-inline: 10px;
+    padding-block: 5px;
+  }
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+/*
+   List view
+   ========================================================================== */
+
+.list__item {
+  .page__meta {
+    margin-inline: 0;
+    margin-block: 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-block-end: 2em;
+
+  @include breakpoint($small) {
+    float: inline-start;
+    inline-size: 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*/
+    inline-size: 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-inline: 0;
+    margin-block: 0 4px;
+    font-size: 0.6em;
+  }
+
+  .page__meta-sep {
+    display: block;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .archive__item-title {
+    margin-block-start: 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-block-size: 200px;
+    }
+
+    @include breakpoint($medium) {
+      max-block-size: 120px;
+    }
+  }
+}
+
+/*
+   Features
+   ========================================================================== */
+
+.feature__wrapper {
+  @include clearfix();
+  margin-block-end: 2em;
+  border-block-end: 1px solid $border-color;
+
+  .archive__item-title {
+    margin-block-end: 0;
+  }
+}
+
+.feature__item {
+  position: relative;
+  margin-block-end: 2em;
+  font-size: 1.125em;
+
+  @include breakpoint($small) {
+    float: inline-start;
+    margin-block-end: 0;
+    inline-size: 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-block-size: 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;
+    inline-size: 100%;
+    clear: both;
+    font-size: 1.125em;
+
+    a.btn::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
+    .archive__item-teaser {
+      margin-block-end: 2em;
+    }
+  }
+
+  &--left {
+    float: inline-start;
+
+    .archive__item {
+      float: inline-start;
+    }
+
+    @include breakpoint($small) {
+      .archive__item-teaser {
+        float: inline-start;
+        inline-size: span(5 of 12);
+      }
+
+      .archive__item-body {
+        float: inline-end;
+        inline-size: 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;
+        inline-size: span(5 of 12);
+      }
+
+      .archive__item-body {
+        float: inline-start;
+        inline-size: 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;
+    inline-size: 100%;
+    clear: both;
+    font-size: 1.125em;
+
+    .archive__item {
+      float: inline-start;
+      inline-size: 100%;
+    }
+
+    .archive__item-teaser {
+      margin-block-end: 2em;
+    }
+
+    a.btn::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
+    @include breakpoint($small) {
+      text-align: center;
+
+      .archive__item-teaser {
+        margin: 0 auto;
+        inline-size: span(5 of 12);
+      }
+
+      .archive__item-body {
+        margin: 0 auto;
+        inline-size: span(7 of 12);
+      }
+    }
+  }
+}
+
+/* Place inside an archive layout */
+
+.archive {
+  .feature__wrapper {
+    .archive__item-title {
+      margin-block-start: 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..f3b51d66
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_base.scss
@@ -0,0 +1,348 @@
+/* ==========================================================================
+   BASE ELEMENTS
+   ========================================================================== */
+
+html {
+  /* sticky footer fix */
+  position: relative;
+  min-block-size: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &.vertical {
+    writing-mode: vertical-rl;
+  }
+}
+
+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-inline: 0;
+  margin-block: 2em 0.5em;
+  line-height: 1.2;
+  font-family: $header-font-family;
+  font-weight: bold;
+}
+
+h1 {
+  margin-block-start: 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-block-end: 1.3em;
+}
+
+u,
+ins {
+  text-decoration: none;
+  border-block-end: 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-block-end: 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-inline: auto; /* add scrollbars to wide code blocks*/
+}
+
+/* horizontal rule */
+
+hr {
+  display: block;
+  margin-inline: 0;
+  margin-block: 1em;
+  border: 0;
+  border-block-start: 1px solid $border-color;
+}
+
+/* lists */
+
+ul li,
+ol li {
+  margin-block-end: 0.5em;
+}
+
+li ul,
+li ol {
+  margin-block-start: 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-inline: 0;
+  margin-block: 2em;
+
+  img,
+  iframe,
+  .fluid-width-video-wrapper {
+    margin-block-end: 1em;
+  }
+
+  img {
+    inline-size: 100%;
+    border-radius: $border-radius;
+    -webkit-transition: $global-transition;
+    transition: $global-transition;
+  }
+
+  > a {
+    display: block;
+  }
+
+  &.half {
+    > a,
+    > img {
+      @include breakpoint($small) {
+        inline-size: calc(50% - 0.5em);
+      }
+    }
+
+    figcaption {
+      inline-size: 100%;
+    }
+  }
+
+  &.third {
+    > a,
+    > img {
+      @include breakpoint($small) {
+        inline-size: calc(33.3333% - 0.5em);
+      }
+    }
+
+    figcaption {
+      inline-size: 100%;
+    }
+  }
+}
+
+/* Figure captions */
+
+figcaption {
+  margin-block-end: 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>
+ *      <li><a href="#link-1">Link 1</a></li>
+ *      <li><a href="#link-2">Link 2</a></li>
+ *      <li><a href="#link-3">Link 3</a></li>
+ *    </ul>
+ *  </nav>
+ */
+
+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-block-end: 0;
+  }
+
+  li ul,
+  li ol {
+    margin-block-start: 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..b300197c
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_buttons.scss
@@ -0,0 +1,102 @@
+/* ==========================================================================
+   BUTTONS
+   ========================================================================== */
+
+/*
+   Default button
+   ========================================================================== */
+
+.btn {
+  /* default */
+  display: inline-block;
+  margin-block-end: 0.25em;
+  padding-inline: 1em;
+  padding-block: 0.5em;
+  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;
+    inline-size: 100%;
+
+    + .btn--block {
+      margin-block-start: 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..21598231
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_footer.scss
@@ -0,0 +1,84 @@
+/* ==========================================================================
+   FOOTER
+   ========================================================================== */
+
+.page__footer {
+  @include clearfix;
+  float: inline-start;
+  margin-inline: 0;
+  inline-size: 100%;
+  margin-block-start: 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-block-start: 2em;
+    max-inline-size: 100%;
+    padding-inline: 1em;
+    padding-block: 0 2em;
+
+    @include breakpoint($x-large) {
+      max-inline-size: $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-block-start: 5px;
+    padding-block-end: 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..7fe872aa
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_forms.scss
@@ -0,0 +1,348 @@
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+form {
+  margin-block-end: 5px;
+  padding: 1em;
+  background-color: $form-background-color;
+
+  fieldset {
+    margin-block-end: 5px;
+    padding: 0;
+    border-width: 0;
+  }
+
+  legend {
+    display: block;
+    inline-size: 100%;
+    margin-block-end: 5px * 2;
+    margin-inline-start: -7px;
+    padding: 0;
+    color: $text-color;
+    border: 0;
+    white-space: normal;
+  }
+
+  p {
+    margin-block-end: (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-block-end: 0.25em;
+  color: $text-color;
+  cursor: pointer;
+
+  small {
+    font-size: $type-size-6;
+  }
+
+  input,
+  textarea,
+  select {
+    display: block;
+  }
+}
+
+input,
+textarea,
+select {
+  display: inline-block;
+  inline-size: 100%;
+  padding: 0.25em;
+  margin-block-end: 0.5em;
+  color: $text-color;
+  background-color: $background-color;
+  border: $border-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+}
+
+.input-mini {
+  inline-size: 60px;
+}
+
+.input-small {
+  inline-size: 90px;
+}
+
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
+  inline-size: auto;
+  block-size: 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"] {
+  inline-size: 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"] {
+  inline-size: auto;
+  block-size: auto;
+  cursor: pointer;
+}
+
+select {
+  inline-size: auto;
+  background-color: #fff;
+}
+
+select[multiple],
+select[size] {
+  block-size: auto;
+}
+
+textarea {
+  resize: block;
+  block-size: 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-block-start: 5px;
+  margin-block-end: 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-block-end: 1em;
+  line-height: 1em;
+}
+
+.help-inline {
+  display: inline-block;
+  vertical-align: middle;
+  padding-inline-start: 5px;
+}
+
+/*
+     .form-group
+     ========================================================================== */
+
+.form-group {
+  margin-block-end: 5px;
+  padding: 0;
+  border-width: 0;
+}
+
+/*
+     .form-inline
+     ========================================================================== */
+
+.form-inline input,
+.form-inline textarea,
+.form-inline select {
+  display: inline-block;
+  margin-block-end: 0;
+}
+
+.form-inline label {
+  display: inline-block;
+}
+
+.form-inline .radio,
+.form-inline .checkbox,
+.form-inline .radio {
+  padding-inline-start: 0;
+  margin-block-end: 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-block-end: 0;
+}
+
+.form-search .search-query {
+  padding-inline: 14px;
+  margin-block-end: 0;
+  border-radius: 14px;
+}
+
+.form-search label {
+  display: inline-block;
+}
+
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio {
+  padding-inline-start: 0;
+  margin-block-end: 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;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 10;
+}
+
+.form__spinner {
+  display: none;
+  position: absolute;
+  inset-block-start: 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..b5ee8d2b
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_masthead.scss
@@ -0,0 +1,91 @@
+/* ==========================================================================
+   MASTHEAD
+   ========================================================================== */
+
+.masthead {
+  position: relative;
+  border-block-end: 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-inline-size: 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-inline-size: $max-width;
+    }
+
+    nav {
+      z-index: 10;
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+.site-logo img {
+  max-block-size: 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;
+  inline-size: 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..61f55963
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_navigation.scss
@@ -0,0 +1,582 @@
+/* ==========================================================================
+   NAVIGATION
+   ========================================================================== */
+
+/*
+   Breadcrumb navigation links
+   ========================================================================== */
+
+.breadcrumbs {
+  @include clearfix;
+  margin: 0 auto;
+  max-inline-size: 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-inline-size: $x-large;
+  }
+
+  ol {
+    padding: 0;
+    list-style: none;
+    font-size: $type-size-6;
+
+    @include breakpoint($large) {
+      float: inline-end;
+      inline-size: calc(100% - #{$right-sidebar-width-narrow});
+    }
+
+    @include breakpoint($x-large) {
+      inline-size: calc(100% - #{$right-sidebar-width});
+    }
+  }
+
+  li {
+    display: inline;
+  }
+
+  .current {
+    font-weight: bold;
+  }
+}
+
+/*
+     Post pagination navigation links
+     ========================================================================== */
+
+.pagination {
+  @include clearfix();
+  float: inline-start;
+  margin-block-start: 1em;
+  padding-block-start: 1em;
+  inline-size: 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-block-end: 0.25em;
+      padding-inline: 1em;
+      padding-block: 0.5em;
+      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-inline: 2em;
+    padding-block: 1em;
+    float: inline-start;
+    inline-size: 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-block-start: 2em;
+  padding-block-start: 2em;
+  border-block-start: 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-block-size: $nav-height;
+  background: $background-color;
+
+  a {
+    display: block;
+    margin-inline: 1rem;
+    margin-block: 0;
+    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;
+    block-size: $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;
+        inset-block-end: 0;
+        block-size: 4px;
+        background: $primary-color;
+        inline-size: 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;
+    inset-block-start: 100%;
+    inset-inline-end: 0;
+    margin-block-start: 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-inline: 20px;
+      padding-block: 10px;
+      font-size: $type-size-5;
+
+      &:hover {
+        color: $masthead-link-color-hover;
+        background: $navicon-link-color-hover;
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block-start: -11px;
+      inset-inline-end: 10px;
+      inline-size: 0;
+      border-style: solid;
+      border-inline-width: 10px;
+      border-block-width: 0 10px;
+      border-color: $border-color transparent;
+      display: block;
+      z-index: 0;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset-block-start: -10px;
+      inset-inline-end: 10px;
+      inline-size: 0;
+      border-style: solid;
+      border-inline-width: 10px;
+      border-block-width: 0 10px;
+      border-color: $background-color transparent;
+      display: block;
+      z-index: 1;
+    }
+
+    li {
+      display: block;
+      border-block-end: 1px solid $border-color;
+
+      &:last-child {
+        border-block-end: none;
+      }
+    }
+  }
+}
+
+.no-js {
+  .greedy-nav {
+    .visible-links {
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      overflow: visible;
+    }
+  }
+}
+
+/*
+     Navigation list
+     ========================================================================== */
+
+.nav__list {
+  margin-block-end: 1.5em;
+
+  input[type="checkbox"],
+  label {
+    display: none;
+  }
+
+  @include breakpoint(max-width $large - 1px) {
+    label {
+      position: relative;
+      display: inline-block;
+      padding-inline: 1em 2.5em;
+      padding-block: 0.5em;
+      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;
+        inset-block-start: 1.25em;
+        inline-size: 0.75em;
+        block-size: 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-block-end: 1em;
+    }
+
+    a {
+      display: block;
+      padding-inline: 0;
+      padding-block: 0.25em;
+
+      @include breakpoint($large) {
+        padding-block: 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-block-size: 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%);
+  }
+}
+
+.nav__list input:checked ~ .nav__items {
+  @include breakpoint(max-width $large - 1px) {
+    -webkit-transition: 0.5s ease-in-out;
+    transition: 0.5s ease-in-out;
+    max-block-size: 9999px; /* exaggerate max-height to accommodate tall lists*/
+    overflow: visible;
+    opacity: 1;
+    margin-block-start: 1em;
+    -webkit-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+}
+
+.nav__title {
+  margin: 0;
+  padding-inline: 0.75rem;
+  padding-block: 0.5rem;
+  font-family: $sans-serif-narrow;
+  font-size: $type-size-5;
+  font-weight: bold;
+}
+
+.nav__sub-title {
+  display: block;
+  margin-inline: 0;
+  margin-block: 0.5rem;
+  padding-inline: 0;
+  padding-block: 0.25rem;
+  font-family: $sans-serif-narrow;
+  font-size: $type-size-6;
+  font-weight: bold;
+  text-transform: uppercase;
+  border-block-end: 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;
+  inline-size: 100%;
+  list-style: none;
+  font-size: $type-size-6;
+
+  @include breakpoint($large) {
+    font-size: $type-size-7;
+  }
+
+  a {
+    display: block;
+    padding-inline: 0.75rem;
+    padding-block: 0.25rem;
+    color: $muted-text-color;
+    font-weight: bold;
+    line-height: 1.5;
+    border-block-end: 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..85340d50
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_notices.scss
@@ -0,0 +1,116 @@
+/* ==========================================================================
+   NOTICE TEXT BLOCKS
+   ========================================================================== */
+
+/**
+ *  Default Kramdown usage (no indents!):
+ *  <div class="notice" markdown="1">
+ *  #### Headline for the Notice
+ *  Text for the notice
+ *  </div>
+ */
+
+@mixin notice($notice-color) {
+  margin-inline: 0 !important;  /* override*/
+  margin-block: 2em !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-block-start: 0 !important; /* override*/
+    margin-block-end: 0.75em;
+    line-height: inherit;
+  }
+
+  @at-root .page__content #{&} h4 {
+    /* using at-root to override .page-content h4 font size*/
+    margin-block-end: 0;
+    font-size: 1em;
+  }
+
+  p {
+    &:last-child {
+      margin-block-end: 0 !important; /* override*/
+    }
+  }
+
+  h4 + p {
+    /* remove space above paragraphs that appear directly after notice headline*/
+    margin-block-start: 0;
+    padding-block-start: 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-block-end: 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..9248030e
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_page.scss
@@ -0,0 +1,576 @@
+/* ==========================================================================
+   SINGLE PAGE/POST
+   ========================================================================== */
+
+#main {
+  @include clearfix;
+  margin-inline: auto;
+  padding-inline: 1em;
+  -webkit-animation: $intro-transition;
+  animation: $intro-transition;
+  max-inline-size: 100%;
+  -webkit-animation-delay: 0.15s;
+  animation-delay: 0.15s;
+
+  @include breakpoint($x-large) {
+    max-inline-size: $max-width;
+  }
+}
+
+body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  min-block-size: 100vb;
+  -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;
+    inline-size: calc(100% - #{$right-sidebar-width-narrow});
+    padding-inline-end: $right-sidebar-width-narrow;
+  }
+
+  @include breakpoint($x-large) {
+    inline-size: calc(100% - #{$right-sidebar-width});
+    padding-inline-end: $right-sidebar-width;
+  }
+
+  .page__inner-wrap {
+    float: inline-start;
+    margin-block-start: 1em;
+    margin-inline: 0;
+    inline-size: 100%;
+    clear: both;
+
+    .page__content,
+    .page__meta,
+    .page__share {
+      position: relative;
+      float: inline-start;
+      margin-inline: 0;
+      inline-size: 100%;
+      clear: both;
+    }
+  }
+}
+
+.page__title {
+  margin-block-start: 0;
+  line-height: 1;
+
+  a {
+    color: $text-color;
+    text-decoration: none;
+  }
+
+  & + .page__meta {
+    margin-block-start: -0.5em;
+  }
+}
+
+.page__lead {
+  font-family: $global-font-family;
+  font-size: $type-size-4;
+}
+
+.page__content {
+  h2 {
+    padding-block-end: 0.5em;
+    border-block-end: 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-inline: 0;
+    margin-block: 0 $indent-var;
+
+    /* sibling indentation*/
+    @if $paragraph-indent == true {
+      & + p {
+        text-indent: $indent-var;
+        margin-block-start: -($indent-var);
+      }
+    }
+  }
+
+  a:not(.btn) {
+    &:hover {
+      text-decoration: underline;
+
+      img {
+        box-shadow: 0 0 10px rgba(#000, 0.25);
+      }
+    }
+  }
+
+  :not(pre) > code {
+    padding-block-start: 0.1rem;
+    padding-block-end: 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-block-start: 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-block-start: -1.5em;
+    padding-inline-start: 1.25rem;
+  }
+
+  /* vertical alignment for first content */
+  :first-child, 
+  aside + :nth-child(2) {
+    margin-block-start: 0em;
+  }
+}
+
+.page__hero {
+  position: relative;
+  margin-block-end: 2em;
+  @include clearfix;
+  -webkit-animation: $intro-transition;
+  animation: $intro-transition;
+  -webkit-animation-delay: 0.25s;
+  animation-delay: 0.25s;
+
+  &--overlay {
+    position: relative;
+    margin-block-end: 2em;
+    padding-inline: 0;
+    padding-block: 3em;
+    @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-inline-size: $x-large;
+      }
+    }
+
+    .page__title,
+    .page__meta,
+    .page__lead,
+    .btn {
+      color: #fff;
+      text-shadow: 1px 1px 4px rgba(#000, 0.5);
+    }
+
+    .page__lead {
+      max-inline-size: $medium;
+    }
+
+    .page__title {
+      font-size: $type-size-2;
+
+      @include breakpoint($small) {
+        font-size: $type-size-1;
+      }
+    }
+  }
+}
+
+.page__hero-image {
+  inline-size: 100%;
+  block-size: auto;
+  -ms-interpolation-mode: bicubic;
+}
+
+.page__hero-caption {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  margin-inline: auto;
+  margin-block: 0;
+  padding-inline: 5px;
+  padding-block: 2px;
+  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-inline: 10px;
+    padding-block: 5px;
+  }
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+/*
+   Social sharing
+   ========================================================================== */
+
+.page__share {
+  margin-block-start: 2em;
+  padding-block-start: 1em;
+  border-block-start: 1px solid $border-color;
+
+  @include breakpoint(max-width $small) {
+    .btn span {
+      border: 0;
+      clip: rect(0 0 0 0);
+      block-size: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      inline-size: 1px;
+    }
+  }
+}
+
+.page__share-title {
+  margin-block-end: 10px;
+  font-size: $type-size-6;
+  text-transform: uppercase;
+}
+
+/*
+   Page meta
+   ========================================================================== */
+
+.page__meta {
+  margin-block-start: 2em;
+  color: $muted-text-color;
+  font-family: $sans-serif;
+  font-size: $type-size-6;
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+  }
+}
+
+.page__meta-title {
+  margin-block-end: 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-inline: 10px;
+  padding-block: 5px;
+  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-block-end: 2em;
+  padding-block-end: 1em;
+
+  &:not(:last-child) {
+    border-block-end: solid 1px $border-color;
+  }
+
+  .archive__item-title {
+    margin-block-start: 0;
+  }
+
+  .archive__subtitle {
+    clear: both;
+    border: 0;
+  }
+
+  + .taxonomy__section {
+    margin-block-start: 2em;
+  }
+}
+
+.taxonomy__title {
+  margin-block-end: 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-inline: 0;
+  margin-block: 1.414em;
+  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-inline: 0;
+    padding-block: 0.25em;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    color: inherit;
+    text-decoration: none;
+    border-block-end: 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;
+  inline-size: 100%;
+  clear: both;
+}
+
+.page__comments-title {
+  margin-block-start: 2rem;
+  margin-block-end: 10px;
+  padding-block-start: 2rem;
+  font-size: $type-size-6;
+  border-block-end: 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-inline: 0;
+  margin-block: 1em;
+
+  &:not(:last-child) {
+    border-block-end: 1px solid $border-color;
+  }
+}
+
+.comment__avatar-wrapper {
+  float: inline-start;
+  inline-size: 60px;
+  block-size: 60px;
+
+  @include breakpoint($large) {
+    inline-size: 100px;
+    block-size: 100px;
+  }
+}
+
+.comment__avatar {
+  inline-size: 40px;
+  block-size: 40px;
+  border-radius: 50%;
+
+  @include breakpoint($large) {
+    inline-size: 80px;
+    block-size: 80px;
+    padding: 5px;
+    border: 1px solid $border-color;
+  }
+}
+
+.comment__content-wrapper {
+  float: inline-end;
+  inline-size: calc(100% - 60px);
+
+  @include breakpoint($large) {
+    inline-size: 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-block-start: 2em;
+  padding-block-start: 1em;
+  border-block-start: 1px solid $border-color;
+
+  @include breakpoint($large) {
+    float: inline-end;
+    inline-size: calc(100% - #{$right-sidebar-width-narrow});
+  }
+
+  @include breakpoint($x-large) {
+    inline-size: calc(100% - #{$right-sidebar-width});
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.page__related-title {
+  margin-block-end: 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..567d20bd
--- /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 {
+  inset-block-start: -0.5em;
+}
+
+sub {
+  inset-block-end: -0.25em;
+}
+
+/* img border in anchor's and image quality */
+
+img {
+  /* Responsive images (ensure images don't scale beyond their parents) */
+  max-inline-size: 100%; /* part 1: Set a maximum relative to the parent*/
+  inline-size: auto\9; /* IE7-8 need help adjusting responsive images*/
+  block-size: 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-inline-size: 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..e5c65673
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_search.scss
@@ -0,0 +1,128 @@
+/* ==========================================================================
+   SEARCH
+   ========================================================================== */
+
+.layout--search {
+  .archive__item-teaser {
+    margin-block-end: 0.25em;
+  }
+}
+
+.search__toggle {
+  margin-inline: 1rem;
+  block-size: $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 {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.search-content {
+  display: none;
+  visibility: hidden;
+  padding-block: 1em;
+
+  &__inner-wrap {
+    inline-size: 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-inline-size: $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-block-start: 0.5em;
+    font-size: $type-size-6;
+  }
+
+  .archive__item {
+    margin-block-end: 2em;
+
+    @include breakpoint($large) {
+      inline-size: 75%;
+    }
+
+    @include breakpoint($x-large) {
+      inline-size: 50%;
+    }
+  }
+
+  .archive__item-title {
+    margin-block-start: 0;
+  }
+
+  .archive__item-excerpt {
+    margin-block-end: 0;
+  }
+}
+
+/* Algolia search */
+
+.ais-search-box {
+  max-inline-size: 100% !important;
+  margin-block-end: 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..14f23973
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_sidebar.scss
@@ -0,0 +1,351 @@
+/* ==========================================================================
+   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;
+    inline-size: 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-block: auto;
+      /* calculate height of nav list
+         viewport height - nav height - masthead x-padding
+      */
+      max-block-size: calc(100vb - #{$nav-height} - 2em);
+    }
+  }
+
+  @include breakpoint($x-large) {
+    inline-size: calc(#{$right-sidebar-width} - 1em);
+  }
+
+  > * {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block-end: 0;
+    font-family: $sans-serif-narrow;
+  }
+
+  p,
+  li {
+    font-family: $sans-serif;
+    font-size: $type-size-6;
+    line-height: 1.5;
+  }
+
+  img {
+    inline-size: 100%;
+
+    &.emoji {
+      inline-size: 20px;
+      block-size: 20px;
+    }
+  }
+}
+
+.sidebar__right {
+  margin-block-end: 1em;
+
+  @include breakpoint($large) {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inline-size: $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;
+      inset-block-start: 2em;
+      float: inline-end;
+
+      .toc {
+        .toc__menu {
+          overflow-block: auto;
+          max-block-size: calc(100vb - 7em);
+        }
+      }
+    }
+  }
+
+  @include breakpoint($x-large) {
+    inline-size: $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;
+  inline-size: 36px;
+  block-size: 36px;
+
+  @include breakpoint($large) {
+    display: block;
+    inline-size: auto;
+    block-size: auto;
+  }
+
+  img {
+    max-inline-size: 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;
+    inline-size: 100%;
+    padding-inline: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.author__name {
+  margin: 0;
+
+  @include breakpoint($large) {
+    margin-block-start: 10px;
+    margin-block-end: 10px;
+  }
+}
+.sidebar .author__name {
+  font-family: $sans-serif;
+  font-size: $type-size-5;
+}
+
+.author__bio {
+  margin: 0;
+
+  @include breakpoint($large) {
+    margin-block-start: 10px;
+    margin-block-end: 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-block-end: 0;
+    }
+  }
+
+  .author__urls {
+    span.label {
+      padding-inline-start: 5px;
+    }
+  }
+
+  @include breakpoint($large) {
+    display: block;
+  }
+
+  button {
+    position: relative;
+    margin-block-end: 0;
+
+    &:before {
+      @supports (pointer-events: none) {
+        content: '';
+        position: fixed;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        inline-size: 100%;
+        block-size: 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-block-start: 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;
+    inset-block-start: -11px;
+    inset-inline-start: calc(50% - 10px);
+    inline-size: 0;
+    border-style: solid;
+    border-inline-width: 10px;
+    border-block-width: 0 10px;
+    border-color: $border-color transparent;
+    z-index: 0;
+
+    @include breakpoint($large) {
+      display: none;
+    }
+  }
+
+  &:after {
+    display: block;
+    content: "";
+    position: absolute;
+    inset-block-start: -10px;
+    inset-inline-start: calc(50% - 10px);
+    inline-size: 0;
+    border-style: solid;
+    border-inline-width: 10px;
+    border-block-width: 0 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-block-end: 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-block-end: 1em;
+
+  @include breakpoint($large) {
+    position: initial;
+    inset-block-start: initial;
+    inset-inline-end: initial;
+    inline-size: initial;
+    margin-inline-end: initial;
+    padding-inline-start: initial;
+    z-index: initial;
+
+    &.sticky {
+      float: none;
+    }
+  }
+
+  @include breakpoint($x-large) {
+    inline-size: 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..84e5552e
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_syntax.scss
@@ -0,0 +1,329 @@
+/* ==========================================================================
+   Syntax highlighting
+   ========================================================================== */
+
+div.highlighter-rouge,
+figure.highlight {
+  position: relative;
+  margin-block-end: 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-block-end: 0;
+  font-size: 1em;
+  border: 0;
+
+  td {
+    padding: 0;
+    inline-size: calc(100% - 1em);
+    border: 0;
+
+    /* line numbers*/
+    &.gutter,
+    &.rouge-gutter {
+      padding-inline-end: 1em;
+      inline-size: 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 {
+  inline-size: 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-block-end: 0;
+  }
+}
diff --git a/_sass/minimal-mistakes-plus/_tables.scss b/_sass/minimal-mistakes-plus/_tables.scss
new file mode 100644
index 00000000..f13e9e80
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_tables.scss
@@ -0,0 +1,39 @@
+/* ==========================================================================
+   TABLES
+   ========================================================================== */
+
+table {
+  display: block;
+  margin-block-end: 1em;
+  inline-size: 100%;
+  font-family: $global-font-family;
+  font-size: $type-size-6;
+  border-collapse: collapse;
+  overflow-inline: auto;
+
+  & + table {
+    margin-block-start: 1em;
+  }
+}
+
+thead {
+  background-color: $border-color;
+  border-block-end: 2px solid mix(#000, $border-color, 25%);
+}
+
+th {
+  padding: 0.5em;
+  font-weight: bold;
+  text-align: start;
+}
+
+td {
+  padding: 0.5em;
+  border-block-end: 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..b9e728a3
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/_utilities.scss
@@ -0,0 +1,593 @@
+/* ==========================================================================
+   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);
+  block-size: 1px !important;
+  inline-size: 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;
+  block-size: auto !important;
+  inline-size: auto !important;
+  display: block;
+  font-size: 1em;
+  font-weight: bold;
+  padding-inline: 23px;
+  padding-block: 15px 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 {
+  block-size: 0;
+  inline-size: 0;
+  list-style: none;
+}
+
+/*
+   Type
+   ========================================================================== */
+
+$text-alignments: left, right, start, end, center, justify;
+@each $alignment in $text-alignments {
+  .text-#{$alignment} {
+    @if ($alignment == "left" or $alignment == "start") {
+      text-align: start;
+    } @else if ($alignment == "right" or $alignment == "end") {
+      text-align: start;
+    } @else {
+      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;
+  inline-size: 100%;
+}
+
+/*
+   Images
+   ========================================================================== */
+
+/* image align left */
+
+.align-left {
+  display: block;
+  margin-inline: auto;
+
+  @include breakpoint($small) {
+    float: inline-start;
+    margin-inline-end: 1em;
+  }
+}
+
+/* image align right */
+
+.align-right {
+  display: block;
+  margin-inline: auto;
+
+  @include breakpoint($small) {
+    float: inline-end;
+    margin-inline-start: 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;
+  inline-size: 1em;
+  block-size: 1.1em;
+  line-height: 1;
+  position: relative;
+  inset-block-start: -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;
+  inline-size: $navicon-width;
+  block-size: $navicon-height;
+  background: $primary-color;
+  margin: auto;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset-inline-start: 0;
+    inline-size: $navicon-width;
+    block-size: $navicon-height;
+    background: $primary-color;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+  }
+
+  &:before {
+    inset-block-start: (-2 * $navicon-height);
+  }
+
+  &:after {
+    inset-block-end: (-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%;
+    inset-block-start: 0;
+    inline-size: $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;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: 100%;
+      block-size: 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;
+    inset-block-start: 2em;
+
+    > * {
+      display: block;
+    }
+  }
+}
+
+/*
+   Wells
+   ========================================================================== */
+
+.well {
+  min-block-size: 20px;
+  padding: 19px;
+  margin-block-end: 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: "";
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    z-index: 999;
+    background-color: rgba(255, 255, 255, 0.85);
+  }
+
+  .modal {
+    display: block;
+  }
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  inline-size: 300px;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  margin-inline-start: -150px;
+  margin-block-start: -150px;
+  min-block-size: 0;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+
+  &__title {
+    margin: 0;
+    padding-inline: 1em;
+    padding-block: 0.5em;
+  }
+
+  &__supporting-text {
+    padding-inline: 1em;
+    padding-block: 0 0.5em;
+  }
+
+  &__actions {
+    padding-inline: 1em;
+    padding-block: 0.5em;
+    border-block-start: 1px solid $border-color;
+  }
+}
+
+/*
+   Footnotes
+   ========================================================================== */
+
+.footnote {
+  color: mix(#fff, $gray, 25%);
+  text-decoration: none;
+}
+
+.footnotes {
+  color: mix(#fff, $gray, 25%);
+
+  ol,
+  li,
+  p {
+    margin-block-end: 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-block-end: 1em;
+  padding-block-end: 56.25%;
+  block-size: 0;
+  overflow: hidden;
+  max-inline-size: 100%;
+
+  iframe,
+  object,
+  embed {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
+// full screen video fixes
+:-webkit-full-screen-ancestor {
+  .masthead,
+  .page__footer {
+    position: static;
+  }
+}
+
+/*
+   Copy <pre> block to clipboard
+   ========================================================================== */
+
+// a <textarea> to hold text for document.execCommand("copy")
+.clipboard-helper {
+  // Prevent zooming on iOS
+  font-size: 12pt !important;
+  border: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  outline: none !important;
+  position: absolute;
+}
+
+pre {
+  &.highlight .clipboard-copy-button {
+    color: #ffffca;
+  }
+
+  .clipboard-copy-button {
+    display: block;
+    position: absolute;
+    inset-block-start: 0.6em;
+    inset-inline-end: 0.5em;
+    inline-size: 1.8em;
+    block-size: 1.5em;
+    z-index: 1;
+    background: none;
+    border: none;
+    outline: none;
+    border-radius: 0.1em;
+    padding-inline: 0.5em;
+    padding-block: 0.2em;
+    opacity: 0.4;
+    transition: color 0.25s linear -0.25s, opacity 0.25s linear;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+    }
+
+    i {
+      position: absolute;
+      inset-block-start: 0.25em;
+      inset-inline-end: 0.25em;
+      &.copied {
+        opacity: 0;
+      }
+    }
+
+    &.copied i {
+      opacity: 0;
+      &.copied {
+        opacity: 1;
+      }
+    }
+
+    @at-root {
+      .no-copy & {
+        display: none;
+      }
+    }
+  }
+
+  &:hover .clipboard-copy-button {
+    opacity: 1;
+  }
+}
diff --git a/_sass/minimal-mistakes-plus/vendor/breakpoint/_breakpoint.scss b/_sass/minimal-mistakes-plus/vendor/breakpoint/_breakpoint.scss
new file mode 100644
index 00000000..7c411bbc
--- /dev/null
+++ b/_sass/minimal-mistakes-plus/vendor/breakpoint/_breakpoint.scss
@@ -0,0 +1,152 @@
+//////////////////////////////
+// Default Variables
+//////////////////////////////
+$Breakpoint-Settings: (
+  'default media': all,
+  'default feature': min-width,
+  'default pair': width,
+
+  'force all media type': false,
+  'to ems': false,
+  'transform resolutions': true,
+
+  'no queries': false,
+  'no query fallbacks': false,
+
+  'base font size': 16px,
+
+  'legacy syntax': false
+);
+
+$breakpoint: () !default;
+
+//////////////////////////////
+// Imports
+//////////////////////////////
+@import "minimal-mistakes/vendor/breakpoint/settings";
+@import "minimal-mistakes/vendor/breakpoint/context";
+@import "minimal-mistakes/vendor/breakpoint/helpers";
+@import "minimal-mistakes/vendor/breakpoint/parsers";
+@import "minimal-mistakes/vendor/breakpoint/no-query";
+
+@import "minimal-mistakes/vendor/breakpoint/respond-to";
+
+@import "minimal-mistakes/vendor/breakpoint/legacy-settings";
+
+@function str-replace($text, $search, $replace) {
+  $index: str-index($text, $search);
+  @if $index == null {
+    @return $text;
+  }
+  $prefix: str-slice($text, 1, $index - 1);
+  $suffix: str-replace(str-slice($text, $index + str-length($search)), $search, $replace);
+  @return $prefix + $replace + $suffix;
+}
+
+//////////////////////////////
+// Breakpoint Mixin
+//////////////////////////////
+
+@mixin breakpoint($query, $no-query: false) {
+  @include legacy-settings-warning;
+
+  // Reset contexts
+  @include private-breakpoint-reset-contexts();
+
+  $breakpoint: breakpoint($query, false);
+
+  $query-string: map-get($breakpoint, 'query');
+  $query-fallback: map-get($breakpoint, 'fallback');
+
+  $private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global;
+  $private-breakpoint-query-count: map-get($breakpoint, 'query count') !global;
+
+  // Allow for an as-needed override or usage of no query fallback.
+  @if $no-query != false {
+    $query-fallback: $no-query;
+  }
+
+  @if $query-fallback != false {
+    $context-setter: private-breakpoint-set-context('no-query', $query-fallback);
+  }
+
+  // Print Out Query String
+  @if not breakpoint-get('no queries') {
+    @if str-index($query-string, "width") {
+      &:not(html.vertical, html.vertical *) {
+        @media #{$query-string} {
+          @content;
+        }
+      }
+
+      $vertical-query-string: str-replace($query-string, "width", "height");
+      &:is(html.vertical, html.vertical *) {
+        @media #{$vertical-query-string} {
+          @content;
+        }
+      }
+    } @else if (str-index($query-string, "height")) {
+      &:not(html.vertical, html.vertical *) {
+        @media #{$query-string} {
+          @content;
+        }
+      }
+
+      $vertical-query-string: str-replace($query-string, "height", "width");
+      &:is(html.vertical, html.vertical *) {
+        @media #{$vertical-query-string} {
+          @content;
+        }
+      }
+    } @else {
+      @media #{$query-string} {
+        @content;
+      }
+    }
+  }
+
+  @if breakpoint-get('no query fallbacks') != false or breakpoint-get('no queries') == true {
+
+    $type: type-of(breakpoint-get('no query fallbacks'));
+    $print: false;
+
+    @if ($type == 'bool') {
+      $print: true;
+    }
+    @else if ($type == 'string') {
+      @if $query-fallback == breakpoint-get('no query fallbacks') {
+        $print: true;
+      }
+    }
+    @else if ($type == 'list') {
+      @each $wrapper in breakpoint-get('no query fallbacks') {
+        @if $query-fallback == $wrapper {
+          $print: true;
+        }
+      }
+    }
+
+    // Write Fallback
+    @if ($query-fallback != false) and ($print == true) {
+      $type-fallback: type-of($query-fallback);
+
+      @if ($type-fallback != 'bool') {
+        #{$query-fallback} & {
+          @content;
+        }
+      }
+      @else {
+        @content;
+      }
+    }
+  }
+
+  @include private-breakpoint-reset-contexts();
+}
+
+
+@mixin mq($query, $no-query: false) {
+  @include breakpoint($query, $no-query) {
+    @content;
+  }
+}
diff --git a/assets/js/theme.js b/assets/js/init.js
similarity index 82%
rename from assets/js/theme.js
rename to assets/js/init.js
index 9a202792..8ab1c6b2 100644
--- a/assets/js/theme.js
+++ b/assets/js/init.js
@@ -2,6 +2,7 @@
 layout: null
 ---
 window.addEventListener("DOMContentLoaded", function () {
+  // skin
   var skinLink = document.getElementById("skin");
   var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
   function applyDarkSkin() {
@@ -34,7 +35,7 @@ window.addEventListener("DOMContentLoaded", function () {
     }
     menuList.appendChild(modeSwitcher);
   }
-  function applyTheme(mode) {
+  settings.onChange("appearance_color", function (mode) {
     var newIndex = modeKeys.indexOf(mode);
     if (newIndex < 0) newIndex = 0;
 
@@ -59,12 +60,21 @@ window.addEventListener("DOMContentLoaded", function () {
       darkModeQuery.addEventListener("change", autoSchemeHandler);
       autoSchemeHandler();
     }
-  }
-  settings.onChange("appearance_color", applyTheme);
+  });
   settings.onChange("appearance_skin_dark", function () {
     settings.refresh("appearance_color");
   });
   settings.onChange("appearance_skin_light", function () {
     settings.refresh("appearance_color");
   });
+  // april_fools
+  var now = new Date();
+  var isAprilFoolsDay = now.getMonth() === 3 && now.getDate() === 1;
+  settings.onChange("miscellaneous_layout_vertical", function (strategy) {
+    var root = document.documentElement;
+    root.classList.remove("vertical");
+    if (strategy !== "disable" && (strategy === "enable" || isAprilFoolsDay)) {
+      root.classList.add("vertical");
+    }
+  });
 });
diff --git a/settings.yaml b/settings.yaml
index 280a95b4..daa4785e 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -44,4 +44,13 @@ data:
           sunrise: 日出 (Sunrise)
           catppuccin_latte: Catppuccin Latte
           catppuccin_mocha: Catppuccin Mocha
+  - title: 杂项
+    settings:
+      miscellaneous_layout_vertical:
+        title: 纵向布局
+        description: 设置页面内容是否采用纵向排列布局。
+        options:
+          april_fools_only: 仅愚人节当天启用
+          enable: 启用
+          disable: 禁用
 ---