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-27 12:03:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(article): --content-side-padding -> --content-padding

Browse source
This commit is contained in:
Jimmy Cai 2020-08-24 12:26:27 +02:00
parent 36f53f592b
commit dedb859ecc
3 changed files with 22 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,11 +45,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 25px 20px; padding: var(--content-padding);
@media (max-width: $on-desktop) {
padding: 20px;
}
} }
.article-category { .article-category {

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

@ -1,15 +1,5 @@
@import "variables.scss"; @import "variables.scss";
:root {
--content-side-padding: 30px;
--blockquote-border-size: 4px;
--heading-border-size: 4px;
@media (max-width: $on-tablet) {
--content-side-padding: 20px;
}
}
.article-page { .article-page {
.left-sidebar { .left-sidebar {
@media (max-width: $on-tablet) { @media (max-width: $on-tablet) {
@ -63,13 +53,13 @@
} }
.article-details { .article-details {
padding: var(--content-side-padding); padding: var(--content-padding);
padding-bottom: 0; padding-bottom: 0;
} }
} }
.article-content { .article-content {
margin: var(--content-side-padding) 0; margin: var(--content-padding) 0;
line-height: 1.75; line-height: 1.75;
color: var(--card-text-color-main); color: var(--card-text-color-main);
@ -84,10 +74,10 @@
} }
.article-footer { .article-footer {
padding: var(--content-side-padding); padding: var(--content-padding);
.article-copyright { .article-copyright {
margin-top: var(--content-side-padding); margin-top: var(--content-padding);
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
@ -209,9 +199,9 @@
.article-content { .article-content {
font-family: var(--article-font-family); font-family: var(--article-font-family);
p { & > p {
margin: 1.5em 0; margin: 1.5em 0;
padding: 0 var(--content-side-padding); padding: 0 var(--content-padding);
} }
h1, h1,
@ -220,7 +210,7 @@
h4, h4,
h5, h5,
h6 { h6 {
padding: 0 calc(var(--content-side-padding) - var(--heading-border-size)); padding: 0 calc(var(--content-padding) - var(--heading-border-size));
border-left: var(--heading-border-size) solid var(--accent-color); border-left: var(--heading-border-size) solid var(--accent-color);
} }
@ -238,11 +228,11 @@
position: relative; position: relative;
margin: 10px 0; margin: 10px 0;
border-left: var(--blockquote-border-size) solid var(--card-separator-color); border-left: var(--blockquote-border-size) solid var(--card-separator-color);
padding: 0 calc(var(--content-side-padding) - var(--blockquote-border-size)); padding: 0 calc(var(--content-padding) - var(--blockquote-border-size));
} }
ul { ul {
margin: 0 var(--content-side-padding); margin: 0 var(--content-padding);
} }
hr { hr {
@ -288,7 +278,7 @@
font-family: var(--code-font-family); font-family: var(--code-font-family);
line-height: 1.428571429; line-height: 1.428571429;
word-break: break-all; word-break: break-all;
padding: var(--content-side-padding); padding: var(--content-padding);
code { code {
color: unset; color: unset;

11
assets/scss/variables.scss
View file

@ -66,6 +66,17 @@ $tag-border-radius: 4px;
--fallback-font-family: #{$fallback-font-family}; --fallback-font-family: #{$fallback-font-family};
--article-font-family: #{$article-font-family}; --article-font-family: #{$article-font-family};
--code-font-family: #{$code-font-family}; --code-font-family: #{$code-font-family};
/*
Article style
*/
--content-padding: 30px;
--blockquote-border-size: 4px;
--heading-border-size: 4px;
@media (max-width: $on-tablet) {
--content-padding: 20px;
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {