Add card layout for list pages
This commit is contained in:
parent
d11d050428
commit
031c995310
3 changed files with 43 additions and 2 deletions
|
@ -8,7 +8,7 @@
|
|||
{{ end }}
|
||||
<div class="cards">
|
||||
{{ range .Paginator.Pages }}
|
||||
<div class="card">
|
||||
<div class="card{{ with .Site.Params.CardsColumns }} card--{{ . }}col{{ else }} card--2col{{ end }}">
|
||||
{{ .Render "summary" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
@ -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>
|
||||
<div class="post__content">{{- .Summary }}</div>
|
||||
<div class="post__meta meta mt tar">{{ partial "post_meta.html" . }}</div>
|
||||
|
|
|
@ -411,6 +411,47 @@ mark {
|
|||
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 */
|
||||
.page__title {
|
||||
margin-bottom: 0;
|
||||
|
|
Loading…
Reference in a new issue