feat(article): improve article content style

This commit is contained in:
Jimmy Cai 2020-08-24 12:05:15 +02:00
parent 2ec4cd3f69
commit a4d388c0f0

View file

@ -62,12 +62,10 @@
.article-content { .article-content {
margin: 30px 0; margin: 30px 0;
padding: 0 30px;
line-height: 1.75; line-height: 1.75;
color: var(--card-text-color-main); color: var(--card-text-color-main);
@media (max-width: $on-tablet) { @media (max-width: $on-tablet) {
padding: 0 20px;
font-size: 1.6rem; font-size: 1.6rem;
} }
@ -204,10 +202,29 @@
} }
.article-content { .article-content {
--content-side-padding: 30px;
--blockquote-border-size: 4px;
--heading-border-size: 4px;
@media (max-width: $on-tablet) {
--content-side-padding: 20px;
}
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);
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0 calc(var(--content-side-padding) - var(--heading-border-size));
border-left: var(--heading-border-size) solid var(--accent-color);
} }
figure { figure {
@ -223,8 +240,12 @@
blockquote { blockquote {
position: relative; position: relative;
margin: 10px 0; margin: 10px 0;
border-left: 4px solid var(--card-separator-color); border-left: var(--blockquote-border-size) solid var(--card-separator-color);
padding-left: 20px; padding: 0 calc(var(--content-side-padding) - var(--blockquote-border-size));
}
ul {
margin: 0 var(--content-side-padding);
} }
hr { hr {
@ -254,14 +275,10 @@
margin: 20px 0; margin: 20px 0;
figure { figure {
margin: 0 5px; margin: 0;
a:after { & + figure {
display: none; margin-left: 10px;
}
img {
//width: 100%;
} }
} }
} }
@ -274,8 +291,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: 20px; padding: var(--content-side-padding);
border-radius: var(--card-border-radius);
code { code {
color: unset; color: unset;