_sass/layout.scss in just-the-hm-docs-1.0.0.rc1 vs _sass/layout.scss in just-the-hm-docs-1.0.1.rc1

@@ -1,41 +1,60 @@
 // The basic two column layout
 
+:root {
+  --sidebar-width: #{rem($nav-width-md)};
+
+  @include mq(lg) {
+    --sidebar-width: calc(
+      (100% - #{rem($nav-width + $content-width)}) / 2 + #{rem($nav-width)}
+    );
+  }
+}
+
+body {
+  position: relative;
+  padding-bottom: $sp-10;
+  overflow-y: scroll;
+
+  @include mq(md) {
+    display: grid;
+    grid-template-columns: rem($nav-width-md) 1fr;
+    position: static;
+    padding-bottom: 0;
+  }
+
+  @include mq(lg) {
+    grid-template-columns: minmax(rem($nav-width), var(--sidebar-width)) 1fr;
+  }
+}
+
 .side-bar {
   z-index: 0;
   display: flex;
   flex-wrap: wrap;
   background-color: $sidebar-color;
 
   @include mq(md) {
     flex-flow: column nowrap;
     position: fixed;
-    width: $nav-width-md;
+    width: var(--sidebar-width);
     height: 100%;
     border-right: $border $border-color;
     align-items: flex-end;
   }
 
   @include mq(lg) {
-    width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
-    min-width: $nav-width;
+    min-width: rem($nav-width);
   }
 }
 
 .main {
   @include mq(md) {
+    grid-column-start: 2;
     position: relative;
-    max-width: $content-width;
-    margin-left: $nav-width-md;
+    max-width: rem($content-width);
   }
-
-  @include mq(lg) {
-    margin-left: max(
-      $nav-width,
-      calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
-    );
-  }
 }
 
 .main-content-wrap {
   @include container;
 
@@ -54,11 +73,11 @@
   background-color: $sidebar-color;
 
   @include mq(md) {
     display: flex;
     justify-content: space-between;
-    height: $header-height;
+    height: rem($header-height);
     background-color: $body-background-color;
     border-bottom: $border $border-color;
   }
 
   &.nav-open {
@@ -74,11 +93,11 @@
 .site-header,
 .site-footer {
   width: 100%;
 
   @include mq(lg) {
-    width: $nav-width;
+    width: rem($nav-width);
   }
 }
 
 .site-nav {
   display: none;
@@ -96,16 +115,16 @@
   }
 }
 
 .site-header {
   display: flex;
-  min-height: $header-height;
+  min-height: rem($header-height);
   align-items: center;
 
   @include mq(md) {
-    height: $header-height;
-    max-height: $header-height;
+    height: rem($header-height);
+    max-height: rem($header-height);
     border-bottom: $border $border-color;
   }
 }
 
 .site-title {
@@ -164,24 +183,9 @@
     -90deg,
     rgba($feedback-color, 1) 0%,
     rgba($feedback-color, 0.8) 100%
   );
 }
-
-// stylelint-disable selector-max-type
-
-body {
-  position: relative;
-  padding-bottom: $sp-10;
-  overflow-y: scroll;
-
-  @include mq(md) {
-    position: static;
-    padding-bottom: 0;
-  }
-}
-
-// stylelint-enable selector-max-type
 
 .site-footer {
   @include container;
 
   position: absolute;