@@ -238,6 +260,7 @@ $PageTitle = "Profile";
+
diff --git a/Pages/Sarahtonin.php b/Pages/Sarahtonin.php
index 93aa166..25dedec 100644
--- a/Pages/Sarahtonin.php
+++ b/Pages/Sarahtonin.php
@@ -2,6 +2,16 @@
$PageTitle = "Sarahtonin";
+$SubNavbarItems = [
+ "About" => "#About",
+ "Skills" => "#Skills",
+ "Who I am" => "#WhoIAm",
+ "Socials" => "#Socials",
+ "Misc info" => "#MiscInfo"
+];
+
+$SubNavbarCurrent = "About";
+
?>
@@ -11,9 +21,10 @@ $PageTitle = "Sarahtonin";
+
- About me
+ About me
I'm Sarah, also known as Sarahtonin.
@@ -26,7 +37,7 @@ $PageTitle = "Sarahtonin";
Linux, and generally messing around with technology until it does what I want.
- Skills
+ Skills
I work in IT, so I've learned a lot of different stuff in my time.
@@ -50,7 +61,7 @@ $PageTitle = "Sarahtonin";
"Quality over quantity" describes my preferences pretty well.
- Who I am
+ Who I am
I'm Norwegian, my pronouns are she/her,
@@ -62,7 +73,7 @@ $PageTitle = "Sarahtonin";
I'm also asexual, lesbian, and trans. It's quite queer..
- Socials
+ Socials
My username tends to be either Sarahtonin
@@ -70,7 +81,7 @@ $PageTitle = "Sarahtonin";
I'm named that on Steam, YouTube, and Discord.
- Misc info
+ Misc info
- Birthday: 27 November 2008
@@ -80,6 +91,7 @@ $PageTitle = "Sarahtonin";
+
diff --git a/Scripts/SubNavbar.js b/Scripts/SubNavbar.js
new file mode 100644
index 0000000..abaff6f
--- /dev/null
+++ b/Scripts/SubNavbar.js
@@ -0,0 +1,93 @@
+function StartSubNavbar() {
+ const SubNavbar =
+ document.querySelector(
+ ".SubNavbar"
+ );
+
+ if (SubNavbar === null) {
+ return;
+ }
+
+ const Links = [
+ ...SubNavbar.querySelectorAll(
+ ".SubNavbarLink"
+ )
+ ];
+
+ const AnchorLinks =
+ Links.filter(
+ Link =>
+ Link.getAttribute(
+ "href"
+ )?.startsWith("#")
+ );
+
+
+ function SetCurrentLink(
+ CurrentLink
+ ) {
+ for (
+ const Link
+ of AnchorLinks
+ ) {
+ Link.removeAttribute(
+ "aria-current"
+ );
+ }
+
+ if (CurrentLink !== null) {
+ CurrentLink.setAttribute(
+ "aria-current",
+ "location"
+ );
+ }
+ }
+
+
+ function UpdateFromHash() {
+ if (location.hash === "") {
+ return;
+ }
+
+ const CurrentLink =
+ AnchorLinks.find(
+ Link =>
+ Link.getAttribute(
+ "href"
+ ) === location.hash
+ ) ?? null;
+
+ SetCurrentLink(
+ CurrentLink
+ );
+ }
+
+
+ for (
+ const Link
+ of AnchorLinks
+ ) {
+ Link.addEventListener(
+ "click",
+ () => {
+ SetCurrentLink(
+ Link
+ );
+ }
+ );
+ }
+
+
+ window.addEventListener(
+ "hashchange",
+ UpdateFromHash
+ );
+
+ UpdateFromHash();
+}
+
+
+document.addEventListener(
+ "DOMContentLoaded",
+ StartSubNavbar
+);
diff --git a/Styles/Style.css b/Styles/Style.css
index 740318e..99ff900 100644
--- a/Styles/Style.css
+++ b/Styles/Style.css
@@ -49,7 +49,7 @@ body {
padding: 2rem;
display: grid;
- grid-template-columns: minmax(0, 800px) auto;
+ grid-template-columns: minmax(0, 800px) auto auto;
justify-content: center;
align-items: start;
gap: 1rem;
@@ -270,6 +270,73 @@ select {
image-rendering: auto;
}
+.SubNavbar {
+ grid-column: 3;
+ grid-row: 1;
+
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ padding: 0.5rem;
+
+ position: sticky;
+ top: 2rem;
+ align-self: start;
+
+ background-color: var(--Base);
+ border: 4px solid var(--Mauve);
+}
+
+.SubNavbarLink {
+ display: block;
+
+ padding: 0.65rem 0.8rem;
+
+ color: var(--Text);
+ background-color: var(--Mantle);
+
+ text-decoration: none;
+ white-space: nowrap;
+
+ border: 3px solid var(--Surface2);
+
+ box-shadow:
+ 3px 3px 0
+ var(--Crust);
+}
+
+.SubNavbarLink:hover {
+ color: var(--Sky);
+ background-color: var(--Surface0);
+
+ border-color: var(--Sky);
+
+ transform: translate(
+ 1px,
+ 1px
+ );
+
+ box-shadow:
+ 2px 2px 0
+ var(--Crust);
+}
+
+.SubNavbarLink:focus-visible {
+ outline:
+ 3px solid
+ var(--Yellow);
+
+ outline-offset: 3px;
+}
+
+.SubNavbarLink[aria-current] {
+ color: var(--Green);
+ background-color: var(--Surface1);
+
+ border-color: var(--Green);
+}
+
.GardenStatus {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
@@ -900,9 +967,24 @@ select {
height: 3.5rem;
}
- .MainContainer {
+ .SubNavbar {
grid-column: 1;
grid-row: 2;
+
+ flex-direction: row;
+ width: 100%;
+
+ position: static;
+ overflow-x: auto;
+ }
+
+ .SubNavbarLink {
+ flex: 0 0 auto;
+ }
+
+ .MainContainer {
+ grid-column: 1;
+ grid-row: 3;
}
.GardenLayout {