feat(Style): change layout to allow navbar to expand the whole width

src/assets/style/style.scss

@@ -13,7 +13,7 @@ html {
   font-size: calc(15px + 0.390625vw);
 }
 
-body {
+body > main {
   max-width: 95vw; /* leave some space in the end by default */
   margin: auto;
   padding: 15px 0;
@@ -27,7 +27,7 @@ section:not(.clean) {
   border-radius: var(--prj-border-radius);
 }
 
-section:not(:first-child) {
+section:not(:first-of-type) {
   margin-top: var(--prj-spacing-4);
 }
 
@@ -70,10 +70,19 @@ p:last-child {
   margin-bottom: 0;
 }
 
+.container {
+  max-width: 100%;
+}
+
 /* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
 @each $name, $size in $screen-sizes {
   @media screen and (min-width: $size) {
-    body {
+    body > main {
+      max-width: $size;
+    }
+
+    .container {
+      margin: auto;
       max-width: $size;
     }
   }

src/components/Navbar.astro

@@ -11,8 +11,8 @@ const links = [
 ];
 ---
 
-<div id="main-navbar">
-  <nav class="navbar navbar-desktop d-none d-lg-block">
+<div id="main-navbar" class="pt-1">
+  <nav class="navbar navbar-desktop d-none d-lg-block container">
     <ul class="list-unstyle hstack">
       {
         links.map((link) => (
@@ -63,12 +63,13 @@ const links = [
 </script>
 
 <style lang="scss">
-  .navbar-desktop {
-    margin-left: auto;
+  nav {
+    width: 100%;
   }
 
-  nav {
+  .navbar-desktop ul {
     width: fit-content;
+    margin-left: auto;
   }
 
   ul {

src/layouts/Layout.astro

@@ -5,8 +5,8 @@ export interface Props {
 }
 
 import '../assets/style/style.scss';
-import Navbar from '../components/Navbar.astro';
-import Spinner from '../components/Spinner.astro';
+import Navbar from '@components/Navbar.astro';
+import Spinner from '@components/Spinner.astro';
 
 const { title } = Astro.props;
 ---