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

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

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

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

@ -2,5 +2,5 @@
background-color: var(--card-background);
@include box_shadow(1);
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 {
margin-bottom: 40px;
margin-bottom: var(--section-separation);
.archive-date {
text-transform: uppercase;
margin-bottom: 10px;
@ -14,7 +14,7 @@
.template-archive {
.category-list {
margin-bottom: 40px;
margin-bottom: var(--section-separation);
overflow-x: auto;
.article-list--tile {

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

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

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

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

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

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

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

@ -49,7 +49,7 @@
&.sticky {
top: 30px;
}
@media (max-width: $on-desktop - 1) {
display: none;
}
@ -136,14 +136,14 @@
.sidebar {
.widget {
&:not(:last-of-type) {
margin-bottom: 40px;
margin-bottom: var(--section-separation);
&:after {
content: "";
width: 100px;
height: 2px;
background-color: var(--body-text-color);
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-opacity: 0.5;
--link-background-opacity-hover: 0.7;
--section-separation: 40px;
--small-card-padding: 25px;
}
@media (prefers-color-scheme: dark) {