feat(web): Add ID to sidebar element + styling changes

- Added an `id` attribute with the value "sidebar" to the `<nav>` element in the Sidebar component.
- Updated the `onclick` event handler for the sidebar toggler button to target the sidebar by its new ID.
- In the `_content.scss` file, added media queries to adjust font size and text alignment for `.landing` class based on device width breakpoints.
- In the `_global.scss` file, updated media query breakpoint for reducing font size on smaller devices.

nodsoft_moltenobsidian_web/src/components/Sidebar.astro

@@ -14,12 +14,12 @@ export const manifestClient = VaultManifestClient.fromManifest(manifest as Vault
 
 ---
 
-<nav class="collapsed" aria-label="sidebar">
+<nav id="sidebar" class="collapsed" aria-label="sidebar">
 	<div class="navbar-brand">
 		<Image src={logo} alt="MoltenObsidian Logo" />
 		<a style="flex-grow: 1;" href="">{SITE_TITLE}</a>
 
-		<button type="button" class="sidebar-toggler" onclick="toggleSidebar">
+		<button type="button" class="sidebar-toggler">
 			<span aria-hidden="true" class="sidebar-toggler-icon"></span>
 		</button>
 	</div>
@@ -53,7 +53,7 @@ export const manifestClient = VaultManifestClient.fromManifest(manifest as Vault
 <script>
 	// Sidebar toggler
 	function toggleSidebar() {
-		document.querySelector('.sidebar').classList.toggle('collapsed');
+		document.querySelector('#sidebar').classList.toggle('collapsed');
 	}
 
 	// register button click handler

nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss

@@ -90,12 +90,6 @@ nav {
   }
 }
 
-
-.navbar-brand {
-
-}
-
-
 .nav-category {
   display: flex;
   flex-direction: column;

nodsoft_moltenobsidian_web/src/styles/_content.scss

@@ -1,10 +1,18 @@
 @use "mixins" as *;
+@use "variables" as *;
 
 
-
-.landing {
-  font-size: 20px;
-  line-height: 1.6;
+&.landing {
+  @media (min-device-width: map-get($breakpoints, "xl")) {
+    font-size: 20px;
+    line-height: 1.6;
+  }
+
+  @media (max-device-width: map-get($breakpoints, "xxl")) {
+    .flex-row-xxl {
+      text-align: center;
+    }
+  }
 }
 
 pre {

nodsoft_moltenobsidian_web/src/styles/_global.scss

@@ -14,7 +14,7 @@
 html, .html {
   font-size: 16px;
 
-  @media (max-device-width: map-get($breakpoints, "lg")) {
+  @media (max-device-width: map-get($breakpoints, "md")) {
     font-size: 14px
   }
 
@@ -54,20 +54,20 @@ body {
 }
 
 
-main, .main {
-  flex: 1;
-  padding: 1rem;
-  max-width: calc(100% - 2rem);
-  color: white;
-  font-size: 16px;
-  line-height: 1.5;
-  overflow-y: auto;
-}
-
 main {
   article {
     @import "content";
   }
+
+  &, .main {
+    flex: 1;
+    padding: 1rem;
+    max-width: calc(100% - 2rem);
+    color: white;
+    font-size: 16px;
+    line-height: 1.5;
+    overflow-y: auto;
+  }
 }