Small design improvs for lang select & search

4 files changed, 20 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;
-