From 8abaa444c1d6d6a1ea9f5019f76d8dbd6f30948a Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Thu, 3 Mar 2022 22:36:17 +0000 Subject: [PATCH] refactor: add flexbox gap to .article-details --- assets/scss/partials/article.scss | 18 +++++++------- .../partials/article/components/details.html | 24 ++++++++++--------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index c9444d4..2ea1fe2 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -49,13 +49,13 @@ display: flex; flex-direction: column; justify-content: center; - padding: var(--card-padding); + gap: 15px; } .article-title { font-weight: 600; - margin: 10px 0; + margin: 0; color: var(--card-text-color-main); font-size: 2.2rem; @@ -70,31 +70,31 @@ color: var(--card-text-color-main); } } - - & + .article-subtitle { - margin-top: 0; - } } .article-subtitle { font-weight: normal; color: var(--card-text-color-secondary); - margin: 5px 0; line-height: 1.5; - + margin: 0; font-size: 1.75rem; @include respond(xl) { font-size: 2rem; } } +.article-title-wrapper { + display: flex; + flex-direction: column; + gap: 8px; +} + .article-time, .article-translations { display: flex; align-items: center; color: var(--card-text-color-tertiary); gap: 15px; - margin-top: 10px; flex-wrap: wrap; svg { diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html index 2ec1241..4cd26e3 100644 --- a/layouts/partials/article/components/details.html +++ b/layouts/partials/article/components/details.html @@ -9,17 +9,19 @@ {{ end }} -

- - {{- .Title -}} - -

- - {{ with .Params.description }} -

- {{ . }} -

- {{ end }} +
+

+ + {{- .Title -}} + +

+ + {{ with .Params.description }} +

+ {{ . }} +

+ {{ end }} +
{{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }}