Use masonry instead of hard rows

alternate-navbar
Maik de Kruif 3 years ago
parent d5c31f0d0b
commit 1bcc181220
Signed by: maik
GPG Key ID: 44A55AD1F0673FA6
  1. 23
      themes/maik-blog/assets/js/list_columns.js
  2. 11
      themes/maik-blog/assets/scss/_masonry.scss
  3. 38
      themes/maik-blog/assets/scss/_posts.scss
  4. 1
      themes/maik-blog/assets/scss/main.scss
  5. 3
      themes/maik-blog/layouts/partials/javascript.html
  6. 104
      themes/maik-blog/layouts/writeups/list.html

@ -0,0 +1,23 @@
function resizeItem(masonry, item){
let rowHeight = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-auto-rows'));
let rowGap = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-row-gap'));
let rowSpan = Math.ceil((item.querySelector('.masonry-item-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}
function resizeAll(){
let masonry = document.getElementsByClassName("masonry")[0];
masonry.style.gridAutoRows = "20px"
masonry.style.marginBottom = "80px"
let allItems = document.getElementsByClassName("masonry-item");
for (const item of allItems) {
resizeItem(masonry, item)
}
}
window.addEventListener("load", () => {
resizeAll()
window.addEventListener("resize", resizeAll);
})

@ -0,0 +1,11 @@
.masonry {
display: grid;
grid-gap: 20px 90px;
grid-template-columns: repeat(2, minmax(250px, 1fr));
// grid-auto-rows: 20px; // Set by JavaScript
// margin-bottom: calc(4 * 20px); // Set by JavaScript
@media #{$media-size-medium} {
grid-template-columns: 1fr;
}
}

@ -36,39 +36,21 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
}
&-columns { .post {
display: flex; &.masonry-item {
flex-wrap: wrap; .post-cover {
justify-content: space-between; width: 115%;
margin: 40px -30px;
@media #{$media-size-medium} {
justify-content: center; img {
} max-height: 20rem;
margin: 0 auto;
.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 {
&-title { &-title {
font-size: 1.9rem; font-size: 1.9rem;
margin: 5px 0 5px 0; margin: 5px 0 5px 0;

@ -17,3 +17,4 @@
@import "footer"; @import "footer";
@import "sharing-buttons"; @import "sharing-buttons";
@import "code"; @import "code";
@import "masonry";

@ -2,7 +2,8 @@
{{- $menu := resources.Get "js/menu.js" }} {{- $menu := resources.Get "js/menu.js" }}
{{- $theme := resources.Get "js/theme.js" }} {{- $theme := resources.Get "js/theme.js" }}
{{- $nav := resources.Get "js/nav.js" }} {{- $nav := resources.Get "js/nav.js" }}
{{- $secureJS := slice $main $menu $theme $nav | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }} {{- $list_columns := resources.Get "js/list_columns.js" }}
{{- $secureJS := slice $main $menu $theme $nav $list_columns | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script> <script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
{{- if .Site.GoogleAnalytics }} {{- if .Site.GoogleAnalytics }}

@ -12,67 +12,71 @@
{{ partial "pagination.html" . }} {{ partial "pagination.html" . }}
{{- end }} {{- end }}
<div class="posts-list posts-list-columns"> <div class="posts-list masonry">
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
<div class="post"> <div class="post masonry-item">
<h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2> <div class="masonry-item-content">
{{- with .Params.Subtitle }} <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
<p class="post-subtitle">{{ . | markdownify }}</p> {{- with .Params.Subtitle }}
{{- end }} <p class="post-subtitle">{{ . | markdownify }}</p>
<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 }} {{- end }}
{{- if $.Site.Params.ShowReadingTimeInList }} <div class="post-meta">
<span class="post-read-time">— {{ .ReadingTime }} {{- if .Date }}
{{ $.Site.Params.MinuteReadingTime | default "min read" }}</span> <span class="post-date">
{{- end }} {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
</div> </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 }} {{- if .Params.tags }}
<span class="post-tags"> <span class="post-tags">
{{- range .Params.tags }} {{- range .Params.tags }}
#<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp; #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
{{- end }}
</span>
{{- end }} {{- end }}
</span>
{{- end }}
{{- if .Params.Cover }} {{- if .Params.Cover }}
<figure class="post-cover"> <figure class="post-cover">
{{- $img := imageConfig (printf "static/%s" .Params.Cover) }} {{- $img := imageConfig (printf "static/%s" .Params.Cover) }}
{{- if .Params.UseRelativeCover }} {{- if .Params.UseRelativeCover }}
<img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}" <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}"
width="{{ $img.Width }}" height="{{ $img.Height }}" /> alt="{{ .Title | plainify | default " " }}" width="{{ $img.Width }}"
{{- else }} height="{{ $img.Height }}" />
<img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}" {{- else }}
width="{{ $img.Width }}" height="{{ $img.Height }}" /> <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"
{{- end }} width="{{ $img.Width }}" height="{{ $img.Height }}" />
{{- end }}
{{- if .Params.CoverCaption }} {{- if .Params.CoverCaption }}
<figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption> <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
{{- end }}
</figure>
{{- end }} {{- end }}
</figure>
{{- end }}
<div class="post-content"> <div class="post-content">
{{- with .Description }} {{- with .Description }}
{{ . | markdownify }} {{ . | markdownify }}
{{- else }} {{- else }}
{{- if .Truncated }} {{- if .Truncated }}
{{ .Summary | markdownify }} {{ .Summary | markdownify }}
{{- end }} {{- end }}
{{- end }}
</div>
{{- if not .Params.hideReadMore }}
<div><a class="read-more button"
href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
</a></div>
{{- end }} {{- end }}
</div> </div>
{{- if not .Params.hideReadMore }}
<div><a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
</a></div>
{{- end }}
</div> </div>
{{- end }} {{- end }}
</div> </div>

Loading…
Cancel
Save