diff options
| -rw-r--r-- | assets/css/components/_global-search.scss | 76 | ||||
| -rw-r--r-- | assets/css/global.scss | 1 | ||||
| -rw-r--r-- | layouts/_partials/components/global-search.html | 79 |
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"); |