feat: narrow style with border (#694)

* feat: update catchphrase and description

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

* feat: narrow style with border

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

---------

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

Author: peterpeterparker

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 {