refactor: add flexbox gap to .article-details

This commit is contained in:
Jimmy Cai 2022-03-03 22:36:17 +00:00 committed by GitHub
parent 04cdbcfedf
commit 8abaa444c1
2 changed files with 22 additions and 20 deletions

View file

@ -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 {

View file

@ -9,17 +9,19 @@
</header>
{{ end }}
<h2 class="article-title">
<a href="{{ .RelPermalink }}">
{{- .Title -}}
</a>
</h2>
<div class="article-title-wrapper">
<h2 class="article-title">
<a href="{{ .RelPermalink }}">
{{- .Title -}}
</a>
</h2>
{{ with .Params.description }}
<h3 class="article-subtitle">
{{ . }}
</h3>
{{ end }}
{{ with .Params.description }}
<h3 class="article-subtitle">
{{ . }}
</h3>
{{ end }}
</div>
{{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }}
<footer class="article-time">