technoduck/hugo-theme-stack-stars
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor(scss): add --section-separation and --small-card-padding variables

Browse source
This commit is contained in:
Jimmy Cai 2020-08-24 20:28:17 +02:00
parent 174f52d812
commit 4e9a6f1421
9 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,8 +6,7 @@
article { article {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: var(--section-separation);
margin-bottom: 40px;
background-color: var(--card-background); background-color: var(--card-background);
@include box_shadow(1); @include box_shadow(1);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
@ -139,16 +138,15 @@
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
@include box_shadow(1); @include box_shadow(1);
background-color: var(--card-background); background-color: var(--card-background);
padding: 0 15px;
& + .pagination { & + .pagination {
margin-top: 40px; margin-top: var(--section-separation);
} }
article { article {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 25px 10px; padding: var(--small-card-padding);
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 2px solid var(--card-separator-color); border-bottom: 2px solid var(--card-separator-color);

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

@ -1,5 +1,5 @@
footer.site-footer { footer.site-footer {
padding: 20px 0 40px 0; padding: 20px 0 var(--section-separation) 0;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.75; line-height: 1.75;

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

@ -2,5 +2,5 @@
background-color: var(--card-background); background-color: var(--card-background);
@include box_shadow(1); @include box_shadow(1);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
padding: 30px; padding: var(--content-padding);
} }

4
assets/scss/partials/layout/archive.scss
View file

@ -1,5 +1,5 @@
.archive-group { .archive-group {
margin-bottom: 40px; margin-bottom: var(--section-separation);
.archive-date { .archive-date {
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 10px; margin-bottom: 10px;
@ -14,7 +14,7 @@
.template-archive { .template-archive {
.category-list { .category-list {
margin-bottom: 40px; margin-bottom: var(--section-separation);
overflow-x: auto; overflow-x: auto;
.article-list--tile { .article-list--tile {

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

@ -38,7 +38,7 @@
overflow: hidden; overflow: hidden;
&.main-article { &.main-article {
margin-bottom: 40px; margin-bottom: var(--section-separation);
} }
.article-header { .article-header {
@ -152,7 +152,7 @@
} }
.related-contents--wrapper { .related-contents--wrapper {
margin-bottom: 40px; margin-bottom: var(--section-separation);
.widget-title { .widget-title {
//padding-left: 15px; //padding-left: 15px;
} }

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

@ -9,33 +9,34 @@
.taxonomy-card { .taxonomy-card {
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
background-color: var(--card-background); background-color: var(--card-background);
padding: 20px 20px; padding: var(--small-card-padding);
@include box_shadow(1); @include box_shadow(1);
margin-bottom: 40px; margin-bottom: var(--section-separation);
display: flex; display: flex;
align-items: center; align-items: center;
--separation: 15px;
.taxonomy-term { .taxonomy-term {
font-size: 2.2rem; font-size: 2.2rem;
margin: 0; margin: 0;
margin-top: 15px; margin-top: calc(var(--separation) / 2);
color: var(--card-text-color-main); color: var(--card-text-color-main);
& + .taxonomy-description { & + .taxonomy-description {
margin-top: 15px; margin-top: var(--separation);
} }
} }
.taxonomy-description { .taxonomy-description {
font-weight: normal; font-weight: normal;
color: var(--card-text-color-secondary); color: var(--card-text-color-secondary);
font-size: 1.8rem; font-size: 1.6rem;
margin: 0; margin: 0;
} }
.taxonomy-details { .taxonomy-details {
flex-grow: 1; flex-grow: 1;
padding: 10px 0;
margin-right: 20px; margin-right: 20px;
} }

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

@ -5,7 +5,8 @@
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
overflow: hidden; overflow: hidden;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 40px; margin-bottom: var(--section-separation);
.page-link { .page-link {
padding: 16px 32px; padding: 16px 32px;
display: inline-flex; display: inline-flex;

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

@ -136,14 +136,14 @@
.sidebar { .sidebar {
.widget { .widget {
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 40px; margin-bottom: var(--section-separation);
&:after { &:after {
content: ""; content: "";
width: 100px; width: 100px;
height: 2px; height: 2px;
background-color: var(--body-text-color); background-color: var(--body-text-color);
display: block; display: block;
margin-top: 40px; margin-top: var(--section-separation);
} }
} }
} }

4
assets/scss/variables.scss
View file

@ -60,6 +60,10 @@ $on-desktop-large: 1920px;
--link-background-color: 189, 195, 199; --link-background-color: 189, 195, 199;
--link-background-opacity: 0.5; --link-background-opacity: 0.5;
--link-background-opacity-hover: 0.7; --link-background-opacity-hover: 0.7;
--section-separation: 40px;
--small-card-padding: 25px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {