diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/components/_global-search.scss | 76 | ||||
| -rw-r--r-- | assets/css/components/_postlist.scss | 160 | ||||
| -rw-r--r-- | assets/css/global.scss | 3 | ||||
| -rw-r--r-- | assets/css/utils/_animation.scss | 10 |
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); + } +} |