Skip to content

Commit

Permalink
feat(web): Add ID to sidebar element + styling changes
Browse files Browse the repository at this point in the history
- 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.
  • Loading branch information
SakuraIsayeki committed Feb 17, 2024
1 parent 61c3476 commit 271d873
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 24 deletions.
6 changes: 3 additions & 3 deletions nodsoft_moltenobsidian_web/src/components/Sidebar.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
6 changes: 0 additions & 6 deletions nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,6 @@ nav {
}
}


.navbar-brand {

}


.nav-category {
display: flex;
flex-direction: column;
Expand Down
16 changes: 12 additions & 4 deletions nodsoft_moltenobsidian_web/src/styles/_content.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
22 changes: 11 additions & 11 deletions nodsoft_moltenobsidian_web/src/styles/_global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down Expand Up @@ -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;
}
}


Expand Down

0 comments on commit 271d873

Please sign in to comment.