6 files changed, 15 insertions, 66 deletions
diff --git a/assets/css/global.scss b/assets/css/global.scss
index 807b946d..608e7c5c 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -1,5 +1,4 @@
 @import "utils/variables";
-@import "utils/mixins";
 @import "utils/reset";
 @import "utils/utility";
 @import "utils/animation";
diff --git a/assets/css/utils/_mixins.scss b/assets/css/utils/_mixins.scss
deleted file mode 100644
index 21cf87a3..00000000
--- a/assets/css/utils/_mixins.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-
-@mixin small-button {
-    background-color: var(--block-background-color);
-    padding: 0.2rem 0.5rem;
-    text-decoration: none;
-    border-radius: 0.2rem;
-    border: 1px solid var(--background-color);
-    transition: border-color 0.3s ease;
-    &:hover, .active & {
-        border: 1px solid var(--text-color);
-        text-decoration: none;
-    }
-}
-
-.small-button {
-    @include small-button
-}
-
-@mixin card {
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    border-radius: 5px;
-    padding: 1rem 1.35rem;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
-    color: #333;
-    @media (prefers-color-scheme: dark) {
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background-color: #222;
-        color: #ddd;
-    }
-}
-
-@mixin bordered {
-    border-radius: 0.5rem;
-    border: 1px solid var(--border-color);
-}
-
-@mixin framed {
-    border: 0.2rem solid #fff;
-    box-shadow: 0 0.1rem 0.75rem rgba(0,0,0,0.2);
-}
-
-@mixin postCategoryPill {
-    background-color: var(--block-background-color);
-    font-size: 0.9rem;
-    padding: 0.2rem 0.5rem;
-    border-radius: 0.2rem;
-    &:hover {
-        text-decoration: none;
-    }
-}
-
-@mixin roundSticker {
-    background-color: var(--block-background-color);
-    border-radius: 50%;
-    box-shadow: 0 0 0.2rem rgba(0,0,0,.2);
-    padding: 1rem;
-}
diff --git a/assets/css/utils/_reset.scss b/assets/css/utils/_reset.scss
index 82d5e4fc..1aa9081a 100644
--- a/assets/css/utils/_reset.scss
+++ b/assets/css/utils/_reset.scss
@@ -47,7 +47,8 @@ button {
     font-size: 1rem;
     text-align: center;
     box-sizing: border-box;
-    @include bordered;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border-color);
 
     &a {
         text-decoration: none;
diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index 16b6f8c3..a12426ce 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -60,7 +60,3 @@ figure {
 .xerox {
     filter: url(#x);
 }
-
-.round-sticker {
-    @include roundSticker;
-}
diff --git a/layouts/_partials/home/home-nav-item.html b/layouts/_partials/home/home-nav-item.html
index df1e6121..aea3c481 100644
--- a/layouts/_partials/home/home-nav-item.html
+++ b/layouts/_partials/home/home-nav-item.html
@@ -2,10 +2,10 @@
 {{ $link := .link }}
 {{ $text := .text }}
 
-<li class="flex-shrink-0 flex-grow-0 {{ if $active }}font-bolder{{ end }}">
+<li class="flex-shrink-0 flex-grow-0">
     <a data-umami-event="🧭 Click postnav link"
         href="{{ .Site.LanguagePrefix }}/{{ $link }}"
-        class="small-button"
+        class="small-button {{ if $active }}font-extrabold{{ end }}"
     >
         {{ $text }}
     </a>
diff --git a/uno.config.js b/uno.config.js
index 3376f2fe..8c4f6c74 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -52,4 +52,15 @@ export default defineConfig({
       dark: 'media'
     }),
   ],
+  theme: {
+    colors: {
+      blockBg: 'var(--block-background-color)',
+      bg: 'var(--background-color)',
+      textColor: 'var(--text-color)'
+    }
+  },
+  shortcuts: {
+    'small-button': 'bg-blockBg px-2 py-1 no-underline hover:no-underline rounded border border-solid border-bg hover:border-textColor transition',
+    'round-sticker': 'bg-blockBg rounded-full shadow-sm p-4'
+  }
 })