refactor: replace _footer.scss and _shortcode.scss with UnoCSS

4 files changed, 56 insertions, 292 deletions

diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
deleted file mode 100644
index d4996ab7..00000000
--- a/assets/css/components/_footer.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-#footer {
-    margin: 2rem auto;
-    font-family: var(--mono-font-family);
-
-    @media screen and (min-width: 768px) {
-        width: var(--page-width);
-        display: flex;
-        justify-content: space-between;
-    }
-
-    #footer-copyright {
-        .word-count {
-            font-family: var(--serif-font-family);
-            font-size: .9rem;
-            color: var(--secondary-text-color)
-        }
-    }
-
-    #footer-links {
-        display: flex;
-        flex-direction: column;
-
-        @media screen and (min-width: 768px) {
-            align-items: flex-end;
-        }
-
-        ul.footer-navigation {
-            list-style: none;
-            display: flex;
-            gap: 0.5rem;
-            padding-inline-start: 0;
-            margin: .5rem 0;
-
-            @media screen and (min-width: 768px) {
-                justify-content: flex-end;
-            }
-
-            li {
-                display: inline-flex;
-                align-items: center;
-                img, svg {
-                    height: 1rem;
-                    width: auto;
-                    display: inline-block;
-                    border-radius: 100%;
-                    filter: grayscale(1);
-                    @media (prefers-color-scheme: dark) {
-                        filter: grayscale(1) invert(1);
-                    }
-                }
-            }
-
-            /* internal links */
-            &.footer-navigation-internal {
-                gap: 0.25rem;
-                li:not(:last-child)::after {
-                    color: var(--secondary-text-color);
-                    content: '/';
-                    margin-left: 0.25rem;
-                }
-            }
-        }
-    }
-}
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index e93f9b77..10c7900d 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -97,3 +97,59 @@
         }
     }
 }
