feat: add responsive design to the components in components/layouts

.stylelintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: ['stylelint-config-standard-scss', 'stylelint-config-recess-order'],
+  rules: {
+    'scss/no-global-function-names': null,
+  },
 };

src/components/layouts/Article/Article.module.scss

@@ -3,10 +3,10 @@
   width: 100%;
   min-width: 200px;
   max-width: 980px;
-  padding: 45px;
+  padding: $size-article-padding-small;
   margin: 0 auto;
 
-  @media (width <= 767px) {
-    padding: 15px;
+  @include screen(lg) {
+    padding: $size-article-padding-large;
   }
 }

src/components/layouts/Aside/Aside.module.scss

@@ -1,14 +1,14 @@
 .aside {
-  @include selector-scrollbar(2px);
+  @include selector-scrollbar($size-2);
 
   position: sticky;
   top: $size-header-height;
   height: calc(100vh - $size-header-height);
   background-color: var(--color-bg-default);
-  border-right: 1px solid var(--color-border-default);
+  border-right: $border-default;
 
   > ul:not(:last-child) {
     margin: 16px 0;
-    border-bottom: 1px solid var(--color-border-default);
+    border-bottom: $border-default;
   }
 }

src/components/layouts/Body/Body.module.scss

@@ -14,9 +14,20 @@
 
   > aside {
     grid-area: 2 / 1 / 3 / 2;
+    transform: translateX(-100%); // TODO: Move to `Aside` component.
   }
 
   > main {
-    grid-area: 2 / 2 / 3 / 3;
+    grid-area: 2 / 1 / 3 / 3;
+  }
+
+  @include screen(xl) {
+    > aside {
+      transform: translateX(0); // TODO: Move to `Aside` component.
+    }
+
+    > main {
+      grid-area: 2 / 2 / 3 / 3;
+    }
   }
 }

src/components/layouts/Header/Header.module.scss

@@ -1,13 +1,11 @@
 .header {
-  @include props-flex-center;
-
   position: sticky;
   top: 0;
   z-index: 1;
   display: grid;
   grid-template-columns: $size-sidebar-width 1fr 64px;
   background-color: inherit;
-  border-bottom: 1px solid var(--color-border-default);
+  border-bottom: $border-default;
 
   > div:first-child {
     grid-area: 1 / 1 / 2 / 2;

src/components/layouts/Main/Main.module.scss

@@ -1,12 +1,24 @@
 .main {
   display: grid;
   grid-template-columns: 1fr $size-nav-width;
+  contain: paint; // `overflow: hidden` prevent children's `position: sticky` from working. So I used it instead.
 
   > article {
-    grid-area: 1 / 1 / 2 / 2;
+    grid-area: 1 / 1 / 2 / 3;
   }
 
   > nav {
     grid-area: 1 / 2 / 2 / 3;
+    transform: translateX(100%); // TODO: Move to `Nav` component.
+  }
+
+  @include screen(md) {
+    > article {
+      grid-area: 1 / 1 / 2 / 2;
+    }
+
+    > nav {
+      transform: translateX(0); // TODO: Move to `Nav` component.
+    }
   }
 }

src/components/layouts/Nav/Nav.module.scss

@@ -1,14 +1,27 @@
 .nav {
+  @include selector-scrollbar($size-2);
+
   position: sticky;
   top: $size-header-height;
   box-sizing: border-box;
   height: calc(100vh - $size-header-height);
-  padding: 45px 24px 0 0;
+  padding: $size-article-padding-small;
+  background-color: var(--color-bg-inset);
+  border-left: $border-default;
 
   > div {
     padding: 4px 8px;
     background-color: var(--color-bg-default);
-    border: 1px solid var(--color-border-default);
+    border: $border-default;
     border-radius: $size-border-radius;
   }
+
+  @include screen(md) {
+    background-color: inherit;
+    border-left: none;
+  }
+
+  @include screen(lg) {
+    padding: $size-article-padding-large 24px 0 0;
+  }
 }

src/components/layouts/Section/Section.module.scss

@@ -1,3 +1,3 @@
 .section {
-  margin: 50px 0;
+  margin: 32px 0;
 }

src/styles/utils/_mixins.scss

@@ -59,7 +59,7 @@
   }
 }
 
-@mixin selector-scrollbar($width: 4px) {
+@mixin selector-scrollbar($width: $size-4) {
   overflow: hidden auto;
 
   // Global usage: `*::webkit-scrollbar`.
@@ -76,3 +76,10 @@
     }
   }
 }
+
+/* media */
+@mixin screen($breakpoint) {
+  @media (min-width: map-get($breakpoints, $breakpoint)) {
+    @content;
+  }
+}

src/styles/utils/_variables.scss

@@ -2,6 +2,7 @@
 $config-base-not-pseudo-class-selector: '.markdown-body *';
 
 /* size */
+$size-2: 0.125rem;
 $size-4: 0.25rem;
 $size-8: 0.5rem;
 $size-16: 1rem;
@@ -10,15 +11,20 @@ $size-40: 2.5rem;
 $size-border-radius: 6px;
 $size-header-height: 64px;
 $size-sidebar-width: 256px;
+$size-article-padding-large: 45px;
+$size-article-padding-small: 16px;
 $size-nav-width: $size-sidebar-width;
 
 /* text-weight */
 $text-weight-normal: 400;
 $text-weight-medium: 500;
 $text-weight-semibold: 600;
 
+/* list */
+$border-default: 1px solid var(--color-border-default);
+
 /* font */
-$font-stack-system: // For general usage
+$font-stack-system:
   -apple-system,
   blinkmacsystemfont,
   segoe ui,
@@ -28,11 +34,20 @@ $font-stack-system: // For general usage
   sans-serif,
   apple color emoji,
   segoe ui emoji;
-$font-stack-monospace: // For markdown content
+$font-stack-monospace:
   ui-monospace,
   sfmono-regular,
   sf mono,
   menlo,
   consolas,
   liberation mono,
   monospace;
+
+/* breakpoints */
+$breakpoints: (
+  sm: 640px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  2xl: 1536px,
+);