More visually interesting open animations, close details on outside click

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>