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

Former-commit-id: 272a67d7a8b8752dda3cddf44482e9d85de2c4d0

1 files changed, 56 insertions, 0 deletions

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%;
+          }
+      }
+  }
+}