troldspejlet/hugo-theme-stack
troldspejlet/hugo-theme-stack
1
0
Fork 0
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2024-11-23 10:21:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

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

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

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

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

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

@ -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 {

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

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

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

@ -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 {

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

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

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

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

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

@ -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) {

4
assets/scss/style.scss
View file

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

12
assets/scss/variables.scss
View file

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