Small design improvs for lang select & search

7 files changed, 27 insertions, 11 deletions

diff --git a/assets/css/post-card.css b/assets/css/post-card.css
index 368f7a7..471eaf4 100644
--- a/assets/css/post-card.css
+++ b/assets/css/post-card.css
@@ -15,10 +15,6 @@
         display: flex;
         align-items: center;
         gap: var(--gap-small);
-    }
-
-    & .post-card__meta,
-    .post-card__summary {
         font-size: var(--font-size-small);
     }
 
@@ -26,6 +22,11 @@
         margin-bottom: 0;
     }
 
+    & .post-card__summary {
+        font-size: var(--font-size-small);
+        margin-bottom: 20px;
+    }
+
     @media (max-width: 768px) {
         padding: 0 var(--gap-small);
     }
diff --git a/assets/css/post.css b/assets/css/post.css
index 7fcfd95..13fac69 100644
--- a/assets/css/post.css
+++ b/assets/css/post.css
@@ -61,11 +61,13 @@
     border-radius: var(--border-radius-max);
     box-shadow: var(--shadow-default);
     cursor: pointer;
+    height: 2.5rem;
+    width: 2.5rem;
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 2.5rem;
-    width: 2.5rem;
+    
     position: absolute;
     bottom: 9rem;
     right: 0;
diff --git a/assets/css/search.css b/assets/css/search.css
index 7b6feab..4ae0d1f 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -27,7 +27,12 @@
     color: var(--text-color);
     font-size: var(--font-size-default);
     font-weight: bold;
-    padding: 0.1rem 0.5rem 0.3rem 0.5rem;
+    height: 2rem;
+    width: 2rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     &:hover {
         background-color: var(--link-hover);
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 36896c9..f22afe5 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -10,11 +10,13 @@ function initThemeToggle() {
 
     function setTheme(theme) {
         const isDarkMode = theme === "dark";
-        // toggleThemeBtn dataset comes with translated labels for site's language
+        // toggleThemeBtn dataset comes with translated labels & title for site's language
         const label = isDarkMode ? toggleThemeBtn.dataset.labelLight : toggleThemeBtn.dataset.labelDark;
+        const title = isDarkMode ? toggleThemeBtn.dataset.titleLight : toggleThemeBtn.dataset.titleDark;
 
-        rootHtml.setAttribute("data-theme", theme);
-        toggleThemeBtn.setAttribute("aria-label", label); // display handled by CSS
+        rootHtml.setAttribute("data-theme", theme); // display handled by CSS
+        toggleThemeBtn.setAttribute("aria-label", label);
+        toggleThemeBtn.setAttribute("title", title);
     }
 
     // Apply initial theme
@@ -29,4 +31,3 @@ function initThemeToggle() {
 }
 
 export default initThemeToggle;
-
diff --git a/i18n/de.toml b/i18n/de.toml
index 908e600..0dc9468 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -62,5 +62,7 @@ tags_posts_list = "Artikel mit diesem Schlagwort:"
 tags_with = "Getaggt mit:"
 
 # Theme
+dark_mode = "Dunkler Modus"
+light_mode = "Heller Modus"
 toggle_dark = "Dunklen Modus aktivieren"
 toggle_light = "Hellen Modus aktivieren"
diff --git a/i18n/en.toml b/i18n/en.toml
index 2a82946..28d68d1 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -62,5 +62,7 @@ tags_posts_list = "Posts with this tag:"
 tags_with = "Tagged with:"
 
 # Theme
+dark_mode = "Dark mode"
+light_mode = "Light mode"
 toggle_dark = "Switch to dark mode"
 toggle_light = "Switch to light mode"
diff --git a/layouts/_partials/select-theme.html b/layouts/_partials/select-theme.html
index 914eacc..ff2564c 100644
--- a/layouts/_partials/select-theme.html
+++ b/layouts/_partials/select-theme.html
@@ -2,9 +2,12 @@
     type="button"
     id="theme-toggle"
     class="theme-toggle"
+    title="{{ lang.Translate "dark_mode" }}"
     aria-label="{{ lang.Translate "toggle_dark" }}"
     data-label-dark="{{ lang.Translate "toggle_dark" }}"
     data-label-light="{{ lang.Translate "toggle_light" }}"
+    data-title-dark="{{ lang.Translate "dark_mode" }}"
+    data-title-light="{{ lang.Translate "light_mode" }}"
 >
     <svg class="icon icon-moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16" aria-hidden="true">
         <path fill="currentColor" d="M6 .278a.768.768 0 0 1 .08.858a7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277c.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316a.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71C0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path>