refactor: global search UnoCSS-ify, rename postnav to home-nav

Former-commit-id: 43ac3a5b42166e77373ae2495678ab5ac888ae37

4 files changed, 11 insertions, 238 deletions

diff --git a/assets/css/components/_global-search.scss b/assets/css/components/_global-search.scss
deleted file mode 100644
index db214b35..00000000
--- a/assets/css/components/_global-search.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-#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/components/_postlist.scss b/assets/css/components/_postlist.scss
deleted file mode 100644
index 57c6b18f..00000000
--- a/assets/css/components/_postlist.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-.index-section-morelink {
-    @include small-button;
-
-    &::after {
-        content: " →";
-    }
-}
-
-/* Post List Styles */
-
-.posts-list {
-    display: flex;
-    flex-direction: column;
-    margin: 1rem 0;
-    .posts-item {
-        overflow: hidden;
-        width: 100%;
-        margin: 0.5rem 0;
-        header {
-            width: 100%;
-
-            @media screen and (min-width: 768px) {
-                display: flex;
-                justify-content: space-between;
-            }
-
-            .posts-item-meta {
-                p, time {
-                    color: var(--secondary-text-color);
-                }
-                time {
-                    font-family: var(--mono-font-family);
-                }
-                a.tag {
-                    font-size: 0.8rem;
-                    color: var(--secondary-text-color);
-                }
-                .posts-item-title {
-                    filter: url(#xs);
-                    .posts-item-title-pill {
-                        font-size: 1rem;
-                        font-weight: normal;
-                        color: var(--secondary-text-color)
-                    }
-                }
-            }
-
-            .posts-item-category {
-                margin: 0.5rem 0;
-            }
-        }
-        .posts-item-summary {
-            h1, h2, h3, h4, h5, h6 {
-                display: none;
-            }
-            iframe {
-                margin: 1rem 0;
-            }
-            font-size: 1.1rem;
-        }
-
-        position: relative;
-        .posts-item-icon {
-            position: absolute;
-            top: 0;
-            right: 0;
-            opacity: 0.25;
-            z-index: -1;
-            transform: rotateY(180deg) rotate(-25deg);
-            img {
-                width: 8rem;
-                height: 8rem;
-            }
-        }
-    }
-}
-
-#posts-list-navigation {
-    ul {
-        position: relative;
-        width: 100%;
-        padding-inline-start: 0;
-        display: flex;
-        list-style: none;
-        gap: 0.2rem;
-        li {
-            flex-shrink: 0;
-            flex-grow: 0;
-
-            &.active {
-                font-weight: bolder
-            }
-            a:not(.icon-link) {
-                @include small-button;
-            }
-
-            .icon-link {
-                opacity: 0.5;
-                transition: opacity 0.3s;
-            }
-            .icon-link:hover,
-            &.active .icon-link {
-                opacity: 1;
-            }
-        }
-
-        #search-instruction {
-            font-size: 0.9rem;
-            color: var(--secondary-text-color);
-            margin-left: 0.5rem;
-
-        }
-
-        .list-decoration {
-            position: absolute;
-            right: 0;
-            img {
-                opacity: 0.55;
-                height: 2rem;
-                width: 2rem;
-            }
-        }
-    }
-}
-
-.term-list {
-    .term-list-posts {
-        &:not(ol) {
-            list-style: none;
-        }
-        padding-inline-start: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        li {
-            display: flex;
-            justify-content: space-between;
-            font-size: 1.1rem;
-            time {
-                font-size: 0.9rem;
-                font-family: var(--mono-font-family);
-                color: var(--secondary-text-color);
-                flex-shrink: 0;
-            }
-            .posts-subtitle {
-                color: var(--secondary-text-color);
-            }
-        }
-    }
-}
-
-.taxonomy-description hr {
-    margin: 0.25rem 0;
-}
-
-.posts-item-category {
-    a {
-        @include postCategoryPill;
-    }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index a7149e00..c4fe59a1 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -2,7 +2,6 @@
 @import "utils/mixins";
 @import "utils/reset";
 @import "utils/utility";
+@import "utils/animation";
 
 @import "components/markdown";
-@import "components/postlist";
-@import "components/global-search";
diff --git a/assets/css/utils/_animation.scss b/assets/css/utils/_animation.scss
new file mode 100644
index 00000000..ccf86c59
--- /dev/null
+++ b/assets/css/utils/_animation.scss
@@ -0,0 +1,10 @@
+@keyframes fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(1rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}