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

A bunch of breaking changes for no reason except for "I didn't like it"

Browse Source 
I mean, this release has breaking changes anyway, why not break all the
stuff I wanted to break?
This commit is contained in:
daudix
2024-09-14 03:31:25 +03:00
parent 1722b95bea
commit a1946ae0b2
23 changed files with 121 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -30,8 +30,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed ### Changed
- **[BREAKING]** Change the `--active` CSS variable to include `scale()` as well. - **[BREAKING]** Change the `--active` CSS variable to include `scale()` as well.
- **[BREAKING]** Change the way `--bg-color` works. See [Tricks](https://duckquill.daudix.one/tricks/#background-image) page to see how to make background images work. - **[BREAKING]** Change the way `--bg-color` CSS variable works. See [Tricks](https://duckquill.daudix.one/tricks/#background-image) page to see how to make background images work.
- **[BREAKING]** Rename `config.extra.stylesheets` to `config.extra.styles`. - **[BREAKING]** Rename `--primary-color` CSS variable to `--accent-color`.
- **[BREAKING]** Rename `config.extra.nav.links.sublinks` to `config.extra.nav.links.menu`
- **[BREAKING]** Rename `config.extra.primary_color` and `config.extra.primary_color_dark` config variables to `config.extra.accent_color` and `config.extra.accent_color_dark`.
- **[BREAKING]** Rename `config.extra.stylesheets` to `config.extra.styles`. Front matter variables are renamed as well.
- Allow enabling table of contents on all pages and sections except for the homepage. - Allow enabling table of contents on all pages and sections except for the homepage.
- Allow opening original comment attachment by clicking on it. - Allow opening original comment attachment by clicking on it.
- Allow overriding the `body` block of `base.html. - Allow overriding the `body` block of `base.html.

8
config.toml
View File

@ -65,12 +65,12 @@ taxonomies = [{ name = "tags", feed = true }]
# #
# Sets theme and browser theme color. # Sets theme and browser theme color.
# See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
primary_color = "#ff7800" accent_color = "#ff7800"
# Ditto but for the dark theme. # Ditto but for the dark theme.
# If not set regular variant will be used. # If not set regular variant will be used.
primary_color_dark = "#ffa348" accent_color_dark = "#ffa348"
# Whether to fix low contrast in text selection, checkboxes, etc. # Whether to fix low contrast in text selection, checkboxes, etc.
# Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow. # Use only if the default doesn't provide enough contrast, e.g. the accent color is set to yellow.
# #
# fix_contrast = true # fix_contrast = true
# #
@ -128,7 +128,7 @@ show_repo = true
# i.e. "@/blog/_index.md". # i.e. "@/blog/_index.md".
# See https://www.getzola.org/documentation/content/linking/#internal-links # See https://www.getzola.org/documentation/content/linking/#internal-links
links = [ links = [
{ name = "Links", sublinks = [ { name = "Links", menu = [
{ url = "@/blog/_index.md", name = "Blog" }, { url = "@/blog/_index.md", name = "Blog" },
{ url = "@/demo/index.md", name = "Demo" }, { url = "@/demo/index.md", name = "Demo" },
{ url = "@/tricks/index.md", name = "Tricks" }, { url = "@/tricks/index.md", name = "Tricks" },

10
content/_index.md
View File

@ -25,8 +25,8 @@ Some of the features Duckquill has to offer:
- Lightweight by default, powerful when needed; no JavaScript is used by default. - Lightweight by default, powerful when needed; no JavaScript is used by default.
- Privacy respecting analytics using [GoatCounter](https://www.goatcounter.com), with support for self-hosting. - Privacy respecting analytics using [GoatCounter](https://www.goatcounter.com), with support for self-hosting.
- Estimated read time of the post; put away those with short attention spans. - Estimated read time of the post; put away those with short attention spans.
- Everything is tinted with the user-defined primary color for a pleasant look.
- Light/dark/system theme switcher (for some reason everyone likes these). - Light/dark/system theme switcher (for some reason everyone likes these).
- Everything is tinted with the user-defined accent color for a pleasant look.
- GitHub-style alerts. Yes, they're pretty, but don't overuse them. - GitHub-style alerts. Yes, they're pretty, but don't overuse them.
- Post banners; they're even used in the social media cards! - Post banners; they're even used in the social media cards!
- YouTube/Vimeo shortcodes for easy video embedding. - YouTube/Vimeo shortcodes for easy video embedding.
@ -159,20 +159,20 @@ styles = [
] ]
``` ```
### Primary Color ### Accent Color
Duckquill respects chosen primary color everywhere. To use your own, simply change the primary color in `config.toml`: Duckquill respects chosen accent color everywhere. To use your own, simply change it in `config.toml`:
```toml ```toml
[extra] [extra]
primary_color = "#3584e4" accent_color = "#3584e4"
``` ```
Additionally, you can set a separate color for dark mode: Additionally, you can set a separate color for dark mode:
```toml ```toml
[extra] [extra]
primary_color_dark = "#ff7800" accent_color_dark = "#ff7800"
``` ```
### Favicon ### Favicon

24
content/demo/index.md
View File

@ -645,7 +645,7 @@ URL anchor `#solid` can be used for this as well.
<!-- For the demo purposes only --> <!-- For the demo purposes only -->
<div id="color-picker-container"> <div id="color-picker-container">
<small>Primary color:</small> <small>Accent color:</small>
<br /> <br />
<input id="color-picker-light" type="color" value="#ff7800" /> <input id="color-picker-light" type="color" value="#ff7800" />
<label for="color-picker-light">Light theme</label> <label for="color-picker-light">Light theme</label>
@ -713,21 +713,21 @@ URL anchor `#solid` can be used for this as well.
const contrastCheckboxLight = document.querySelector("#contrast-color-light"); const contrastCheckboxLight = document.querySelector("#contrast-color-light");
const contrastCheckboxDark = document.querySelector("#contrast-color-dark"); const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
let primaryColorLight = colorPickerLight.value; let accentColorLight = colorPickerLight.value;
let primaryColorDark = colorPickerDark.value; let accentColorDark = colorPickerDark.value;
colorPickerLight.addEventListener("input", updatePrimaryColorLight); colorPickerLight.addEventListener("input", updateAccentColorLight);
colorPickerDark.addEventListener("input", updatePrimaryColorDark); colorPickerDark.addEventListener("input", updateAccentColorDark);
contrastCheckboxLight.addEventListener("change", updateStyles); contrastCheckboxLight.addEventListener("change", updateStyles);
contrastCheckboxDark.addEventListener("change", updateStyles); contrastCheckboxDark.addEventListener("change", updateStyles);
function updatePrimaryColorLight() { function updateAccentColorLight() {
primaryColorLight = colorPickerLight.value; accentColorLight = colorPickerLight.value;
updateStyles(); updateStyles();
} }
function updatePrimaryColorDark() { function updateAccentColorDark() {
primaryColorDark = colorPickerDark.value; accentColorDark = colorPickerDark.value;
updateStyles(); updateStyles();
} }
@ -745,14 +745,14 @@ URL anchor `#solid` can be used for this as well.
let styles = ` let styles = `
:root { :root {
--primary-color: ${primaryColorLight}; --accent-color: ${accentColorLight};
} }
[data-theme="dark"] { [data-theme="dark"] {
--primary-color: ${primaryColorDark}; --accent-color: ${accentColorDark};
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--primary-color: ${primaryColorDark}; --accent-color: ${accentColorDark};
} }
} }
`; `;

10
sass/_article-list.scss
View File

@ -14,12 +14,12 @@
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
border-start-end-radius: 2.125rem; border-start-end-radius: 2.125rem;
border-end-end-radius: 1.8125rem; border-end-end-radius: 1.8125rem;
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
padding: 1rem; padding: 1rem;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
outline-color: var(--primary-color); outline-color: var(--accent-color);
outline-offset: 0.5rem; outline-offset: 0.5rem;
} }
@ -36,11 +36,11 @@
justify-content: flex-end; justify-content: flex-end;
a { a {
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
color: var(--primary-color); color: var(--accent-color);
&:hover { &:hover {
background-color: var(--primary-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
} }
} }

4
sass/_buttons.scss
View File

@ -44,11 +44,11 @@ button.inline-button {
&.colored { &.colored {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
color: var(--primary-color); color: var(--accent-color);
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
} }
} }
} }

2
sass/_code.scss
View File

@ -62,7 +62,7 @@ pre {
border-radius: 0; // Unset code block border radius border-radius: 0; // Unset code block border radius
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
padding: 0; // Unset mark padding padding: 0; // Unset mark padding
color: var(--fg-color); // Unset mark color from primary color to text color color: var(--fg-color); // Unset mark color from accent color to text color
} }
// The line numbers already provide some kind of left/right padding // The line numbers already provide some kind of left/right padding

