Make writeup list have two columns

alternate-navbar
Maik de Kruif 3 years ago
parent 7bf60bc3b9
commit 5b63b29d5d
Signed by: maik
GPG Key ID: 44A55AD1F0673FA6
  1. 2
      config.toml
  2. 30
      themes/maik-blog/assets/scss/_posts.scss
  3. 82
      themes/maik-blog/layouts/writeups/list.html

@ -4,7 +4,7 @@ title = "Maik de Kruif"
languageCode = "en-us"
theme = "maik-blog"
paginate = 6
paginate = 12
rssLimit = 10
copyright = "© Maik de Kruif (maik_dev). All rights reserved."

@ -36,6 +36,36 @@
margin: 0;
padding: 0;
list-style: none;
&-columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
@media #{$media-size-medium} {
justify-content: center;
}
.post {
width: 430px;
min-width: 45%;
margin: 0px;
@media #{$media-size-medium} {
width: 90%;
}
&-cover {
width: 115%;
margin: 40px -30px;
img {
max-height: 20rem;
margin: 0 auto;
}
}
}
}
}
.post {

@ -0,0 +1,82 @@
{{ define "main" }}
{{ $paginator := .Paginate .Data.Pages }}
<main class="posts posts">
<h1>{{ .Title }}</h1>
{{- if .Content }}
<div class="content">{{ .Content }}</div>
{{- end }}
{{- if .Paginator.HasPrev }}
{{ partial "pagination.html" . }}
{{- end }}
<div class="posts-list posts-list-columns">
{{ range $paginator.Pages }}
<div class="post">
<h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
{{- with .Params.Subtitle }}
<p class="post-subtitle">{{ . | markdownify }}</p>
{{- end }}
<div class="post-meta">
{{- if .Date }}
<span class="post-date">
{{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
</span>
{{- end }}
{{- with .Params.Author }}
<span class="post-author">{{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>
{{- end }}
{{- if $.Site.Params.ShowReadingTimeInList }}
<span class="post-read-time">— {{ .ReadingTime }}
{{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
{{- end }}
</div>
{{- if .Params.tags }}
<span class="post-tags">
{{- range .Params.tags }}
#<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
{{- end }}
</span>
{{- end }}
{{- if .Params.Cover }}
<figure class="post-cover">
{{- $img := imageConfig (printf "static/%s" .Params.Cover) }}
{{- if .Params.UseRelativeCover }}
<img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}"
width="{{ $img.Width }}" height="{{ $img.Height }}" />
{{- else }}
<img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"
width="{{ $img.Width }}" height="{{ $img.Height }}" />
{{- end }}
{{- if .Params.CoverCaption }}
<figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
{{- end }}
</figure>
{{- end }}
<div class="post-content">
{{- with .Description }}
{{ . | markdownify }}
{{- else }}
{{- if .Truncated }}
{{ .Summary | markdownify }}
{{- end }}
{{- end }}
</div>
{{- if not .Params.hideReadMore }}
<div><a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
</a></div>
{{- end }}
</div>
{{- end }}
</div>
{{ partial "pagination.html" . }}
</main>
{{ end }}
Loading…
Cancel
Save