feat: narrow style with border

src/components/Build/styles.module.scss

@@ -13,7 +13,6 @@
   align-items: center;
   gap: 1rem;
   padding: 0.75rem 0 4rem;
-  margin: 0 0 4rem;
 }
 
 .sub {

src/components/Changelog/index.tsx

@@ -7,6 +7,7 @@ import type { Props } from "@theme/BlogLayout";
 import BlogSidebar from "@theme/BlogSidebar";
 import Layout from "@theme/Layout";
 import clsx from "clsx";
+import styles from "./styles.module.scss";
 
 export default function Changelog(
   props: Props & { releases: GitHubRelease[] }
@@ -30,7 +31,7 @@ export default function Changelog(
 
   return (
     <Layout {...layoutProps}>
-      <div className="container margin-vert--lg">
+      <div className={`container ${styles.section}`}>
         <div className="row">
           <BlogSidebar sidebar={sidebar} />
           <main

src/components/Changelog/styles.module.scss

@@ -0,0 +1,7 @@
+@use "../../mixins/section";
+
+.section {
+  margin: 0 auto;
+
+  @include section.standalone;
+}

src/components/Hero/styles.module.scss

@@ -1,3 +1,5 @@
+@use "../../mixins/section";
+
 .heroBanner {
   z-index: 1;
   background: transparent;

src/components/Newsletter/styles.module.scss

@@ -1,4 +1,5 @@
 @use "../../mixins/fonts";
+@use "../../mixins/section";
 
 .sub {
   margin: 1rem 0 0.75rem;

src/components/Testimonials/styles.module.scss

@@ -6,7 +6,6 @@
 
 .grid {
   --grid-gap: 3rem;
-  margin: 0 0 4rem;
   padding: 0;
   list-style: none;
   @include grid.columns;

src/css/blog.scss

@@ -0,0 +1,24 @@
+@use "../mixins/section";
+
+:root {
+  &.blog-wrapper {
+    .main-wrapper {
+      div.container {
+        margin-bottom: unset !important;
+        margin-top: unset !important;
+
+        @include section.standalone;
+
+        padding: 3rem var(--ifm-spacing-horizontal) 0;
+
+        @media screen and (min-width: 1140px) {
+          padding: 3rem 3rem 0;
+        }
+
+        main {
+          padding-bottom: 3rem;
+        }
+      }
+    }
+  }
+}

src/css/custom.scss

@@ -6,6 +6,7 @@
 @use "hr";
 @use "selection";
 @use "navbar";
+@use "blog";
 @use "search";
 @use "table";
 @use "a11y";

src/css/docusaurus.scss

@@ -6,6 +6,8 @@
   --ifm-menu-link-padding-vertical: 0.3rem;
   --ifm-toc-padding-vertical: 0.3rem;
 
+  --ifm-container-width: 1078px;
+
   &[data-theme] {
     --doc-sidebar-width: 18vw;
   }
@@ -19,12 +21,6 @@ nav {
   font-size: var(--font-size-navbar);
 }
 
-.container {
-  @media (min-width: 1440px) {
-    max-width: 1640px;
-  }
-}
-
 .main-wrapper {
   position: relative;
 }

src/css/navbar.scss

@@ -1,3 +1,5 @@
+@use "../mixins/section";
+
 :root {
   .navbar {
     border-bottom: 1px solid transparent;
@@ -8,6 +10,23 @@
       border-bottom: 1px solid var(--ifm-toc-border-color);
     }
   }
+
+  &:not(.docs-wrapper) {
+    @media screen and (min-width: 1140px) {
+      .navbar {
+        width: var(--ifm-container-width);
+        margin: 0 auto;
+
+        @include section.section(true);
+      }
+    }
+
+    @media screen and (min-width: 1440px) {
+      .navbar {
+        width: var(--ifm-container-width-xl);
+      }
+    }
+  }
 }
 
 .navbar {

src/mixins/_section.scss

@@ -0,0 +1,30 @@
+@mixin border-horizontal() {
+  @media screen and (min-width: 1140px) {
+    border-left: 1px solid var(--ifm-toc-border-color);
+    border-right: 1px solid var(--ifm-toc-border-color);
+  }
+}
+
+@mixin section($border-top: false) {
+  @include border-horizontal;
+
+  @media screen and (min-width: 1140px) {
+    border-bottom: 1px solid var(--ifm-toc-border-color);
+
+    @if $border-top {
+      border-top: 1px solid var(--ifm-toc-border-color);
+    }
+
+    padding: 0 3rem;
+  }
+}
+
+@mixin standalone {
+  @include border-horizontal;
+
+  padding: 3rem var(--ifm-spacing-horizontal) 12rem;
+
+  @media screen and (min-width: 1140px) {
+    padding: 3rem 3rem 16rem;
+  }
+}

src/pages/contact/index.module.scss

@@ -1,6 +1,9 @@
+@use "../../mixins/section";
+
 .container {
-  margin: 3rem auto 12rem;
+  margin: 0 auto;
   max-width: var(--ifm-container-width);
-  padding: 0 var(--ifm-spacing-horizontal);
   width: 100%;
+
+  @include section.standalone;
 }

src/pages/index.module.scss

@@ -1,4 +1,5 @@
 @use "../mixins/grid";
+@use "../mixins/section";
 
 .home {
   overflow-x: hidden;
@@ -10,22 +11,30 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+
+  @include section.section;
 }
 
 .section {
-  padding: 1rem 2rem 4rem;
+  @include section.section;
+
+  padding: 1rem 3rem 4rem;
 }
 
 .launch {
-  padding: 0 2rem 8rem;
+  @include section.section;
+
+  padding: 0 3rem 8rem;
 
   @media screen and (min-width: 960px) {
-    padding: 2rem 2rem 10rem;
+    padding: 2rem 3rem 2rem;
   }
 }
 
 .block {
-  padding: 4rem 2rem 4rem;
+  @include section.section;
+
+  padding: 4rem 3rem 4rem;
 }
 
 .grid {

src/pages/newsletter/index.module.scss

@@ -1,6 +1,14 @@
+@use "../../mixins/section";
+
 .container {
-  margin: 3rem auto 6rem;
+  margin: 0 auto;
+
   max-width: var(--ifm-container-width);
-  padding: 0 var(--ifm-spacing-horizontal);
   width: 100%;
+
+  @include section.standalone;
+
+  @media screen and (min-width: 1140px) {
+    padding: 3rem 3rem 12rem;
+  }
 }

src/pages/showcase/index.module.scss

@@ -1,5 +1,6 @@
 @use "../../mixins/grid";
 @use "../../mixins/fonts";
+@use "../../mixins/section";
 
 .title {
   @include fonts.h1;
@@ -17,10 +18,20 @@
   justify-content: center;
   align-items: center;
 
-  margin: 3rem 0 6rem;
+  max-width: var(--ifm-container-width);
+  width: 100%;
+
+  margin: 0 auto;
+
+  @include section.standalone;
+
+  padding: 6rem 3rem;
 }
 
 .grid {
-  margin: 0 1rem 6rem;
   @include grid.columns;
 }
+
+.section {
+  @include section.standalone;
+}