+
+/* gallery shortcode */
+
+.gallery {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  gap: 0.5rem;
+  white-space: nowrap;
+
+  & > figure, & > a:has(> figure) {
+    margin: 0;
+    flex-shrink: 0;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1);
+    img {
+      height: 20rem;
+      display: block;
+      border-radius: 4px;
+      margin: 0;
+    }
+    figcaption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        padding: 0.35rem;
+        h4 {
+            font-size: 0.8rem;
+            margin: 0;
+            text-align: left;
+            width: fit-content;
+            color: var(--text-color);
+            background-color: rgba(var(--block-background-color-rgb), 0.75);
+            backdrop-filter: blur(0.5rem);
+            padding: 0.2rem 0.35rem;
+            border-radius: 3px;
+            line-height: 1.2;
+        }
+    }
+  }
+  & > p { display: none }
+
+  &.center {
+      justify-content: center;
+  }
+  &.full-width {
+      & > figure {
+          flex-shrink: unset;
+          img {
+              width: 100%;
+          }
+      }
+  }
+}
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
deleted file mode 100644
index 5c4e893a..00000000
--- a/assets/css/components/_shortcodes.scss
+++ /dev/null
@@ -1,226 +0,0 @@
-/* callouts */
-
-.callout {
-  background-color: rgba(var(--block-background-color-rgb), 0.5);
-  border-radius: .25rem;
-  padding: 1rem 1.25rem;
-  line-height: 1.75;
-
-  display: flex;
-  gap: .75rem;
-
-  margin: 0.5rem 0;
-}
-
-.callout .callout-content p {
-  margin: 0;
-}
-
-/* quote shortcode */
-
-.quote-card {
-  --card-bg: rgba(255,255,255,0.25);
-  --card-bg-lighter: rgba(255,255,255,0.1);
-  --card-noise: rgba(255,255,255,0.04);
-
-  font-size: 1.5rem;
-  font-style: italic;
-  text-align: center;
-  margin: 5rem 3rem;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
-  transform: rotate(3deg);
-  background-color: rgba(255,255,255,0.35);
-
-  background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)),
-    repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px,
-    repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px;
-  background-blend-mode: normal, difference;
-}
-
-@media screen and (max-width: 768px) {
-  .quote-card {
-    font-size: 1.2rem;
-    margin: 3rem 1rem;
-  }
-}
-
-/* book showcase shortcode */
-
-.book-showcase {
-    display: flex;
-    gap: 2rem;
-    line-height: 1.5;
-    margin: 2rem 0
-}
-
-.book-showcase .book-cover {
-    width: 25%;
-    flex-shrink: 0;
-}
-
-.book-description-header .book-title {
-    margin: 0
-}
-
-.book-description-header p {
-    font-size: 1rem;
-    margin: 0.1rem
-}
-
-/* gallery shortcode */
-
-.gallery {
-  display: flex;
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  gap: 0.5rem;
-  white-space: nowrap;
-
-  & > figure, & > a:has(> figure) {
-    margin: 0;
-    flex-shrink: 0;
-    display: inline-block;
-    max-width: 100%;
-    position: relative;
-    box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1);
-    img {
-      height: 20rem;
-      display: block;
-      border-radius: 4px;
-      margin: 0;
-    }
-    figcaption {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        padding: 0.35rem;
-        h4 {
-            font-size: 0.8rem;
-            margin: 0;
-            text-align: left;
-            width: fit-content;
-            color: var(--text-color);
-            background-color: rgba(var(--block-background-color-rgb), 0.75);
-            backdrop-filter: blur(0.5rem);
-            padding: 0.2rem 0.35rem;
-            border-radius: 3px;
-            line-height: 1.2;
-        }
-    }
-  }
-  & > p { display: none }
-
-  &.center {
-      justify-content: center;
-  }
-  &.full-width {
-      & > figure {
-          flex-shrink: unset;
-          img {
-              width: 100%;
-          }
-      }
-  }
-}
-
-/* sidenote shortcode */
-
-@media screen and (max-width: 1199px) {
-    .sidenote {
-        border: 1px solid var(--block-background-color);
-        padding: .75rem 1rem;
-        border-radius: 0.5rem;
-        line-height: 1.5;
-    }
-    .sidenote-title {
-        font-size: 1rem;
-        text-align: right;
-        font-style: italic
-    }
-}
-
-@media screen and (min-width: 1200px) {
-    .sidenote {
-        position: absolute;
-        left: calc(50% + var(--page-width) / 2);
-        margin-left: 2rem;
-        max-width: 20rem
-    }
-}
-
-.sidenote-title {
-    margin: 0.5rem 0
-}
-
-.sidenote-content {
-    font-size: 1rem
-}
-
-/* blog links */
-
-.linkroll {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-a.blog-link {
-  position: relative;
-  background-color: var(--block-background-color);
-  text-decoration: none;
-  color: var(--text-color);
-  padding: 1rem 2rem;
-  padding-right: 4rem;
-  border-radius: 1rem;
-  width: calc(50% - 2rem);
-  box-sizing: border-box;
-  overflow: hidden;
-
-  h4, p {
-    margin: 0;
-    font-size: 1.2rem;
-  }
-
-  p {
-    line-height: 1.5;
-  }
-
-  .link-content {
-    z-index: 10;
-  }
-
-  img {
-    --size: 5rem;
-    display: block;
-    position: absolute;
-    right: -1rem;
-    bottom: -1rem;
-    width: var(--size);
-    height: var(--size);
-    border-radius: 100%;
-    z-index: 0;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  a.blog-link {
-    font-size: 1.2rem;
-    padding: 0.5rem 1rem;
-    padding-right: 2rem;
-    width: 100%;
-  }
-}
-
-a.podcast-link {
-    text-decoration: none;
-    color: inherit;
-    width: calc(25% - 1rem);
-    .link-image {
-        overflow: hidden;
-        border-radius: 5px;
-        img { margin: 0 }
-    }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index 51261ee8..2cfdb01f 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -8,7 +8,5 @@
 @import "components/pages";
 @import "components/taxonomy";
 @import "components/postlist";
-@import "components/shortcodes";
 @import "components/card";
-@import "components/footer";
 @import "components/global-search";