From 0133857d0e350be18f675ede8eaa8556a9626a37 Mon Sep 17 00:00:00 2001
From: Shin Sang-jae <codelabor@gmail.com>
Date: Tue, 28 Jan 2025 01:18:34 +0900
Subject: [PATCH] height alignment of toc and h2 does not match when using
 aside

---
 _sass/minimal-mistakes/_page.scss | 1009 +++++++++++++++--------------
 1 file changed, 507 insertions(+), 502 deletions(-)

diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss
index e33888400eed..9e3ffc49f314 100644
--- a/_sass/minimal-mistakes/_page.scss
+++ b/_sass/minimal-mistakes/_page.scss
@@ -2,560 +2,565 @@
    SINGLE PAGE/POST
    ========================================================================== */
 
-#main {
-  @include clearfix;
-  margin-inline: auto;
-  padding-inline: 1em;
-  -webkit-animation: $intro-transition;
-  animation: $intro-transition;
-  max-width: 100%;
-  -webkit-animation-delay: 0.15s;
-  animation-delay: 0.15s;
-
-  @include breakpoint($x-large) {
-    max-width: $max-width;
-  }
-}
-
-body {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  min-height: 100vh;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-          flex-direction: column;
-}
-
-.initial-content,
-.search-content {
-  flex: 1 0 auto;
-}
-
-.page {
-  @include breakpoint($large) {
-    float: inline-end;
-    width: calc(100% - #{$right-sidebar-width-narrow});
-    padding-inline-end: $right-sidebar-width-narrow;
-  }
-
-  @include breakpoint($x-large) {
-    width: calc(100% - #{$right-sidebar-width});
-    padding-inline-end: $right-sidebar-width;
+   #main {
+    @include clearfix;
+    margin-inline: auto;
+    padding-inline: 1em;
+    -webkit-animation: $intro-transition;
+    animation: $intro-transition;
+    max-width: 100%;
+    -webkit-animation-delay: 0.15s;
+    animation-delay: 0.15s;
+  
+    @include breakpoint($x-large) {
+      max-width: $max-width;
+    }
   }
-
-  .page__inner-wrap {
-    float: inline-start;
-    margin-top: 1em;
-    margin-inline: 0;
-    width: 100%;
-    clear: both;
-
-    .page__content,
-    .page__meta,
-    .page__share {
-      position: relative;
+  
+  body {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    min-height: 100vh;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  
+  .initial-content,
+  .search-content {
+    flex: 1 0 auto;
+  }
+  
+  .page {
+    @include breakpoint($large) {
+      float: inline-end;
+      width: calc(100% - #{$right-sidebar-width-narrow});
+      padding-inline-end: $right-sidebar-width-narrow;
+    }
+  
+    @include breakpoint($x-large) {
+      width: calc(100% - #{$right-sidebar-width});
+      padding-inline-end: $right-sidebar-width;
+    }
+  
+    .page__inner-wrap {
       float: inline-start;
+      margin-top: 1em;
       margin-inline: 0;
       width: 100%;
       clear: both;
+  
+      .page__content,
+      .page__meta,
+      .page__share {
+        position: relative;
+        float: inline-start;
+        margin-inline: 0;
+        width: 100%;
+        clear: both;
+      }
     }
   }
-}
-
-.page__title {
-  margin-top: 0;
-  line-height: 1;
-
-  a {
-    color: $text-color;
-    text-decoration: none;
-  }
-
-  & + .page__meta {
-    margin-top: -0.5em;
-  }
-}
-
-.page__lead {
-  font-family: $global-font-family;
-  font-size: $type-size-4;
-}
-
-.page__content {
-  h2 {
-    padding-bottom: 0.5em;
-    border-bottom: 1px solid $border-color;
+  
+  .page__title {
+    margin-top: 0;
+    line-height: 1;
+  
+    a {
+      color: $text-color;
+      text-decoration: none;
+    }
+  
+    & + .page__meta {
+      margin-top: -0.5em;
+    }
   }
-
-	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;
+  
+  .page__lead {
+    font-family: $global-font-family;
+    font-size: $type-size-4;
   }
-
-  /* paragraph indents */
-  p {
-    margin: 0 0 $indent-var;
-
-    /* sibling indentation*/
-    @if $paragraph-indent == true {
-      & + p {
-        text-indent: $indent-var;
-        margin-top: -($indent-var);
+  
+  .page__content {
+    h2 {
+      padding-bottom: 0.5em;
+      border-bottom: 1px solid $border-color;
+    }
+  
+    h2:first-of-type {
+      margin-top: 0em;
+    }
+  
+    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;
       }
     }
-  }
-
-  a:not(.btn) {
-    &:hover {
-      text-decoration: underline;
-
-      img {
-        box-shadow: 0 0 10px rgba(#000, 0.25);
+  
+    p,
+    li,
+    dl {
+      font-size: 1em;
+    }
+  
+    /* paragraph indents */
+    p {
+      margin: 0 0 $indent-var;
+  
+      /* sibling indentation*/
+      @if $paragraph-indent == true {
+        & + p {
+          text-indent: $indent-var;
+          margin-top: -($indent-var);
+        }
       }
     }
-  }
-
-  :not(pre) > code {
-    padding-top: 0.1rem;
-    padding-bottom: 0.1rem;
-    font-size: 0.8em;
-    background: $code-background-color;
-    border-radius: $border-radius;
-
-    &::before,
-    &::after {
-      letter-spacing: -0.2em;
-      content: "\00a0"; /* non-breaking space*/
+  
+    a:not(.btn) {
+      &:hover {
+        text-decoration: underline;
+  
+        img {
+          box-shadow: 0 0 10px rgba(#000, 0.25);
+        }
+      }
+    }
+  
+    :not(pre) > code {
+      padding-top: 0.1rem;
+      padding-bottom: 0.1rem;
+      font-size: 0.8em;
+      background: $code-background-color;
+      border-radius: $border-radius;
+  
+      &::before,
+      &::after {
+        letter-spacing: -0.2em;
+        content: "\00a0"; /* non-breaking space*/
+      }
+    }
+  
+    dt {
+      margin-top: 1em;
+      font-family: $sans-serif;
+      font-weight: bold;
+    }
+  
+    dd {
+      margin-inline-start: 1em;
+      font-family: $sans-serif;
+      font-size: $type-size-6;
+    }
+  
+    .small {
+      font-size: $type-size-6;
+    }
+  
+    /* blockquote citations */
+    blockquote + .small {
+      margin-top: -1.5em;
+      padding-inline-start: 1.25rem;
     }
   }
-
-  dt {
-    margin-top: 1em;
-    font-family: $sans-serif;
-    font-weight: bold;
-  }
-
-  dd {
-    margin-inline-start: 1em;
-    font-family: $sans-serif;
-    font-size: $type-size-6;
-  }
-
-  .small {
-    font-size: $type-size-6;
-  }
-
-  /* blockquote citations */
-  blockquote + .small {
-    margin-top: -1.5em;
-    padding-inline-start: 1.25rem;
-  }
-}
-
-.page__hero {
-  position: relative;
-  margin-bottom: 2em;
-  @include clearfix;
-  -webkit-animation: $intro-transition;
-  animation: $intro-transition;
-  -webkit-animation-delay: 0.25s;
-  animation-delay: 0.25s;
-
-  &--overlay {
+  
+  .page__hero {
     position: relative;
     margin-bottom: 2em;
-    padding: 3em 0;
     @include clearfix;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
     -webkit-animation: $intro-transition;
     animation: $intro-transition;
     -webkit-animation-delay: 0.25s;
     animation-delay: 0.25s;
-
+  
+    &--overlay {
+      position: relative;
+      margin-bottom: 2em;
+      padding: 3em 0;
+      @include clearfix;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      -webkit-animation: $intro-transition;
+      animation: $intro-transition;
+      -webkit-animation-delay: 0.25s;
+      animation-delay: 0.25s;
+  
+      a {
+        color: #fff;
+      }
+  
+      .wrapper {
+        padding-inline: 1em;
+  
+        @include breakpoint($x-large) {
+          max-width: $x-large;
+        }
+      }
+  
+      .page__title,
+      .page__meta,
+      .page__lead,
+      .btn {
+        color: #fff;
+        text-shadow: 1px 1px 4px rgba(#000, 0.5);
+      }
+  
+      .page__lead {
+        max-width: $medium;
+      }
+  
+      .page__title {
+        font-size: $type-size-2;
+  
+        @include breakpoint($small) {
+          font-size: $type-size-1;
+        }
+      }
+    }
+  }
+  
+  .page__hero-image {
+    width: 100%;
+    height: auto;
+    -ms-interpolation-mode: bicubic;
+  }
+  
+  .page__hero-caption {
+    position: absolute;
+    bottom: 0;
+    inset-inline-end: 0;
+    margin: 0 auto;
+    padding: 2px 5px;
+    color: #fff;
+    font-family: $caption-font-family;
+    font-size: $type-size-7;
+    background: #000;
+    text-align: end;
+    z-index: 5;
+    opacity: 0.5;
+    border-radius: $border-radius 0 0 0;
+  
+    @include breakpoint($large) {
+      padding: 5px 10px;
+    }
+  
     a {
       color: #fff;
+      text-decoration: none;
     }
-
-    .wrapper {
-      padding-inline: 1em;
-
-      @include breakpoint($x-large) {
-        max-width: $x-large;
+  }
+  
+  /*
+     Social sharing
+     ========================================================================== */
+  
+  .page__share {
+    margin-top: 2em;
+    padding-top: 1em;
+    border-top: 1px solid $border-color;
+  
+    @include breakpoint(max-width $small) {
+      .btn span {
+        border: 0;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
       }
     }
-
-    .page__title,
-    .page__meta,
-    .page__lead,
-    .btn {
-      color: #fff;
-      text-shadow: 1px 1px 4px rgba(#000, 0.5);
+  }
+  
+  .page__share-title {
+    margin-bottom: 10px;
+    font-size: $type-size-6;
+    text-transform: uppercase;
+  }
+  
+  /*
+     Page meta
+     ========================================================================== */
+  
+  .page__meta {
+    margin-top: 2em;
+    color: $muted-text-color;
+    font-family: $sans-serif;
+    font-size: $type-size-6;
+  
+    p {
+      margin: 0;
     }
-
-    .page__lead {
-      max-width: $medium;
+  
+    a {
+      color: inherit;
     }
-
-    .page__title {
-      font-size: $type-size-2;
-
-      @include breakpoint($small) {
-        font-size: $type-size-1;
-      }
+  }
+  
+  .page__meta-title {
+    margin-bottom: 10px;
+    font-size: $type-size-6;
+    text-transform: uppercase;
+  }
+  
+  .page__meta-sep::before {
+    content: "\2022";
+    padding-inline: 0.5em;
+  }
+  
+  /*
+     Page taxonomy
+     ========================================================================== */
+  
+  .page__taxonomy {
+    .sep {
+      display: none;
+    }
+  
+    strong {
+      margin-inline-end: 10px;
     }
   }
-}
-
-.page__hero-image {
-  width: 100%;
-  height: auto;
-  -ms-interpolation-mode: bicubic;
-}
-
-.page__hero-caption {
-  position: absolute;
-  bottom: 0;
-  inset-inline-end: 0;
-  margin: 0 auto;
-  padding: 2px 5px;
-  color: #fff;
-  font-family: $caption-font-family;
-  font-size: $type-size-7;
-  background: #000;
-  text-align: end;
-  z-index: 5;
-  opacity: 0.5;
-  border-radius: $border-radius 0 0 0;
-
-  @include breakpoint($large) {
+  
+  .page__taxonomy-item {
+    display: inline-block;
+    margin-inline-end: 5px;
+    margin-bottom: 8px;
     padding: 5px 10px;
-  }
-
-  a {
-    color: #fff;
     text-decoration: none;
+    border: 1px solid mix(#000, $border-color, 25%);
+    border-radius: $border-radius;
+  
+    &:hover {
+      text-decoration: none;
+      color: $link-color-hover;
+    }
   }
-}
-
-/*
-   Social sharing
-   ========================================================================== */
-
-.page__share {
-  margin-top: 2em;
-  padding-top: 1em;
-  border-top: 1px solid $border-color;
-
-  @include breakpoint(max-width $small) {
-    .btn span {
+  
+  .taxonomy__section {
+    margin-bottom: 2em;
+    padding-bottom: 1em;
+  
+    &:not(:last-child) {
+      border-bottom: solid 1px $border-color;
+    }
+  
+    .archive__item-title {
+      margin-top: 0;
+    }
+  
+    .archive__subtitle {
+      clear: both;
       border: 0;
-      clip: rect(0 0 0 0);
-      height: 1px;
-      margin: -1px;
-      overflow: hidden;
-      padding: 0;
-      position: absolute;
-      width: 1px;
+    }
+  
+    + .taxonomy__section {
+      margin-top: 2em;
     }
   }
-}
-
-.page__share-title {
-  margin-bottom: 10px;
-  font-size: $type-size-6;
-  text-transform: uppercase;
-}
-
-/*
-   Page meta
-   ========================================================================== */
-
-.page__meta {
-  margin-top: 2em;
-  color: $muted-text-color;
-  font-family: $sans-serif;
-  font-size: $type-size-6;
-
-  p {
-    margin: 0;
-  }
-
-  a {
-    color: inherit;
-  }
-}
-
-.page__meta-title {
-  margin-bottom: 10px;
-  font-size: $type-size-6;
-  text-transform: uppercase;
-}
-
-.page__meta-sep::before {
-  content: "\2022";
-  padding-inline: 0.5em;
-}
-
-/*
-   Page taxonomy
-   ========================================================================== */
-
-.page__taxonomy {
-  .sep {
-    display: none;
-  }
-
-  strong {
-    margin-inline-end: 10px;
-  }
-}
-
-.page__taxonomy-item {
-  display: inline-block;
-  margin-inline-end: 5px;
-  margin-bottom: 8px;
-  padding: 5px 10px;
-  text-decoration: none;
-  border: 1px solid mix(#000, $border-color, 25%);
-  border-radius: $border-radius;
-
-  &:hover {
-    text-decoration: none;
-    color: $link-color-hover;
-  }
-}
-
-.taxonomy__section {
-  margin-bottom: 2em;
-  padding-bottom: 1em;
-
-  &:not(:last-child) {
-    border-bottom: solid 1px $border-color;
-  }
-
-  .archive__item-title {
-    margin-top: 0;
+  
+  .taxonomy__title {
+    margin-bottom: 0.5em;
+    color: $muted-text-color;
+  }
+  
+  .taxonomy__count {
+    color: $muted-text-color;
+  }
+  
+  .taxonomy__index {
+    display: grid;
+    grid-column-gap: 2em;
+    grid-template-columns: repeat(2, 1fr);
+    margin: 1.414em 0;
+    padding: 0;
+    font-size: 0.75em;
+    list-style: none;
+  
+    @include breakpoint($large) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  
+    a {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      padding: 0.25em 0;
+      -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      color: inherit;
+      text-decoration: none;
+      border-bottom: 1px solid $border-color;
+    }
   }
-
-  .archive__subtitle {
+  
+  .back-to-top {
+    display: block;
     clear: both;
-    border: 0;
-  }
-
-  + .taxonomy__section {
-    margin-top: 2em;
-  }
-}
-
-.taxonomy__title {
-  margin-bottom: 0.5em;
-  color: $muted-text-color;
-}
-
-.taxonomy__count {
-  color: $muted-text-color;
-}
-
-.taxonomy__index {
-  display: grid;
-  grid-column-gap: 2em;
-  grid-template-columns: repeat(2, 1fr);
-  margin: 1.414em 0;
-  padding: 0;
-  font-size: 0.75em;
-  list-style: none;
-
-  @include breakpoint($large) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  a {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    padding: 0.25em 0;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    color: inherit;
+    color: $muted-text-color;
+    font-size: 0.6em;
+    text-transform: uppercase;
+    text-align: end;
     text-decoration: none;
-    border-bottom: 1px solid $border-color;
   }
-}
-
-.back-to-top {
-  display: block;
-  clear: both;
-  color: $muted-text-color;
-  font-size: 0.6em;
-  text-transform: uppercase;
-  text-align: end;
-  text-decoration: none;
-}
-
-/*
-   Comments
-   ========================================================================== */
-
-.page__comments {
-  float: inline-start;
-  margin-inline: 0;
-  width: 100%;
-  clear: both;
-}
-
-.page__comments-title {
-  margin-top: 2rem;
-  margin-bottom: 10px;
-  padding-top: 2rem;
-  font-size: $type-size-6;
-  border-top: 1px solid $border-color;
-  text-transform: uppercase;
-}
-
-.page__comments-form {
-  -webkit-transition: $global-transition;
-  transition: $global-transition;
-
-  &.disabled {
-    input,
-    button,
-    textarea,
-    label {
-      pointer-events: none;
-      cursor: not-allowed;
-      filter: alpha(opacity=65);
-      box-shadow: none;
-      opacity: 0.65;
-    }
-  }
-}
-
-.comment {
-  @include clearfix();
-  margin: 1em 0;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color;
-  }
-}
-
-.comment__avatar-wrapper {
-  float: inline-start;
-  width: 60px;
-  height: 60px;
-
-  @include breakpoint($large) {
-    width: 100px;
-    height: 100px;
+  
+  /*
+     Comments
+     ========================================================================== */
+  
+  .page__comments {
+    float: inline-start;
+    margin-inline: 0;
+    width: 100%;
+    clear: both;
   }
-}
-
-.comment__avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-
-  @include breakpoint($large) {
-    width: 80px;
-    height: 80px;
-    padding: 5px;
-    border: 1px solid $border-color;
+  
+  .page__comments-title {
+    margin-top: 2rem;
+    margin-bottom: 10px;
+    padding-top: 2rem;
+    font-size: $type-size-6;
+    border-top: 1px solid $border-color;
+    text-transform: uppercase;
+  }
+  
+  .page__comments-form {
+    -webkit-transition: $global-transition;
+    transition: $global-transition;
+  
+    &.disabled {
+      input,
+      button,
+      textarea,
+      label {
+        pointer-events: none;
+        cursor: not-allowed;
+        filter: alpha(opacity=65);
+        box-shadow: none;
+        opacity: 0.65;
+      }
+    }
   }
-}
-
-.comment__content-wrapper {
-  float: inline-end;
-  width: calc(100% - 60px);
-
-  @include breakpoint($large) {
-    width: calc(100% - 100px);
+  
+  .comment {
+    @include clearfix();
+    margin: 1em 0;
+  
+    &:not(:last-child) {
+      border-bottom: 1px solid $border-color;
+    }
   }
-}
-
-.comment__author {
-  margin: 0;
-
-  a {
-    text-decoration: none;
+  
+  .comment__avatar-wrapper {
+    float: inline-start;
+    width: 60px;
+    height: 60px;
+  
+    @include breakpoint($large) {
+      width: 100px;
+      height: 100px;
+    }
   }
-}
-
-.comment__date {
-  @extend .page__meta;
-  margin: 0;
-
-  a {
-    text-decoration: none;
+  
+  .comment__avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  
+    @include breakpoint($large) {
+      width: 80px;
+      height: 80px;
+      padding: 5px;
+      border: 1px solid $border-color;
+    }
   }
-}
-
-/*
-   Related
-   ========================================================================== */
-
-.page__related {
-  @include clearfix();
-  float: inline-start;
-  margin-top: 2em;
-  padding-top: 1em;
-  border-top: 1px solid $border-color;
-
-  @include breakpoint($large) {
+  
+  .comment__content-wrapper {
     float: inline-end;
-    width: calc(100% - #{$right-sidebar-width-narrow});
+    width: calc(100% - 60px);
+  
+    @include breakpoint($large) {
+      width: calc(100% - 100px);
+    }
   }
-
-  @include breakpoint($x-large) {
-    width: calc(100% - #{$right-sidebar-width});
+  
+  .comment__author {
+    margin: 0;
+  
+    a {
+      text-decoration: none;
+    }
   }
-
-  a {
-    color: inherit;
-    text-decoration: none;
+  
+  .comment__date {
+    @extend .page__meta;
+    margin: 0;
+  
+    a {
+      text-decoration: none;
+    }
   }
-}
-
-.page__related-title {
-  margin-bottom: 10px;
-  font-size: $type-size-6;
-  text-transform: uppercase;
-}
-
-/*
-   Wide Pages
-   ========================================================================== */
-
-.wide {
-  .page, .page__related {
+  
+  /*
+     Related
+     ========================================================================== */
+  
+  .page__related {
+    @include clearfix();
+    float: inline-start;
+    margin-top: 2em;
+    padding-top: 1em;
+    border-top: 1px solid $border-color;
+  
     @include breakpoint($large) {
-      padding-inline-end: 0;
+      float: inline-end;
+      width: calc(100% - #{$right-sidebar-width-narrow});
     }
-
+  
     @include breakpoint($x-large) {
-      padding-inline-end: 0;
+      width: calc(100% - #{$right-sidebar-width});
+    }
+  
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+  
+  .page__related-title {
+    margin-bottom: 10px;
+    font-size: $type-size-6;
+    text-transform: uppercase;
+  }
+  
+  /*
+     Wide Pages
+     ========================================================================== */
+  
+  .wide {
+    .page, .page__related {
+      @include breakpoint($large) {
+        padding-inline-end: 0;
+      }
+  
+      @include breakpoint($x-large) {
+        padding-inline-end: 0;
+      }
     }
   }
-}
+  
\ No newline at end of file