refactor: cleanup stylesheet (#1286)

* refactor: cleanup stylesheet

* Update assets/scss/partials/article.scss
This commit is contained in:
Jimmy
2026-03-05 10:40:13 +01:00
committed by GitHub
parent 3dae60ac7a
commit 88468ad84e
8 changed files with 18 additions and 37 deletions
+1 -5
View File
@@ -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;
}
}
+5
View File
@@ -0,0 +1,5 @@
@mixin card-style {
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius);
}
+5 -11
View File
@@ -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);
+2 -4
View File
@@ -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);
+4 -1
View File
@@ -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;
-10
View File
@@ -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;
+1
View File
@@ -8,6 +8,7 @@
@import "breakpoints.scss";
@import "variables.scss";
@import "mixins.scss";
@import "grid.scss";
@import "external/normalize.scss";
-6
View File
@@ -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"] {