Improve categories list page layout

This commit is contained in:
BBaoVanC 2022-05-09 18:56:40 -05:00
parent 8d81f5e37c
commit 466c91a980
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
2 changed files with 17 additions and 9 deletions

View File

@ -153,21 +153,27 @@
border-radius: 8px;
}
@media (max-width: 360px) {
.category-list-left {
display: flex;
flex-direction: column;
}
@media (max-width: 480px) {
.category-list li {
flex-direction: column;
gap: 0;
}
.category-list-left {
flex-direction: row;
justify-content: space-between;
}
}
.category-list p {
margin: 0;
}
.category-list .category-metadata {
margin-left: auto;
}
.category-list a,
.category-list .category-metadata {
white-space: nowrap;

View File

@ -10,11 +10,13 @@
{{ range . }}
{{ with .Page }}
<li>
<a href="{{ .Permalink }}">
<p>{{ .Title | markdownify }}</p>
</a>
<div class="category-list-left">
<a href="{{ .Permalink }}">
<p>{{ .Title | markdownify }}</p>
</a>
{{ partial "post-metadata/category.html" . }}
</div>
{{ partial "description-or-summary.html" . }}
{{ partial "post-metadata/category.html" . }}
</li>
{{ end }}
{{ end }}