v0.9.0 (#10)v0.9.0

- [feat: implement new prototype
gallery](https://github.com/SayaAndy/saya-today-web/commit/44fe2478478225450becb77ad5d273462c9b400a)
(masonry + glightbox instead of lightgallery)
  - A simpler column gallery, expandable between 2 and 5 columns;
  - Allows highlighting images via tags;
- A simpler lightbox layout with wider image, especially on mobile
devices;
  - Displays tooltips;
- [feat: adapted layouts for mobile/tablet
devices](https://github.com/SayaAndy/saya-today-web/commit/d3ffefbd3d9de2378b564e4c6f965c03a5a06113)
- [feat: switched most length units to absolute in
layouts](https://github.com/SayaAndy/saya-today-web/commit/454e2f3cd84b6c0b02a0c2936a574d3d9c35c5a1)
- [feat: use dvw/dvh instead of
vw/vh](https://github.com/SayaAndy/saya-today-web/commit/e231d8a3074853fbdbae9b368976bd902a1428f7)
- [feat: add onclick links in blog post
links](https://github.com/SayaAndy/saya-today-web/commit/db174993127a8b2faf863a670fd6ce8ca8d7c1af)
- feat: add href for any onclick links/icons
- feat: use page-first layout for page titles (like "{page-header} //
SAYA TODAY", not vice versa)
- chore: rm any remains of old lightgallery
- fix: map redefining

1 files changed, 20 insertions, 20 deletions

diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index eccafd6..3845275 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,59 +1,59 @@
 {{ define "body" }}
-<div class="flex flex-row ar-lt-1.1:flex-col text-[1vmax] h-[100%]">
+<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-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]">
+        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">
         <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-1.1:grid grid-cols-5 grid-flow-row-dense">
-                    <div class="m-[0.4vmin]">
+                <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">
                         <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label>
                     </div>
                     {{- range .Tags }}
-                    <div class="m-[0.4vmin]">
+                    <div class="m-0.5">
                         <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 }}
                 </div>
             </fieldset>
-            <fieldset class="mt-[0.8vmin]">
+            <fieldset class="mt-1">
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.OrderByHeader }}</legend>
-                <div class="flex flex-col ar-lt-1.1:grid grid-cols-3 grid-rows-2 grid-flow-col">
-                    <div class="m-[0.4vmin]">
+                <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col">
+                    <div class="m-0.5">
                         <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.4vmin]">
+                    <div class="m-0.5">
                         <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.4vmin]">
+                    <div class="m-0.5">
                         <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.4vmin]">
+                    <div class="m-0.5">
                         <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.4vmin]">
+                    <div class="m-0.5">
                         <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.4vmin]">
+                    <div class="m-0.5">
                         <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-[0.2vmax] border-dotted border-main-dark my-[0.4vmin]">
-        <div class="flex flex-row grow bg-background-light my-[2vmin] p-[0.4vmin] rounded-[0.4vmin] justify-items-center">
-            <i onclick="defaultSearchParams(); cleanHrefParams();" class="fas fa-rotate-left flex-1 text-center text-[1.5vmax] hover:bg-background-dark cursor-pointer transition-colors duration-300"></i>
-            <div class="w-[0.5vmin] bg-background-dark grow-0"></div>
+        <hr class="border-t-2 border-dotted border-main-dark 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>
             <button class="flex-1" type="submit">
-                <i onclick="setHrefParams();" class="fas fa-magnifying-glass text-center text-[1.5vmax] hover:bg-background-dark cursor-pointer transition-colors duration-300"></i>
+                <i onclick="setHrefParams();" class="fas fa-magnifying-glass text-center text-2xl hover:bg-background-light cursor-pointer transition-colors duration-300"></i>
             </button>
         </div>
     </form>
 
-    <div class="w-[0.5vh] border-r-[0.3vh] border-dotted border-main-dark bg-background-dark"></div>
+    <div class="w-[0.5dvh] border-r-2 border-dotted border-main-dark 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-[2.4vmin]">
+        class="blog-cards grow flex flex-col overflow-y-auto bg-background-light inset-shadow p-6">
         Loading...
     </div>
 </div>