From 271d873e004998c5b03b5f2ff48ee262a3bf0c85 Mon Sep 17 00:00:00 2001
From: Sakura Akeno Isayeki <sakura.isayeki@nodsoft.net>
Date: Sat, 17 Feb 2024 12:03:53 +0100
Subject: [PATCH] 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.
---
 .../src/components/Sidebar.astro              |  6 ++---
 .../src/components/Sidebar.astro.scss         |  6 -----
 .../src/styles/_content.scss                  | 16 ++++++++++----
 .../src/styles/_global.scss                   | 22 +++++++++----------
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro
index 6676c0c..68bc543 100644
--- a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro
+++ b/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
diff --git a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
index 8b02c92..18608ee 100644
--- a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
+++ b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
@@ -90,12 +90,6 @@ nav {
   }
 }
 
-
-.navbar-brand {
-  
-}
-
-
 .nav-category {
   display: flex;
   flex-direction: column;
diff --git a/nodsoft_moltenobsidian_web/src/styles/_content.scss b/nodsoft_moltenobsidian_web/src/styles/_content.scss
index 31419b7..e22fd80 100644
--- a/nodsoft_moltenobsidian_web/src/styles/_content.scss
+++ b/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 {
diff --git a/nodsoft_moltenobsidian_web/src/styles/_global.scss b/nodsoft_moltenobsidian_web/src/styles/_global.scss
index 3307fea..63c301e 100644
--- a/nodsoft_moltenobsidian_web/src/styles/_global.scss
+++ b/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;
+  }
 }