fix: remove leading slash in path with going up

format: remove redundant var specs

5 files changed, 24 insertions, 20 deletions

diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 527b9ae..b620566 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -32,7 +32,11 @@
     <script>
         function changeUrl(path, toAppend = false) {
             const urlParams = new URLSearchParams(window.location.search);
-            const newPathname = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
+            newPathname = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
+            while (path.slice(-3) == '/..' && toAppend) {
+                newPathname = newPathname.replace(/\/[^\/]+$/, '');
+                path = path.slice(0, -3);
+            }
             const newPath = toAppend ? `${newPathname}${path}` : `${path}`;
 
             history.pushState({}, '', `${newPath}${urlParams.entries.length == 0 ? '' : '?' + urlParams.toString()}`);
@@ -192,7 +196,7 @@
             sm:left-0 sm:flex-col sm:fixed sm:w-fit
             z-20 shadow-[0_0_1rem_black]">
             <nav aria-label="Main navigation" class="text-[3rem] flex flex-row sm:flex-col gap-0 relative z-20">
-                <a onclick="return changeUrl('/../', true);" href="./" id="sidebar-back-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false">
+                <a onclick="return changeUrl('/..', true);" href="../" id="sidebar-back-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false">
                     <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i>
                 </a>
                 <a onclick="return changeUrl('/{{ .Lang }}');" href="/{{ .Lang }}" id="sidebar-home-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false">
diff --git a/views/pages/home-page.html b/views/pages/home-page.html
index 3f1acf8..63259c8 100644
--- a/views/pages/home-page.html
+++ b/views/pages/home-page.html
@@ -4,8 +4,8 @@
     <div class="ar-gt-0.6:flex-3/5 justify-center content-start p-8">
         <div class="flex flex-col justify-start items-start bg-paper bg-background-dark mb-8 shadow-[0.4rem_0.4rem_0.4rem_black]">
             <p class="text-3xl/loose sm:text-4xl/loose lg:text-5xl/loose tracking-widest uppercase w-full font-m-plus font-thin italic text-left
-                border-l-4 border-solid border-(--color-background-dark)
-                bg-linear-to-r from-(--color-background-dark) to-(--color-background-light)">{{ .L.HomePage.Hymn1 }}</p>
+                border-l-4 border-solid border-background-dark
+                bg-linear-to-r from-background-dark to-background-light">{{ .L.HomePage.Hymn1 }}</p>
             <hr class="w-full border-t-2 border-dotted border-main-hard mb-1">
             <p class="text-xl/loose sm:text-2xl/loose lg:text-3xl/loose -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn2 }}</p>
             <p class="text-xl/loose sm:text-2xl/loose lg:text-3xl/loose -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn3 }}</p>
@@ -14,8 +14,8 @@
 
         <div class="flex flex-col justify-center items-center">
             <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-m-plus font-thin italic text-left
-                border-l-1.5 border-solid border-(--color-background-dark)
-                bg-linear-to-r from-(--color-background-dark) to-(--color-background-light)">{{ .L.HomePage.DidYouKnowThat }}</p>
+                border-l-1.5 border-solid border-background-dark
+                bg-linear-to-r from-background-dark to-background-light">{{ .L.HomePage.DidYouKnowThat }}</p>
             <hr class="w-full border-t-2 border-dotted border-main-hard mb-1">
             <ul class="w-full text-left list-[circle]">
                 <li class="ml-4 mb-1">{{ index .FunFacts 0 }}</li>
@@ -28,8 +28,8 @@
     <div class="ar-gt-0.6:flex-2/5 justify-center content-start p-8">
         <div class="flex flex-col justify-center items-start mb-4">
             <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-m-plus font-thin italic text-left
-                border-l-1.5 border-solid border-(--color-background-dark)
-                bg-linear-to-r from-(--color-background-dark) to-(--color-background-light)">{{ .L.HomePage.Contacts }}</p>
+                border-l-1.5 border-solid border-background-dark
+                bg-linear-to-r from-background-dark to-background-light">{{ .L.HomePage.Contacts }}</p>
             <hr class="w-full border-t-2 border-dotted border-main-hard mb-1">
             <a href="https://t.me/EarlInisMona">
                 <i class="fa-brands fa-telegram w-4 h-4 mr-1"></i>
@@ -56,7 +56,7 @@
                 <div class="home-page-heart z-50">♡</div>
             {{- end }}
             <img src="https://f003.backblazeb2.com/file/sayana-static/home-page-gifs/{{ .GifName }}"
-                class="home-page-gif z-49 -rotate-12 max-w-[70%] max-h-[70%] border-4 border-(--color-background-dark) border-inset">
+                class="home-page-gif z-49 -rotate-12 max-w-[70%] max-h-[70%] border-4 border-background-dark border-inset">
         </div>
 
         <script>
@@ -103,11 +103,11 @@
 
         <div class="flex flex-col justify-center items-center">
             <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-m-plus font-thin italic text-left
-                border-l-1.5 border-solid border-(--color-background-dark)
-                bg-linear-to-r from-(--color-background-dark) to-(--color-background-light)">{{ .L.HomePage.SidebarDescription }}</p>
+                border-l-1.5 border-solid border-color-background-dark
+                bg-linear-to-r from-background-dark to-background-light">{{ .L.HomePage.SidebarDescription }}</p>
             <hr class="w-full border-t-2 border-dotted border-main-hard mb-1">
             <div class="w-full grid grid-cols-[1fr_4fr] content-center items-center
-                [&>*:nth-child(4n+2)]:bg-(--color-background-medium)/50 [&>*:nth-child(4n+3)]:bg-(--color-background-medium)/50" style="container-type: inline-size;">
+                [&>*:nth-child(4n+2)]:bg-background-medium/50 [&>*:nth-child(4n+3)]:bg-background-medium/50" style="container-type: inline-size;">
                 <i class="fas fa-home w-full h-full text-[10cqi] content-center text-center text-main-hard"></i>
                 <p class="p-1">{{ .L.HomePage.HomePageDescription }}</p>
                 <i class="fas fa-search w-full h-full text-[10cqi] content-center text-center text-main-hard"></i>
diff --git a/views/pages/language-pick.html b/views/pages/language-pick.html
index 29c5888..f4119e4 100644
--- a/views/pages/language-pick.html
+++ b/views/pages/language-pick.html
@@ -2,7 +2,7 @@
 <div class="flex flex-col justify-center text-3xl h-full">
     {{- range .AvailableLanguages }}
     <hr class="border-t-2 border-dotted border-main-hard">
-    <div class="nth-[2n+1_of_div]:bg-(--color-background-medium)/50 nth-[2n_of_div]:bg-(--color-background-light)/50 p-2.5 flex flex-row justify-center justify-items-center">
+    <div class="nth-[2n+1_of_div]:bg-background-medium/50 nth-[2n_of_div]:bg-background-light/50 p-2.5 flex flex-row justify-center justify-items-center">
         <a href="/{{ .Name }}" class="w-12 h-12 basis-12 shrink-0 mr-4">
             <img onclick="return changeUrl('{{ .Name }}');" class="w-full h-full aspect-square cursor-pointer object-cover rounded-md select-none" src="{{ .Flag }}">
         </a>
diff --git a/views/pages/user-page.html b/views/pages/user-page.html
index 397603c..0dd006a 100644
--- a/views/pages/user-page.html
+++ b/views/pages/user-page.html
@@ -8,12 +8,12 @@
                 <label class="block text-main-medium font-bold mb-1 z-22">
                     {{ .L.UserProfile.EmailHeader }}
                 </label>
-                <input class="bg-(--color-background-medium) appearance-none border-(--color-background-medium) rounded ml-6 mr-4 py-2 px-4 text-main-medium leading-tight inset-shadow-[0_0_0.4rem_black] focus:outline-none focus:bg-(--color-background-light) focus:text-main-hard z-22"
+                <input class="bg-background-medium appearance-none border-background-medium rounded ml-6 mr-4 py-2 px-4 text-main-medium leading-tight inset-shadow-[0_0_0.4rem_black] focus:outline-none focus:bg-background-light focus:text-main-hard z-22"
                 id="email-input" name="email" type="text" value="{{ .Email }}" placeholder="{{ .L.UserProfile.TypeEmail }}" maxlength="64"
                 data-validated-email="{{ .Email }}" onchange="checkIfValidated(this);">
             </div>
         </div>
-        <button class="w-max mx-auto bg-(--color-main-hard) hover:bg-(--color-main-medium) active:bg-(--color-main-soft) active:inset-shadow-[0.2em_0.2em_0.2rem_black] transition-colors transition-300 text-(--color-background-light) font-bold py-2 px-4 rounded z-22"
+        <button class="w-max mx-auto bg-main-hard hover:bg-main-medium active:bg-main-soft active:inset-shadow-[0.2em_0.2em_0.2rem_black] transition-colors transition-300 text-background-light font-bold py-2 px-4 rounded z-22"
             hx-post="/api/v1/email/send-verification-code" hx-target="#email-message" hx-swap="outerHTML" hx-indicator="#email-form">
             {{ .L.UserProfile.SendCodeButton }}
         </button>
@@ -29,11 +29,11 @@
                 <label class="block text-main-medium font-bold ml-1 z-22">
                     {{ .L.UserProfile.VerificationCodeHeader }}
                 </label>
-                <input class="bg-(--color-background-medium) appearance-none border-(--color-background-medium) rounded ml-6 mr-4 py-2 px-4 text-main-medium leading-tight inset-shadow-[0_0_0.4rem_black] focus:outline-none focus:bg-(--color-background-light) focus:text-main-hard z-22"
+                <input class="bg-background-medium appearance-none border-background-medium rounded ml-6 mr-4 py-2 px-4 text-main-medium leading-tight inset-shadow-[0_0_0.4rem_black] focus:outline-none focus:bg-background-light focus:text-main-hard z-22"
                 name="email_code" type="text" value="{{ .EmailCode }}" placeholder="0123456789ABCDEF" maxlength="16" autocapitalize="characters">
             </div>
         </div>
-        <button class="w-max mx-auto bg-(--color-main-hard) hover:bg-(--color-main-medium) active:bg-(--color-main-soft) active:inset-shadow-[0.2em_0.2em_0.2rem_black] transition-colors transition-300 text-(--color-background-light) font-bold py-2 px-4 rounded z-22"
+        <button class="w-max mx-auto bg-main-hard hover:bg-main-medium active:bg-main-soft active:inset-shadow-[0.2em_0.2em_0.2rem_black] transition-colors transition-300 text-background-light font-bold py-2 px-4 rounded z-22"
             hx-post="/api/v1/email/verify" hx-target="#verification-message" hx-swap="outerHTML" hx-indicator="#email-verification-form">
             {{ .L.UserProfile.VerifyButton }}
         </button>
@@ -61,7 +61,7 @@
                 </div>
             </div>
             <div id="pick-tags-form" class="flex flex-col w-full relative crossable">
-                <input type="text" class="bg-(--color-background-medium) appearance-none border-(--color-background-medium) rounded ml-6 mr-4 py-2 px-4 text-main-medium leading-tight inset-shadow-[0_0_0.4rem_black] focus:outline-none focus:bg-(--color-background-light) focus:text-main-hard z-22"
+                <input type="text" class="bg-background-medium appearance-none border-background-medium rounded ml-6 mr-4 py-2 px-4 text-main-medium leading-tight inset-shadow-[0_0_0.4rem_black] focus:outline-none focus:bg-background-light focus:text-main-hard z-22"
                     list="existing-tags" onchange="addTag(this.value);" onkeydown="if (event.keyCode === 13) {addTag(this.value); this.value=''; return false;}">
                 <datalist id="existing-tags">
                     {{- range .ExistingTags }}
@@ -78,7 +78,7 @@
                     {{- end }}
                 </div>
             </div>
-            <button class="w-max mx-auto bg-(--color-main-hard) hover:bg-(--color-main-medium) active:bg-(--color-main-soft) active:inset-shadow-[0.2em_0.2em_0.2rem_black] transition-colors transition-300 text-(--color-background-light) font-bold py-2 px-4 rounded z-22"
+            <button class="w-max mx-auto bg-color-main-hard hover:bg-main-medium active:bg-color-main-soft active:inset-shadow-[0.2em_0.2em_0.2rem_black] transition-colors transition-300 text-background-light font-bold py-2 px-4 rounded z-22"
                 hx-put="/api/v1/subs" hx-target="#subs-message" hx-swap="outerHTML" hx-indicator="#subs-form">
                 {{ .L.UserProfile.SaveButton }}
             </button>
diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html
index 5a85113..4d3d817 100644
--- a/views/partials/blog-page-like-button.html
+++ b/views/partials/blog-page-like-button.html
@@ -1,5 +1,5 @@
 <button hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
     class="themed-button themed-button-like flex flex-col shrink-0 w-fit h-fit mr-2 my-auto{{ if .Liked }} active{{ end }}">
     <i class="fas fa-thumbs-up w-8 h-fit py-0.5 content-center text-center"></i>
-    <div class="h-fit px-0.5 content-center bg-(--color-background-medium) text-(--color-main-hard)">{{ .LikedCount }}</div>
+    <div class="h-fit px-0.5 content-center bg-background-medium text-main-hard">{{ .LikedCount }}</div>
 </button>
\ No newline at end of file