From 4e9a6f14219fe13e51d9ccf99432f5c43d763c5f Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Mon, 24 Aug 2020 20:28:17 +0200 Subject: [PATCH] refactor(scss): add --section-separation and --small-card-padding variables --- assets/scss/partials/article.scss | 8 +++----- assets/scss/partials/footer.scss | 2 +- assets/scss/partials/layout/404.scss | 2 +- assets/scss/partials/layout/archive.scss | 4 ++-- assets/scss/partials/layout/article.scss | 4 ++-- assets/scss/partials/layout/taxonomy.scss | 13 +++++++------ assets/scss/partials/pagination.scss | 3 ++- assets/scss/partials/sidebar.scss | 6 +++--- assets/scss/variables.scss | 4 ++++ 9 files changed, 25 insertions(+), 21 deletions(-) diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index 09dd961..075cd7b 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -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); diff --git a/assets/scss/partials/footer.scss b/assets/scss/partials/footer.scss index ca55f49..ccb7394 100644 --- a/assets/scss/partials/footer.scss +++ b/assets/scss/partials/footer.scss @@ -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; diff --git a/assets/scss/partials/layout/404.scss b/assets/scss/partials/layout/404.scss index 925aa59..8bdcca2 100644 --- a/assets/scss/partials/layout/404.scss +++ b/assets/scss/partials/layout/404.scss @@ -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); } diff --git a/assets/scss/partials/layout/archive.scss b/assets/scss/partials/layout/archive.scss index 7d62d18..1c3ba0e 100644 --- a/assets/scss/partials/layout/archive.scss +++ b/assets/scss/partials/layout/archive.scss @@ -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 { diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 385f579..e34d150 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -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; } diff --git a/assets/scss/partials/layout/taxonomy.scss b/assets/scss/partials/layout/taxonomy.scss index 01f4dcc..2c128e3 100644 --- a/assets/scss/partials/layout/taxonomy.scss +++ b/assets/scss/partials/layout/taxonomy.scss @@ -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; } diff --git a/assets/scss/partials/pagination.scss b/assets/scss/partials/pagination.scss index d1a5677..0b3fcc8 100644 --- a/assets/scss/partials/pagination.scss +++ b/assets/scss/partials/pagination.scss @@ -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; diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index 9d229d4..5376d82 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -49,7 +49,7 @@ &.sticky { top: 30px; } - + @media (max-width: $on-desktop - 1) { display: none; } @@ -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); } } } diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index ad5005d..80770f2 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -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) {