KureShisen/Hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(scss): remove helper/shadow. Expose shadow style in CSS variables

Browse Source
This commit is contained in:
Jimmy Cai 2020-09-09 16:14:30 +02:00
parent 190475dbad
commit 9e42d8cd35
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
12 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/scss/helper/shadow.scss
View File

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

10
assets/scss/partials/article.scss
View File

@ -7,14 +7,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--card-background); background-color: var(--card-background);
@include box_shadow(1); box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
overflow: hidden; overflow: hidden;
transition: box-shadow .3s ease; transition: box-shadow .3s ease;
&:hover { &:hover {
@include box_shadow(2); box-shadow: var(--shadow-l2);
} }
&:not(:last-of-type) { &:not(:last-of-type) {
@ -157,7 +157,7 @@
/* Compact style article list */ /* Compact style article list */
.article-list--compact { .article-list--compact {
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
@include box_shadow(1); box-shadow: var(--shadow-l1);
background-color: var(--card-background); background-color: var(--card-background);
& + .pagination { & + .pagination {
@ -205,12 +205,12 @@
position: relative; position: relative;
height: 350px; height: 350px;
width: 250px; width: 250px;
@include box_shadow(1); box-shadow: var(--shadow-l1);
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
background-color: var(--card-background); background-color: var(--card-background);
&:hover { &:hover {
@include box_shadow(2); box-shadow: var(--shadow-l2);
} }
&.has-image { &.has-image {

2
assets/scss/partials/comments/provider/disqus.scss
View File

@ -1,6 +1,6 @@
.disqus-container { .disqus-container {
background-color: var(--card-background); background-color: var(--card-background);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
@include box_shadow(1); box-shadow: var(--shadow-l1);
padding: var(--content-padding); padding: var(--content-padding);
} }

2
assets/scss/partials/layout/404.scss
View File

@ -1,6 +1,6 @@
.not-found-card { .not-found-card {
background-color: var(--card-background); background-color: var(--card-background);
@include box_shadow(1); box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
padding: var(--content-padding); padding: var(--content-padding);
} }

6
assets/scss/partials/layout/article.scss
View File

@ -46,7 +46,7 @@
article { article {
background: var(--card-background); background: var(--card-background);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
@include box_shadow(1); box-shadow: var(--shadow-l1);
overflow: hidden; overflow: hidden;
&.main-article { &.main-article {
@ -134,10 +134,10 @@
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
@include box_shadow(1); box-shadow: var(--shadow-l1);
&:hover { &:hover {
@include box_shadow(2); box-shadow: var(--shadow-l2);
} }
svg { svg {

2
assets/scss/partials/layout/taxonomy.scss
View File

@ -10,7 +10,7 @@
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
background-color: var(--card-background); background-color: var(--card-background);
padding: var(--small-card-padding); padding: var(--small-card-padding);
@include box_shadow(1); box-shadow: var(--shadow-l1);
margin-bottom: var(--section-separation); margin-bottom: var(--section-separation);
display: flex; display: flex;
align-items: center; align-items: center;

2
assets/scss/partials/menu.scss
View File

@ -136,7 +136,7 @@
background-color: var(--card-background); background-color: var(--card-background);
margin-top: 0; margin-top: 0;
padding: 15px 0; padding: 15px 0;
@include box_shadow(1); box-shadow: var(--shadow-l1);
display: none; display: none;
&.show { &.show {

2
assets/scss/partials/pagination.scss
View File

@ -1,7 +1,7 @@
.pagination { .pagination {
display: flex; display: flex;
background-color: var(--card-background); background-color: var(--card-background);
@include box_shadow(1); box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
overflow: hidden; overflow: hidden;
flex-wrap: wrap; flex-wrap: wrap;

4
assets/scss/partials/sidebar.scss
View File

@ -83,7 +83,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 100%; border-radius: 100%;
@include box_shadow(1); box-shadow: var(--shadow-l1);
} }
.emoji { .emoji {
@ -97,7 +97,7 @@
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
background-color: var(--card-background); background-color: var(--card-background);
@include box_shadow(2); box-shadow: var(--shadow-l2);
@media (max-width: $on-desktop-large) { @media (max-width: $on-desktop-large) {
width: 40px; width: 40px;

8
assets/scss/partials/widgets.scss
View File

@ -26,7 +26,7 @@
a { a {
background: var(--card-background); background: var(--card-background);
@include box_shadow(1); box-shadow: var(--shadow-l1);
border-radius: var(--tag-border-radius); border-radius: var(--tag-border-radius);
padding: 8px 20px; padding: 8px 20px;
@ -37,7 +37,7 @@
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
&:hover { &:hover {
@include box_shadow(2); box-shadow: var(--shadow-l2);
} }
} }
} }
@ -51,12 +51,12 @@
background-color: var(--card-background); background-color: var(--card-background);
padding: 15px 25px; padding: 15px 25px;
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
@include box_shadow(1); box-shadow: var(--shadow-l1);
display: flex; display: flex;
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
&:hover { &:hover {
@include box_shadow(2); box-shadow: var(--shadow-l2);
} }
@media (max-width: $on-desktop-large) { @media (max-width: $on-desktop-large) {

4
assets/scss/style.scss
View File

@ -1,7 +1,5 @@
@import "breakpoints.scss"; @import "breakpoints.scss";
@import "variables.scss"; @import "variables.scss";
@import "helper/shadow.scss";
@import "external/normalize.scss"; @import "external/normalize.scss";
@ -112,8 +110,8 @@ main.main {
padding: 15px 20px; padding: 15px 20px;
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
line-height: 1.75; line-height: 1.75;
@include box_shadow(2);
color: var(--card-text-color-secondary); color: var(--card-text-color-secondary);
box-shadow: var(--shadow-l2);
@media (max-width: $on-phone) { @media (max-width: $on-phone) {
max-width: 100vw; max-width: 100vw;

12
assets/scss/variables.scss
View File

@ -81,6 +81,18 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--tr-even-background-color: #efefee; --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) { @media (prefers-color-scheme: dark) {
:root { :root {
--body-background: #303030; --body-background: #303030;