diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/post-card.css | 9 | ||||
| -rw-r--r-- | assets/css/post.css | 6 | ||||
| -rw-r--r-- | assets/css/search.css | 7 | ||||
| -rw-r--r-- | assets/js/theme.js | 9 |
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; - |