From a1946ae0b269f4567af7d62d9dad3848610f0258 Mon Sep 17 00:00:00 2001 From: daudix Date: Sat, 14 Sep 2024 03:31:25 +0300 Subject: [PATCH] A bunch of breaking changes for no reason except for "I didn't like it" I mean, this release has breaking changes anyway, why not break all the stuff I wanted to break? --- CHANGELOG.md | 7 +++++-- config.toml | 8 ++++---- content/_index.md | 10 +++++----- content/demo/index.md | 24 ++++++++++++------------ sass/_article-list.scss | 10 +++++----- sass/_buttons.scss | 4 ++-- sass/_code.scss | 2 +- sass/_comments.scss | 14 +++++++------- sass/_crt.scss | 20 ++++++++++---------- sass/_external.scss | 2 +- sass/_footer.scss | 10 +++++----- sass/_footnotes-list.scss | 4 ++-- sass/_general.scss | 18 +++++++++--------- sass/_input.scss | 8 ++++---- sass/_nav.scss | 18 +++++++++--------- sass/_post-nav.scss | 4 ++-- sass/_pre-container.scss | 6 +++--- sass/_tags.scss | 8 ++++---- sass/_typography.scss | 16 ++++++++-------- sass/_variables.scss | 6 +++--- sass/_zola-anchor.scss | 4 ++-- templates/partials/head.html | 18 +++++++++--------- templates/partials/nav.html | 18 +++++++++--------- 23 files changed, 121 insertions(+), 118 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 88f7ecf..b18197c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,8 +30,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - **[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]** Rename `config.extra.stylesheets` to `config.extra.styles`. +- **[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 `--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 opening original comment attachment by clicking on it. - Allow overriding the `body` block of `base.html. diff --git a/config.toml b/config.toml index 9254126..c814910 100644 --- a/config.toml +++ b/config.toml @@ -65,12 +65,12 @@ taxonomies = [{ name = "tags", feed = true }] # # Sets theme and browser 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. # 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. -# 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 # @@ -128,7 +128,7 @@ show_repo = true # i.e. "@/blog/_index.md". # See https://www.getzola.org/documentation/content/linking/#internal-links links = [ - { name = "Links", sublinks = [ + { name = "Links", menu = [ { url = "@/blog/_index.md", name = "Blog" }, { url = "@/demo/index.md", name = "Demo" }, { url = "@/tricks/index.md", name = "Tricks" }, diff --git a/content/_index.md b/content/_index.md index 881273b..8e1937c 100644 --- a/content/_index.md +++ b/content/_index.md @@ -25,8 +25,8 @@ Some of the features Duckquill has to offer: - 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. - 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). +- 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. - Post banners; they're even used in the social media cards! - 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 [extra] -primary_color = "#3584e4" +accent_color = "#3584e4" ``` Additionally, you can set a separate color for dark mode: ```toml [extra] -primary_color_dark = "#ff7800" +accent_color_dark = "#ff7800" ``` ### Favicon diff --git a/content/demo/index.md b/content/demo/index.md index d9d049c..193fbb3 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -645,7 +645,7 @@ URL anchor `#solid` can be used for this as well.
- Primary color: + Accent color:
@@ -713,21 +713,21 @@ URL anchor `#solid` can be used for this as well. const contrastCheckboxLight = document.querySelector("#contrast-color-light"); const contrastCheckboxDark = document.querySelector("#contrast-color-dark"); - let primaryColorLight = colorPickerLight.value; - let primaryColorDark = colorPickerDark.value; + let accentColorLight = colorPickerLight.value; + let accentColorDark = colorPickerDark.value; - colorPickerLight.addEventListener("input", updatePrimaryColorLight); - colorPickerDark.addEventListener("input", updatePrimaryColorDark); + colorPickerLight.addEventListener("input", updateAccentColorLight); + colorPickerDark.addEventListener("input", updateAccentColorDark); contrastCheckboxLight.addEventListener("change", updateStyles); contrastCheckboxDark.addEventListener("change", updateStyles); - function updatePrimaryColorLight() { - primaryColorLight = colorPickerLight.value; + function updateAccentColorLight() { + accentColorLight = colorPickerLight.value; updateStyles(); } - function updatePrimaryColorDark() { - primaryColorDark = colorPickerDark.value; + function updateAccentColorDark() { + accentColorDark = colorPickerDark.value; updateStyles(); } @@ -745,14 +745,14 @@ URL anchor `#solid` can be used for this as well. let styles = ` :root { - --primary-color: ${primaryColorLight}; + --accent-color: ${accentColorLight}; } [data-theme="dark"] { - --primary-color: ${primaryColorDark}; + --accent-color: ${accentColorDark}; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --primary-color: ${primaryColorDark}; + --accent-color: ${accentColorDark}; } } `; diff --git a/sass/_article-list.scss b/sass/_article-list.scss index 571a194..fc7a24d 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -14,12 +14,12 @@ border-radius: var(--rounded-corner); border-start-end-radius: 2.125rem; border-end-end-radius: 1.8125rem; - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); padding: 1rem; overflow: hidden; &:hover { - outline-color: var(--primary-color); + outline-color: var(--accent-color); outline-offset: 0.5rem; } @@ -36,11 +36,11 @@ justify-content: flex-end; a { - background-color: var(--primary-color-alpha); - color: var(--primary-color); + background-color: var(--accent-color-alpha); + color: var(--accent-color); &:hover { - background-color: var(--primary-color); + background-color: var(--accent-color); color: var(--contrast-color); } } diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 7a0bfc7..a2a4371 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -44,11 +44,11 @@ button.inline-button { &.colored { box-shadow: none; background-color: transparent; - color: var(--primary-color); + color: var(--accent-color); &:hover { box-shadow: var(--edge-highlight); - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); } } } diff --git a/sass/_code.scss b/sass/_code.scss index 42c8aed..e2ef381 100644 --- a/sass/_code.scss +++ b/sass/_code.scss @@ -62,7 +62,7 @@ pre { border-radius: 0; // Unset code block border radius background-color: var(--fg-muted-1); 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 diff --git a/sass/_comments.scss b/sass/_comments.scss index ae43fca..78590a2 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -26,7 +26,7 @@ margin-block-start: 2rem; #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-size: 200%; background-color: transparent; @@ -140,12 +140,12 @@ } &.op { - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); padding-inline-start: 0.625rem; - color: var(--primary-color); + color: var(--accent-color); &:hover { - background-color: var(--primary-color); + background-color: var(--accent-color); color: var(--contrast-color); &::before { @@ -163,7 +163,7 @@ mask-size: cover; transition: var(--transition); margin-inline-end: 0.25rem; - background-color: var(--primary-color); + background-color: var(--accent-color); width: 0.75rem; height: 0.75rem; content: ""; @@ -195,13 +195,13 @@ transition: var(--transition); box-shadow: var(--edge-highlight); border-radius: var(--rounded-corner-small); - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); padding: 0.125rem 0.375rem; line-height: 1.25; text-decoration: none; &:hover { - background-color: var(--primary-color); + background-color: var(--accent-color); color: var(--contrast-color); } diff --git a/sass/_crt.scss b/sass/_crt.scss index a2ed5e8..df5b0fc 100644 --- a/sass/_crt.scss +++ b/sass/_crt.scss @@ -2,23 +2,23 @@ margin: 1rem 0 1rem; box-shadow: var(--edge-highlight), - 0 0 0 0.0625rem var(--primary-color-alpha), - 0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha), - 0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha); + 0 0 0 0.0625rem var(--accent-color-alpha), + 0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha), + 0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha); border-radius: var(--rounded-corner); - background-image: radial-gradient(color-mix(in srgb, var(--primary-color) 30%, black), - color-mix(in srgb, var(--primary-color) 10%, black) 80%, - color-mix(in srgb, var(--primary-color) 5%, black)); + background-image: radial-gradient(color-mix(in srgb, var(--accent-color) 30%, black), + color-mix(in srgb, var(--accent-color) 10%, black) 80%, + color-mix(in srgb, var(--accent-color) 5%, black)); pre { - --text-shadow-1: hsl(from var(--primary-color) h s l / 0.5); - --text-shadow-2: hsl(from var(--primary-color) h calc(s * 2) l); + --text-shadow-1: hsl(from var(--accent-color) h s l / 0.5); + --text-shadow-2: hsl(from var(--accent-color) h calc(s * 2) l); animation: flicker 0.25s alternate infinite; margin: 0; box-shadow: none; background-color: transparent !important; padding: 1rem 1rem; - color: var(--primary-color); + color: var(--accent-color); text-shadow: var(--text-shadow-1) 0 0 0.25rem, var(--text-shadow-2) 0 0 0.75rem; @@ -69,7 +69,7 @@ } &::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; position: absolute; animation: scanline 5s linear infinite; diff --git a/sass/_external.scss b/sass/_external.scss index 3352569..7907698 100644 --- a/sass/_external.scss +++ b/sass/_external.scss @@ -7,7 +7,7 @@ a.external::after { mask-image: var(--icon); mask-size: cover; margin-inline-start: 0.25rem; - background-color: var(--primary-color); + background-color: var(--accent-color); width: max(0.75rem, 0.75em); height: max(0.75rem, 0.75em); content: ""; diff --git a/sass/_footer.scss b/sass/_footer.scss index 1cdbd27..eb57241 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -44,11 +44,11 @@ &.active { box-shadow: var(--edge-highlight); - background-color: var(--primary-color-alpha); - color: var(--primary-color); + background-color: var(--accent-color-alpha); + color: var(--accent-color); &:hover { - background-color: var(--primary-color); + background-color: var(--accent-color); color: var(--contrast-color); } } @@ -122,12 +122,12 @@ transition: var(--transition); box-shadow: var(--edge-highlight); border-radius: var(--rounded-corner-small); - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); padding: 0.125rem 0.375rem; text-decoration: none; &:hover { - background-color: var(--primary-color); + background-color: var(--accent-color); color: var(--contrast-color); } diff --git a/sass/_footnotes-list.scss b/sass/_footnotes-list.scss index 5dbfdf5..d362879 100644 --- a/sass/_footnotes-list.scss +++ b/sass/_footnotes-list.scss @@ -21,14 +21,14 @@ user-select: none; &:hover { - background-color: var(--primary-color); + background-color: var(--accent-color); } } a + a[href*="#fr-"], li:target a[href*="#fr-"] { opacity: var(--disabled); - background-color: var(--primary-color); + background-color: var(--accent-color); &:hover { opacity: 1; diff --git a/sass/_general.scss b/sass/_general.scss index 634a3de..37f7ff7 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -4,8 +4,8 @@ :root { scroll-behavior: smooth; - scrollbar-color: var(--primary-color) transparent; - accent-color: var(--primary-color); + scrollbar-color: var(--accent-color) transparent; + accent-color: var(--accent-color); font-size: 16px; // Smaller font size on mobile @@ -27,25 +27,25 @@ body { overflow-wrap: break-word; } -// Style text selection to use primary color +// Style text selection to use accent color ::selection { - background-color: var(--primary-color); + background-color: var(--accent-color); color: var(--contrast-color); } // 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) { transition: all var(--transition), scroll-margin-block-start 0s; scroll-margin-block-start: 15vh; - color: var(--primary-color); - text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem; + color: var(--accent-color); + text-shadow: var(--accent-color-alpha) 0 0 0.25rem, var(--accent-color) 0 0 0.75rem; } // Custom focus indicator :focus-visible { animation: focus-in var(--transition); - outline: 0.125rem solid var(--primary-color); + outline: 0.125rem solid var(--accent-color); outline-offset: 0.125rem; } @@ -53,7 +53,7 @@ body { @supports not selector(:focus-visible) { :focus { animation: focus-in var(--transition); - outline: 0.125rem solid var(--primary-color); + outline: 0.125rem solid var(--accent-color); outline-offset: 0.125rem; } } diff --git a/sass/_input.scss b/sass/_input.scss index e2964f3..6fd200c 100644 --- a/sass/_input.scss +++ b/sass/_input.scss @@ -39,11 +39,11 @@ input[type="checkbox"] { &:checked { border: 0.15rem solid transparent; - background-color: var(--primary-color); + background-color: var(--accent-color); &:disabled { border: 0.15rem solid transparent; - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); &::before { opacity: 0.8; @@ -124,7 +124,7 @@ input[type="checkbox"] { } &:checked { - background-color: var(--primary-color); + background-color: var(--accent-color); &::before { transform: translateX(1rem); @@ -169,7 +169,7 @@ input[type="range"] { transition: var(--transition); box-shadow: var(--edge-highlight); border-radius: 999px; - background: var(--primary-color); + background: var(--accent-color); width: 100%; height: 0.5rem; diff --git a/sass/_nav.scss b/sass/_nav.scss index dde76c5..138e2b4 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -82,11 +82,11 @@ a.active { box-shadow: var(--edge-highlight); - background-color: var(--primary-color-alpha); - color: var(--primary-color); + background-color: var(--accent-color-alpha); + color: var(--accent-color); &:hover { - background-color: var(--primary-color); + background-color: var(--accent-color); color: var(--contrast-color); .icon { @@ -95,7 +95,7 @@ } .icon { - background-color: var(--primary-color); + background-color: var(--accent-color); } } @@ -112,7 +112,7 @@ } &.active { - color: var(--primary-color); + color: var(--accent-color); &:hover { color: var(--contrast-color); @@ -123,7 +123,7 @@ } .icon { - background-color: var(--primary-color); + background-color: var(--accent-color); } } @@ -317,14 +317,14 @@ } .active { - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); .icon { - background-color: var(--primary-color); + background-color: var(--accent-color); } &:hover { - background-color: var(--primary-color); + background-color: var(--accent-color); .icon { background-color: var(--contrast-color); diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss index 618f061..b684da5 100644 --- a/sass/_post-nav.scss +++ b/sass/_post-nav.scss @@ -14,10 +14,10 @@ &:hover { box-shadow: var(--edge-highlight); - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); .post-title { - color: var(--primary-color); + color: var(--accent-color); } } diff --git a/sass/_pre-container.scss b/sass/_pre-container.scss index 138150a..990fb06 100644 --- a/sass/_pre-container.scss +++ b/sass/_pre-container.scss @@ -4,7 +4,7 @@ border-radius: var(--rounded-corner); .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; background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%); background-size: 200%; @@ -70,13 +70,13 @@ button { box-shadow: var(--edge-highlight); - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); .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"); -webkit-mask-image: var(--icon); mask-image: var(--icon); - background-color: var(--primary-color); + background-color: var(--accent-color); } } diff --git a/sass/_tags.scss b/sass/_tags.scss index 0e15fef..7052b6f 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -28,13 +28,13 @@ white-space: nowrap; &:hover { - background-color: var(--primary-color-alpha); - color: var(--primary-color); + background-color: var(--accent-color-alpha); + color: var(--accent-color); text-decoration: none; .count { - background-color: var(--primary-color-alpha); - color: var(--primary-color); + background-color: var(--accent-color-alpha); + color: var(--accent-color); } } diff --git a/sass/_typography.scss b/sass/_typography.scss index c9e499f..52273af 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -49,7 +49,7 @@ figcaption { blockquote { margin: 0; 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; color: var(--fg-muted-5); } @@ -65,8 +65,8 @@ q { } mark { - background-color: var(--primary-color-alpha); - color: var(--primary-color); + background-color: var(--accent-color-alpha); + color: var(--accent-color); } del { @@ -111,7 +111,7 @@ progress { background-color: var(--fg-muted-1); width: 100%; height: 0.5rem; - color: var(--primary-color); + color: var(--accent-color); &:indeterminate { background-color: var(--fg-muted-1); @@ -127,12 +127,12 @@ progress { &::-moz-progress-bar { border-radius: 999px; - background-color: var(--primary-color); + background-color: var(--accent-color); } &::-webkit-progress-value { border-radius: 999px; - background-color: var(--primary-color); + background-color: var(--accent-color); } } @@ -159,7 +159,7 @@ kbd { } a { - color: var(--primary-color); + color: var(--accent-color); font-weight: bold; text-decoration-thickness: max(1px, 0.0625em); @@ -202,7 +202,7 @@ aside { margin-inline-start: 1rem; box-shadow: var(--edge-highlight); border-radius: var(--rounded-corner); - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); padding: 1rem; width: 30%; diff --git a/sass/_variables.scss b/sass/_variables.scss index fd22926..e7b7203 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -17,7 +17,7 @@ @include theme-variables using ($theme) { @if $theme == "dark" { // 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-muted-1: rgb(255 255 255 / 0.05); --fg-muted-2: rgb(255 255 255 / 0.1); @@ -37,7 +37,7 @@ @else { // 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-fg: rgb(53 132 228); --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-fg: rgb(38 162 105); --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-fg: rgb(145 65 172); --red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity)); diff --git a/sass/_zola-anchor.scss b/sass/_zola-anchor.scss index 1ddef6a..ad4e821 100644 --- a/sass/_zola-anchor.scss +++ b/sass/_zola-anchor.scss @@ -16,7 +16,7 @@ h6 { margin: 0 0.25em; &:hover .icon { - background-color: var(--primary-color); + background-color: var(--accent-color); } &:active { @@ -41,5 +41,5 @@ h6 { } :target .zola-anchor .icon { - background-color: var(--primary-color-alpha); + background-color: var(--accent-color-alpha); } diff --git a/templates/partials/head.html b/templates/partials/head.html index 1d3852b..46b15cc 100644 --- a/templates/partials/head.html +++ b/templates/partials/head.html @@ -3,9 +3,9 @@ - - {%- if config.extra.primary_color_dark %} - + + {%- if config.extra.accent_color_dark %} + {%- endif %} {% include "partials/title.html" %} @@ -40,18 +40,18 @@ @@ -130,7 +130,7 @@ {%- set scripts = scripts | concat(with=["theme-switcher.js"]) %} {%- 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"]) %} {%- endif %} diff --git a/templates/partials/nav.html b/templates/partials/nav.html index cd7a8fa..2180153 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -17,7 +17,7 @@
{%- for link in config.extra.nav.links %} - {%- if link.sublinks and link.sublinks | length > 0 -%} + {%- if link.menu and link.menu | length > 0 -%}
  • @@ -25,23 +25,23 @@ {{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}