Add card layout for list pages

This commit is contained in:
vimux 2018-03-10 07:40:22 +03:00
parent d11d050428
commit 031c995310
3 changed files with 43 additions and 2 deletions

View file

@ -8,7 +8,7 @@
{{ end }} {{ end }}
<div class="cards"> <div class="cards">
{{ range .Paginator.Pages }} {{ range .Paginator.Pages }}
<div class="card"> <div class="card{{ with .Site.Params.CardsColumns }} card--{{ . }}col{{ else }} card--2col{{ end }}">
{{ .Render "summary" }} {{ .Render "summary" }}
</div> </div>
{{ end }} {{ end }}

View file

@ -1,4 +1,4 @@
<article class="post block"> <article class="post card__box block">
<h1 class="post__title"><a class="post__title-link" href="{{ .RelPermalink }}">{{ .Title }}</a></h1> <h1 class="post__title"><a class="post__title-link" href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
<div class="post__content">{{- .Summary }}</div> <div class="post__content">{{- .Summary }}</div>
<div class="post__meta meta mt tar">{{ partial "post_meta.html" . }}</div> <div class="post__meta meta mt tar">{{ partial "post_meta.html" . }}</div>

View file

@ -411,6 +411,47 @@ mark {
text-decoration: none; text-decoration: none;
} }
/* Cards UI*/
.cards {
display: flex;
flex-wrap: wrap;
}
.card {
display: flex;
width: 100%;
padding: 3px 0;
}
@media screen and (min-width: 480px) {
.card {
padding: 5px;
}
}
@media screen and (min-width: 720px) {
.card--2col {
width: 50%;
}
.card--3col {
width: 50%;
}
}
@media screen and (min-width: 860px) {
.card--3col {
width: 33.333%;
}
}
.card__box {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
}
/* Taxonomies */ /* Taxonomies */
.page__title { .page__title {
margin-bottom: 0; margin-bottom: 0;