diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50257ae..1788ce0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,19 +9,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
-- Add optional LaTeX rendering using the KaTeX library (#65).
+- Add a separator between the article description and details.
+- Highlight the button of the currently selected theme in the theme switcher.
+- Indicate active navbar items for footer links.
+- Support optional LaTeX rendering using the KaTeX library (#65).
### Changed
-- Add separator between article description and details.
+- Make button hover styles consistent across all buttons.
### Removed
-- Remove goatcounter noscript tracking pixel from head.
+- Remove GoatCounter `noscript` tracking pixel from the `` section.
### Fixed
-- Fix missing margin between article card heading and its details if no description is set (#68).
+- Fix missing margin between the article card heading and its details when no description is set (#68).
- Fix tags not floating to the end of the article card.
## [4.7.1](https://codeberg.org/daudix/duckquill/compare/v4.7.0...v4.7.1) - 2024-08-28
diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index 27b1efd..571a194 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -91,7 +91,7 @@
}
&:hover {
- outline-color: var(--fg-muted-4);
+ outline-color: var(--fg-muted-5);
}
h3 a {
@@ -100,10 +100,10 @@
.tags a {
background-color: var(--fg-muted-1);
- color: var(--fg-muted-4);
+ color: var(--fg-muted-5);
&:hover {
- background-color: var(--fg-muted-4);
+ background-color: var(--fg-muted-5);
color: var(--fg-contrast);
}
}
@@ -264,12 +264,12 @@
.draft-badge {
background-color: var(--fg-muted-1);
- color: var(--fg-muted-4);
+ color: var(--fg-muted-5);
.icon {
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
- background-color: var(--fg-muted-4);
+ background-color: var(--fg-muted-5);
}
}
diff --git a/sass/_buttons.scss b/sass/_buttons.scss
index 36cbe08..185b59d 100644
--- a/sass/_buttons.scss
+++ b/sass/_buttons.scss
@@ -16,7 +16,7 @@
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 0.75rem 1rem;
- color: var(--fg-color);
+ color: var(--fg-muted-5);
font-weight: bold;
font-size: 0.875rem;
line-height: 1;
@@ -24,6 +24,7 @@
&:hover {
background-color: var(--fg-muted-2);
+ color: var(--fg-color);
text-decoration: none;
}
diff --git a/sass/_comments.scss b/sass/_comments.scss
index f8e5d0a..dcd0732 100644
--- a/sass/_comments.scss
+++ b/sass/_comments.scss
@@ -94,13 +94,14 @@
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.375rem 0.75rem;
- color: var(--fg-color);
+ color: var(--fg-muted-5);
font-size: 0.875rem;
line-height: 1;
text-decoration: none;
&:hover {
- background-color: var(--fg-muted-2);
+ background-color: var(--fg-muted-5);
+ color: var(--fg-contrast);
text-decoration: none;
}
@@ -109,14 +110,17 @@
}
&.op {
- box-shadow: none;
- background-color: transparent;
+ background-color: var(--primary-color-alpha);
padding: 0.375rem 0.75rem 0.375rem 0.5rem;
color: var(--primary-color);
&:hover {
- box-shadow: var(--edge-highlight);
- background-color: var(--primary-color-alpha);
+ background-color: var(--primary-color);
+ color: var(--contrast-color);
+
+ &::before {
+ background-color: var(--contrast-color);
+ }
}
&::before {
@@ -127,6 +131,7 @@
vertical-align: -0.0625rem;
mask-image: var(--icon);
mask-size: cover;
+ transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: var(--primary-color);
width: 0.75rem;
@@ -145,8 +150,14 @@
all: unset;
display: inline-block;
vertical-align: middle;
+ transition: var(--transition);
width: 1.5em;
height: 1.5em;
+
+ &:hover {
+ transform: scale(2);
+ cursor: zoom-in;
+ }
}
time {
diff --git a/sass/_footer.scss b/sass/_footer.scss
index 613e487..1c18032 100644
--- a/sass/_footer.scss
+++ b/sass/_footer.scss
@@ -42,11 +42,20 @@
text-align: center;
text-decoration: none;
+ &.active {
+ background-color: var(--primary-color-alpha);
+ color: var(--primary-color);
+
+ &:hover {
+ background-color: var(--primary-color);
+ color: var(--contrast-color);
+ }
+ }
+
&:hover {
box-shadow: var(--edge-highlight);
- background-color: var(--primary-color);
- color: var(--contrast-color);
- text-decoration: none;
+ background-color: var(--fg-muted-1);
+ color: var(--fg-muted-5);
}
&:active {
@@ -79,7 +88,7 @@
background-color: var(--fg-muted-1);
.icon {
- background-color: var(--primary-color);
+ background-color: var(--fg-muted-5);
}
}
diff --git a/sass/_nav.scss b/sass/_nav.scss
index 6612d17..00898a0 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -128,6 +128,14 @@
color: var(--fg-muted-5);
font-weight: 800;
+ &:hover {
+ color: var(--fg-color);
+
+ .icon {
+ background-color: var(--fg-color);
+ }
+ }
+
&.active {
color: var(--primary-color);
@@ -171,6 +179,11 @@
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
+ color: var(--fg-muted-5);
+
+ .icon {
+ background-color: var(--fg-muted-5);
+ }
}
&:active {
@@ -319,6 +332,22 @@
border-radius: 999px;
}
+ .active {
+ background-color: var(--primary-color-alpha);
+
+ .icon {
+ background-color: var(--primary-color);
+ }
+
+ &:hover {
+ background-color: var(--primary-color);
+
+ .icon {
+ background-color: var(--contrast-color);
+ }
+ }
+ }
+
#theme-system .icon,
.icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.594 0 0 3.594 0 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8m0 1.941c3.36 0 6.059 2.7 6.059 6.059s-2.7 6.059-6.059 6.059zm0 0'/%3E%3C/svg%3E");
diff --git a/sass/_tags.scss b/sass/_tags.scss
index 80e95ca..b9e7c0c 100644
--- a/sass/_tags.scss
+++ b/sass/_tags.scss
@@ -22,7 +22,7 @@
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.375rem 0.75rem;
- color: var(--fg-muted-4);
+ color: var(--fg-muted-5);
font-size: 0.875rem;
text-decoration: none;
white-space: nowrap;
diff --git a/static/theme-switcher.js b/static/theme-switcher.js
index 6683383..0e40b8c 100644
--- a/static/theme-switcher.js
+++ b/static/theme-switcher.js
@@ -1,6 +1,3 @@
-// Initial code taken from https://github.com/welpo/tabi/blob/6ba0e541046b1f0b33fa177d5569cebe9d76bf4c/static/js/initializeTheme.js
-// and https://github.com/welpo/tabi/blob/6ba0e541046b1f0b33fa177d5569cebe9d76bf4c/static/js/themeSwitcher.js
-
// Theme Initialization
(function () {
// Get the default theme from the HTML data-theme attribute.
@@ -44,6 +41,9 @@ document.addEventListener("DOMContentLoaded", function () {
// Update icon class based on the selected theme.
updateIconClass(theme);
+
+ // Update the active button based on the selected theme.
+ updateActiveButton(theme);
}
function resetTheme() {
@@ -60,7 +60,7 @@ document.addEventListener("DOMContentLoaded", function () {
}
function updateIconClass(theme) {
- const iconElement = document.querySelector("#theme-switcher summary i.icon");
+ const iconElement = document.querySelector("#theme-switcher summary .icon");
// Remove any existing theme classes
iconElement.classList.remove("light", "dark");
@@ -73,9 +73,23 @@ document.addEventListener("DOMContentLoaded", function () {
}
}
+ function updateActiveButton(theme) {
+ // Remove .active class from all buttons
+ document.querySelectorAll('#theme-switcher button').forEach(button => {
+ button.classList.remove('active');
+ });
+
+ // Add .active class to the button corresponding to the current theme
+ const activeButton = document.querySelector(`#theme-${theme}`);
+ if (activeButton) {
+ activeButton.classList.add('active');
+ }
+ }
+
// Update icon class on page load based on current theme
const currentTheme = localStorage.getItem("theme") || window.defaultTheme || "system";
updateIconClass(currentTheme);
+ updateActiveButton(currentTheme);
// Make the switchTheme function accessible globally
window.switchTheme = switchTheme;
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index 833d93a..29f20a1 100644
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@@ -7,13 +7,19 @@
{%- for link in config.extra.footer.links %}
{%- if link.url is matching('https?://') %}
-
+
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
{%- else %}
-
+
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}