refactor: put global search elements in one container

to keep DOM clean and tidy

1 files changed, 114 insertions, 112 deletions

diff --git a/layouts/partials/components/global-search.html b/layouts/partials/components/global-search.html
index c6d76fa8..ab4ec5ff 100644
--- a/layouts/partials/components/global-search.html
+++ b/layouts/partials/components/global-search.html
@@ -1,133 +1,135 @@
-<div id="global-search">
-    <div id="global-search-close">×</div>
-    {{ partial "components/pagefind" . }}
-</div>
-<div id="global-search-overlay"></div>
+<div id="global-search-container">
+    <div id="global-search">
+        <div id="global-search-close">×</div>
+        {{ partial "components/pagefind" . }}
+    </div>
+    <div id="global-search-overlay"></div>
 
-<style>
-    #global-search-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(250,250,250,0.75);
-        @media (prefers-color-scheme: dark) {
-            background-color: rgba(30,30,30,0.75);
-        }
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
+    <style>
+        #global-search-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(250,250,250,0.75);
+            @media (prefers-color-scheme: dark) {
+                background-color: rgba(30,30,30,0.75);
+            }
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
 
-        z-index: -10;
-        opacity: 0;
-        transition-duration: 0.3s;
-        transition-property: opacity;
-    }
-    #global-search-overlay.shown {
-        z-index: 10;
-        opacity: 1;
-    }
+            z-index: -10;
+            opacity: 0;
+            transition-duration: 0.3s;
+            transition-property: opacity;
+        }
+        #global-search-overlay.shown {
+            z-index: 10;
+            opacity: 1;
+        }
 
-    #global-search {
-        position: fixed;
-        z-index: -10;
-        display: none;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        align-items: center;
-        justify-content: center;
-        #global-search-close {
-            position: absolute;
+        #global-search {
+            position: fixed;
+            z-index: -10;
+            display: none;
             top: 0;
+            left: 0;
             right: 0;
-            padding: 0 1rem;
-            font-size: 3rem;
-            cursor: pointer;
+            bottom: 0;
+            align-items: center;
+            justify-content: center;
+            #global-search-close {
+                position: absolute;
+                top: 0;
+                right: 0;
+                padding: 0 1rem;
+                font-size: 3rem;
+                cursor: pointer;
+            }
         }
-    }
-
-    #global-search #pagefind {
-        max-height: 90vh;
-        overflow-y: auto;
-        width: 100%;
-        margin: 1rem;
-    }
 
-    @media screen and (min-width: 768px) {
         #global-search #pagefind {
-            width: 600px
+            max-height: 90vh;
+            overflow-y: auto;
+            width: 100%;
+            margin: 1rem;
         }
-    }
 
-    #global-search #pagefind input {
-        outline: none
-    }
+        @media screen and (min-width: 768px) {
+            #global-search #pagefind {
+                width: 600px
+            }
+        }
 
-    #global-search.shown {
-        z-index: 15;
-        display: flex;
-        animation: fade-in 0.3s ease-in-out;
-    }
+        #global-search #pagefind input {
+            outline: none
+        }
 
-    @keyframes fade-in {
-        from {
-            opacity: 0;
-            transform: translateY(1rem);
+        #global-search.shown {
+            z-index: 15;
+            display: flex;
+            animation: fade-in 0.3s ease-in-out;
         }
-        to {
-            opacity: 1;
-            transform: translateY(0);
+
+        @keyframes fade-in {
+            from {
+                opacity: 0;
+                transform: translateY(1rem);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
-    }
-</style>
+    </style>
 
-<script>
-  (() => {
-    const search = document.getElementById("global-search");
-    const overlay = document.getElementById("global-search-overlay");
+    <script>
+      (() => {
+        const search = document.getElementById("global-search");
+        const overlay = document.getElementById("global-search-overlay");
 
-    const turnOn = () => {
-      search.classList.add("shown");
-      overlay.classList.add("shown");
-    };
-    const turnOff = () => {
-      search.classList.remove("shown");
-      overlay.classList.remove("shown");
-    };
+        const turnOn = () => {
+          search.classList.add("shown");
+          overlay.classList.add("shown");
+        };
+        const turnOff = () => {
+          search.classList.remove("shown");
+          overlay.classList.remove("shown");
+        };
 
-    window.addEventListener("keydown", (event) => {
-      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        // Open the popup window
-        if (search.classList.contains("shown")) {
-          turnOff()
-        } else {
-          turnOn();
-        }
-        // Focus on the search input
-        const input = search.querySelector("input");
-        input.focus();
-      }
+        window.addEventListener("keydown", (event) => {
+          if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            // Open the popup window
+            if (search.classList.contains("shown")) {
+              turnOff()
+            } else {
+              turnOn();
+            }
+            // Focus on the search input
+            const input = search.querySelector("input");
+            input.focus();
+          }
 
-      if (event.key === 'Escape') {
-        turnOff();
-      }
-    });
+          if (event.key === 'Escape') {
+            turnOff();
+          }
+        });
 
-    // trigger by clicking instruction text
-    // to allow mobile users to search
-    const searchInstruction = document.getElementById("search-instruction");
-    if (searchInstruction) {
-      searchInstruction.addEventListener("click", turnOn);
-    }
+        // trigger by clicking instruction text
+        // to allow mobile users to search
+        const searchInstruction = document.getElementById("search-instruction");
+        if (searchInstruction) {
+          searchInstruction.addEventListener("click", turnOn);
+        }
 
-    // double-click to turn off search
-    // in case esc and ctrl/cmd+k cannot be used
-    search.addEventListener("dblclick", turnOff);
+        // double-click to turn off search
+        // in case esc and ctrl/cmd+k cannot be used
+        search.addEventListener("dblclick", turnOff);
 
-    const closeButton = document.getElementById("global-search-close");
-    closeButton.addEventListener("click", turnOff);
-  })();
-</script>
+        const closeButton = document.getElementById("global-search-close");
+        closeButton.addEventListener("click", turnOff);
+      })();
+    </script>
+</div>