refactor: cleanup stylesheet (#1286)

* refactor: cleanup stylesheet

* Update assets/scss/partials/article.scss

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

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

assets/scss/partials/article.scss

@@ -7,9 +7,7 @@
     article {
         display: flex;
         flex-direction: column;
-        background-color: var(--card-background);
+        @include card-style;
-        box-shadow: var(--shadow-l1);
-        border-radius: var(--card-border-radius);
         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);
+    @include card-style;
-    box-shadow: var(--shadow-l1);
-    background-color: var(--card-background);
     --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);

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);
+    @include card-style;
-    border-radius: var(--card-border-radius);
     padding: var(--card-padding);
     text-align: center;
     color: var(--card-text-color-secondary);

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;

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;

assets/scss/style.scss

@@ -8,6 +8,7 @@
 
 @import "breakpoints.scss";
 @import "variables.scss";
+@import "mixins.scss";
 @import "grid.scss";
 
 @import "external/normalize.scss";

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"] {