rra/lumbung-theme
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity

network cards now have a different layout for portrait and landscape mode

Browse Source
This commit is contained in:
rra 2021-10-24 14:45:29 +02:00
parent 5282225482
commit 7e59454c19
2 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
layouts/partials/network_card.html
View File

@ -1,33 +1,36 @@
<div class='network card'>
<article class="h-entry network">
<header>
{{ $postPermalink := .Permalink}}
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
<div class="header-metadata">
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
<div class="filler"></div>
</div>
</header>
<div class="network-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>
<div class="p-summary {{if .Truncated}} truncated {{end}} img" >
{{ with (index (.Resources.ByType "image") 0) }}
{{ $thumb := .Fit "540x360"}}
<div class="summary-image">
<img src="{{ $thumb.Permalink }}" alt="{{ .Title }}">
</div>
{{ with (index (.Resources.ByType "image") 0) }}
{{ $height := add .Height 0.0}}
{{ $ratio := div $height .Width}}
{{ $thumb := .Fit "540x360"}}
<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>
</div>
{{ if .Truncated }}
<footer class='post-footer'>
<footer class='post-footer'>
<div class='footer-filler'>
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
</div>
{{ if .Truncated }}
<div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div>
<div class='footer-filler'></div>
</footer>
{{ end }}
{{ end }}
</footer>
</article>
</div>

41
static/css/main.css
View File

@ -206,19 +206,22 @@ body {
.summary-text {
flex: 1;
padding: 1em;
max-height: 300px;
min-width: 20ch;
min-width: 34ch;
text-overflow: ellipsis;
overflow: hidden;
}
.summary-image > img {
height: 100%;
/* height: 100%;
object-fit: cover;
max-width: 100%;
max-width: 100%;*/
}
.summary-image > a {
display: flex;
}
.summary-image{
border-right: 2px solid var(--border-color);
}
@ -247,7 +250,7 @@ footer.post-footer {
border: 2px solid darkcyan;
box-shadow:1em 1em 0 #d2d1c8;
background-color: lightgreen;
max-width: 540px;
max-width: min-content;
margin-bottom: 2em;
flex: auto;
margin: 0 3em 3em 0;
@ -264,7 +267,7 @@ footer.post-footer {
.h-entry.network header h2{
padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0;
border-color: darkcyan;
border: none;
}
.h-entry.network header h2:hover{
@ -282,8 +285,7 @@ footer.post-footer {
}
.network .header-metadata .dt-published{
padding-left: 1.2em;
min-width: 16ch;
border-bottom: 2px solid darkcyan;
}
@ -296,15 +298,25 @@ footer.post-footer {
padding: 0.5em 1.2em 0.5em 1.2em;
}
.network footer.post-footer{
border-top: 2px solid darkcyan;
.network .p-summary {
display: flex;
}
.network .summary-image {
.network .p-summary.portrait {
flex-direction: row;
}
.network .p-summary.landscape{
flex-direction: column;
}
.network .summary-image.portrait {
border-right: 2px solid darkcyan;
}
.network .summary-image.landscape {
border-bottom: 2px solid darkcyan;
border-right: none;
}
.network .summary-image > img {
display: inherit;
}
@ -333,6 +345,13 @@ div.network-source{
border-left: 2px solid darkcyan;
}
.network footer.post-footer{
border-top: 2px solid darkcyan;
flex-flow: row;
font-size: 0.8rem;
padding-left: 1.2em;
min-width: 16ch;
}
/* calendar cards */