diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index b5fa60a..d80d430 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -120,10 +120,6 @@ } .article-tags { - & + .article-copyright { - margin-top: 30px; - } - a { color: var(--accent-color-text); background-color: var(--accent-color); diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 4e57e4c..93787c3 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -1,5 +1,15 @@ @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) { @@ -53,15 +63,13 @@ } .article-details { - padding: 30px 30px 0 30px; - @media (max-width: $on-tablet) { - padding: 20px 20px 0 20px; - } + padding: var(--content-side-padding); + padding-bottom: 0; } } .article-content { - margin: 30px 0; + margin: var(--content-side-padding) 0; line-height: 1.75; color: var(--card-text-color-main); @@ -76,13 +84,10 @@ } .article-footer { - padding: 30px; - - @media (max-width: $on-phone) { - padding: 20px; - } + padding: var(--content-side-padding); .article-copyright { + margin-top: var(--content-side-padding); color: var(--card-text-color-tertiary); text-transform: uppercase; display: flex; @@ -202,14 +207,6 @@ } .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); p {