14
sass/_comments.scss
View File

@ -26,7 +26,7 @@
margin-block-start: 2rem; margin-block-start: 2rem;
#load-comments { #load-comments {
--shimmer: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2)); --shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2));
background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%); background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
background-size: 200%; background-size: 200%;
background-color: transparent; background-color: transparent;
@ -140,12 +140,12 @@
} }
&.op { &.op {
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
padding-inline-start: 0.625rem; padding-inline-start: 0.625rem;
color: var(--primary-color); color: var(--accent-color);
&:hover { &:hover {
background-color: var(--primary-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
&::before { &::before {
@ -163,7 +163,7 @@
mask-size: cover; mask-size: cover;
transition: var(--transition); transition: var(--transition);
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
background-color: var(--primary-color); background-color: var(--accent-color);
width: 0.75rem; width: 0.75rem;
height: 0.75rem; height: 0.75rem;
content: ""; content: "";
@ -195,13 +195,13 @@
transition: var(--transition); transition: var(--transition);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
line-height: 1.25; line-height: 1.25;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: var(--primary-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
} }

20
sass/_crt.scss
View File

@ -2,23 +2,23 @@
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
box-shadow: box-shadow:
var(--edge-highlight), var(--edge-highlight),
0 0 0 0.0625rem var(--primary-color-alpha), 0 0 0 0.0625rem var(--accent-color-alpha),
0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha), 0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha); 0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-image: radial-gradient(color-mix(in srgb, var(--primary-color) 30%, black), background-image: radial-gradient(color-mix(in srgb, var(--accent-color) 30%, black),
color-mix(in srgb, var(--primary-color) 10%, black) 80%, color-mix(in srgb, var(--accent-color) 10%, black) 80%,
color-mix(in srgb, var(--primary-color) 5%, black)); color-mix(in srgb, var(--accent-color) 5%, black));
pre { pre {
--text-shadow-1: hsl(from var(--primary-color) h s l / 0.5); --text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
--text-shadow-2: hsl(from var(--primary-color) h calc(s * 2) l); --text-shadow-2: hsl(from var(--accent-color) h calc(s * 2) l);
animation: flicker 0.25s alternate infinite; animation: flicker 0.25s alternate infinite;
margin: 0; margin: 0;
box-shadow: none; box-shadow: none;
background-color: transparent !important; background-color: transparent !important;
padding: 1rem 1rem; padding: 1rem 1rem;
color: var(--primary-color); color: var(--accent-color);
text-shadow: text-shadow:
var(--text-shadow-1) 0 0 0.25rem, var(--text-shadow-1) 0 0 0.25rem,
var(--text-shadow-2) 0 0 0.75rem; var(--text-shadow-2) 0 0 0.75rem;
@ -69,7 +69,7 @@
} }
&::after { &::after {
--scanline-color: rgb(from var(--primary-color) r g b / 0.05); --scanline-color: rgb(from var(--accent-color) r g b / 0.05);
display: block; display: block;
position: absolute; position: absolute;
animation: scanline 5s linear infinite; animation: scanline 5s linear infinite;

2
sass/_external.scss
View File

@ -7,7 +7,7 @@ a.external::after {
mask-image: var(--icon); mask-image: var(--icon);
mask-size: cover; mask-size: cover;
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
background-color: var(--primary-color); background-color: var(--accent-color);
width: max(0.75rem, 0.75em); width: max(0.75rem, 0.75em);
height: max(0.75rem, 0.75em); height: max(0.75rem, 0.75em);
content: ""; content: "";

10
sass/_footer.scss
View File

@ -44,11 +44,11 @@
&.active { &.active {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
color: var(--primary-color); color: var(--accent-color);
&:hover { &:hover {
background-color: var(--primary-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
} }
} }
@ -122,12 +122,12 @@
transition: var(--transition); transition: var(--transition);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: var(--primary-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
} }

4
sass/_footnotes-list.scss
View File

@ -21,14 +21,14 @@
user-select: none; user-select: none;
&:hover { &:hover {
background-color: var(--primary-color); background-color: var(--accent-color);
} }
} }
a + a[href*="#fr-"], a + a[href*="#fr-"],
li:target a[href*="#fr-"] { li:target a[href*="#fr-"] {
opacity: var(--disabled); opacity: var(--disabled);
background-color: var(--primary-color); background-color: var(--accent-color);
&:hover { &:hover {
opacity: 1; opacity: 1;

18
sass/_general.scss
View File

@ -4,8 +4,8 @@
:root { :root {
scroll-behavior: smooth; scroll-behavior: smooth;
scrollbar-color: var(--primary-color) transparent; scrollbar-color: var(--accent-color) transparent;
accent-color: var(--primary-color); accent-color: var(--accent-color);
font-size: 16px; font-size: 16px;
// Smaller font size on mobile // Smaller font size on mobile
@ -27,25 +27,25 @@ body {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
// Style text selection to use primary color // Style text selection to use accent color
::selection { ::selection {
background-color: var(--primary-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
} }
// Make focused anchor not get covered by nav, // Make focused anchor not get covered by nav,
// and flash it with primary color when jumping to it // and flash it with accent color when jumping to it
:target:not(#main) { :target:not(#main) {
transition: all var(--transition), scroll-margin-block-start 0s; transition: all var(--transition), scroll-margin-block-start 0s;
scroll-margin-block-start: 15vh; scroll-margin-block-start: 15vh;
color: var(--primary-color); color: var(--accent-color);
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem; text-shadow: var(--accent-color-alpha) 0 0 0.25rem, var(--accent-color) 0 0 0.75rem;
} }
// Custom focus indicator // Custom focus indicator
:focus-visible { :focus-visible {
animation: focus-in var(--transition); animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color); outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem; outline-offset: 0.125rem;
} }
@ -53,7 +53,7 @@ body {
@supports not selector(:focus-visible) { @supports not selector(:focus-visible) {
:focus { :focus {
animation: focus-in var(--transition); animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color); outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem; outline-offset: 0.125rem;
} }
} }

8
sass/_input.scss
View File

@ -39,11 +39,11 @@ input[type="checkbox"] {
&:checked { &:checked {
border: 0.15rem solid transparent; border: 0.15rem solid transparent;
background-color: var(--primary-color); background-color: var(--accent-color);
&:disabled { &:disabled {
border: 0.15rem solid transparent; border: 0.15rem solid transparent;
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
&::before { &::before {
opacity: 0.8; opacity: 0.8;
@ -124,7 +124,7 @@ input[type="checkbox"] {
} }
&:checked { &:checked {
background-color: var(--primary-color); background-color: var(--accent-color);
&::before { &::before {
transform: translateX(1rem); transform: translateX(1rem);
@ -169,7 +169,7 @@ input[type="range"] {
transition: var(--transition); transition: var(--transition);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 999px; border-radius: 999px;
background: var(--primary-color); background: var(--accent-color);
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;

18
sass/_nav.scss
View File

@ -82,11 +82,11 @@
a.active { a.active {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
color: var(--primary-color); color: var(--accent-color);
&:hover { &:hover {
background-color: var(--primary-color); background-color: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);
.icon { .icon {
@ -95,7 +95,7 @@
} }
.icon { .icon {
background-color: var(--primary-color); background-color: var(--accent-color);
} }
} }
@ -112,7 +112,7 @@
} }
&.active { &.active {
color: var(--primary-color); color: var(--accent-color);
&:hover { &:hover {
color: var(--contrast-color); color: var(--contrast-color);
@ -123,7 +123,7 @@
} }
.icon { .icon {
background-color: var(--primary-color); background-color: var(--accent-color);
} }
} }
@ -317,14 +317,14 @@
} }
.active { .active {
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
.icon { .icon {
background-color: var(--primary-color); background-color: var(--accent-color);
} }
&:hover { &:hover {
background-color: var(--primary-color); background-color: var(--accent-color);
.icon { .icon {
background-color: var(--contrast-color); background-color: var(--contrast-color);

4
sass/_post-nav.scss
View File

@ -14,10 +14,10 @@
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
.post-title { .post-title {
color: var(--primary-color); color: var(--accent-color);
} }
} }

6
sass/_pre-container.scss
View File

@ -4,7 +4,7 @@
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
.header { .header {
--shimmer: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2)); --shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2));
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%); background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
background-size: 200%; background-size: 200%;
@ -70,13 +70,13 @@
button { button {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
.icon { .icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%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='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");
-webkit-mask-image: var(--icon); -webkit-mask-image: var(--icon);
mask-image: var(--icon); mask-image: var(--icon);
background-color: var(--primary-color); background-color: var(--accent-color);
} }
} }

8
sass/_tags.scss
View File

@ -28,13 +28,13 @@
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
color: var(--primary-color); color: var(--accent-color);
text-decoration: none; text-decoration: none;
.count { .count {
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
color: var(--primary-color); color: var(--accent-color);
} }
} }

16
sass/_typography.scss
View File

@ -49,7 +49,7 @@ figcaption {
blockquote { blockquote {
margin: 0; margin: 0;
border-radius: 0.25rem; border-radius: 0.25rem;
border-inline-start: 0.25rem solid var(--primary-color); border-inline-start: 0.25rem solid var(--accent-color);
padding: 0 0.75rem; padding: 0 0.75rem;
color: var(--fg-muted-5); color: var(--fg-muted-5);
} }
@ -65,8 +65,8 @@ q {
} }
mark { mark {
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
color: var(--primary-color); color: var(--accent-color);
} }
del { del {
@ -111,7 +111,7 @@ progress {
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
color: var(--primary-color); color: var(--accent-color);
&:indeterminate { &:indeterminate {
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
@ -127,12 +127,12 @@ progress {
&::-moz-progress-bar { &::-moz-progress-bar {
border-radius: 999px; border-radius: 999px;
background-color: var(--primary-color); background-color: var(--accent-color);
} }
&::-webkit-progress-value { &::-webkit-progress-value {
border-radius: 999px; border-radius: 999px;
background-color: var(--primary-color); background-color: var(--accent-color);
} }
} }
@ -159,7 +159,7 @@ kbd {
} }
a { a {
color: var(--primary-color); color: var(--accent-color);
font-weight: bold; font-weight: bold;
text-decoration-thickness: max(1px, 0.0625em); text-decoration-thickness: max(1px, 0.0625em);
@ -202,7 +202,7 @@ aside {
margin-inline-start: 1rem; margin-inline-start: 1rem;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
padding: 1rem; padding: 1rem;
width: 30%; width: 30%;

6
sass/_variables.scss
View File

@ -17,7 +17,7 @@
@include theme-variables using ($theme) { @include theme-variables using ($theme) {
@if $theme == "dark" { @if $theme == "dark" {
// COLORS // COLORS
--bg-color: color-mix(in srgb, var(--primary-color) 10%, black); --bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
--fg-color: rgb(255 255 255); --fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 0.05); --fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1); --fg-muted-2: rgb(255 255 255 / 0.1);
@ -37,7 +37,7 @@
@else { @else {
// COLORS // COLORS
--bg-color: color-mix(in srgb, var(--primary-color) 20%, white); --bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity)); --blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
--blue-fg: rgb(53 132 228); --blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity)); --brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
@ -52,7 +52,7 @@
--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity)); --green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
--green-fg: rgb(38 162 105); --green-fg: rgb(38 162 105);
--nav-bg: rgb(242 242 242 / 0.7); --nav-bg: rgb(242 242 242 / 0.7);
--primary-color-alpha: rgb(from var(--primary-color) r g b / var(--color-opacity)); --accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity)); --purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
--purple-fg: rgb(145 65 172); --purple-fg: rgb(145 65 172);
--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity)); --red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));

4
sass/_zola-anchor.scss
View File

@ -16,7 +16,7 @@ h6 {
margin: 0 0.25em; margin: 0 0.25em;
&:hover .icon { &:hover .icon {
background-color: var(--primary-color); background-color: var(--accent-color);
} }
&:active { &:active {
@ -41,5 +41,5 @@ h6 {
} }
:target .zola-anchor .icon { :target .zola-anchor .icon {
background-color: var(--primary-color-alpha); background-color: var(--accent-color-alpha);
} }

18
templates/partials/head.html
View File

@ -3,9 +3,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="{{ config.description }}" /> <meta name="description" content="{{ config.description }}" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996') | safe }}" /> <meta name="theme-color" content="{{ config.extra.accent_color | default(value='#9a9996') | safe }}" />
{%- if config.extra.primary_color_dark %} {%- if config.extra.accent_color_dark %}
<meta name="theme-color" content="{{ config.extra.primary_color_dark | safe }}" media="(prefers-color-scheme:dark)" /> <meta name="theme-color" content="{{ config.extra.accent_color_dark | safe }}" media="(prefers-color-scheme:dark)" />
{%- endif %} {%- endif %}
<title>{% include "partials/title.html" %}</title> <title>{% include "partials/title.html" %}</title>
<link rel="canonical" href="{{ current_url | default(value='/') | safe }}" /> <link rel="canonical" href="{{ current_url | default(value='/') | safe }}" />
@ -40,18 +40,18 @@
<style type="text/css"> <style type="text/css">
:root { :root {
--primary-color: {{ config.extra.primary_color | default(value="#6f8396") | safe }}; --accent-color: {{ config.extra.accent_color | default(value="#6f8396") | safe }};
--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %}; --contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
} }
{%- if config.extra.primary_color_dark %} {%- if config.extra.accent_color_dark %}
[data-theme="dark"] { [data-theme="dark"] {
--primary-color: {{ config.extra.primary_color_dark | safe }}; --accent-color: {{ config.extra.accent_color_dark | safe }};
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--primary-color: {{ config.extra.primary_color_dark | safe }}; --accent-color: {{ config.extra.accent_color_dark | safe }};
} }
} }
{%- endif %} {%- endif %}
@ -72,7 +72,7 @@
*, *,
*::before, *::before,
*::after { *::after {
outline: solid 1px var(--primary-color); outline: solid 1px var(--accent-color);
} }
{%- endif -%} {%- endif -%}
</style> </style>
@ -130,7 +130,7 @@
{%- set scripts = scripts | concat(with=["theme-switcher.js"]) %} {%- set scripts = scripts | concat(with=["theme-switcher.js"]) %}
{%- endif %} {%- endif %}
{%- if config.extra.nav.links.sublinks or config.languages | length > 0 or config.extra.nav.show_theme_switcher %} {%- if config.extra.nav.links.menu or config.languages | length > 0 or config.extra.nav.show_theme_switcher %}
{%- set scripts = scripts | concat(with=["details.js"]) %} {%- set scripts = scripts | concat(with=["details.js"]) %}
{%- endif %} {%- endif %}

18
templates/partials/nav.html
View File

@ -17,7 +17,7 @@
</li> </li>
<div class="divider"></div> <div class="divider"></div>
{%- for link in config.extra.nav.links %} {%- for link in config.extra.nav.links %}
{%- if link.sublinks and link.sublinks | length > 0 -%} {%- if link.menu and link.menu | length > 0 -%}
<li> <li>
<details> <details>
<summary> <summary>
@ -25,23 +25,23 @@
{{- 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) -}}
</summary> </summary>
<ul> <ul>
{%- for sublink in link.sublinks -%} {%- for link in link.menu -%}
{%- if sublink.url is matching('https?://') %} {%- if link.url is matching('https?://') %}
<li> <li>
<a href="{{ sublink.url }}" rel="{{ rel_attributes }}" <a href="{{ link.url }}" rel="{{ rel_attributes }}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == sublink.url | trim_end_matches(pat='/') | safe -%} {%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == link.url | trim_end_matches(pat='/') | safe -%}
class="active" class="active"
{%- endif -%}> {%- endif -%}>
{{- macros_translate::translate(key=sublink.name, default=sublink.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=sublink.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=sublink.url, lang=lang) | trim_end_matches(pat='/') | safe -%} {%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path=link.url, lang=lang) | trim_end_matches(pat='/') | safe -%}
class="active" class="active"
{%- endif -%}> {%- endif -%}>
{{- macros_translate::translate(key=sublink.name, default=sublink.name, language_strings=language_strings) -}} {{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</a> </a>
</li> </li>
{%- endif %} {%- endif %}