hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add active style to theme switcher buttons, style tweaks

Browse Source
This commit is contained in:
daudix
2024-08-29 22:49:42 +03:00
parent d09e2b158c
commit fcf8cdd680
9 changed files with 100 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
CHANGELOG.md
View File

@ -9,19 +9,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added ### 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 ### Changed
- Add separator between article description and details. - Make button hover styles consistent across all buttons.
### Removed ### Removed
- Remove goatcounter noscript tracking pixel from head. - Remove GoatCounter `noscript` tracking pixel from the `<head>` section.
### Fixed ### 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. - 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 ## [4.7.1](https://codeberg.org/daudix/duckquill/compare/v4.7.0...v4.7.1) - 2024-08-28

10
sass/_article-list.scss
View File

@ -91,7 +91,7 @@
} }
&:hover { &:hover {
outline-color: var(--fg-muted-4); outline-color: var(--fg-muted-5);
} }
h3 a { h3 a {
@ -100,10 +100,10 @@
.tags a { .tags a {
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
color: var(--fg-muted-4); color: var(--fg-muted-5);
&:hover { &:hover {
background-color: var(--fg-muted-4); background-color: var(--fg-muted-5);
color: var(--fg-contrast); color: var(--fg-contrast);
} }
} }
@ -264,12 +264,12 @@
.draft-badge { .draft-badge {
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
color: var(--fg-muted-4); color: var(--fg-muted-5);
.icon { .icon {
-webkit-mask-image: var(--icon); -webkit-mask-image: var(--icon);
mask-image: var(--icon); mask-image: var(--icon);
background-color: var(--fg-muted-4); background-color: var(--fg-muted-5);
} }
} }

3
sass/_buttons.scss
View File

@ -16,7 +16,7 @@
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
color: var(--fg-color); color: var(--fg-muted-5);
font-weight: bold; font-weight: bold;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1; line-height: 1;
@ -24,6 +24,7 @@
&:hover { &:hover {
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);
color: var(--fg-color);
text-decoration: none; text-decoration: none;
} }

23
sass/_comments.scss
View File

@ -94,13 +94,14 @@
border-radius: 999px; border-radius: 999px;
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
color: var(--fg-color); color: var(--fg-muted-5);
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: var(--fg-muted-2); background-color: var(--fg-muted-5);
color: var(--fg-contrast);
text-decoration: none; text-decoration: none;
} }
@ -109,14 +110,17 @@
} }
&.op { &.op {
box-shadow: none; background-color: var(--primary-color-alpha);
background-color: transparent;
padding: 0.375rem 0.75rem 0.375rem 0.5rem; padding: 0.375rem 0.75rem 0.375rem 0.5rem;
color: var(--primary-color); color: var(--primary-color);
&:hover { &:hover {
box-shadow: var(--edge-highlight); background-color: var(--primary-color);
background-color: var(--primary-color-alpha); color: var(--contrast-color);
&::before {
background-color: var(--contrast-color);
}
} }
&::before { &::before {
@ -127,6 +131,7 @@
vertical-align: -0.0625rem; vertical-align: -0.0625rem;
mask-image: var(--icon); mask-image: var(--icon);
mask-size: cover; mask-size: cover;
transition: var(--transition);
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
background-color: var(--primary-color); background-color: var(--primary-color);
width: 0.75rem; width: 0.75rem;
@ -145,8 +150,14 @@
all: unset; all: unset;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
transition: var(--transition);
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
&:hover {
transform: scale(2);
cursor: zoom-in;
}
} }
time { time {

17
sass/_footer.scss
View File

@ -42,11 +42,20 @@
text-align: center; text-align: center;
text-decoration: none; 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 { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color); background-color: var(--fg-muted-1);
color: var(--contrast-color); color: var(--fg-muted-5);
text-decoration: none;
} }
&:active { &:active {
@ -79,7 +88,7 @@
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
.icon { .icon {
background-color: var(--primary-color); background-color: var(--fg-muted-5);
} }
} }

29
sass/_nav.scss
View File

@ -128,6 +128,14 @@
color: var(--fg-muted-5); color: var(--fg-muted-5);
font-weight: 800; font-weight: 800;
&:hover {
color: var(--fg-color);
.icon {
background-color: var(--fg-color);
}
}
&.active { &.active {
color: var(--primary-color); color: var(--primary-color);
@ -171,6 +179,11 @@
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
.icon {
background-color: var(--fg-muted-5);
}
} }
&:active { &:active {
@ -319,6 +332,22 @@
border-radius: 999px; 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, #theme-system .icon,
.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"); --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");

2
sass/_tags.scss
View File

@ -22,7 +22,7 @@
border-radius: 999px; border-radius: 999px;
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
color: var(--fg-muted-4); color: var(--fg-muted-5);
font-size: 0.875rem; font-size: 0.875rem;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;

22
static/theme-switcher.js
View File

@ -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 // Theme Initialization
(function () { (function () {
// Get the default theme from the HTML data-theme attribute. // 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. // Update icon class based on the selected theme.
updateIconClass(theme); updateIconClass(theme);
// Update the active button based on the selected theme.
updateActiveButton(theme);
} }
function resetTheme() { function resetTheme() {
@ -60,7 +60,7 @@ document.addEventListener("DOMContentLoaded", function () {
} }
function updateIconClass(theme) { 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 // Remove any existing theme classes
iconElement.classList.remove("light", "dark"); 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 // Update icon class on page load based on current theme
const currentTheme = localStorage.getItem("theme") || window.defaultTheme || "system"; const currentTheme = localStorage.getItem("theme") || window.defaultTheme || "system";
updateIconClass(currentTheme); updateIconClass(currentTheme);
updateActiveButton(currentTheme);
// Make the switchTheme function accessible globally // Make the switchTheme function accessible globally
window.switchTheme = switchTheme; window.switchTheme = switchTheme;

10
templates/partials/footer.html
View File

@ -7,13 +7,19 @@
{%- for link in config.extra.footer.links %} {%- for link in config.extra.footer.links %}
{%- if link.url is matching('https?://') %} {%- if link.url is matching('https?://') %}
<li> <li>
<a href="{{ link.url }}" rel="{{ rel_attributes }}"> <a href="{{ link.url }}" rel="{{ rel_attributes }}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == link.url | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}} {{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</a> </a>
</li> </li>
{%- else %} {%- else %}
<li> <li>
<a href="{{ get_url(path=link.url, lang=lang)}}"> <a href="{{ get_url(path=link.url, lang=lang)}}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path=link.url, lang=lang) | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}} {{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</a> </a>
</li> </li>