mirror of
https://github.com/CaiJimmy/hugo-theme-stack.git
synced 2024-11-27 04:03:48 +01:00
refactor(scss): add --section-separation and --small-card-padding variables
This commit is contained in:
parent
174f52d812
commit
4e9a6f1421
9 changed files with 25 additions and 21 deletions
|
@ -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);
|
||||
|
|
|
@ -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,5 +2,5 @@
|
|||
background-color: var(--card-background);
|
||||
@include box_shadow(1);
|
||||
border-radius: var(--card-border-radius);
|
||||
padding: 30px;
|
||||
padding: var(--content-padding);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue