v0.10.0 (#15)v0.10.0

- [feat: have toolbar on the top by default (only return to left if the
screen is short on
height)](https://github.com/SayaAndy/saya-today-web/commit/324c6df1ab878aa0c34f80c58f730e01aca1f4e9)
- feat: switch font to Andika
- [feat: add noise to plain color
backgrounds](https://github.com/SayaAndy/saya-today-web/commit/36d7f332e6c318064ff0cd6849f69854c7ba0d79)
- [feat: shorten toolbar in global map, paint map on the whole
screen](https://github.com/SayaAndy/saya-today-web/commit/2cbbaaa40019e452b41c98720af8c23759351200)
- [feat: redo language page with general page
layout](https://github.com/SayaAndy/saya-today-web/commit/f6c60d0a963817189854f5b42bc58a76ddb90d53)
- feat: move back button from header to toolbar
- feat: switch masonry to use rem units
- feat: fit masonry to center
- feat: make inset shadows more apparent
- feat: header font: less thick, non-italic and drops shadow
- [fix: home page header getting too close to right
border](https://github.com/SayaAndy/saya-today-web/commit/fdb8582f40168dbb0795358f1ea950a26f157b2d)
- feat: paint shadow off home page header
- fix: have toolbar buttons' href updated with language change
- fix: add missing underline in contacts panel

26 files changed, 356 insertions, 252 deletions

diff --git a/internal/factgiver/factgiver.go b/internal/factgiver/factgiver.go
index 6f77403..5b418ee 100644
--- a/internal/factgiver/factgiver.go
+++ b/internal/factgiver/factgiver.go
@@ -14,13 +14,13 @@ import (
 type FactGiver struct {
 	b2Client      *b2.B2Client
 	cache         map[string][]string
-	langs         []string
+	langs         []config.AvailableLanguageConfig
 	factsFileName string
 	nlRe          *regexp.Regexp
 	randGen       *rand.Rand
 }
 
-func NewFactGiver(cfg *config.FactGiverConfig, langs []string) (*FactGiver, error) {
+func NewFactGiver(cfg *config.FactGiverConfig, langs []config.AvailableLanguageConfig) (*FactGiver, error) {
 	b2Client, err := b2.NewB2Client(&cfg.Storage.Config)
 	if err != nil {
 		return nil, fmt.Errorf("fail to init b2 client for a new fact giver: %s", err.Error())
@@ -52,15 +52,15 @@ func (g *FactGiver) Give(lang string) [3]string {
 
 func (g *FactGiver) initCache() error {
 	for _, lang := range g.langs {
-		localFacts := strings.Replace(g.factsFileName, "*", lang, 1)
+		localFacts := strings.Replace(g.factsFileName, "*", lang.Name, 1)
 		factsContentBytes, err := g.b2Client.ReadAll(localFacts)
 		if err != nil {
-			return fmt.Errorf("fail to read '%s' facts file: %s", lang, err.Error())
+			return fmt.Errorf("fail to read '%s' facts file: %s", lang.Name, err.Error())
 		}
 		factsContent := string(factsContentBytes)
-		g.cache[lang] = g.nlRe.Split(factsContent, -1)
-		if g.cache[lang][len(g.cache[lang])-1] == "" {
-			g.cache[lang] = g.cache[lang][:len(g.cache[lang])-1]
+		g.cache[lang.Name] = g.nlRe.Split(factsContent, -1)
+		if g.cache[lang.Name][len(g.cache[lang.Name])-1] == "" {
+			g.cache[lang.Name] = g.cache[lang.Name][:len(g.cache[lang.Name])-1]
 		}
 	}
 	return nil
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index aad7984..deafb4d 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -134,12 +134,12 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 
 		w.WriteString(fmt.Sprintf(`
 <div class="justify-content-center display-block m-1">
-	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
+	<hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%%] ml-auto mr-auto">
 	<div class="grid masonry-grid-%s mx-auto">
 		<div class="grid-sizer grid-sizer-%s"></div>
 		%s
 	</div>
-	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
+	<hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%%] ml-auto mr-auto">
 </div>`, galleryID, galleryID, strings.Join(elements, "\n")))
 
 		w.WriteString(fmt.Sprintf(`
@@ -147,25 +147,29 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 	var msnry_%s = new Masonry('.masonry-grid-%s', {
 		itemSelector: '.grid-item-%s',
 		columnWidth: '.grid-sizer-%s',
-		percentPosition: true
+		percentPosition: false,
+		fitWidth: true
 	});
 
 	var imgLoad_%s_timer;
 	var imgLoad_%s = imagesLoaded('.masonry-grid-%s');
 
-	function initMasonryLayout_%s() {
+	function initMasonryLayout_%s(tm) {
 		clearTimeout(imgLoad_%s_timer);
-		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500);
+		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 300);
 	}
 
 	imgLoad_%s.on('progress', initMasonryLayout_%s);
 
+	window.addEventListener('resize', initMasonryLayout_%s);
+
 	document.addEventListener('popout', (e) => {
+		window.removeEventListener('resize', initMasonryLayout_%s);
 		imgLoad_%s.off('progress', initMasonryLayout_%s);
 		initMasonryLayout_%s = null;
 		imgLoad_%s = null;
-	});
-</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+	}, {once: true});
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
 	}
 
 	return ast.WalkContinue, nil
diff --git a/internal/router/api-v1-blog-search.go b/internal/router/api-v1-blog-search.go
index 69be651..ab5425c 100644
--- a/internal/router/api-v1-blog-search.go
+++ b/internal/router/api-v1-blog-search.go
@@ -10,6 +10,7 @@ import (
 	"strings"
 	"time"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
@@ -19,17 +20,21 @@ func init() {
 	tm.Add("catalogue-blog-cards", "views/partials/catalogue-blog-cards.html", "views/partials/catalogue-blog-card-tags.html")
 }
 
-func Api_V1_BlogSearch(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
+func Api_V1_BlogSearch(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		sort := c.Query("sort")
 		lang := c.Query("lang")
 		tz := c.Query("tz")
 
-		if !slices.Contains(langs, lang) {
-			c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
-			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language", lang))
+		for _, availableLang := range langs {
+			if availableLang.Name == lang {
+				goto langIsAvailable
+			}
 		}
+		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
+		return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language", lang))
 
+	langIsAvailable:
 		loc, err := time.LoadLocation(tz)
 		if err != nil {
 			loc = time.UTC
diff --git a/internal/router/api-v1-general-page-body.go b/internal/router/api-v1-general-page-body.go
index c1a4a9f..fe21957 100644
--- a/internal/router/api-v1-general-page-body.go
+++ b/internal/router/api-v1-general-page-body.go
@@ -11,6 +11,7 @@ import (
 	"strings"
 	"time"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/internal/factgiver"
 	"github.com/SayaAndy/saya-today-web/locale"
@@ -24,7 +25,7 @@ func init() {
 	tm.Add("general-page-body", "views/partials/general-page-body.html")
 }
 
-func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B2Client, md goldmark.Markdown) func(c *fiber.Ctx) error {
+func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig, b2Client *b2.B2Client, md goldmark.Markdown) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
 
@@ -45,19 +46,26 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 			return c.Status(fiber.StatusOK).Type("html").Send(val)
 		}
 
+		lang := ""
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) == 0 {
-			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
+		if len(pathParts) == 1 && pathParts[0] == "" {
+			pathParts = []string{}
 		}
-
-		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))
+		if len(pathParts) > 0 {
+			lang = pathParts[0]
+			for _, availableLang := range langs {
+				if availableLang.Name == lang {
+					goto langIsAvailable
+				}
+			}
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
+	langIsAvailable:
 		values := fiber.Map{
 			"L":           l[lang],
 			"Lang":        lang,
+			"Path":        strings.Trim(path, "/"),
 			"QueryString": string(c.Request().URI().QueryString()),
 		}
 		var additionalTemplates []string
@@ -149,6 +157,10 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 			values["GifName"] = fmt.Sprintf("otter-%d.gif", rand.Int()%3+1)
 			values["FunFacts"] = FactGiver.Give(lang)
 			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
+		} else if len(pathParts) == 0 {
+			values["Title"] = "Choose Your Language"
+			values["AvailableLanguages"] = langs
+			additionalTemplates = append(additionalTemplates, "views/pages/language-pick.html")
 		}
 
 		content, err := tm.Render("general-page-body", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page-bottom-embeds.go b/internal/router/api-v1-general-page-bottom-embeds.go
index c4d9543..0a2030f 100644
--- a/internal/router/api-v1-general-page-bottom-embeds.go
+++ b/internal/router/api-v1-general-page-bottom-embeds.go
@@ -4,10 +4,10 @@ import (
 	"fmt"
 	"log/slog"
 	"net/url"
-	"slices"
 	"strings"
 	"time"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
@@ -17,7 +17,7 @@ func init() {
 	tm.Add("general-page-bottom-embeds", "views/partials/general-page-bottom-embeds.html")
 }
 
-func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
+func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
 
@@ -37,19 +37,26 @@ func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []
 			return c.Status(fiber.StatusOK).Type("html").Send(val)
 		}
 
+		lang := ""
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) == 0 {
-			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
+		if len(pathParts) == 1 && pathParts[0] == "" {
+			pathParts = []string{}
 		}
-
-		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))
+		if len(pathParts) > 0 {
+			lang = pathParts[0]
+			for _, availableLang := range langs {
+				if availableLang.Name == lang {
+					goto langIsAvailable
+				}
+			}
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
+	langIsAvailable:
 		values := fiber.Map{
 			"L":           l[lang],
 			"Lang":        lang,
+			"Path":        strings.Trim(path, "/"),
 			"QueryString": string(c.Request().URI().QueryString()),
 		}
 		var additionalTemplates []string
@@ -60,6 +67,8 @@ func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
 		} else if len(pathParts) == 1 {
 			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
+		} else if len(pathParts) == 0 {
+			additionalTemplates = append(additionalTemplates, "views/pages/language-pick.html")
 		}
 
 		content, err := tm.Render("general-page-bottom-embeds", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page-footer.go b/internal/router/api-v1-general-page-footer.go
index 003f54c..2030b3b 100644
--- a/internal/router/api-v1-general-page-footer.go
+++ b/internal/router/api-v1-general-page-footer.go
@@ -4,10 +4,10 @@ import (
 	"fmt"
 	"log/slog"
 	"net/url"
-	"slices"
 	"strings"
 	"time"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
 )
@@ -16,7 +16,7 @@ func init() {
 	tm.Add("general-page-footer", "views/partials/general-page-footer.html")
 }
 
-func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []string) func(c *fiber.Ctx) error {
+func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
 
@@ -37,19 +37,26 @@ func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []string
 			return c.Status(fiber.StatusOK).Type("html").Send(val)
 		}
 
+		lang := ""
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) == 0 {
-			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
+		if len(pathParts) == 1 && pathParts[0] == "" {
+			pathParts = []string{}
 		}
-
-		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))
+		if len(pathParts) > 0 {
+			lang = pathParts[0]
+			for _, availableLang := range langs {
+				if availableLang.Name == lang {
+					goto langIsAvailable
+				}
+			}
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
+	langIsAvailable:
 		values := fiber.Map{
 			"L":           l[lang],
 			"Lang":        lang,
+			"Path":        strings.Trim(path, "/"),
 			"QueryString": string(c.Request().URI().QueryString()),
 		}
 		var additionalTemplates []string
@@ -60,6 +67,8 @@ func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []string
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
 		} else if len(pathParts) == 1 {
 			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
+		} else if len(pathParts) == 0 {
+			additionalTemplates = append(additionalTemplates, "views/pages/language-pick.html")
 		}
 
 		content, err := tm.Render("general-page-footer", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page-header.go b/internal/router/api-v1-general-page-header.go
index 80228f7..a2c832b 100644
--- a/internal/router/api-v1-general-page-header.go
+++ b/internal/router/api-v1-general-page-header.go
@@ -4,10 +4,10 @@ import (
 	"fmt"
 	"log/slog"
 	"net/url"
-	"slices"
 	"strings"
 	"time"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
@@ -17,7 +17,7 @@ func init() {
 	tm.Add("general-page-header", "views/partials/general-page-header.html")
 }
 
-func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
+func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
 
@@ -38,19 +38,26 @@ func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []string
 			return c.Status(fiber.StatusOK).Type("html").Send(val)
 		}
 
+		lang := ""
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) == 0 {
-			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
+		if len(pathParts) == 1 && pathParts[0] == "" {
+			pathParts = []string{}
 		}
-
-		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))
+		if len(pathParts) > 0 {
+			lang = pathParts[0]
+			for _, availableLang := range langs {
+				if availableLang.Name == lang {
+					goto langIsAvailable
+				}
+			}
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
+	langIsAvailable:
 		values := fiber.Map{
 			"L":           l[lang],
 			"Lang":        lang,
+			"Path":        strings.Trim(path, "/"),
 			"QueryString": string(c.Request().URI().QueryString()),
 		}
 		var additionalTemplates []string
@@ -70,6 +77,9 @@ func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []string
 		} else if len(pathParts) == 1 {
 			values["Title"] = l[lang].HomePage.Header
 			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
+		} else if len(pathParts) == 0 {
+			values["Title"] = "Choose Your Language"
+			additionalTemplates = append(additionalTemplates, "views/pages/language-pick.html")
 		}
 
 		content, err := tm.Render("general-page-header", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page-top-embeds.go b/internal/router/api-v1-general-page-top-embeds.go
index 78021b2..544e3a4 100644
--- a/internal/router/api-v1-general-page-top-embeds.go
+++ b/internal/router/api-v1-general-page-top-embeds.go
@@ -4,10 +4,10 @@ import (
 	"fmt"
 	"log/slog"
 	"net/url"
-	"slices"
 	"strings"
 	"time"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
 )
@@ -16,7 +16,7 @@ func init() {
 	tm.Add("general-page-top-embeds", "views/partials/general-page-top-embeds.html")
 }
 
-func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []string) func(c *fiber.Ctx) error {
+func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
 
@@ -37,19 +37,26 @@ func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []str
 			return c.Status(fiber.StatusOK).Type("html").Send(val)
 		}
 
+		lang := ""
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) == 0 {
-			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
+		if len(pathParts) == 1 && pathParts[0] == "" {
+			pathParts = []string{}
 		}
-
-		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))
+		if len(pathParts) > 0 {
+			lang = pathParts[0]
+			for _, availableLang := range langs {
+				if availableLang.Name == lang {
+					goto langIsAvailable
+				}
+			}
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
+	langIsAvailable:
 		values := fiber.Map{
 			"L":           l[lang],
 			"Lang":        lang,
+			"Path":        strings.Trim(path, "/"),
 			"QueryString": string(c.Request().URI().QueryString()),
 		}
 		var additionalTemplates []string
@@ -60,6 +67,8 @@ func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []str
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
 		} else if len(pathParts) == 1 {
 			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
+		} else if len(pathParts) == 0 {
+			additionalTemplates = append(additionalTemplates, "views/pages/language-pick.html")
 		}
 
 		content, err := tm.Render("general-page-top-embeds", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page.go b/internal/router/api-v1-general-page.go
index d0ea559..a77fc5e 100644
--- a/internal/router/api-v1-general-page.go
+++ b/internal/router/api-v1-general-page.go
@@ -1,11 +1,10 @@
 package router
 
 import (
-	"fmt"
 	"log/slog"
-	"slices"
 	"strings"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
 )
@@ -14,21 +13,27 @@ 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 {
+func Api_V1_GeneralPage(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
 		path := c.Path()
 
+		lang := ""
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) == 0 {
-			return c.Status(fiber.ErrBadRequest.Code).SendString("url path is invalid: expect format '/{lang}/...'")
+		if len(pathParts) == 1 && pathParts[0] == "" {
+			pathParts = []string{}
 		}
-
-		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))
+		if len(pathParts) > 0 {
+			lang = pathParts[0]
+			for _, availableLang := range langs {
+				if availableLang.Name == lang {
+					goto langIsAvailable
+				}
+			}
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
+	langIsAvailable:
 		cacheKey := "general-page." + lang
 		if val, ok := PCache.Get(cacheKey); val != nil && ok {
 			c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
diff --git a/internal/router/lang-blog-title.go b/internal/router/lang-blog-title.go
index d6ca917..6e80671 100644
--- a/internal/router/lang-blog-title.go
+++ b/internal/router/lang-blog-title.go
@@ -5,10 +5,10 @@ import (
 	"fmt"
 	"html/template"
 	"log/slog"
-	"slices"
 	"strconv"
 	"strings"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/internal/frontmatter"
 	"github.com/SayaAndy/saya-today-web/locale"
@@ -20,17 +20,20 @@ func init() {
 	tm.Add("blog-page", "views/layouts/general-page.html", "views/pages/blog-page.html")
 }
 
-func Lang_Blog_Title(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B2Client, md goldmark.Markdown) func(c *fiber.Ctx) error {
+func Lang_Blog_Title(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig, b2Client *b2.B2Client, md goldmark.Markdown) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		ip := c.IP()
 		slog.Debug("client entering blog page", slog.String("ip", ip), slog.String("page", c.Path()))
 
 		lang := c.Params("lang")
-		if !slices.Contains(langs, lang) {
-			c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
-			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language... yet??", lang))
+		for _, availableLang := range langs {
+			if availableLang.Name == lang {
+				goto langIsAvailable
+			}
 		}
+		return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language", lang))
 
+	langIsAvailable:
 		metadata, parsedMarkdown, err := readBlogPost(md, b2Client, lang+"/"+c.Params("title"))
 		if err != nil {
 			c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
diff --git a/internal/router/lang-blog.go b/internal/router/lang-blog.go
index 38a6597..960ac3d 100644
--- a/internal/router/lang-blog.go
+++ b/internal/router/lang-blog.go
@@ -8,6 +8,7 @@ import (
 	"slices"
 	"strings"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
@@ -17,14 +18,17 @@ func init() {
 	tm.Add("blog-catalogue", "views/layouts/general-page.html", "views/pages/blog-catalogue.html")
 }
 
-func Lang_Blog(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
+func Lang_Blog(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		lang := c.Params("lang")
-		if !slices.Contains(langs, lang) {
-			c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
-			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language... yet??", lang))
+		for _, availableLang := range langs {
+			if availableLang.Name == lang {
+				goto langIsAvailable
+			}
 		}
+		return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language", lang))
 
+	langIsAvailable:
 		querySort := c.Query("sort")
 		if querySort == "" {
 			querySort = "publicationDateDesc"
diff --git a/internal/router/lang-map.go b/internal/router/lang-map.go
index e94d756..a744f02 100644
--- a/internal/router/lang-map.go
+++ b/internal/router/lang-map.go
@@ -3,10 +3,10 @@ package router
 import (
 	"fmt"
 	"log/slog"
-	"slices"
 	"strconv"
 	"strings"
 
+	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
@@ -16,14 +16,17 @@ func init() {
 	tm.Add("global-map", "views/pages/global-map.html")
 }
 
-func Lang_Map(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
+func Lang_Map(l map[string]*locale.LocaleConfig, langs []config.AvailableLanguageConfig, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
 	return func(c *fiber.Ctx) error {
 		lang := c.Params("lang")
-		if !slices.Contains(langs, lang) {
-			c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
-			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language... yet??", lang))
+		for _, availableLang := range langs {
+			if availableLang.Name == lang {
+				goto langIsAvailable
+			}
 		}
+		return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language", lang))
 
+	langIsAvailable:
 		pages, err := b2Client.Scan(lang + "/")
 		status := fiber.StatusOK
 		if err != nil {
diff --git a/internal/tailwind/transformer.go b/internal/tailwind/transformer.go
index 23ba1a3..c53ded1 100644
--- a/internal/tailwind/transformer.go
+++ b/internal/tailwind/transformer.go
@@ -20,19 +20,19 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
 		switch node := n.(type) {
 		case *ast.Heading:
 			classes := map[int]string{
-				1: "font-patua text-4xl font-bold text-main-dark mb-3 tracking-[.0125rem]",
-				2: "font-spectral text-3xl font-bold text-main-dark mb-1 tracking-[.0125rem]",
-				3: "font-spectral text-2xl font-medium text-main-dark mb-0.8 tracking-[.0125rem]",
-				4: "font-spectral text-xl font-medium text-main-medium mb-0.5 tracking-[.0125rem]",
-				5: "font-spectral text-base font-medium text-main-medium mb-0.5 italic tracking-[.0125rem]",
-				6: "font-spectral text-base font-medium text-secondary mb-0.5",
+				1: "font-andika text-4xl font-bold text-main-hard mb-3 tracking-[.0125rem]",
+				2: "font-andika text-3xl font-bold text-main-hard mb-1 tracking-[.0125rem]",
+				3: "font-andika text-2xl font-medium text-main-hard mb-0.8 tracking-[.0125rem]",
+				4: "font-andika text-xl font-medium text-main-medium mb-0.5 tracking-[.0125rem]",
+				5: "font-andika text-base font-medium text-main-medium mb-0.5 italic tracking-[.0125rem]",
+				6: "font-andika text-base font-medium text-secondary mb-0.5",
 			}
 			if class, ok := classes[node.Level]; ok {
 				node.SetAttribute([]byte("class"), []byte(class))
 			}
 
 		case *ast.Paragraph:
-			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem] -indent-8 ml-4 mb-8"))
+			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-andika tracking-[.0125rem] -indent-8 ml-4 mb-8"))
 
 		case *ast.List:
 			if node.IsOrdered() {
@@ -42,7 +42,7 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
 			}
 
 		case *ast.ListItem:
-			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem]"))
+			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-andika tracking-[.0125rem]"))
 
 		case *ast.Blockquote:
 			node.SetAttribute([]byte("class"), []byte("border-l-2 border-main-medium bg-background-dark p-1 mb-2 italic"))
@@ -58,7 +58,7 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
 				onclickAttr := fmt.Appendf(make([]byte, 0, 21+len(node.Destination)), "return changeUrl('%s');", node.Destination)
 				node.SetAttribute([]byte("onclick"), onclickAttr)
 			}
-			node.SetAttribute([]byte("class"), []byte("text-secondary hover:text-main-dark underline"))
+			node.SetAttribute([]byte("class"), []byte("text-secondary hover:text-main-hard underline"))
 
 		case *ast.Image:
 			node.SetAttribute([]byte("class"), []byte("max-w-full h-auto rounded-lg shadow-lg mb-4"))
diff --git a/main.go b/main.go
index a6a30b0..39fa0ab 100644
--- a/main.go
+++ b/main.go
@@ -52,7 +52,7 @@ var (
 	)
 	b2Client           *b2.B2Client
 	configPath         = flag.String("c", "config.yaml", "Path to the configuration file (in YAML format)")
-	availableLanguages = make([]string, 0)
+	availableLanguages = make([]config.AvailableLanguageConfig, 0)
 	localization       = make(map[string]*locale.LocaleConfig)
 )
 
@@ -108,7 +108,7 @@ func main() {
 			slog.Warn("fail to initialize a locale", slog.String("locale", lang.Name), slog.String("error", err.Error()))
 			continue
 		}
-		availableLanguages = append(availableLanguages, lang.Name)
+		availableLanguages = append(availableLanguages, lang)
 		localization[lang.Name] = localeCfg
 	}
 
@@ -144,7 +144,7 @@ func main() {
 		os.Exit(1)
 	}
 
-	app.Get("/", router.Root(cfg.AvailableLanguages))
+	app.Get("/", router.Api_V1_GeneralPage(localization, availableLanguages))
 	app.Get("/:lang<len(2)>", router.Api_V1_GeneralPage(localization, availableLanguages))
 	app.Get("/:lang/map", router.Lang_Map(localization, availableLanguages, b2Client))
 	app.Get("/:lang/blog", router.Api_V1_GeneralPage(localization, availableLanguages))
diff --git a/static/input.css b/static/input.css
index c308796..eae6620 100644
--- a/static/input.css
+++ b/static/input.css
@@ -1,13 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 @import "tailwindcss";
 
 @theme {
-    --font-spectral: Spectral, serif;
-    --font-patua: "Patua One", cursive;
+    --font-andika: "Andika", sans-serif;
     --breakpoint-xs: 32rem;
 }
 
 html {
     font-size: 12px;
+    --noise-image: url(data:image/png;base64,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);
 }
 
 @media screen and (min-width: 640px) and (min-height: 640px) {
@@ -35,18 +37,18 @@ html {
 }
 
 [data-theme="olive"] {
-    --main-dark-color: #4b513a;
+    --main-hard-color: #4b513a;
     --main-medium-color: #8a9d8a;
-    --main-light-color: #a5b8a5;
+    --main-soft-color: #a5b8a5;
     --background-dark-color: #ffffdd;
     --background-medium-color: var(--background-dark-color);
     --background-light-color: #fffff0;
     --sidebar-text-color: var(--background-dark-color);
-    --sidebar-stroke-color: var(--main-dark-color);
-    --secondary-color: var(--main-light-color);
-    --leaflet-text-color: var(--main-dark-color);
+    --sidebar-stroke-color: var(--main-hard-color);
+    --secondary-color: var(--main-soft-color);
+    --leaflet-text-color: var(--main-hard-color);
     --leaflet-link-color: var(--main-medium-color);
-    --leaflet-link-hover-color: var(--main-light-color);
+    --leaflet-link-hover-color: var(--main-soft-color);
     --interlocked-hexagons-background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23ffffdb%22%2F%3E%3Cpath%20fill%3D%22%23777e63%22%20d%3D%22m33.64%200-.17.25h-33L4.3%206h33.07l4-6zm8.33%200-4.33%206.5h-33l3.83%205.75h33.06L49.7%200zm8.34%200-8.5%2012.75h-33l3.83%205.75H45.7L58.03%200zm8.33%200L45.97%2019h-33l3.83%205.75h33.06L66.36%200zm-8.5%2025.25L33.63%2050l3.86%205.8L54.03%2031h33l-3.83-5.75zm4.16%206.25L37.8%2056.25l3.87%205.8%2016.53-24.8h33l-3.84-5.75zm4.17%206.25L41.97%2062.5l3.86%205.8%2016.54-24.8h33l-3.84-5.75zM62.63%2044l-16.5%2024.75%203.87%205.8%2016.53-24.8h33L95.7%2044zM100%2050.45l-3.87%205.8%203.87%205.81v-11.6zM0%2050.46v11.6L12.5%2080.8l3.86-5.8zm95.83%206.25-3.87%205.8L100%2074.55v-11.6zm-4.17%206.24-3.86%205.8%2012.2%2018.3v-11.6zM0%2062.96v11.6l8.33%2012.49%203.86-5.8zm87.5%206.24L83.63%2075%20100%2099.54V87.96zM50%2075.45%2033.64%20100h7.72l12.5-18.75zm-50%200v11.6l4.16%206.24%203.87-5.8zm54.17%206.25L41.97%20100h7.73l8.33-12.5zm4.17%206.25L50.3%20100h7.73l4.17-6.25zM0%2087.95v11.59l3.86-5.8zm62.5%206.25-3.87%205.8h7.73z%22%2F%3E%3Cpath%20fill%3D%22%23a0a182%22%20d%3D%22M66.8.25%2062.97%206h33l4.03%206.05V.45l-.14-.2zM0%20.45v11.61L12.5%2030.8l3.86-5.8zM62.63%206.5l-3.83%205.75h33l8.2%2012.3v-11.6L95.7%206.5zm-4.16%206.25-3.84%205.75h33L100%2037.06v-11.6l-8.47-12.71zM0%2012.96v11.6l8.33%2012.49%203.86-5.8zM54.3%2019l-3.84%205.75h33L100%2049.55l.01-.01V37.96L87.36%2019zm-4.77%206.25H41.8L25.3%2050l16.66%2025-16.5%2024.75h7.74L49.7%2075%2033.03%2050zm-8.33%200h-7.74L16.96%2050l16.67%2025-16.5%2024.75h7.73L41.36%2075%2024.7%2050Zm-8.34%200h-7.73L8.63%2050%2025.3%2075%208.8%2099.75h7.73L33.03%2075%2016.36%2050zm-16.07%200L.3%2050l16.67%2025L.46%2099.75H8.2L24.7%2075%208.02%2050l16.5-24.75zM0%2025.46v11.6l4.16%206.24%203.87-5.8zm0%2012.5v11.58l3.86-5.79zm66.8%2012.29L50.3%2074.99l3.87%205.81%204.16%206.25%204.17%206.25%204.3%206.45h7.73L58.03%2075l16.5-24.75zm16.06%200h-7.73L58.63%2075l16.5%2024.75h7.73L66.36%2075zm.6%200L66.96%2075l16.5%2024.75h7.74L74.7%2075l16.5-24.75zm16.07%200H91.8L75.3%2075l16.5%2024.75h7.73L83.03%2075z%22%2F%3E%3C%2Fsvg%3E");
     --interlocked-hexagons-background-repeat: repeat;
     --interlocked-hexagons-background-size: 10dvh;
@@ -57,18 +59,18 @@ html {
 }
 
 [data-theme="lettuce"] {
-    --main-dark-color: #384a0c;
+    --main-hard-color: #384a0c;
     --main-medium-color: #9bb665;
-    --main-light-color: #bbd095;
+    --main-soft-color: #bbd095;
     --background-dark-color: #f5eee2;
     --background-medium-color: var(--background-dark-color);
     --background-light-color: #fff9ef;
-    --sidebar-text-color: var(--main-dark-color);
+    --sidebar-text-color: var(--main-hard-color);
     --sidebar-stroke-color: var(--background-dark-color);
     --secondary-color: var(--main-medium-color);
-    --leaflet-text-color: var(--main-dark-color);
+    --leaflet-text-color: var(--main-hard-color);
     --leaflet-link-color: var(--main-medium-color);
-    --leaflet-link-hover-color: var(--main-light-color);
+    --leaflet-link-hover-color: var(--main-soft-color);
     --interlocked-hexagons-background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23f5ede1%22%2F%3E%3Cpath%20fill%3D%22%239ab663%22%20d%3D%22m33.64%200-.17.25h-33L4.3%206h33.07l4-6zm8.33%200-4.33%206.5h-33l3.83%205.75h33.06L49.7%200zm8.34%200-8.5%2012.75h-33l3.83%205.75H45.7L58.03%200zm8.33%200L45.97%2019h-33l3.83%205.75h33.06L66.36%200zm-8.5%2025.25L33.63%2050l3.86%205.8L54.03%2031h33l-3.83-5.75zm4.16%206.25L37.8%2056.25l3.87%205.8%2016.53-24.8h33l-3.84-5.75zm4.17%206.25L41.97%2062.5l3.86%205.8%2016.54-24.8h33l-3.84-5.75zM62.63%2044l-16.5%2024.75%203.87%205.8%2016.53-24.8h33L95.7%2044zM100%2050.45l-3.87%205.8%203.87%205.81v-11.6zM0%2050.46v11.6L12.5%2080.8l3.86-5.8zm95.83%206.25-3.87%205.8L100%2074.55v-11.6zm-4.17%206.24-3.86%205.8%2012.2%2018.3v-11.6zM0%2062.96v11.6l8.33%2012.49%203.86-5.8zm87.5%206.24L83.63%2075%20100%2099.54V87.96zM50%2075.45%2033.64%20100h7.72l12.5-18.75zm-50%200v11.6l4.16%206.24%203.87-5.8zm54.17%206.25L41.97%20100h7.73l8.33-12.5zm4.17%206.25L50.3%20100h7.73l4.17-6.25zM0%2087.95v11.59l3.86-5.8zm62.5%206.25-3.87%205.8h7.73z%22%2F%3E%3Cpath%20fill%3D%22%23bbd095%22%20d%3D%22M66.8.25%2062.97%206h33l4.03%206.05V.45l-.14-.2zM0%20.45v11.61L12.5%2030.8l3.86-5.8zM62.63%206.5l-3.83%205.75h33l8.2%2012.3v-11.6L95.7%206.5zm-4.16%206.25-3.84%205.75h33L100%2037.06v-11.6l-8.47-12.71zM0%2012.96v11.6l8.33%2012.49%203.86-5.8zM54.3%2019l-3.84%205.75h33L100%2049.55l.01-.01V37.96L87.36%2019zm-4.77%206.25H41.8L25.3%2050l16.66%2025-16.5%2024.75h7.74L49.7%2075%2033.03%2050zm-8.33%200h-7.74L16.96%2050l16.67%2025-16.5%2024.75h7.73L41.36%2075%2024.7%2050Zm-8.34%200h-7.73L8.63%2050%2025.3%2075%208.8%2099.75h7.73L33.03%2075%2016.36%2050zm-16.07%200L.3%2050l16.67%2025L.46%2099.75H8.2L24.7%2075%208.02%2050l16.5-24.75zM0%2025.46v11.6l4.16%206.24%203.87-5.8zm0%2012.5v11.58l3.86-5.79zm66.8%2012.29L50.3%2074.99l3.87%205.81%204.16%206.25%204.17%206.25%204.3%206.45h7.73L58.03%2075l16.5-24.75zm16.06%200h-7.73L58.63%2075l16.5%2024.75h7.73L66.36%2075zm.6%200L66.96%2075l16.5%2024.75h7.74L74.7%2075l16.5-24.75zm16.07%200H91.8L75.3%2075l16.5%2024.75h7.73L83.03%2075z%22%2F%3E%3C%2Fsvg%3E");
     --interlocked-hexagons-background-repeat: repeat;
     --interlocked-hexagons-background-size: 10dvh;
@@ -79,15 +81,15 @@ html {
 }
 
 [data-theme="night"] {
-    --main-dark-color: var(--color-sky-100);
+    --main-hard-color: var(--color-sky-100);
     --main-medium-color: var(--color-sky-200);
-    --main-light-color: var(--color-sky-300);
+    --main-soft-color: var(--color-sky-300);
     --background-dark-color: #13131b;
     --background-medium-color: var(--background-dark-color);
     --background-light-color: #222230;
-    --sidebar-text-color: var(--main-dark-color);
+    --sidebar-text-color: var(--main-hard-color);
     --sidebar-stroke-color: var(--background-light-color);
-    --secondary-color: var(--main-light-color);
+    --secondary-color: var(--main-soft-color);
     --leaflet-text-color: var(--background-dark-color);
     --leaflet-link-color: var(--background-dark-color);
     --leaflet-link-hover-color: var(--background-light-color);
@@ -101,15 +103,15 @@ html {
 }
 
 [data-theme="ram"] {
-    --main-dark-color: #fefad8;
+    --main-hard-color: #fefad8;
     --main-medium-color: #f6e4c5;
-    --main-light-color: #e8d4b8;
+    --main-soft-color: #e8d4b8;
     --background-dark-color: #413b34;
     --background-medium-color: #62584f;
     --background-light-color: #6d6258;
-    --sidebar-text-color: var(--main-dark-color);
+    --sidebar-text-color: var(--main-hard-color);
     --sidebar-stroke-color: var(--background-light-color);
-    --secondary-color: var(--main-light-color);
+    --secondary-color: var(--main-soft-color);
     --leaflet-text-color: var(--background-dark-color);
     --leaflet-link-color: var(--background-dark-color);
     --leaflet-link-hover-color: var(--background-light-color);
@@ -128,7 +130,7 @@ a, .linklike {
 }
 
 a:hover, .linklike:hover {
-    color: var(--main-light-color) !important;
+    color: var(--main-soft-color) !important;
 }
 
 #map-container {
@@ -164,16 +166,16 @@ a:hover, .linklike:hover {
     border-color: var(--sidebar-stroke-color);
 }
 
-.text-main-dark {
-    color: var(--main-dark-color);
+.text-main-hard {
+    color: var(--main-hard-color);
 }
 
 .text-main-medium {
     color: var(--main-medium-color);
 }
 
-.text-main-light {
-    color: var(--main-light-color);
+.text-main-soft {
+    color: var(--main-soft-color);
 }
 
 .text-background-dark {
@@ -188,36 +190,46 @@ a:hover, .linklike:hover {
     color: var(--secondary-color);
 }
 
-.bg-main-dark {
-    background-color: var(--main-dark-color);
+.bg-main-hard {
+    background-color: var(--main-hard-color);
+    background-image: url(data:image/png;base64,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);
 }
 
 .bg-main-medium {
     background-color: var(--main-medium-color);
+    background-image: url(data:image/png;base64,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);
 }
 
-.bg-main-light {
-    background-color: var(--main-light-color);
+.bg-main-soft {
+    background-color: var(--main-soft-color);
+    background-image: url(data:image/png;base64,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);
 }
 
 .bg-background-dark {
     background-color: var(--background-dark-color);
+    background-image: url(data:image/png;base64,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);
+}
+
+.bg-background-medium {
+    background-color: var(--background-medium-color);
+    background-image: var(--noise-image);
 }
 
 .bg-background-light {
     background-color: var(--background-light-color);
+    background-image: url(data:image/png;base64,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);
 }
 
-.border-main-dark {
-    border-color: var(--main-dark-color);
+.border-main-hard {
+    border-color: var(--main-hard-color);
 }
 
 .border-main-medium {
     border-color: var(--main-medium-color);
 }
 
-.border-main-light {
-    border-color: var(--main-light-color);
+.border-main-soft {
+    border-color: var(--main-soft-color);
 }
 
 .border-background-dark {
@@ -242,15 +254,6 @@ a:hover, .linklike:hover {
     background-size: calc(var(--squares-and-triangles-background-width-coef) * 1rem) calc(var(--squares-and-triangles-background-height-coef) * 1rem);
 }
 
-.logo-custom {
-    width: 3.5rem;
-    height: 20rem;
-    font-size: 2.5rem;
-    -webkit-text-stroke: 0.1rem var(--sidebar-stroke-color);
-    writing-mode: sideways-lr;
-    text-orientation: mixed;
-}
-
 .inset-shadow {
     box-shadow: inset 0dvh 1dvh 1dvh -1dvh rgba(75, 81, 58, 0.5),
         inset 1dvh 0dvh 1dvh -1dvh rgba(75, 81, 58, 0.5),
@@ -270,7 +273,7 @@ a:hover, .linklike:hover {
     position: fixed;
     width: 12rem;
     height: 12rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem var(--main-light-color);
+    box-shadow: 0.25rem 0.25rem 0.25rem var(--main-soft-color);
     border-radius: 50%;
     opacity: 0;
     visibility: hidden;
@@ -327,9 +330,9 @@ a:hover, .linklike:hover {
 
 .theme-pin {
     position: relative;
-    background: color-mix(in srgb, var(--main-light-color) 75%, transparent);
-    box-shadow: 0rem 0rem 1rem var(--main-dark-color);
-    border: 0.5rem solid color-mix(in srgb, var(--main-light-color) 90%, transparent);
+    background: color-mix(in srgb, var(--main-soft-color) 75%, transparent);
+    box-shadow: 0rem 0rem 1rem var(--main-hard-color);
+    border: 0.5rem solid color-mix(in srgb, var(--main-soft-color) 90%, transparent);
     backdrop-filter: blur(2px);
     top: 35%;
     left: 35%;
@@ -356,7 +359,7 @@ a:hover, .linklike:hover {
 .grid-tooltip {
     position: relative;
     display: inline-block;
-    box-shadow: inset 0rem 0rem 0.5rem var(--main-light-color);
+    box-shadow: inset 0rem 0rem 0.5rem var(--main-soft-color);
     transition: box-shadow 0.5s ease-in-out;
 }
 
@@ -371,7 +374,7 @@ a:hover, .linklike:hover {
     width: 100%;
     top: 100%;
     background-color: var(--background-dark-color);
-    color: var(--main-dark-color);
+    color: var(--main-hard-color);
     text-align: center;
     padding: 0.25rem 0.25rem;
     margin-top: 0.25rem;
@@ -399,7 +402,7 @@ a:hover, .linklike:hover {
 .grid-item, .grid-sizer {
     position: relative;
     display: inline-block;
-    width: 50%;
+    width: 10rem;
 }
 
 .grid-item-index {
@@ -408,7 +411,7 @@ a:hover, .linklike:hover {
     transition: opacity 0.5s;
     top: 0%;
     left: 0%;
-    background-color: var(--main-light-color);
+    background-color: var(--main-soft-color);
     color: var(--background-dark-color);
     text-align: center;
     padding: 0.25rem 0.25rem;
@@ -422,36 +425,36 @@ a:hover, .linklike:hover {
 }
 
 .grid-item-2x {
-    width: 100%;
+    width: 20rem;
 }
 
-@container main (width >= 32rem) {
+@container main (width >= 40rem) {
     .grid-item, .grid-sizer {
-        width: 33%;
+        width: 12rem;
     }
 
     .grid-item-2x {
-        width: 66%;
+        width: 24rem;
     }
 }
 
-@container main (width >= 56rem) {
+@container main (width >= 76rem) {
     .grid-item, .grid-sizer {
-        width: 25%;
+        width: 18rem;
     }
 
     .grid-item-2x {
-        width: 50%;
+        width: 36rem;
     }
 }
 
-@container main (width >= 96rem) {
+@container main (width >= 128rem) {
     .grid-item, .grid-sizer {
-        width: 20%;
+        width: 24rem;
     }
 
     .grid-item-2x {
-        width: 40%;
+        width: 48rem;
     }
 }
 
@@ -466,16 +469,16 @@ a:hover, .linklike:hover {
 }
 
 .glightbox-clean .gslide-title {
-    font-family: var(--font-spectral) !important;
+    font-family: var(--font-andika) !important;
     font-weight: 600 !important;
-    color: var(--main-light-color) !important;
+    color: var(--main-soft-color) !important;
     padding-bottom: 1rem !important;
     margin-bottom: 0 !important;
 }
 
 .glightbox-clean .gslide-desc {
     font-size: 1rem !important;
-    font-family: var(--font-spectral) !important;
+    font-family: var(--font-andika) !important;
     font-weight: 400;
     color: var(--main-medium-color) !important;
 }
@@ -540,10 +543,6 @@ body[data-theme~="ram"] .leaflet-tile {
 }
 
 @media (max-aspect-ratio: 0.8/1) {
-    .bg-sidebar {
-        background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6dvh) calc(var(--squares-and-triangles-background-height-coef) * 1.6dvh);
-    }
-
     .ar-lt-0\.8\:bg-background-light {
         background-color: var(--background-light-color);
     }
diff --git a/views/index.html b/views/index.html
index 2633894..cbb4c57 100644
--- a/views/index.html
+++ b/views/index.html
@@ -4,10 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Choose Language // SAYA TODAY</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>
-    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
     <link href="/output.css" rel="stylesheet">
     <style>
         .menu-outer-body {
@@ -56,7 +52,7 @@
     </style>
 </head>
 
-<body data-theme="night" class="font-spectral text-main-dark text-2xl overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-col">
+<body data-theme="night" class="font-andika text-main-hard text-2xl overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-col">
 
     <div class="absolute star z-0">*</div>
     <div class="absolute star z-0">*</div>
@@ -103,13 +99,13 @@
     </script>
 
     <div class="menu-outer-body p-2 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70">
-        <p class="font-patua mx-auto text-4xl mt-1 mb-2">saya.today</p>
+        <p class="font-andika mx-auto text-4xl mt-1 mb-2">saya.today</p>
         <div class="menu-inner-body grow bg-background-light flex flex-adaptive mx-auto opacity-100">
             {{- range .AvailableLanguages }}
             <img onclick="location.href='/{{ .Name }}';" class="object-scale-down cursor-pointer flex-1 rounded-[20%] language-icon mx-auto my-auto relative" src="{{ .Flag }}" alt="{{ .Alt }}">
             {{- end }}
         </div>
-        <p class="font-spectral mx-auto text-2xl text-secondary mt-1 mb-2">Choose your language</p>
+        <p class="font-andika mx-auto text-2xl text-secondary mt-1 mb-2">Choose your language</p>
     </div>
 
     <script>
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index d874ecf..49c0fae 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -4,15 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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>
-    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css">
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/css/glightbox.min.css">
     <link href="/output.css" rel="stylesheet">
 </head>
 
-<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-row ar-lt-0.8:flex-col">
+<body data-theme="ram" class="font-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-col [@media(max-height:32rem)]:flex-row">
 
     <script>
         let map = null;
@@ -20,14 +17,11 @@
 
     <script>
         function changeUrl(path, toAppend = false) {
-            const urlParams = new URLSearchParams(window.location.search); 
+            const urlParams = new URLSearchParams(window.location.search);
             const newPathname = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
             const newPath = toAppend ? `${newPathname}${path}` : `${path}`;
-            
+
             history.pushState({}, '', `${newPath}${urlParams.entries.length == 0 ? '' : '?' + urlParams.toString()}`);
-            if (location.pathname == "" || location.pathname == "/") {
-                return true;
-            }
             window.dispatchEvent(new Event('popstate'));
             return false;
         };
@@ -174,22 +168,20 @@
         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-[5rem] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]">
-        <div class="logo-custom block ar-lt-0.8:hidden [@media(max-height:32rem)]:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
-            saya.today
-        </div>
-        <div class="text-[3rem] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <a href="/{{ .Lang }}" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
+    <div id="sidebar" class="bg-sidebar flex sticky flex-col z-20 w-[100dvw] xs:w-[90dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] [@media(max-height:32rem)]:w-[5rem] h-[5rem] [@media(max-height:32rem)]:h-[100dvh] mx-auto [@media(max-height:32rem)]:mx-0
+        shadow-[0_0_1rem_black]">
+        <div class="text-[3rem] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-row [@media(max-height:32rem)]:flex-col gap-0 relative z-20">
+            <a href="/{{ .Lang }}" id="sidebar-home-button" class="w-[5rem] h-[5rem]">
                 <i onclick="return changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
             </a>
-            <a href="/{{ .Lang }}/blog" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
+            <a href="/{{ .Lang }}/blog" id="sidebar-blog-button" class="w-[5rem] h-[5rem]">
                 <i onclick="return changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
             </a>
-            <a href="/{{ .Lang }}/map" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
+            <a href="/{{ .Lang }}/map" id="sidebar-map-button" class="w-[5rem] h-[5rem]">
                 <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
             </a>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
-            <a href="./" class="hidden max-xs:block [@media(max-height:32rem)]:block w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
+            <i onclick="toggleThemeWheel();" id="sidebar-theme-button" class="fas fa-swatchbook flex w-[5rem] h-[5rem] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+            <a href="./" id="sidebar-back-button" class="w-[5rem] h-[5rem]">
                 <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
             </a>
         </div>
@@ -200,10 +192,39 @@
             <div class="theme-icon" data-theme="ram"></div>
             <div class="theme-pin"></div>
         </div>
+        <script>
+            sidebarHomeButton = document.getElementById("sidebar-home-button");
+            sidebarMapButton = document.getElementById("sidebar-map-button");
+            sidebarBlogButton = document.getElementById("sidebar-blog-button");
+            sidebarBackButton = document.getElementById("sidebar-back-button");
+
+            function updateSidebar() {
+                if (location.pathname == "" || location.pathname == "/") {
+                    sidebarHomeButton.classList.add('hidden');
+                    sidebarMapButton.classList.add('hidden');
+                    sidebarBlogButton.classList.add('hidden');
+                    sidebarBackButton.classList.add('hidden');
+                } else {
+                    sidebarHomeButton.classList.remove('hidden');
+                    sidebarMapButton.classList.remove('hidden');
+                    sidebarBlogButton.classList.remove('hidden');
+                    sidebarBackButton.classList.remove('hidden');
+                    lang = location.pathname.split("/")[1];
+                    sidebarHomeButton.setAttribute('href', `/${lang}`);
+                    sidebarHomeButton.firstElementChild.setAttribute('onclick', `return changeUrl('/${lang}', false);`);
+                    sidebarMapButton.setAttribute('href', `/${lang}/map`);
+                    sidebarBlogButton.setAttribute('href', `/${lang}/blog`);
+                    sidebarBlogButton.firstElementChild.setAttribute('onclick', `return changeUrl('/${lang}/blog', false);`);
+                }
+            }
+            window.addEventListener("popstate", updateSidebar);
+            window.addEventListener("load", updateSidebar, {once: true});
+        </script>
     </div>
 
-    <div class="bg-background-dark @container/main flex z-10 ar-lt-0.8:w-[100dvw] w-[90dvw] xs:w-[85dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] grow-0 h-[100dvh] ar-lt-0.8:max-h-[92dvh]">
-        <div class="bg-background-dark border-r-2 border-dashed border-main-dark"></div>
+    <div class="bg-background-dark @container/main flex z-10 w-[100dvw] xs:w-[90dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] grow-0 h-[calc(100dvh-5rem)] [@media(max-height:32rem)]:h-[100dvh] mx-auto [@media(max-height:32rem)]:mx-0
+        shadow-[0_0_1rem_black]">
+        <div class="bg-background-dark border-r-2 border-dashed border-main-hard"></div>
 
         <div class="max-h-100% flex flex-col grow bg-background-dark relative pt-4 ml-8 pr-4">
             <div id="general-page-header" class="max-xs:hidden [@media(max-height:32rem)]:hidden flex flex-col basis-8"
@@ -211,7 +232,7 @@
             </div>
             <div id="general-page-header-trigger" hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-header" hx-swap="innerHTML"></div>
 
-            <hr class="max-xs:hidden [@media(max-height:32rem)]:hidden border-t-4 border-dotted border-main-dark mb-2">
+            <hr class="max-xs:hidden [@media(max-height:32rem)]:hidden border-t-4 border-dotted border-main-hard mb-2">
 
             <div id="general-page-body" class="flex flex-col grow overflow-y-auto"
                 hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
@@ -223,10 +244,10 @@
             </div>
             <div id="general-page-footer-trigger" hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-footer" hx-swap="innerHTML"></div>
 
-            <hr class="border-t-4 border-dotted border-main-dark mb-2">
+            <hr class="border-t-4 border-dotted border-main-hard mb-2">
         </div>
 
-        <div class="pr-[0.5dvw] bg-background-dark shadow-2xl border-l-2 border-dotted border-main-dark"></div>
+        <div class="pr-[0.5dvw] bg-background-dark shadow-2xl border-l-2 border-dotted border-main-hard"></div>
     </div>
 
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
@@ -241,7 +262,7 @@
 
     <script>
         const themeWheel = document.getElementById('theme-wheel');
-        const themeButton = document.getElementById('theme-button');
+        const themeButton = document.getElementById('sidebar-theme-button');
         const themeIcons = document.querySelectorAll('.theme-icon');
         const themeWheelRadius = convertRemToPixels(6);
 
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 3845275..8e91798 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,16 +1,16 @@
 {{ define "body" }}
 <div class="flex flex-row ar-lt-0.8:flex-col text-base 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-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-dark ar-lt-0.8:bg-background-light inset-shadow">
+        class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-light inset-shadow-[0_0_0.4rem_black]">
         <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-3 xs:grid-cols-4 sm:grid-cols-5 grid-flow-row-dense">
-                    <div class="m-0.5">
+                    <div class="m-1">
                         <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label>
                     </div>
                     {{- range .Tags }}
-                    <div class="m-0.5">
+                    <div class="m-1">
                         <label><input type="checkbox" id="tag{{ .Name }}Checkbox" name="tags[]" value="{{ .Name }}" onclick="contextAll();" {{ if contains $.QueryTags .Name }}checked{{ end }}> {{ .Name }}  <span class="text-secondary italic">{{ .Count }}</span></label>
                     </div>
                     {{- end }}
@@ -19,28 +19,28 @@
             <fieldset class="mt-1">
                 <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="m-0.5">
+                    <div class="m-1">
                         <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>
-                    <div class="m-0.5">
+                    <div class="m-1">
                         <label><input type="radio" id="sortTitleDesc" name="sort" value="titleDesc" {{ if eq .QuerySort "titleDesc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-z-a"></i></label>
                     </div>
-                    <div class="m-0.5">
+                    <div class="m-1">
                         <label><input type="radio" id="sortActionDateAsc" name="sort" value="actionDateAsc" {{ if eq .QuerySort "actionDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label>
                     </div>
-                    <div class="m-0.5">
+                    <div class="m-1">
                         <label><input type="radio" id="sortActionDateDesc" name="sort" value="actionDateDesc" {{ if eq .QuerySort "actionDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label>
                     </div>
-                    <div class="m-0.5">
+                    <div class="m-1">
                         <label><input type="radio" id="sortPublicationDateAsc" name="sort" value="publicationDateAsc" {{ if eq .QuerySort "publicationDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label>
                     </div>
-                    <div class="m-0.5">
+                    <div class="m-1">
                         <label><input type="radio" id="sortPublicationDateDesc" name="sort" value="publicationDateDesc" {{ if eq .QuerySort "publicationDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label>
                     </div>
                 </div>
             </fieldset>
         </div>
-        <hr class="border-t-2 border-dotted border-main-dark my-0.5">
+        <hr class="border-t-2 border-dotted border-main-hard my-0.5">
         <div class="flex flex-row bg-background-dark my-2 p-0.5 rounded-1 justify-items-center">
             <i onclick="defaultSearchParams(); cleanHrefParams();" class="fas fa-rotate-left flex-1 text-center text-2xl hover:bg-background-light cursor-pointer transition-colors duration-300"></i>
             <div class="w-1 bg-background-light grow-0"></div>
@@ -50,10 +50,10 @@
         </div>
     </form>
 
-    <div class="w-[0.5dvh] border-r-2 border-dotted border-main-dark bg-background-dark"></div>
+    <div class="w-[0.5dvh] border-r-2 border-dotted border-main-hard bg-background-dark"></div>
 
     <div hx-get="/api/v1/blog-search" hx-vals='js:{lang: "{{ .Lang }}", tz: clientTimeZone}' hx-target="this" hx-swap="innerHTML" hx-trigger="load" hx-include=".tags-list"
-        class="blog-cards grow flex flex-col overflow-y-auto bg-background-light inset-shadow p-6">
+        class="blog-cards grow flex flex-col overflow-y-auto bg-background-light inset-shadow-[0_0_0.4rem_black] p-6">
         Loading...
     </div>
 </div>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 77164fa..7170ad8 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,14 +1,14 @@
 {{ define "body" }}
-<div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto">
-    <p class="max-xs:block [@media(max-height:32rem)]:block hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p>
-    <p class="max-xs:block [@media(max-height:32rem)]:block hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Published }}: {{ .PublishedDate }}</p>
-    <p class="max-xs:block [@media(max-height:32rem)]:block hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Action }}: {{ .ActionDate }}</p>
-    <hr class="max-xs:block [@media(max-height:32rem)]:block hidden border-t-2 border-dotted border-main-dark mt-1 mb-2 w-full ml-auto mr-auto">
+<div class="bg-background-light flex flex-col inset-shadow-[0_0_0.4rem_black] px-8 py-4 overflow-y-auto">
+    <p class="max-xs:block [@media(max-height:32rem)]:block hidden font-andika text-2xl font-bold italic text-main-hard tracking-[.0125rem] mb-1">{{ .Title }}</p>
+    <p class="max-xs:block [@media(max-height:32rem)]:block hidden grow text-lg font-andika text-secondary">{{ .L.Metadata.Published }}: {{ .PublishedDate }}</p>
+    <p class="max-xs:block [@media(max-height:32rem)]:block hidden grow text-lg font-andika text-secondary">{{ .L.Metadata.Action }}: {{ .ActionDate }}</p>
+    <hr class="max-xs:block [@media(max-height:32rem)]:block hidden border-t-2 border-dotted border-main-hard mt-1 mb-2 w-full ml-auto mr-auto">
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
-    <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
+    <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
     <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40dvh] ar-lt-0.8:h-[30dvh]"></div>
-    <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
+    <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
 
     <script>
         function initLocationMap(id, x, y, relativeErrorMeters = 0) {
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 686b46b..cd3c2d5 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -5,9 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .L.GlobalMap.Header }} // SAYA TODAY</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>
-    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
     {{ block "header" . }}{{ end }}
     <link href="/output.css" rel="stylesheet">
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css">
@@ -15,7 +12,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-[100dvh] flex flex-row ar-lt-0.8:flex-col">
+<body data-theme="ram" class="font-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-[100dvh]">
 
     <script>
         function switchTheme(theme) {
@@ -44,21 +41,21 @@
         }
     </script>
 
-    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5rem] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]">
-        <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
-            saya.today
-        </div>
-        <div class="text-[3rem] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <a href="/{{ .Lang }}" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
+    <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-[5rem] h-auto">
+        <div class="text-[3rem] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col gap-0 relative z-1001">
+            <a href="/{{ .Lang }}" class="w-[5rem] h-[5rem]">
                 <i class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
             </a>
-            <a href="/{{ .Lang }}/blog" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
+            <a href="/{{ .Lang }}/blog" class="w-[5rem] h-[5rem]">
                 <i class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
             </a>
-            <a href="/{{ .Lang }}/map" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
+            <a href="/{{ .Lang }}/map" class="w-[5rem] h-[5rem]">
                 <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
             </a>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] h-[5rem] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+            <a href="./" class="w-[5rem] h-[5rem]">
+                <i class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+            </a>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
@@ -69,7 +66,7 @@
         </div>
     </div>
 
-    <div id="map-container" class="bg-background-dark flex z-10 w-[calc(100dvw-5rem)] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[92dvh]"></div>
+    <div id="map-container" class="bg-background-dark flex z-10 w-full h-full"></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>
@@ -203,7 +200,7 @@
         var map;
         var markers = L.markerClusterGroup();
 
-        function createCustomIcon(color, borderColor = "var(--main-light-color)") {
+        function createCustomIcon(color, borderColor = "var(--main-soft-color)") {
             const svgIcon = `
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path d="M12 1C7.5 1 4 4.5 4 9c0 6.5 8 14 8 14s8-7.5 8-14c0-4.5-3.5-8-8-8zm0 11c-1.5 0-3-1.5-3-3s1.5-3 3-3 3 1.5 3 3-1.5 3-3 3z"
@@ -228,7 +225,12 @@
 
             L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 maxZoom: 18,
-                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                zoomControl: false
+            }).addTo(map);
+
+            L.control.zoom({
+                position: 'topright'
             }).addTo(map);
 
             map.addLayer(markers);
diff --git a/views/pages/home-page.html b/views/pages/home-page.html
index 95093a0..11d0f7b 100644
--- a/views/pages/home-page.html
+++ b/views/pages/home-page.html
@@ -1,21 +1,21 @@
 {{ define "body" }}
-<div class="bg-background-light flex flex-row ar-lt-0.6:flex-col w-full h-full inset-shadow overflow-y-auto text-base/[2] tracking-wide">
+<div class="bg-background-light flex flex-row ar-lt-0.6:flex-col w-full h-full inset-shadow-[0_0_0.4rem_black] overflow-y-auto text-base/[2] tracking-wide">
     <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-background-dark mb-8">
-            <p class="text-3xl/[2] sm:text-4xl/[2] lg:text-5xl/[2] ml-4 tracking-widest uppercase w-full font-spectral italic text-left
-                border-l-1.5 border-solid border-(--background-dark-color)
+        <div class="flex flex-col justify-start items-start bg-background-dark mb-8 shadow-[0.4rem_0.4rem_0.4rem_black]">
+            <p class="text-3xl/[2] sm:text-4xl/[2] lg:text-5xl/[2] tracking-widest uppercase w-full font-andika italic text-left
+                border-l-4 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Hymn1 }}</p>
-            <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
+            <hr class="w-full border-t-2 border-dotted border-main-hard mb-1">
             <p class="text-xl/[2] sm:text-2xl/[2] lg:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn2 }}</p>
             <p class="text-xl/[2] sm:text-2xl/[2] lg:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn3 }}</p>
             <p class="text-xl/[2] sm:text-2xl/[2] lg:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn4 }}</p>
         </div>
 
         <div class="flex flex-col justify-center items-center">
-            <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-spectral italic text-left
+            <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-andika italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.DidYouKnowThat }}</p>
-            <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
+            <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>
                 <li class="ml-4 mb-1">{{ index .FunFacts 1 }}</li>
@@ -26,9 +26,10 @@
 
     <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-spectral italic text-left
+            <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-andika italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .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>
                 <span class="font-bold">Telegram:</span>
@@ -100,19 +101,19 @@
         </script>
 
         <div class="flex flex-col justify-center items-center">
-            <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-spectral italic text-left
+            <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-andika italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.SidebarDescription }}</p>
-            <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
+            <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-(--background-medium-color) [&>*:nth-child(4n+3)]:bg-(--background-medium-color)" style="container-type: inline-size;">
-                <i class="fas fa-home w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
+                [&>*:nth-child(4n+2)]:bg-(--background-medium-color)/50 [&>*:nth-child(4n+3)]:bg-(--background-medium-color)/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-dark"></i>
+                <i class="fas fa-search w-full h-full text-[10cqi] content-center text-center text-main-hard"></i>
                 <p class="p-1">{{ .L.HomePage.BlogSearchDescription }}</p>
-                <i class="fas fa-map w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
+                <i class="fas fa-map w-full h-full text-[10cqi] content-center text-center text-main-hard"></i>
                 <p class="p-1">{{ .L.HomePage.MarkerMapDescription }}</p>
-                <i class="fas fa-swatchbook w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
+                <i class="fas fa-swatchbook w-full h-full text-[10cqi] content-center text-center text-main-hard"></i>
                 <p class="p-1">{{ .L.HomePage.ThemeSwitchDescription }}</p>
             </div>
         </div>
diff --git a/views/pages/language-pick.html b/views/pages/language-pick.html
new file mode 100644
index 0000000..5a9d229
--- /dev/null
+++ b/views/pages/language-pick.html
@@ -0,0 +1,16 @@
+{{ define "body" }}
+<div class="flex flex-col justify-center text-3xl h-[100%]">
+    {{- range .AvailableLanguages }}
+    <hr class="border-t-2 border-dotted border-main-hard">
+    <div class="nth-[2n+1_of_div]:bg-(--background-medium-color)/50 nth-[2n_of_div]:bg-(--background-light-color)/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>
+        <a href="/{{ .Name }}" onclick="return changeUrl('{{ .Name }}');" class="cursor-pointer">
+            {{ .Alt }}
+        </a>
+    </div>
+    {{- end }}
+    <hr class="border-t-2 border-dotted border-main-hard">
+</div>
+{{ end }}
diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html
index f23ef9d..8d555da 100644
--- a/views/partials/blog-page-like-button.html
+++ b/views/partials/blog-page-like-button.html
@@ -1,6 +1,6 @@
 <button 
     hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
-    class="text-sm/[0.9] shrink-0 font-spectral text-left px-1 py-0.5 {{ if .Liked }}bg-main-light hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-dark hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-2 border-background-dark">
+    class="text-sm/[0.9] shrink-0 font-andika text-left px-1 py-0.5 {{ if .Liked }}bg-main-soft hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-hard hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-2 border-background-dark">
     <i class="fas fa-thumbs-up w-3 h-3"></i>
     <span class="italic ml-0.5 text-background-light">({{ .LikedCount }})</span>
 </button>
\ No newline at end of file
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index 5c3bb95..9bc5a30 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -1,5 +1,5 @@
 {{- range .BlogPages }}
-<hr class="first-of-type:hidden my-1 border-t-2 border-dotted border-main-dark">
+<hr class="first-of-type:hidden my-1 border-t-2 border-dotted border-main-hard">
 <div class="m-1 flex flex-row justify-center justify-items-center">
     <a href="{{ .ArticleLink }}" class="w-24 h-24 basis-24 shrink-0 my-2.5 mr-2">
         <img onclick="return changeUrl('{{ .ArticleLink }}');" class="w-full h-full aspect-square cursor-pointer object-cover rounded-lg select-none" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
@@ -13,7 +13,7 @@
             </a>
             <p class="basis-56 text-base italic text-secondary text-right">{{ .PublishedTime }}</p>
         </div>
-        <p class="text-base text-main-dark">{{ .ShortDescription }}</p>
+        <p class="text-base text-main-hard">{{ .ShortDescription }}</p>
         <p class="text-base text-secondary italic">
             <i class="fas fa-thumbs-up w-4 h-4"></i>
             <span>{{ .LikeCount }}</span>
diff --git a/views/partials/general-page-footer.html b/views/partials/general-page-footer.html
index 8979423..9b91bf0 100644
--- a/views/partials/general-page-footer.html
+++ b/views/partials/general-page-footer.html
@@ -1,5 +1,5 @@
 {{ block "footer" . }}{{ end }}
-<p class="grow content-center text-base/[1] font-spectral italic text-right text-secondary mr-1">
+<p class="grow content-center text-base/[1] font-andika italic text-right text-secondary mr-1">
     All the photos on <a href="https://saya.today/">saya.today</a> are licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a> by <a href="https://t.me/EarlInisMona">Saya Andy</a> © {{ .PublishedYear }}
 </p>
 <img class="max-w-4 max-h-4 self-center" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="CC">
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index e5488b4..a29d40b 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -1,10 +1,6 @@
 <div {{ if .PublishedDate }} hx-get="/api/v1/tz" hx-vals='js:{timestamp: "{{ .PublishedDate }}", tz: clientTimeZone}' hx-target="#published-date" hx-swap="innerHTML" hx-trigger="load" {{ end }}
     class="flex flex-row mb-2">
-    <a href="./" class="w-(--text-4xl) h-(--text-4xl) mx-1 my-auto">
-        <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-4xl"></i>
-    </a>
-    <p class="text-4xl font-spectral italic font-extrabold select-none my-auto pl-3 pr-3">//</p>
-    <p class="text-4xl font-spectral italic text-left mt-auto">{{ .Title }}</p>
-    <p id="published-date" class="grow text-2xl font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
+    <p class="text-4xl font-andika font-light italic text-shadow-[0_2px_2px_var(--main-soft-color)] text-left mt-auto">{{ .Title }}</p>
+    <p id="published-date" class="grow text-2xl font-andika italic text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
 </div>
 {{ block "header" . }}{{ end }}