rewrite layouts

1 files changed, 26 insertions, 0 deletions

diff --git a/layouts/partials/adaptive_details.html b/layouts/partials/adaptive_details.html
new file mode 100644
index 0000000..2180325
--- /dev/null
+++ b/layouts/partials/adaptive_details.html
@@ -0,0 +1,26 @@
+<script>
+function setDetailsOpen() {
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+
+    // Adjust this value based on your preferred viewport size for default open
+    const viewportThreshold = 768;
+
+    // Get all details elements
+    const detailsElements = document.querySelectorAll('details');
+
+    // Loop through details elements and set open attribute conditionally
+    detailsElements.forEach(function(details) {
+        if (viewportWidth >= viewportThreshold) {
+            details.setAttribute('open', true);
+        } else {
+            details.removeAttribute('open');
+        }
+    });
+}
+
+// Initial call on page load
+setDetailsOpen();
+
+// Attach the function to the window resize event to handle changes dynamically
+window.addEventListener('resize', setDetailsOpen);
+</script>