feat: reroute general page derivations to general page route

feat: always have page body in square aspect ratio
feat: change to mobile view on 1.1/1 aspect ratio (instead of 0.8/1)
feat: dynamically change title with any new page
feat: cache general page template

9 files changed, 111 insertions, 54 deletions

diff --git a/internal/router/api-v1-general-page-body.go b/internal/router/api-v1-general-page-body.go
index 2329c4a..cdb558a 100644
--- a/internal/router/api-v1-general-page-body.go
+++ b/internal/router/api-v1-general-page-body.go
@@ -108,6 +108,7 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 			values["Tags"] = tagsArray
 			values["QuerySort"] = querySort
 			values["QueryTags"] = strings.Join(queryTags, ",")
+			values["Title"] = l[lang].BlogSearch.Header
 
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-catalogue.html")
 		} else if len(pathParts) == 3 && pathParts[1] == "blog" {
diff --git a/internal/router/api-v1-general-page.go b/internal/router/api-v1-general-page.go
new file mode 100644
index 0000000..8e1387b
--- /dev/null
+++ b/internal/router/api-v1-general-page.go
@@ -0,0 +1,52 @@
+package router
+
+import (
+	"fmt"
+	"log/slog"
+	"slices"
+	"strings"
+
+	"github.com/SayaAndy/saya-today-web/locale"
+	"github.com/gofiber/fiber/v2"
+)
+
+func init() {
+	tm.Add("general-page", "views/layouts/general-page.html")
+}
+
+func Api_V1_GeneralPage(l map[string]*locale.LocaleConfig, langs []string) func(c *fiber.Ctx) error {
+	return func(c *fiber.Ctx) error {
+		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
+		path := c.Path()
+
+		pathParts := strings.Split(strings.Trim(path, "/"), "/")
+		if len(pathParts) < 2 {
+			return c.Status(fiber.ErrBadRequest.Code).SendString("url path is invalid: expect format '/{lang}/...'")
+		}
+
+		lang := pathParts[0]
+		if !slices.Contains(langs, lang) {
+			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language... yet??", lang))
+		}
+
+		cacheKey := "general-page." + lang
+		if val, ok := PCache.Get(cacheKey); val != nil && ok {
+			c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+			return c.Status(fiber.StatusOK).Type("html").Send(val)
+		}
+
+		content, err := tm.Render("general-page", fiber.Map{
+			"L":           l[lang],
+			"Lang":        lang,
+			"QueryString": string(c.Request().URI().QueryString()),
+		})
+		if err != nil {
+			slog.Warn("failed to generate div", slog.String("path", path), slog.String("error", err.Error()))
+			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
+		}
+
+		go PCache.Set(cacheKey, content, int64(len(content)))
+		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+		return c.Status(fiber.StatusOK).Type("html").Send(content)
+	}
+}
diff --git a/main.go b/main.go
index e4e5a45..2f8ef4b 100644
--- a/main.go
+++ b/main.go
@@ -133,8 +133,8 @@ func main() {
 
 	app.Get("/", router.Root(cfg.AvailableLanguages))
 	app.Get("/:lang/map", router.Lang_Map(localization, availableLanguages, b2Client))
-	app.Get("/:lang/blog", router.Lang_Blog(localization, availableLanguages, b2Client))
-	app.Get("/:lang/blog/:title", router.Lang_Blog_Title(localization, availableLanguages, b2Client, md))
+	app.Get("/:lang/blog", router.Api_V1_GeneralPage(localization, availableLanguages))
+	app.Get("/:lang/blog/:title", router.Api_V1_GeneralPage(localization, availableLanguages))
 
 	app.Get("/api/v1/tz", router.Api_V1_TZ())
 	app.Get("/api/v1/blog-search", router.Api_V1_BlogSearch(localization, availableLanguages, b2Client))
diff --git a/static/input.css b/static/input.css
index a64c59d..261aeb3 100644
--- a/static/input.css
+++ b/static/input.css
@@ -482,37 +482,41 @@ body[data-theme~="ram"] .leaflet-tile {
     filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important;
 }
 
-@media (min-aspect-ratio: 0.8/1) {
-    .ar-gt-0\.8\:mr-\[1\.2vmin\] {
+@media (min-aspect-ratio: 1.1/1) {
+    .ar-gt-1\.1\:mr-\[1\.2vmin\] {
         margin-right: 1.2vmin;
     }
 
-    .ar-gt-0\.8\:w-fit {
+    .ar-gt-1\.1\:w-fit {
         width: fit-content;
     }
 
-    .ar-gt-0\.8\:min-w-fit {
+    .ar-gt-1\.1\:w-\[100vh\] {
+        width: 100vh;
+    }
+
+    .ar-gt-1\.1\:min-w-fit {
         min-width: fit-content;
     }
 
-    .ar-gt-0\.8\:min-w-\[10vh\] {
+    .ar-gt-1\.1\:min-w-\[10vh\] {
         min-width: 10vh;
     }
 
-    .ar-gt-0\.8\:max-w-\[20vh\] {
+    .ar-gt-1\.1\:max-w-\[20vh\] {
         max-width: 20vh;
     }
 
-    .ar-gt-0\.8\:max-w-\[100vh\] {
+    .ar-gt-1\.1\:max-w-\[100vh\] {
         max-width: 100vh;
     }
 
-    .ar-gt-0\.8\:items-center {
+    .ar-gt-1\.1\:items-center {
         align-items: center;
     }
 }
 
-@media (max-aspect-ratio: 0.8/1) {
+@media (max-aspect-ratio: 1.1/1) {
     .bg-sidebar {
         background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh);
     }
@@ -542,71 +546,71 @@ body[data-theme~="ram"] .leaflet-tile {
         background-size: 10vh;
     }
 
-    .ar-lt-0\.8\:grid {
+    .ar-lt-1\.1\:grid {
         display: grid;
     }
 
-    .ar-lt-0\.8\:flex-col {
+    .ar-lt-1\.1\:flex-col {
         flex-direction: column;
     }
 
-    .ar-lt-0\.8\:flex-row {
+    .ar-lt-1\.1\:flex-row {
         flex-direction: row;
     }
 
-    .ar-lt-0\.8\:h-\[8vh\] {
+    .ar-lt-1\.1\:h-\[8vh\] {
         height: 8vh;
     }
 
-    .ar-lt-0\.8\:h-\[10vh\] {
+    .ar-lt-1\.1\:h-\[10vh\] {
         height: 10vh;
     }
 
-    .ar-lt-0\.8\:h-\[30vh\] {
+    .ar-lt-1\.1\:h-\[30vh\] {
         height: 30vh;
     }
 
-    .ar-lt-0\.8\:h-\[90vh\] {
+    .ar-lt-1\.1\:h-\[90vh\] {
         height: 90vh;
     }
 
-    .ar-lt-0\.8\:w-\[8vh\] {
+    .ar-lt-1\.1\:w-\[8vh\] {
         width: 8vh;
     }
 
-    .ar-lt-0\.8\:w-\[80\%\] {
+    .ar-lt-1\.1\:w-\[80\%\] {
         width: 80%;
     }
 
-    .ar-lt-0\.8\:w-\[90vw\] {
+    .ar-lt-1\.1\:w-\[90vw\] {
         width: 90vw;
     }
 
-    .ar-lt-0\.8\:w-screen {
+    .ar-lt-1\.1\:w-screen {
         width: 100vw;
     }
 
-    .ar-lt-0\.8\:max-h-\[25\%\] {
+    .ar-lt-1\.1\:max-h-\[25\%\] {
         max-height: 25%;
     }
 
-    .ar-lt-0\.8\:max-h-\[80\%\] {
+    .ar-lt-1\.1\:max-h-\[80\%\] {
         max-height: 80%;
     }
 
-    .ar-lt-0\.8\:max-h-\[calc\(100\%-25vh\)\] {
+    .ar-lt-1\.1\:max-h-\[calc\(100\%-25vh\)\] {
         max-height: calc(100% - 25vh);
     }
 
-    .ar-lt-0\.8\:text-\[5vh\] {
+    .ar-lt-1\.1\:text-\[5vh\] {
         font-size: 5vh;
     }
 
-    .ar-lt-0\.8\:ml-\[5vw\] {
+    .ar-lt-1\.1\:ml-\[5vw\] {
         margin-left: 5vw;
     }
 
-    .ar-lt-0\.8\:hidden {
+    .ar-lt-1\.1\:hidden {
         display: none;
     }
 }
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 410e6e7..cb85a09 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SAYA TODAY // {{ .Title }}</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -15,7 +14,7 @@
     <link href="/output.css" rel="stylesheet">
 </head>
 
-<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col">
+<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-1.1:flex-col">
 
     <script>
         function changeUrl(path, toAppend = false) {
@@ -162,15 +161,15 @@
         const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     </script>
 
-    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5vw] ar-lt-0.8:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-0.8:h-[8vh] ar-lt-0.8:ml-[5vw] ar-lt-0.4:ml-0">
-        <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
+    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-1.1:items-center shadow-2xl z-20 w-[5vw] ar-lt-1.1:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-1.1:h-[8vh] ar-lt-1.1:ml-[5vw] ar-lt-0.4:ml-0">
+        <div class="logo-custom ar-lt-1.1:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
-        <div class="text-[3vw] ar-lt-0.8:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+        <div class="text-[3vw] ar-lt-1.1:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20">
+            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
@@ -180,10 +179,10 @@
         </div>
     </div>
 
-    <div class="bg-background-dark flex z-10 ar-lt-0.8:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-0.8:ml-[5vw] ar-lt-0.4:ml-0">
+    <div class="bg-background-dark flex z-10 ar-lt-1.1:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-1.1:ml-[5vw] ar-lt-0.4:ml-0">
         <div class="pl-[0.5vw] bg-background-dark border-r-[0.4vmin] border-dashed border-main-dark"></div>
 
-        <div class="ar-gt-0.8:min-w-fit ar-gt-0.8:max-w-[100vh] flex flex-col bg-background-dark relative pt-[1.6vmin] ml-[1.6vmin] pr-[1.6vmin]">
+        <div class="ar-gt-1.1:w-[100vh] flex flex-col bg-background-dark relative pt-[1.6vmin] ml-[1.6vmin] pr-[1.6vmin]">
             <div id="general-page-header" class="flex flex-col"
                 hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
@@ -191,7 +190,7 @@
 
             <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
 
-            <div id="general-page-body" class="flex flex-col max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)] grow"
+            <div id="general-page-body" class="flex flex-col max-h-[calc(100%-7vmax)] ar-lt-1.1:max-h-[calc(100%-25vh)] grow"
                 hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
             <div id="general-page-body-trigger" hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-body" hx-swap="innerHTML"></div>
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index a5f5256..eccafd6 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,11 +1,11 @@
 {{ define "body" }}
-<div class="flex flex-row ar-lt-0.8:flex-col text-[1vmax] h-[100%]">
+<div class="flex flex-row ar-lt-1.1:flex-col text-[1vmax] h-[100%]">
     <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML"
-        class="tags-list ar-gt-0.8:min-w-[10vh] ar-gt-0.8:max-w-[20vh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[25%] flex shrink-0 flex-col ar-gt-0.8:mr-[1.2vmin]">
+        class="tags-list ar-gt-1.1:min-w-[10vh] ar-gt-1.1:max-w-[20vh] ar-gt-1.1:w-fit ar-lt-1.1:w-[100%] ar-lt-1.1:max-h-[25%] flex shrink-0 flex-col ar-gt-1.1:mr-[1.2vmin]">
         <div class="flex flex-col overflow-y-auto">
             <fieldset>
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
-                <div class="flex flex-col ar-lt-0.8:grid grid-cols-5 grid-flow-row-dense">
+                <div class="flex flex-col ar-lt-1.1:grid grid-cols-5 grid-flow-row-dense">
                     <div class="m-[0.4vmin]">
                         <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label>
                     </div>
@@ -18,7 +18,7 @@
             </fieldset>
             <fieldset class="mt-[0.8vmin]">
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.OrderByHeader }}</legend>
-                <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col">
+                <div class="flex flex-col ar-lt-1.1:grid grid-cols-3 grid-rows-2 grid-flow-col">
                     <div class="m-[0.4vmin]">
                         <label><input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-a-z"></i></label>
                     </div>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index e68fcab..b121cc6 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -18,7 +18,7 @@
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
     <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
-    <div id="map-container" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40vh] ar-lt-0.8:h-[30vh]"></div>
+    <div id="map-container" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[60%] ar-lt-1.1:w-[80%] h-[40vh] ar-lt-1.1:h-[30vh]"></div>
     <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
 
     <script>
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 569166f..d6e7281 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css">
 </head>
 
-<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col">
+<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-1.1:flex-col">
 
     <script>
         function switchTheme(theme) {
@@ -40,15 +40,15 @@
         const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     </script>
 
-    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5vw] ar-lt-0.8:w-screen h-screen ar-lt-0.8:h-[8vh]">
-        <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
+    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-1.1:items-center shadow-2xl z-20 w-[5vw] ar-lt-1.1:w-screen h-screen ar-lt-1.1:h-[8vh]">
+        <div class="logo-custom ar-lt-1.1:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
-        <div class="text-[3vw] ar-lt-0.8:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/';" class="fas fa-home w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+        <div class="text-[3vw] ar-lt-1.1:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20">
+            <i onclick="location.href='/';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
@@ -58,7 +58,7 @@
         </div>
     </div>
 
-    <div id="map-container" class="bg-background-dark flex z-10 w-[95vw] ar-lt-0.8:w-screen h-screen ar-lt-0.8:h-[92vh]"></div>
+    <div id="map-container" class="bg-background-dark flex z-10 w-[95vw] ar-lt-1.1:w-screen h-screen ar-lt-1.1:h-[92vh]"></div>
 
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
diff --git a/views/partials/general-page-body.html b/views/partials/general-page-body.html
index d697c14..4686ea1 100644
--- a/views/partials/general-page-body.html
+++ b/views/partials/general-page-body.html
@@ -1 +1,2 @@
+<title>SAYA TODAY // {{ .Title }}</title>
 {{ block "body" . }}{{ end }}
\ No newline at end of file