refactor: cleanup stylesheet (#1286)
* refactor: cleanup stylesheet * Update assets/scss/partials/article.scss
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
@mixin card-style {
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l1);
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
@import "breakpoints.scss";
|
||||
@import "variables.scss";
|
||||
@import "mixins.scss";
|
||||
@import "grid.scss";
|
||||
|
||||
@import "external/normalize.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"] {
|
||||
|
||||
Reference in New Issue
Block a user