From 52e9cbeda0f5763e4e62d17e7df1828af3e9a187 Mon Sep 17 00:00:00 2001 From: daudix Date: Tue, 18 Jun 2024 03:19:37 +0300 Subject: [PATCH] Across the board style fixes and simplifications Plus bump to v3 --- content/_index.md | 4 +- content/_index.ru.md | 4 +- sass/_article-list.scss | 7 +- sass/_buttons.scss | 4 +- sass/_code.scss | 94 ++++++++--------- sass/_comments.scss | 7 +- sass/_containers.scss | 2 +- sass/_footer.scss | 4 +- sass/_general.scss | 1 + sass/_icon.scss | 14 +-- sass/_johnvertisement.scss | 7 -- sass/_nav.scss | 17 ++- sass/_normalize.scss | 102 +++++++++--------- sass/_table.scss | 46 ++++---- sass/_tags.scss | 9 +- sass/_typography.scss | 186 ++++++++++++++++----------------- sass/_variables.scss | 1 - sass/_zola-anchor.scss | 48 ++++----- sass/style.scss | 3 +- templates/article_list.html | 8 +- templates/taxonomy_list.html | 12 +-- templates/taxonomy_single.html | 63 +++++++---- 22 files changed, 332 insertions(+), 311 deletions(-) delete mode 100644 sass/_johnvertisement.scss diff --git a/content/_index.md b/content/_index.md index d0d785e..a72f2d2 100644 --- a/content/_index.md +++ b/content/_index.md @@ -47,7 +47,7 @@ It is highly recommended to switch from the `main` branch to the lates release: ```sh cd themes/duckquill -git checkout tags/v2.1.0 +git checkout tags/v3.0.0 ``` To update the submodule, simply switch to a new tag: @@ -57,7 +57,7 @@ To update the submodule, simply switch to a new tag: ```sh git submodule update --remote --merge git tag --list -git checkout tags/v2.1.0 +git checkout tags/v3.0.0 ``` Then, enable it in your `config.toml`: diff --git a/content/_index.ru.md b/content/_index.ru.md index 8246d1a..f6cddbe 100644 --- a/content/_index.ru.md +++ b/content/_index.ru.md @@ -47,7 +47,7 @@ git submodule add https://codeberg.org/daudix/duckquill.git themes/duckquill ```sh cd themes/duckquill -git checkout tags/v2.1.0 +git checkout tags/v3.0.0 ``` Чтобы обновить субмодуль, просто переключитесь на новый тег: @@ -57,7 +57,7 @@ git checkout tags/v2.1.0 ```sh git submodule update --remote --merge git tag --list -git checkout tags/v2.1.0 +git checkout tags/v3.0.0 ``` Затем включите её в файле `config.toml`: diff --git a/sass/_article-list.scss b/sass/_article-list.scss index 286a005..3aecc56 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -6,14 +6,14 @@ transform: scale(0.95); opacity: 0.6; transition: var(--transition-longer); - outline: 2px dashed var(--fg-muted-2); + outline: 0.125rem dashed var(--fg-muted-2); outline-offset: 1rem; border-radius: 1rem; &:hover { transform: scale(1); opacity: 1; - outline: 2px dashed transparent; + outline: 0.125rem dashed transparent; outline-offset: 0; } } @@ -34,8 +34,9 @@ right: 0; box-shadow: var(--edge-highlight); border-radius: 999px; - padding: 0.25rem 0.75rem; + padding: 0.5rem 0.75rem; font-weight: bold; + line-height: normal; .icon { vertical-align: -0.125em; diff --git a/sass/_buttons.scss b/sass/_buttons.scss index d07ea7d..d2555bf 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -7,15 +7,15 @@ } .inline-button { - display: inline-block; transition: var(--transition); cursor: pointer; box-shadow: var(--edge-highlight); border-radius: var(--rounded-corner); background-color: var(--fg-muted-1); - padding: 0.5rem 1rem; + padding: 0.625rem 1rem; color: var(--fg-color); font-size: 0.9rem; + line-height: normal; text-decoration: none; &:hover { diff --git a/sass/_code.scss b/sass/_code.scss index d39af87..86453fb 100644 --- a/sass/_code.scss +++ b/sass/_code.scss @@ -2,63 +2,63 @@ pre, code, kbd { - font-family: var(--font-monospace-code); + font-family: var(--font-monospace-code); } code:not(pre code) { - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner-small); - background-color: var(--fg-muted-2); - padding: 0.125rem 0.375rem; - color: var(--red-fg); + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner-small); + background-color: var(--fg-muted-2); + padding: 0.125rem 0.375rem; + color: var(--red-fg); } pre { - margin: 1rem 0 1rem; - box-shadow: var(--edge-highlight), var(--shadow); - border-radius: var(--rounded-corner); - padding: 1rem; - max-width: 100vw; - overflow: auto; - line-height: normal; + margin: 1rem 0 1rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + padding: 1rem; + max-width: 100vw; + overflow: auto; + line-height: normal; - table td { - border: none; - padding: 0; - } + table td { + border: none; + padding: 0; + } - // The line number cells - table td:nth-of-type(1) { - user-select: none; - text-align: center; - } + // The line number cells + table td:nth-of-type(1) { + user-select: none; + text-align: center; + } - mark { - display: block; - box-shadow: none; - 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 - } + mark { + display: block; + box-shadow: none; + 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 + } - table { - box-shadow: none; - border-radius: 0; - border-collapse: collapse; - width: 100%; - table-layout: auto; - overflow: auto; + table { + box-shadow: none; + border-radius: 0; + border-collapse: collapse; + width: 100%; + table-layout: auto; + overflow: auto; - tr { - &:nth-child(even) { - background-color: unset; - } - } - } + tr { + &:nth-child(even) { + background-color: unset; + } + } + } - // The line numbers already provide some kind of left/right padding - &[data-linenos] { - padding: 1rem 0; - } + // The line numbers already provide some kind of left/right padding + &[data-linenos] { + padding: 1rem 0; + } } diff --git a/sass/_comments.scss b/sass/_comments.scss index 6fb72c9..3932f50 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -1,11 +1,12 @@ section#comments { #qrcode { float: right; + box-sizing: content-box; margin: 3rem 0 0 1rem; background-color: white; - padding: 12.5px; - width: 150px; - height: 150px; + padding: 0.75rem; + width: 125px; + height: 125px; body[dir="rtl"] & { float: left; diff --git a/sass/_containers.scss b/sass/_containers.scss index 760e41a..c6345b2 100644 --- a/sass/_containers.scss +++ b/sass/_containers.scss @@ -8,7 +8,6 @@ button { -webkit-backdrop-filter: var(--blur); - display: inline-flex; position: absolute; top: 0.5rem; right: 0.5rem; @@ -20,6 +19,7 @@ border-radius: 50%; background-color: var(--fg-muted-1); padding: 0.5rem; + line-height: 0; body[dir="rtl"] & { right: unset; diff --git a/sass/_footer.scss b/sass/_footer.scss index 63fa12d..920ef82 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -40,11 +40,11 @@ padding: 0; li { - display: inline-flex; + line-height: 0; list-style: none; a { - display: inline-flex; + display: block; transition: var(--transition); border-radius: 999px; padding: 0.5rem; diff --git a/sass/_general.scss b/sass/_general.scss index fc3ced1..b339c8f 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -44,6 +44,7 @@ body { // and flash it with primary color when jumping to it :target:not(#main) { animation: var(--transition-long) 1s highlight-in-out; + transition: all var(--transition-longer), scroll-margin-top 0s; scroll-margin-top: 20vh; color: var(--primary-color); text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; diff --git a/sass/_icon.scss b/sass/_icon.scss index 5ca243b..161dc10 100644 --- a/sass/_icon.scss +++ b/sass/_icon.scss @@ -1,9 +1,9 @@ .icon { - -webkit-mask-size: cover; - display: inline-block; - mask-size: cover; - font-style: normal; - font-variant: normal; - line-height: 1; - text-rendering: auto; + -webkit-mask-size: cover; + display: inline-block; + mask-size: cover; + font-style: normal; + font-variant: normal; + line-height: 1; + text-rendering: auto; } diff --git a/sass/_johnvertisement.scss b/sass/_johnvertisement.scss deleted file mode 100644 index a178bd5..0000000 --- a/sass/_johnvertisement.scss +++ /dev/null @@ -1,7 +0,0 @@ -#johnvertisement { - display: block; - margin: 1rem auto 0; - border: none; - width: min(728px, 100vw); - height: min(90px, 12.367vw); -} diff --git a/sass/_nav.scss b/sass/_nav.scss index 6820ab8..a700a0d 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -11,23 +11,21 @@ max-width: min(var(--container-width), 90%); nav { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; padding: 0.5rem; ul { display: flex; flex-wrap: wrap; justify-content: center; + align-items: center; gap: 0.25rem; margin: 0; padding: 0; } li { - display: inline-flex; + display: flex; + line-height: normal; list-style: none; } @@ -48,7 +46,7 @@ position: relative; transition: var(--transition); border-radius: 999px; - padding: 0.325rem 0.75rem; + padding: 0.5rem 0.75rem; color: var(--fg-muted-4); text-decoration: none; @@ -107,11 +105,11 @@ &::after { position: absolute; - top: 0; + top: -0.25rem; right: -0.5rem; background-color: var(--fg-muted-2); width: 1px; - height: 110%; + height: calc(100% + 0.5rem); content: ""; body[dir="rtl"] & { @@ -132,7 +130,7 @@ #feed a, #dropdown summary { - padding: 0.325rem 0.625rem; + padding: 0.5rem 0.625rem; &:hover .icon { background-color: var(--primary-color); @@ -208,6 +206,7 @@ padding: 0.25rem; li { + display: flex; width: 100%; a { diff --git a/sass/_normalize.scss b/sass/_normalize.scss index 1a54b12..a1cd5ce 100644 --- a/sass/_normalize.scss +++ b/sass/_normalize.scss @@ -7,9 +7,9 @@ // :where(html) { - line-height: 1.15; // 1 - -webkit-text-size-adjust: 100%; // 2 - text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 + text-size-adjust: 100%; // 2 + line-height: 1.15; // 1 } // Sections @@ -21,9 +21,9 @@ // :where(h1) { - font-size: 2em; - margin-block-end: 0.67em; - margin-block-start: 0.67em; + margin-block-start: 0.67em; + margin-block-end: 0.67em; + font-size: 2em; } // Grouping content @@ -34,8 +34,8 @@ // :where(dl, ol, ul) :where(dl, ol, ul) { - margin-block-end: 0; - margin-block-start: 0; + margin-block-start: 0; + margin-block-end: 0; } // @@ -44,9 +44,9 @@ // :where(hr) { - box-sizing: content-box; // 1 - color: inherit; // 2 - height: 0; // 1 + box-sizing: content-box; // 1 + height: 0; // 1 + color: inherit; // 2 } // Text-level semantics @@ -57,8 +57,8 @@ // :where(abbr[title]) { - text-decoration: underline; - text-decoration: underline dotted; + text-decoration: underline; + text-decoration: underline dotted; } // @@ -66,7 +66,7 @@ // :where(b, strong) { - font-weight: bolder; + font-weight: bolder; } // @@ -75,8 +75,8 @@ // :where(code, kbd, pre, samp) { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 + font-size: 1em; // 2 + font-family: monospace, monospace; // 1 } // @@ -84,7 +84,7 @@ // :where(small) { - font-size: 80%; + font-size: 80%; } // Tabular data @@ -96,8 +96,8 @@ // :where(table) { - border-color: currentColor; // 1 - text-indent: 0; // 2 + border-color: currentColor; // 1 + text-indent: 0; // 2 } // Forms @@ -108,7 +108,7 @@ // :where(button, input, select) { - margin: 0; + margin: 0; } // @@ -116,7 +116,7 @@ // :where(button) { - text-transform: none; + text-transform: none; } // @@ -124,7 +124,7 @@ // :where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { - -webkit-appearance: button; + -webkit-appearance: button; } // @@ -132,7 +132,7 @@ // :where(progress) { - vertical-align: baseline; + vertical-align: baseline; } // @@ -140,7 +140,7 @@ // :where(select) { - text-transform: none; + text-transform: none; } // @@ -148,7 +148,7 @@ // :where(textarea) { - margin: 0; + margin: 0; } // @@ -157,8 +157,8 @@ // :where(input[type="search" i]) { - -webkit-appearance: textfield; // 1 - outline-offset: -2px; // 2 + -webkit-appearance: textfield; // 1 + outline-offset: -2px; // 2 } // @@ -167,7 +167,7 @@ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; + height: auto; } // @@ -175,8 +175,8 @@ // ::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; + opacity: 0.54; + color: inherit; } // @@ -184,7 +184,7 @@ // ::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } // @@ -193,8 +193,8 @@ // ::-webkit-file-upload-button { - -webkit-appearance: button; // 1 - font: inherit; // 2 + -webkit-appearance: button; // 1 + font: inherit; // 2 } // @@ -202,8 +202,8 @@ // :where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } // @@ -211,7 +211,7 @@ // :where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } // @@ -219,7 +219,7 @@ // :where(:-moz-ui-invalid) { - box-shadow: none; + box-shadow: none; } // Interactive @@ -230,22 +230,22 @@ // :where(dialog) { - background-color: white; - border: solid; - color: black; - height: -moz-fit-content; - height: fit-content; - left: 0; - margin: auto; - padding: 1em; - position: absolute; - right: 0; - width: -moz-fit-content; - width: fit-content; + position: absolute; + right: 0; + left: 0; + margin: auto; + border: solid; + background-color: white; + padding: 1em; + width: -moz-fit-content; + width: fit-content; + height: -moz-fit-content; + height: fit-content; + color: black; } :where(dialog:not([open])) { - display: none; + display: none; } // @@ -253,5 +253,5 @@ // :where(summary) { - display: list-item; + display: list-item; } diff --git a/sass/_table.scss b/sass/_table.scss index b0cb55a..f952d89 100644 --- a/sass/_table.scss +++ b/sass/_table.scss @@ -1,34 +1,34 @@ // TABLE table { - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - border-collapse: collapse; - background-color: var(--fg-muted-1); - width: 100%; - table-layout: fixed; - overflow: hidden; + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + border-collapse: collapse; + background-color: var(--fg-muted-1); + width: 100%; + table-layout: fixed; + overflow: hidden; - th { - font-weight: bold; - } + th { + font-weight: bold; + } - th, - td { - padding: 0.5rem 1rem; - } + th, + td { + padding: 0.5rem 1rem; + } - tr { - &:nth-child(even) { - background-color: var(--fg-muted-1); - } + tr { + &:nth-child(even) { + background-color: var(--fg-muted-1); + } - th { - background-color: var(--fg-muted-2); - } - } + th { + background-color: var(--fg-muted-2); + } + } } td, th { - padding: 0; + padding: 0; } diff --git a/sass/_tags.scss b/sass/_tags.scss index 6bc48b4..fd5ab78 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -1,12 +1,14 @@ .tags { - display: inline-block; + display: inline-flex; + flex-wrap: wrap; + gap: 0.25rem; padding: 0; list-style: none; li { - display: inline-block; + display: flex; transition: var(--transition); - margin: 0 0.25rem 0.5rem 0; + line-height: normal; &:active { transform: scale(var(--active)); @@ -20,6 +22,7 @@ background-color: var(--fg-muted-1); padding: 0.25rem 0.75rem; color: var(--fg-color); + font-size: 0.8rem; text-decoration: none; &:hover { diff --git a/sass/_typography.scss b/sass/_typography.scss index 76150bf..278f8d2 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -5,150 +5,150 @@ h3, h4, h5, h6 { - text-wrap: balance; - margin: 3rem 0 1rem; - font-weight: lighter; - line-height: normal; - font-family: var(--font-antique); - letter-spacing: -0.05em; + text-wrap: balance; + margin: 3rem 0 1rem; + font-weight: lighter; + line-height: normal; + font-family: var(--font-antique); + letter-spacing: -0.05em; } h1 { - font-size: 2.5rem; + font-size: 2.5rem; } h2 { - font-size: 2rem; + font-size: 2rem; } h3 { - font-size: 1.5rem; + font-size: 1.5rem; } small { - color: var(--fg-muted-5); - font-size: 0.8rem; + color: var(--fg-muted-5); + font-size: 0.8rem; } abbr[title] { - -webkit-text-decoration: underline dotted; - cursor: help; - text-decoration: underline dotted; + -webkit-text-decoration: underline dotted; + cursor: help; + text-decoration: underline dotted; } figcaption { - color: var(--fg-muted-4); - font-size: 0.8rem; - text-align: center; + color: var(--fg-muted-4); + font-size: 0.8rem; + text-align: center; } blockquote { - margin: 0; - border-left: 0.25rem solid var(--primary-color); - border-radius: 0.25rem; - padding: 0 0.75rem; - color: var(--fg-muted-5); + margin: 0; + border-left: 0.25rem solid var(--primary-color); + border-radius: 0.25rem; + padding: 0 0.75rem; + color: var(--fg-muted-5); - body[dir="rtl"] & { - border-right: 0.25rem solid var(--primary-color); - border-left: unset; - } + body[dir="rtl"] & { + border-right: 0.25rem solid var(--primary-color); + border-left: unset; + } } mark { - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner-small); - background-color: var(--primary-color-alpha); - padding: 0.125rem 0.375rem; - color: var(--primary-color); + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner-small); + background-color: var(--primary-color-alpha); + padding: 0.125rem 0.375rem; + color: var(--primary-color); } kbd { - display: inline-block; - transition: var(--transition); - cursor: pointer; - box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); - border-radius: var(--rounded-corner-small); - background-color: var(--fg-muted-2); - padding: 0.125rem 0.375rem; - font-size: 0.8rem; - line-height: normal; + display: inline-block; + transition: var(--transition); + cursor: pointer; + box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); + border-radius: var(--rounded-corner-small); + background-color: var(--fg-muted-2); + padding: 0.125rem 0.375rem; + font-size: 0.8rem; + line-height: normal; - // Small nice thingy, keys can be pressed! - &:active { - transform: translateY(2px); - box-shadow: inset 0 1px 0 var(--fg-muted-2); - background-color: var(--fg-muted-3); - } + // Small nice thingy, keys can be pressed! + &:active { + transform: translateY(2px); + box-shadow: inset 0 1px 0 var(--fg-muted-2); + background-color: var(--fg-muted-3); + } } a { - color: var(--primary-color); - font-weight: bold; + color: var(--primary-color); + font-weight: bold; - &:hover { - -webkit-text-decoration: underline wavy; - text-decoration: underline wavy; - } + &:hover { + -webkit-text-decoration: underline wavy; + text-decoration: underline wavy; + } } hr { - margin: 2rem auto; - border: none; - border-top: 3px double var(--fg-muted-2); - overflow: visible; - color: var(--fg-muted-4); - font-size: 1.5rem; - text-align: center; + margin: 2rem auto; + border: none; + border-top: 3px double var(--fg-muted-2); + overflow: visible; + color: var(--fg-muted-4); + font-size: 1.5rem; + text-align: center; - &::after { - position: relative; - top: -1.5rem; - background: var(--bg-color), var(--primary-color); - padding: 0 0.25rem; - content: "☙❧"; + &::after { + position: relative; + top: -1.5rem; + background: var(--bg-color), var(--primary-color); + padding: 0 0.25rem; + content: "☙❧"; - // An ugly hack to fix mirroring in rtl - body[dir="rtl"] & { - content: "❧☙"; - } - } + // An ugly hack to fix mirroring in rtl + body[dir="rtl"] & { + content: "❧☙"; + } + } } dt { - font-weight: bold; + font-weight: bold; } dd { - margin-bottom: 1rem; + margin-bottom: 1rem; } aside { - float: right; - margin-inline-start: 1rem; - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - background-color: var(--primary-color-alpha); - padding: 1rem; - width: 30%; + float: right; + margin-inline-start: 1rem; + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--primary-color-alpha); + padding: 1rem; + width: 30%; - body[dir="rtl"] & { - float: left; - } + body[dir="rtl"] & { + float: left; + } - @media only screen and (max-width: 720px) { - float: none; - margin-inline-start: 0; - width: 100%; - } + @media only screen and (max-width: 720px) { + float: none; + margin-inline-start: 0; + width: 100%; + } } details { - border-radius: var(--rounded-corner); - background-color: var(--fg-muted-1); - padding: 1rem; + border-radius: var(--rounded-corner); + background-color: var(--fg-muted-1); + padding: 1rem; - &>summary { - cursor: pointer; - } + &>summary { + cursor: pointer; + } } diff --git a/sass/_variables.scss b/sass/_variables.scss index a0b2e24..635798d 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -76,7 +76,6 @@ } @media (prefers-reduced-motion) { - *, *::before, *::after { diff --git a/sass/_zola-anchor.scss b/sass/_zola-anchor.scss index 71bbade..d5870d6 100644 --- a/sass/_zola-anchor.scss +++ b/sass/_zola-anchor.scss @@ -4,37 +4,37 @@ h3, h4, h5, h6 { - &:hover .zola-anchor { - opacity: 1; - } + &:hover .zola-anchor { + opacity: 1; + } } .zola-anchor { - opacity: 0; - transition: var(--transition); - margin: 0 0.25em; + opacity: 0; + transition: var(--transition); + margin: 0 0.25em; - &:hover .icon { - background-color: var(--primary-color); - } + &:hover .icon { + background-color: var(--primary-color); + } - &:focus-visible { - opacity: 1; - } + &:focus-visible { + opacity: 1; + } - .icon { - $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E"); - -webkit-mask-image: $icon; - -webkit-mask-size: cover; - mask-image: $icon; - mask-size: cover; - transition: var(--transition); - background-color: var(--fg-muted-4); - width: 1em; - height: 1em; - } + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + -webkit-mask-size: cover; + mask-image: $icon; + mask-size: cover; + transition: var(--transition); + background-color: var(--fg-muted-4); + width: 1em; + height: 1em; + } } :target .zola-anchor .icon { - background-color: var(--primary-color-alpha); + background-color: var(--primary-color-alpha); } diff --git a/sass/style.scss b/sass/style.scss index 4c26460..fa9cf41 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,5 +1,5 @@ /*! - * Duckquill v2.1.0 (https://daudix.codeberg.page/duckquill) + * Duckquill v3.0.0 (https://daudix.codeberg.page/duckquill) * Copyright 2024 David "Daudix" Lapshin * Licensed under MIT (https://codeberg.org/daudix/duckquill/src/branch/main/LICENSE) */ @@ -19,7 +19,6 @@ @use "general"; @use "icon"; @use "input"; -@use "johnvertisement"; @use "media"; @use "nav"; @use "not-found"; diff --git a/templates/article_list.html b/templates/article_list.html index 59f695f..9fae1e9 100644 --- a/templates/article_list.html +++ b/templates/article_list.html @@ -6,7 +6,7 @@ {{ section.description | markdown | safe }} - {{ trans(key="filter_by_tag", lang=lang) }} + {{ trans(key="filter_by_tag", lang=lang) }}
{{ trans(key="newest_to_oldest", lang=lang) }} ↓ @@ -14,7 +14,7 @@
{% for page in section.pages %}
-

