From 88468ad84ee64cf3c0486596e7271c27011717a5 Mon Sep 17 00:00:00 2001
From: Jimmy <jimmy@cai.im>
Date: Thu, 5 Mar 2026 10:40:13 +0100
Subject: [PATCH] refactor: cleanup stylesheet (#1286)

* refactor: cleanup stylesheet

* Update assets/scss/partials/article.scss
---
 assets/scss/grid.scss                    |  6 +-----
 assets/scss/mixins.scss                  |  5 +++++
 assets/scss/partials/article.scss        | 16 +++++-----------
 assets/scss/partials/cookies.scss        |  6 ++----
 assets/scss/partials/layout/article.scss |  5 ++++-
 assets/scss/partials/menu.scss           | 10 ----------
 assets/scss/style.scss                   |  1 +
 assets/scss/variables.scss               |  6 ------
 8 files changed, 18 insertions(+), 37 deletions(-)
 create mode 100644 assets/scss/mixins.scss

diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss
index 33dba8b..44b0b48 100644
--- a/assets/scss/grid.scss
+++ b/assets/scss/grid.scss
@@ -60,14 +60,10 @@
     display: flex;
     flex-direction: row;
 
-    &.column {
-        flex-direction: column;
-    }
-
     &.on-phone--column {
         flex-direction: column;
         @include respond(md) {
-            flex-direction: unset;
+            flex-direction: row;
         }
     }
 
diff --git a/assets/scss/mixins.scss b/assets/scss/mixins.scss
new file mode 100644
index 0000000..d905f66
--- /dev/null
+++ b/assets/scss/mixins.scss
@@ -0,0 +1,5 @@
+@mixin card-style {
+    background-color: var(--card-background);
+    box-shadow: var(--shadow-l1);
+    border-radius: var(--card-border-radius);
+}
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 2388ba8..b256ed0 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -7,9 +7,7 @@
     article {
         display: flex;
         flex-direction: column;
-        background-color: var(--card-background);
-        box-shadow: var(--shadow-l1);
-        border-radius: var(--card-border-radius);
+        @include card-style;
         overflow: hidden;
 
         transition: box-shadow 0.3s ease;
@@ -59,7 +57,7 @@
         color: var(--card-text-color-main);
 
         &:hover {
-            color: var(--card-text-color-main);
+            opacity: 0.8;
         }
     }
 }
@@ -144,9 +142,7 @@
 
 /* Compact style article list */
 .article-list--compact {
-    border-radius: var(--card-border-radius);
-    box-shadow: var(--shadow-l1);
-    background-color: var(--card-background);
+    @include card-style;
     --image-size: 50px;
 
     @include respond(md) {
@@ -204,14 +200,12 @@
 /* Tile style article list */
 .article-list--tile {
     article {
-        border-radius: var(--card-border-radius);
-        overflow: hidden;
         position: relative;
         width: 250px;
         height: 150px;
-        box-shadow: var(--shadow-l1);
+        @include card-style;
+        overflow: hidden;
         transition: box-shadow 0.3s ease;
-        background-color: var(--card-background);
 
         &:hover {
             box-shadow: var(--shadow-l2);
diff --git a/assets/scss/partials/cookies.scss b/assets/scss/partials/cookies.scss
index 9046bee..4a5a7c5 100644
--- a/assets/scss/partials/cookies.scss
+++ b/assets/scss/partials/cookies.scss
@@ -16,7 +16,7 @@
     margin: 0 auto;
     background: var(--card-background);
     border-radius: var(--card-border-radius);
-    box-shadow: var(--shadow-l3);
+    box-shadow: var(--shadow-l2);
     padding: var(--card-padding);
     display: flex;
     flex-direction: column;
@@ -70,7 +70,6 @@
     }
 
     @include respond(md) {
-        width: auto;
         margin-left: auto;
         align-self: center;
     }
@@ -186,8 +185,7 @@
 
 // Comments placeholder when consent not given
 .consent-placeholder {
-    background: var(--card-background);
-    border-radius: var(--card-border-radius);
+    @include card-style;
     padding: var(--card-padding);
     text-align: center;
     color: var(--card-text-color-secondary);
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index af038ad..cd3fc03 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -418,6 +418,10 @@
         padding: var(--card-padding);
         position: relative;
 
+        pre {
+            background-color: transparent;
+        }
+
         &:hover {
             .copyCodeButton {
                 opacity: 1;
@@ -430,7 +434,6 @@
         }
 
         pre {
-            margin: initial;
             padding: 0;
             margin: 0;
             width: auto;
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index b9cb1f9..c1474ad 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -26,16 +26,6 @@
     opacity: 0.7;
 }
 
-.hamburger.is-active:hover {
-    opacity: 0.7;
-}
-
-.hamburger.is-active .hamburger-inner,
-.hamburger.is-active .hamburger-inner::before,
-.hamburger.is-active .hamburger-inner::after {
-    background-color: #000;
-}
-
 .hamburger-box {
     width: 30px;
     height: 24px;
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 2f4b369..a7a6c7a 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -8,6 +8,7 @@
 
 @import "breakpoints.scss";
 @import "variables.scss";
+@import "mixins.scss";
 @import "grid.scss";
 
 @import "external/normalize.scss";
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index c67d9de..21ec4cd 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -120,9 +120,6 @@
     --link-background-opacity: 0.5;
     --link-background-opacity-hover: 0.7;
 
-    --pre-background-color: #272822;
-    --pre-text-color: #f8f8f2;
-
     --code-background-color: rgba(0, 0, 0, 0.12);
     --code-text-color: #808080;
 
@@ -149,9 +146,6 @@
 :root {
     --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
     --shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
-        0px 0px 1px rgba(0, 0, 0, 0.04);
 }
 
 [data-scheme="light"] {