From 9e42d8cd35e91dd44dbf06ac5bb986e8a1e873c0 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Wed, 9 Sep 2020 16:14:30 +0200
Subject: [PATCH] refactor(scss): remove helper/shadow. Expose shadow style in
CSS variables
---
assets/scss/helper/shadow.scss | 12 ------------
assets/scss/partials/article.scss | 10 +++++-----
assets/scss/partials/comments/provider/disqus.scss | 2 +-
assets/scss/partials/layout/404.scss | 2 +-
assets/scss/partials/layout/article.scss | 6 +++---
assets/scss/partials/layout/taxonomy.scss | 2 +-
assets/scss/partials/menu.scss | 2 +-
assets/scss/partials/pagination.scss | 2 +-
assets/scss/partials/sidebar.scss | 4 ++--
assets/scss/partials/widgets.scss | 8 ++++----
assets/scss/style.scss | 4 +---
assets/scss/variables.scss | 12 ++++++++++++
12 files changed, 32 insertions(+), 34 deletions(-)
delete mode 100644 assets/scss/helper/shadow.scss
diff --git a/assets/scss/helper/shadow.scss b/assets/scss/helper/shadow.scss
deleted file mode 100644
index ad326f9..0000000
--- a/assets/scss/helper/shadow.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@mixin box_shadow($level) {
- @if $level == 1 {
- box-shadow: 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);
- } @else if $level == 2 {
- box-shadow: 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);
- } @else if $level == 3 {
- box-shadow: 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);
- } @else if $level == 4 {
- box-shadow: 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);
- }
-}
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 6aed5be..bcc10c1 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -7,14 +7,14 @@
display: flex;
flex-direction: column;
background-color: var(--card-background);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius);
overflow: hidden;
transition: box-shadow .3s ease;
&:hover {
- @include box_shadow(2);
+ box-shadow: var(--shadow-l2);
}
&:not(:last-of-type) {
@@ -157,7 +157,7 @@
/* Compact style article list */
.article-list--compact {
border-radius: var(--card-border-radius);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
background-color: var(--card-background);
& + .pagination {
@@ -205,12 +205,12 @@
position: relative;
height: 350px;
width: 250px;
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
transition: box-shadow 0.3s ease;
background-color: var(--card-background);
&:hover {
- @include box_shadow(2);
+ box-shadow: var(--shadow-l2);
}
&.has-image {
diff --git a/assets/scss/partials/comments/provider/disqus.scss b/assets/scss/partials/comments/provider/disqus.scss
index a57c27d..b716351 100644
--- a/assets/scss/partials/comments/provider/disqus.scss
+++ b/assets/scss/partials/comments/provider/disqus.scss
@@ -1,6 +1,6 @@
.disqus-container {
background-color: var(--card-background);
border-radius: var(--card-border-radius);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
padding: var(--content-padding);
}
diff --git a/assets/scss/partials/layout/404.scss b/assets/scss/partials/layout/404.scss
index 8bdcca2..c1c0db1 100644
--- a/assets/scss/partials/layout/404.scss
+++ b/assets/scss/partials/layout/404.scss
@@ -1,6 +1,6 @@
.not-found-card {
background-color: var(--card-background);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius);
padding: var(--content-padding);
}
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 4504895..5caf8d3 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -46,7 +46,7 @@
article {
background: var(--card-background);
border-radius: var(--card-border-radius);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
overflow: hidden;
&.main-article {
@@ -134,10 +134,10 @@
transition: box-shadow 0.3s ease;
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
&:hover {
- @include box_shadow(2);
+ box-shadow: var(--shadow-l2);
}
svg {
diff --git a/assets/scss/partials/layout/taxonomy.scss b/assets/scss/partials/layout/taxonomy.scss
index 3318457..d594b23 100644
--- a/assets/scss/partials/layout/taxonomy.scss
+++ b/assets/scss/partials/layout/taxonomy.scss
@@ -10,7 +10,7 @@
border-radius: var(--card-border-radius);
background-color: var(--card-background);
padding: var(--small-card-padding);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
margin-bottom: var(--section-separation);
display: flex;
align-items: center;
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 36a261a..5771d22 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -136,7 +136,7 @@
background-color: var(--card-background);
margin-top: 0;
padding: 15px 0;
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
display: none;
&.show {
diff --git a/assets/scss/partials/pagination.scss b/assets/scss/partials/pagination.scss
index ef6b2bd..a6c6882 100644
--- a/assets/scss/partials/pagination.scss
+++ b/assets/scss/partials/pagination.scss
@@ -1,7 +1,7 @@
.pagination {
display: flex;
background-color: var(--card-background);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius);
overflow: hidden;
flex-wrap: wrap;
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 973e8ea..1166a58 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -83,7 +83,7 @@
width: 100%;
height: 100%;
border-radius: 100%;
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
}
.emoji {
@@ -97,7 +97,7 @@
text-align: center;
font-size: 20px;
background-color: var(--card-background);
- @include box_shadow(2);
+ box-shadow: var(--shadow-l2);
@media (max-width: $on-desktop-large) {
width: 40px;
diff --git a/assets/scss/partials/widgets.scss b/assets/scss/partials/widgets.scss
index d6a572b..3874e7d 100644
--- a/assets/scss/partials/widgets.scss
+++ b/assets/scss/partials/widgets.scss
@@ -26,7 +26,7 @@
a {
background: var(--card-background);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
border-radius: var(--tag-border-radius);
padding: 8px 20px;
@@ -37,7 +37,7 @@
transition: box-shadow 0.3s ease;
&:hover {
- @include box_shadow(2);
+ box-shadow: var(--shadow-l2);
}
}
}
@@ -51,12 +51,12 @@
background-color: var(--card-background);
padding: 15px 25px;
border-radius: var(--card-border-radius);
- @include box_shadow(1);
+ box-shadow: var(--shadow-l1);
display: flex;
transition: box-shadow 0.3s ease;
&:hover {
- @include box_shadow(2);
+ box-shadow: var(--shadow-l2);
}
@media (max-width: $on-desktop-large) {
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 7fee808..61419c4 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,7 +1,5 @@
@import "breakpoints.scss";
-
@import "variables.scss";
-@import "helper/shadow.scss";
@import "external/normalize.scss";
@@ -112,8 +110,8 @@ main.main {
padding: 15px 20px;
border-radius: var(--card-border-radius);
line-height: 1.75;
- @include box_shadow(2);
color: var(--card-text-color-secondary);
+ box-shadow: var(--shadow-l2);
@media (max-width: $on-phone) {
max-width: 100vw;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 10e9707..5a9ecf8 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -81,6 +81,18 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--tr-even-background-color: #efefee;
}
+/*
+* Shadow style
+* Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker
+*/
+: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);
+}
+
@media (prefers-color-scheme: dark) {
:root {
--body-background: #303030;