Use flexbox for more stuff

This commit is contained in:
BBaoVanC 2021-11-13 17:23:30 -06:00
parent 96893d7de6
commit 240476061b
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
2 changed files with 49 additions and 38 deletions

View File

@ -4,10 +4,19 @@
/* Post layout (in list pages) */ /* Post layout (in list pages) */
.list-page-content {
display: flex;
flex-direction: column;
gap: 40px;
}
.page-list ul, .page-list ul,
.series-taxonomy ul { .series-taxonomy ul {
display: flex;
flex-direction: column;
list-style: none; list-style: none;
padding: 0; padding: 0;
gap: 40px;
} }
.page-list li, .page-list li,
@ -20,11 +29,6 @@
background-color: #222; background-color: #222;
} }
.page-list li+li,
.series-taxonomy > ul > li+li {
margin: 40px 0;
}
.post-title { .post-title {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -81,8 +85,13 @@
/* Subsection formatting */ /* Subsection formatting */
.sections {
display: flex;
flex-direction: column;
gap: 40px;
}
.section { .section {
margin-bottom: 40px;
background-color: #222; background-color: #222;
border-radius: 12px; border-radius: 12px;
padding: 1px 25px; padding: 1px 25px;

View File

@ -10,43 +10,45 @@
</span> </span>
</h1> </h1>
{{ with .Sections }} <div class="list-page-content">
<div class="sections"> {{ with .Sections }}
{{ range . }} <div class="sections">
{{ range . }}
<a class="section-anchor" href="{{ .Permalink }}"> <a class="section-anchor" href="{{ .Permalink }}">
<div class="section"> <div class="section">
<h2 class="section-title"> <h2 class="section-title">
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }} {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }} {{ .Title | markdownify }}
</h2> </h2>
<div class="section-description"> <div class="section-description">
{{ if .Description }} {{ if .Description }}
<p> <p>
{{ .Description | markdownify }} {{ .Description | markdownify }}
</p> </p>
{{ else }} {{ else }}
{{ .Summary }} {{ .Summary }}
{{ end }} {{ end }}
</div>
</div> </div>
</div> </a>
</a>
{{ end }}
</div>
{{ end }}
<div class="page-list">
<ul>
{{ range .Paginator.Pages }}
<li>{{ .Render "summary" }}</li>
{{ else }}
<div>
{{ i18n "no_posts" }}
</div>
{{ end }} {{ end }}
</ul> </div>
{{ end }}
<div class="page-list">
<ul>
{{ range .Paginator.Pages }}
<li>{{ .Render "summary" }}</li>
{{ else }}
<div>
{{ i18n "no_posts" }}
</div>
{{ end }}
</ul>
</div>
</div> </div>
{{ if gt .Paginator.TotalPages 1 }} {{ if gt .Paginator.TotalPages 1 }}