More visually interesting open animations, close details on outside click

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

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).

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:
+				inset-block-start: 3.25rem;
-					var(--edge-highlight),
+				box-shadow: var(--edge-highlight),var(--shadow-glass);
-					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;

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

static/details.js

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

templates/article.html

@@ -54,7 +54,7 @@
 
 <div id="buttons-container">
 	{%- if page.extra.toc -%}
-		<details id="toc">
+		<details id="toc" class="closable">
 			<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
 			<div id="toc-dropdown">
 				<strong id="toc-dropdown-title">{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</strong>

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 %}

templates/partials/language_switcher.html

@@ -1,7 +1,7 @@
 {#- Based on https://github.com/welpo/tabi/blob/main/templates/partials/language_switcher.html -#}
 
 <li id="language-switcher">
-    <details>
+    <details class="closable">
         <summary class="circle" title="{{ macros_translate::translate(key='language', default='Language', language_strings=language_strings) }}">
             <i class="icon"></i>
         </summary>

templates/partials/nav.html

@@ -19,7 +19,7 @@
 			{%- for link in config.extra.nav.links %}
 				{%- if link.menu and link.menu | length > 0 -%}
 					<li>
-						<details>
+						<details class="closable">
 							<summary>
 								<i class="icon arrow"></i>
 								{{- 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  %}
 				<li id="theme-switcher">
-					<details>
+					<details class="closable">
 						<summary class="circle" title="{{ macros_translate::translate(key='theme', default='Theme', language_strings=language_strings) }}">
 							<i class="icon"></i>
 						</summary>
@@ -107,7 +107,7 @@
 			{%- endif %}
 			{%- if config.feed_filenames | length > 1 and config.extra.nav.show_feed -%}
 				<li id="feed">
-					<details>
+					<details class="closable">
 						<summary class="circle" title="{{ macros_translate::translate(key='feed', default='Feed', language_strings=language_strings) }}">
 							<i class="icon"></i>
 						</summary>