refactor: cleanup stylesheet (#1286)

* refactor: cleanup stylesheet

* Update assets/scss/partials/article.scss

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

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

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;