diff --git a/CHANGELOG.md b/CHANGELOG.md index fa481d2..8a21a09 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,9 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.1.0...main) +### Added + +- Add `closable` class for making `details` closable when other `details` is open/outside area is clicked. + ### Changed - Get rid of dashed outline on article hover in article list. +- Make navabr menu/search open animation nicer (scale up instead of just fading from transparency). - More visually interesting paginator. - Move paginator from `articles.html` to `article-list.html`. - Tweak styling of `details`. diff --git a/content/_index.md b/content/_index.md index 73e973f..ddc6ce2 100644 --- a/content/_index.md +++ b/content/_index.md @@ -22,7 +22,7 @@ Some of the features Duckquill has to offer: - Cute and informative social media cards for Discourse, Facebook, LinkedIn, Mastodon and more. - [Mastodon-powered comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/); comment under a post by using your Mastodon account. -- Lightweight by default, powerful when needed; no JavaScript is used by default. +- Lightweight by default, powerful when needed; no mandatory 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. - Light/dark/system theme switcher (for some reason everyone likes these). diff --git a/sass/_nav.scss b/sass/_nav.scss index 34f78b6..f03f426 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -186,36 +186,23 @@ @keyframes dropdown-open { from { - transform: translate(-50%, 0); + transform: scale(0.5) translate(-50%, -1rem); opacity: 0; } } } - @media only screen and (max-width: 480px) { - &[open]:has(summary:not(.circle)) ul { - animation: dropdown-open-2 var(--transition); - - @keyframes dropdown-open-2 { - from { - transform: translate(-50%, -0.5rem); - opacity: 0; - } - } - } - } - ul { -webkit-backdrop-filter: var(--blur); position: absolute; left: 50%; flex-direction: column; - transform: translate(-50%, 1rem); + transform: translateX(-50%); + transform-origin: top left; z-index: 1; backdrop-filter: var(--blur); - box-shadow: - var(--edge-highlight), - var(--shadow-glass); + inset-block-start: 3.25rem; + box-shadow: var(--edge-highlight),var(--shadow-glass); border-radius: calc(var(--rounded-corner) + 0.25rem); background-color: var(--nav-bg); padding: 0.25rem; @@ -233,7 +220,7 @@ @media only screen and (max-width: 480px) { &:has(summary:not(.circle)) ul { - transform: translate(-50%, 0.5rem); + inset-block-start: 2.75rem; } } } @@ -306,7 +293,7 @@ } #search-container { - transform: translateY(-2.75rem); + transform: scale(0.5) translateY(-2.75rem); opacity: 0; transition: var(--transition); padding: 0 0.5rem 0; @@ -314,7 +301,7 @@ pointer-events: none; &.active { - transform: translateY(0); + transform: none; opacity: 1; padding: 0 0.5rem 0.5rem; height: 2.75rem; diff --git a/static/closable.js b/static/closable.js new file mode 100644 index 0000000..4b73bc8 --- /dev/null +++ b/static/closable.js @@ -0,0 +1,29 @@ +document.addEventListener("DOMContentLoaded", function () { + const closable = document.querySelectorAll("details.closable"); + + closable.forEach((detail) => { + detail.addEventListener("toggle", () => { + if (detail.open) setTargetDetail(detail); + }); + }); + + function setTargetDetail(targetDetail) { + closable.forEach((detail) => { + if (detail !== targetDetail) { + detail.open = false; + } + }); + } + + document.addEventListener("click", function (event) { + const isClickInsideDetail = [...closable].some((detail) => + detail.contains(event.target) + ); + + if (!isClickInsideDetail) { + closable.forEach((detail) => { + detail.open = false; + }); + } + }); +}); diff --git a/static/details.js b/static/details.js deleted file mode 100644 index dbdfbd2..0000000 --- a/static/details.js +++ /dev/null @@ -1,18 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { - const nav = document.getElementById("site-nav"); - const details = nav.querySelectorAll("details"); - - details.forEach((detail) => { - detail.addEventListener("toggle", () => { - if (detail.open) setTargetDetail(detail); - }); - }); - - function setTargetDetail(targetDetail) { - details.forEach((detail) => { - if (detail !== targetDetail) { - detail.open = false; - } - }); - } -}) diff --git a/templates/article.html b/templates/article.html index c272578..bf78896 100644 --- a/templates/article.html +++ b/templates/article.html @@ -54,7 +54,7 @@
{%- if page.extra.toc -%} -
+
{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }} diff --git a/templates/partials/head.html b/templates/partials/head.html index 150990c..e70ad18 100644 --- a/templates/partials/head.html +++ b/templates/partials/head.html @@ -63,7 +63,7 @@ {%- include "partials/copy_button.html" %} {%- endif %} - {%- set scripts = [] %} + {%- set scripts = ["closable.js"] %} {%- if config.extra.goatcounter %} {%- set scripts = scripts | concat(with=["count.js"]) %} @@ -92,10 +92,6 @@ {%- set scripts = scripts | concat(with=["theme-switcher.js"]) %} {%- endif %} - {%- if config.extra.nav.links.menu or config.languages | length > 0 or config.extra.nav.show_theme_switcher or config.feed_filenames | length > 1 and config.extra.nav.show_feed %} - {%- set scripts = scripts | concat(with=["details.js"]) %} - {%- endif %} - {%- if config.extra.scripts %} {%- set scripts = scripts | concat(with=config.extra.scripts) %} {%- endif %} diff --git a/templates/partials/language_switcher.html b/templates/partials/language_switcher.html index 08abf58..fde3c4a 100644 --- a/templates/partials/language_switcher.html +++ b/templates/partials/language_switcher.html @@ -1,7 +1,7 @@ {#- Based on https://github.com/welpo/tabi/blob/main/templates/partials/language_switcher.html -#}
  • -
    +
    diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 134156a..1216e31 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -19,7 +19,7 @@ {%- for link in config.extra.nav.links %} {%- if link.menu and link.menu | length > 0 -%}
  • -
    +
    {{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}} @@ -81,7 +81,7 @@ {%- endif -%} {%- if config.extra.default_theme or config.extra.nav.show_theme_switcher %}
  • -
    +
    @@ -107,7 +107,7 @@ {%- endif %} {%- if config.feed_filenames | length > 1 and config.extra.nav.show_feed -%}
  • -
    +