refactor: separate global search css

Former-commit-id: 60adda60f9c8a99adea4daf28c105f6cfe5f6b05

3 files changed, 77 insertions, 79 deletions

diff --git a/assets/css/components/_global-search.scss b/assets/css/components/_global-search.scss
new file mode 100644
index 00000000..db214b35
--- /dev/null
+++ b/assets/css/components/_global-search.scss
@@ -0,0 +1,76 @@
+#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;
+}
+
+#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;
+        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
+    }
+}
+
+#global-search #pagefind input {
+    outline: none
+}
+
+#global-search.shown {
+    z-index: 15;
+    display: flex;
+    animation: fade-in 0.3s ease-in-out;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(1rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index e2f5126f..56cc1976 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -13,3 +13,4 @@
 @import "components/fictions";
 @import "components/library";
 @import "components/footer";
+@import "components/global-search";
diff --git a/layouts/_partials/components/global-search.html b/layouts/_partials/components/global-search.html
index 769d0d2d..4f8ea499 100644
--- a/layouts/_partials/components/global-search.html
+++ b/layouts/_partials/components/global-search.html
@@ -11,85 +11,6 @@
     </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);
-
-            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;
-                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
-            }
-        }
-
-        #global-search #pagefind input {
-            outline: none
-        }
-
-        #global-search.shown {
-            z-index: 15;
-            display: flex;
-            animation: fade-in 0.3s ease-in-out;
-        }
-
-        @keyframes fade-in {
-            from {
-                opacity: 0;
-                transform: translateY(1rem);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    </style>
-
     <script>
       (() => {
         const search = document.getElementById("global-search");