-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(website): Switch navigation to Sidebar + CSS overhaul
- Loading branch information
1 parent
cc8a927
commit 0df71ab
Showing
11 changed files
with
180 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
nodsoft_moltenobsidian_web/src/components/NavLink.astro.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
@use "../styles/variables" as *; | ||
|
||
aside > nav { | ||
font-size: 0.9rem; | ||
padding-bottom: 0.2rem; | ||
|
||
a { | ||
color: #d7d7d7; | ||
border-radius: 4px; | ||
display: flex; | ||
align-items: center; | ||
transition: background-color 0.3s; | ||
|
||
padding: 0.3rem 1rem 0.3rem 1rem; | ||
|
||
&:active { | ||
background-color: rgba(255, 255, 255, 0.25); | ||
color: white !important; | ||
} | ||
|
||
&:hover, &:focus { | ||
background-color: rgba(255, 255, 255, 0.21); | ||
color: white !important; | ||
} | ||
|
||
.vault-folder-title { | ||
// set bold font | ||
font-weight: 600; | ||
} | ||
|
||
.vault-item-title { | ||
// set color as primary | ||
color: var($accent-light) !important; | ||
} | ||
} | ||
} |
This file was deleted.
Oops, something went wrong.
48 changes: 0 additions & 48 deletions
48
nodsoft_moltenobsidian_web/src/components/Navbar.astro.scss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
--- | ||
import "./Sidebar.astro.scss" | ||
import NavLink from './NavLink.astro'; | ||
import { SITE_TITLE } from '../consts'; | ||
--- | ||
|
||
<aside> | ||
<h2 class="navbar-brand"> | ||
<a href="/">{SITE_TITLE}</a> | ||
</h2> | ||
|
||
<nav> | ||
<div class="internal-links"> | ||
<NavLink href="/">Home</NavLink> | ||
<NavLink href="/vault">Vault</NavLink> | ||
</div> | ||
</nav> | ||
</aside> |
60 changes: 60 additions & 0 deletions
60
nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
@use "../styles/variables" as *; | ||
|
||
header { | ||
margin: 0; | ||
padding: 0 1em; | ||
} | ||
|
||
aside { | ||
@media (min-width: 720px) { | ||
margin: 0; | ||
padding: 1rem; | ||
display: flex; | ||
flex-direction: column; | ||
position: sticky; | ||
width: 20rem; | ||
overflow: auto; | ||
} | ||
|
||
@media (max-width: 720px) { | ||
display: none; | ||
} | ||
|
||
.navbar-brand > a { | ||
text-decoration: none; | ||
color: white; | ||
padding-left: 2rem; | ||
} | ||
|
||
nav { | ||
display: flex; | ||
flex-direction: column; | ||
|
||
a { | ||
padding: 0.5rem; | ||
//color: var(--black); | ||
border-bottom: 4px solid transparent; | ||
text-decoration: none; | ||
|
||
border-radius: 8px; | ||
color: white; | ||
opacity: 0.8; | ||
|
||
&.active { | ||
text-decoration: none; | ||
//border-bottom-color: var(--accent); | ||
} | ||
} | ||
} | ||
} | ||
|
||
|
||
.navbar-brand { | ||
font-size: 1.5rem; | ||
} | ||
|
||
.internal-links { | ||
display: flex; | ||
flex-direction: column; | ||
gap: 0.3rem; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,13 @@ | ||
$accent: #883AEB; | ||
$accent-light: #E0CCFA; | ||
$accent-dark: #310A65; | ||
$accent-gradient: linear-gradient(45deg, $accent, $accent-light 30%, white 60%); | ||
$accent-gradient: linear-gradient(45deg, $accent, $accent-light 30%, white 60%); | ||
|
||
$background: #13151A; | ||
|
||
.bg-dark-acrylic { | ||
background-color: rgba($background, .6); | ||
|
||
-webkit-backdrop-filter: blur(50px); | ||
backdrop-filter: blur(50px); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
|
||
export function toRelativeVaultPath(path: string) { | ||
return `../assets/vault/${path}`; | ||
} | ||
|
||
export class VaultNote { | ||
constructor(public readonly path: string) { | ||
|
||
} | ||
} |