diff --git a/Pages/Bits/Navbar.php b/Pages/Bits/Navbar.php index 67d4c6a..a26ed7d 100644 --- a/Pages/Bits/Navbar.php +++ b/Pages/Bits/Navbar.php @@ -16,7 +16,7 @@ $NavbarPages = [ href="" aria-label="" title="" - + > + + diff --git a/Pages/Garden.php b/Pages/Garden.php index 62606ef..6b33f27 100644 --- a/Pages/Garden.php +++ b/Pages/Garden.php @@ -2,6 +2,15 @@ $PageTitle = "Garden"; +$SubNavbarItems = [ + "Plots" => "#Plots", + "Seeds" => "#Seeds", + "Player" => "#Player", + "Leaderboard" => "#Leaderboard" +]; + +$SubNavbarCurrent = "Plots"; + ?> @@ -11,6 +20,7 @@ $PageTitle = "Garden"; +

Garden

@@ -21,7 +31,7 @@ $PageTitle = "Garden";
-
+

Plots

-
+

Seeds

-
+

Player

@@ -76,7 +92,10 @@ $PageTitle = "Garden";

-
+

Leaderboard

@@ -103,6 +122,7 @@ $PageTitle = "Garden";
+ diff --git a/Pages/Home.php b/Pages/Home.php index 774ccb3..8e9a1ca 100644 --- a/Pages/Home.php +++ b/Pages/Home.php @@ -2,6 +2,14 @@ $PageTitle = "Home"; +$SubNavbarItems = [ + "Welcome" => "#Welcome", + "About me" => "#AboutMe", + "Credits" => "#Credits" +]; + +$SubNavbarCurrent = "Welcome"; + ?> @@ -11,9 +19,10 @@ $PageTitle = "Home"; +
-

Welcome

+

Welcome

You've arrived at Sarahtonin's homepage. @@ -26,7 +35,7 @@ $PageTitle = "Home";

-

About me

+

About me

I'm Sarahtonin. The creator of this very website. @@ -43,7 +52,7 @@ $PageTitle = "Home"; page about me.

-

Credits

+

Credits

+ diff --git a/Pages/Profile.php b/Pages/Profile.php index f8f06d2..ad2ea51 100644 --- a/Pages/Profile.php +++ b/Pages/Profile.php @@ -2,6 +2,15 @@ $PageTitle = "Profile"; +$SubNavbarItems = [ + "Player" => "#Player", + "Statistics" => "#Statistics", + "Account" => "#Account", + "Import" => "#Import" +]; + +$SubNavbarCurrent = "Player"; + ?> @@ -11,6 +20,7 @@ $PageTitle = "Profile"; +

Profile

@@ -22,7 +32,10 @@ $PageTitle = "Profile";

-
+

Player

@@ -56,7 +69,10 @@ $PageTitle = "Profile";
-
+

Statistics

@@ -113,7 +129,10 @@ $PageTitle = "Profile";
-
+

Account

@@ -177,7 +196,10 @@ $PageTitle = "Profile";

-
+

Import Account

@@ -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

+ 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 {