troldspejlet/hugo-theme-stack
troldspejlet/hugo-theme-stack
1
0
Fork 0
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2024-11-23 18:31:45 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: add flexbox gap to .article-details

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/scss/partials/article.scss
View file

@ -49,13 +49,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: var(--card-padding); padding: var(--card-padding);
gap: 15px;
} }
.article-title { .article-title {
font-weight: 600; font-weight: 600;
margin: 10px 0; margin: 0;
color: var(--card-text-color-main); color: var(--card-text-color-main);
font-size: 2.2rem; font-size: 2.2rem;
@ -70,31 +70,31 @@
color: var(--card-text-color-main); color: var(--card-text-color-main);
} }
} }
& + .article-subtitle {
margin-top: 0;
}
} }
.article-subtitle { .article-subtitle {
font-weight: normal; font-weight: normal;
color: var(--card-text-color-secondary); color: var(--card-text-color-secondary);
margin: 5px 0;
line-height: 1.5; line-height: 1.5;
margin: 0;
font-size: 1.75rem; font-size: 1.75rem;
@include respond(xl) { @include respond(xl) {
font-size: 2rem; font-size: 2rem;
} }
} }
.article-title-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}
.article-time, .article-time,
.article-translations { .article-translations {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
gap: 15px; gap: 15px;
margin-top: 10px;
flex-wrap: wrap; flex-wrap: wrap;
svg { svg {

22
layouts/partials/article/components/details.html
View file

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