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 04:03:48 +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;
justify-content: center;
padding: 25px 20px;
@media (max-width: $on-desktop) {
padding: 20px;
}
padding: var(--content-padding);
}
.article-category {

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

@ -1,15 +1,5 @@
@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 {
.left-sidebar {
@media (max-width: $on-tablet) {
@ -63,13 +53,13 @@
}
.article-details {
padding: var(--content-side-padding);
padding: var(--content-padding);
padding-bottom: 0;
}
}
.article-content {
margin: var(--content-side-padding) 0;
margin: var(--content-padding) 0;
line-height: 1.75;
color: var(--card-text-color-main);
@ -84,10 +74,10 @@
}
.article-footer {
padding: var(--content-side-padding);
padding: var(--content-padding);
.article-copyright {
margin-top: var(--content-side-padding);
margin-top: var(--content-padding);
color: var(--card-text-color-tertiary);
text-transform: uppercase;
display: flex;
@ -209,9 +199,9 @@
.article-content {
font-family: var(--article-font-family);
p {
& > p {
margin: 1.5em 0;
padding: 0 var(--content-side-padding);
padding: 0 var(--content-padding);
}
h1,
@ -220,7 +210,7 @@
h4,
h5,
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);
}
@ -238,11 +228,11 @@
position: relative;
margin: 10px 0;
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 {
margin: 0 var(--content-side-padding);
margin: 0 var(--content-padding);
}
hr {
@ -288,7 +278,7 @@
font-family: var(--code-font-family);
line-height: 1.428571429;
word-break: break-all;
padding: var(--content-side-padding);
padding: var(--content-padding);
code {
color: unset;

11
assets/scss/variables.scss
View file

@ -66,6 +66,17 @@ $tag-border-radius: 4px;
--fallback-font-family: #{$fallback-font-family};
--article-font-family: #{$article-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) {