forked from ruangrupa/lumbung.space
style pen cards
This commit is contained in:
parent
4f119cf6dd
commit
fdf9edec53
@ -20,6 +20,10 @@
|
||||
|
||||
{{- partial "shout_card.html" . -}}
|
||||
|
||||
{{ else if in .Params.categories "pen" }}
|
||||
|
||||
{{- partial "pen_card.html" . -}}
|
||||
|
||||
{{ else if in .Params.categories "page" }}
|
||||
|
||||
{{- partial "blank.html" . -}}
|
||||
|
||||
@ -16,6 +16,10 @@
|
||||
|
||||
{{- partial "network_card.html" . -}}
|
||||
|
||||
{{ else if in .Params.categories "pen" }}
|
||||
|
||||
{{- partial "pen_card.html" . -}}
|
||||
|
||||
{{ else if in .Params.categories "shouts" }}
|
||||
|
||||
{{- partial "shout_card.html" . -}}
|
||||
|
||||
36
themes/lumbung-theme/layouts/partials/pen_card.html
Normal file
36
themes/lumbung-theme/layouts/partials/pen_card.html
Normal file
@ -0,0 +1,36 @@
|
||||
<div class='pen card {{ .Params.feed_name }}'>
|
||||
<article class="h-entry pen">
|
||||
<header>
|
||||
<div class="pen-source"><span class="from p-author">From {{ if .Params.author }}<b>{{.Params.author}}</b> at {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>
|
||||
|
||||
{{ $postPermalink := .Permalink}}
|
||||
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
|
||||
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
|
||||
|
||||
</header>
|
||||
|
||||
{{ with (index (.Resources.ByType "image") 0) }}
|
||||
{{ $height := add .Height 0.0}}
|
||||
{{ $ratio := div $height .Width}}
|
||||
{{ $thumb := .Fit "540x540 q80 webp"}}
|
||||
<div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
|
||||
<div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
|
||||
<a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> </a>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="p-summary">
|
||||
{{ end }}
|
||||
<div class="summary-text">
|
||||
{{ .Summary }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class='post-footer'>
|
||||
<a href="{{ .RelPermalink }}">
|
||||
<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
@ -507,6 +507,128 @@ div.network-source {
|
||||
padding: 0.5em 1.2em 0.5em 1.2em;
|
||||
}
|
||||
|
||||
/* pen cards */
|
||||
.card.pen {
|
||||
border: 2px solid var(--pen-dark);
|
||||
background-color: var(--pen-light);
|
||||
max-width: min-content;
|
||||
margin-bottom: 2em;
|
||||
flex: auto;
|
||||
margin: 0 3em 3em 0;
|
||||
align-self: start;
|
||||
color: var(--shouts-dark);
|
||||
}
|
||||
|
||||
.h-entry.pen header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.h-entry.pen header h2 {
|
||||
padding: 0.2em 0.5em 0.5em 0.5em;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.h-entry.pen header h2:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.h-entry.pen header h2 a {
|
||||
text-decoration: none;
|
||||
color: var(--pen-dark);
|
||||
}
|
||||
|
||||
.h-entry.pen header time {
|
||||
text-align: right;
|
||||
padding: 0.6em 0.8em;
|
||||
padding-top: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.pen .header-metadata {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pen .header-metadata .dt-published {
|
||||
border-bottom: 2px solid var(--pen-dark);
|
||||
}
|
||||
|
||||
.pen .filler {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.pen .author.p-author {
|
||||
border-color: var(--pen-dark);
|
||||
padding: 0.5em 1.2em 0.5em 1.2em;
|
||||
}
|
||||
|
||||
.pen .p-summary {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pen .p-summary.portrait {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pen .p-summary.landscape {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pen .summary-image > img {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.pen .summary-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
div.pen-source {
|
||||
padding: 1em;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--pen-dark);
|
||||
color: white;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
bottom: 21px;
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
|
||||
|
||||
.pen-source a {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pen .footer-filler {
|
||||
border-left: 2px solid var(--pen-dark);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.pen footer.post-footer {
|
||||
border-top: 2px solid var(--pen-dark);
|
||||
flex-flow: row;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--pen-light);
|
||||
color: var(--pen-dark);
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.pen footer svg {
|
||||
fill: var(--pen-dark)
|
||||
}
|
||||
|
||||
.pen .read-more {
|
||||
border: none;
|
||||
border-left: 2px solid var(--pen-dark);
|
||||
padding: 0.5em 1.2em 0.5em 1.2em;
|
||||
}
|
||||
|
||||
.pen .footer-metadata {
|
||||
padding: 0.5em 1.2em 0.5em 1.2em;
|
||||
}
|
||||
|
||||
/* shouts cards */
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user