diff options
| author | Jimmy Cai <github@jimmycai.com> | 2022-03-04 01:36:17 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-04 01:36:17 +0300 |
| commit | 8abaa444c1d6d6a1ea9f5019f76d8dbd6f30948a (patch) | |
| tree | aa44205122dd2753d9a8b6a6a00ebff64fa572df | |
| parent | 04cdbcfedfe3f200013e05aecbb96dc3313424b3 (diff) | |
refactor: add flexbox gap to .article-details
| -rw-r--r-- | assets/scss/partials/article.scss | 18 | ||||
| -rw-r--r-- | layouts/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 @@ </header> {{ end }} - <h2 class="article-title"> - <a href="{{ .RelPermalink }}"> - {{- .Title -}} - </a> - </h2> - - {{ with .Params.description }} - <h3 class="article-subtitle"> - {{ . }} - </h3> - {{ end }} + <div class="article-title-wrapper"> + <h2 class="article-title"> + <a href="{{ .RelPermalink }}"> + {{- .Title -}} + </a> + </h2> + + {{ with .Params.description }} + <h3 class="article-subtitle"> + {{ . }} + </h3> + {{ end }} + </div> {{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }} <footer class="article-time"> |