{{ page.title }}

+

{{ page.title }}

{%- if page.draft %} @@ -32,7 +32,9 @@ {%- endif %} {%- if page.date %} - + {%- if page.authors %} • {{ trans(key="author", lang=lang) }}: {{ page.authors[0] }} diff --git a/templates/taxonomy_list.html b/templates/taxonomy_list.html index b47a4d8..2a6569a 100644 --- a/templates/taxonomy_list.html +++ b/templates/taxonomy_list.html @@ -4,11 +4,9 @@

{{ trans(key="tags", lang=lang) }}

{{ terms | length }} {{ trans(key="tags_in_total", lang=lang) }}
- - - + {% endblock content %} diff --git a/templates/taxonomy_single.html b/templates/taxonomy_single.html index b381d5a..ac6404a 100644 --- a/templates/taxonomy_single.html +++ b/templates/taxonomy_single.html @@ -2,30 +2,55 @@ {% block content %}

{{ trans(key="posts_with_tag", lang=lang) }} “{{ term.name }}”

+ - {{ trans(key="see_all_tags", lang=lang) }} + {{ trans(key="see_all_tags", lang=lang) }}
{{ term.pages | length }} {{ trans(key="posts_in_total", lang=lang) }} -
+ +
{% for page in term.pages %} -

{{ page.title }}

- {%- if page.description %} -

{{ page.description }}

- {%- endif %} - - - {%- if page.taxonomies %} - {%- for name, taxon in page.taxonomies %} - • -
    - {%-for item in taxon %} -
  • {{ item }}
    • - {%- endfor %} -
- {%- endfor %} +
+

{{ page.title }}

+ {%- if page.draft %} + + + {{ trans(key="drafted", lang=lang) }} + {%- endif %} - + {%- if page.extra.archive %} + + + {{ trans(key="archived", lang=lang) }} + + {%- endif %} + {%- if page.description %} + {{ page.description | markdown | safe }} + {%- endif %} + {%- if page.date %} + + + {%- if page.authors %} + • + {{ trans(key="author", lang=lang) }}: {{ page.authors[0] }} + {%- endif %} + {%- if page.taxonomies %} + {%- for name, taxon in page.taxonomies %} + • +
    + {%-for item in taxon %} +
  • {{ item }}
    • + {%- endfor %} +
+ {%- endfor %} + {%- endif %} + + {%- endif %} +
+
{% endfor %} -
+
{% endblock content %}