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
- 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 `<head>` 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

10
sass/_article-list.scss
View File

@ -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);
}
}

3
sass/_buttons.scss
View File

@ -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;
}

23
sass/_comments.scss
View File

@ -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 {

15
sass/_footer.scss
View File

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

29
sass/_nav.scss
View File

@ -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");

2
sass/_tags.scss
View File

@ -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;

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
(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;

10
templates/partials/footer.html
View File

@ -7,13 +7,19 @@
{%- for link in config.extra.footer.links %}
{%- if link.url is matching('https?://') %}
<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) -}}
</a>
</li>
{%- else %}
<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) -}}
</a>
</li>