From 2b9d431ff099cd433a6053fc3e6c527433bdee1f Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Mon, 7 Apr 2025 15:44:30 +0800
Subject: refactor: separate css utilities and apply button style to more link

---
 assets/css/utils/_utility.scss | 52 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 assets/css/utils/_utility.scss

(limited to 'assets/css/utils/_utility.scss')

diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
new file mode 100644
index 00000000..a9907339
--- /dev/null
+++ b/assets/css/utils/_utility.scss
@@ -0,0 +1,52 @@
+.dark {
+    .invert-if-dark {
+        filter: invert(1)
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .invert-if-dark {
+        filter: invert(1)
+    }
+}
+
+figure {
+    &.small {
+        width: 300px;
+    }
+    &.card {
+        width: fit-content;
+        img {
+            height: 18rem;
+        }
+    }
+    &.center {
+        margin: 0 auto;
+        figcaption {
+            text-align: center
+        }
+    }
+}
+
+.outbox {
+    display: flex;
+    justify-content: center;
+
+    // Default width
+    width: var(--page-width);
+
+    // Properly interpolate calc() in media queries
+    @media screen and (min-width: 768px) {
+        width: calc(var(--page-width) + 5rem * 2);
+        margin: 0 -5rem;
+    }
+
+    @media screen and (min-width: 1200px) {
+        width: calc(var(--page-width) + 10rem * 2);
+        margin: 0 -10rem;
+    }
+}
+
+.font-mono {
+    font-family: var(--mono-font-family);
+}
-- 
cgit v1.2.3