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

network cards design prototype, wip #3, fix #5

Browse Source
This commit is contained in:
rra 2021-09-24 17:00:44 +02:00
parent 852db24c5c
commit 56c3bc10be
2 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
layouts/partials/network_card.html
View File

@ -5,21 +5,24 @@
<div class="header-metadata"> <div class="header-metadata">
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time> <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
{{ if .Params.author }} {{ if .Params.author }}
<div class='author'>{{.Params.author}}</div> <div class='author p-author'>{{.Params.author}}</div>
{{ end }} {{ end }}
</div> </div>
</header> </header>
<div class="network-source"><span class="from">From:</span><span class="sender"> <b><a href="{{ "/categories/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></b></div>
<div class="p-summary {{if .Truncated}} truncated {{end}} img" > <div class="p-summary {{if .Truncated}} truncated {{end}} img" >
<div class="summary-text">
{{ .Summary }}
</div>
{{ with (index (.Resources.ByType "image") 0) }} {{ with (index (.Resources.ByType "image") 0) }}
{{ $thumb := .Fit "480x320"}} {{ $thumb := .Fit "540x360"}}
<div class="summary-image"> <div class="summary-image">
<img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> <img src="{{ $thumb.Permalink }}" alt="{{ .Title }}">
</div> </div>
{{ end }} {{ end }}
<div class="summary-text">
{{ .Summary }}
</div>
</div> </div>
{{ if .Truncated }} {{ if .Truncated }}
<footer class='post-footer'> <footer class='post-footer'>

47
static/css/main.css
View File

@ -93,7 +93,7 @@ body {
} }
.entries{ .entries{
padding-top: 15%; padding-top: 5%;
} }
/* base header & menu */ /* base header & menu */
@ -105,6 +105,7 @@ body {
width: 90%; width: 90%;
z-index: 1; z-index: 1;
margin-top: 1em; margin-top: 1em;
display: none;
} }
.logo { .logo {
@ -255,6 +256,42 @@ footer.post-footer {
color: royalblue; color: royalblue;
} }
.network footer.post-footer{
border-top: 2px solid lightseagreen;
}
.network .summary-image {
border-bottom: 2px solid lightseagreen;
border-right: none;
}
.network .summary-text {
font-size: 14px;
}
div.network-source{
padding: 0.5em 1.2em 0.5em 1.2em;
border-bottom: 2px solid lightseagreen;
font-size: 14px;
display: flex;
justify-content: space-between;
}
.network .footer-filler{
border: none;
}
.network .read-more {
border: none;
border-left: 2px solid lightseagreen;
}
span.sender a {
font-weight: bold;
color: rgba(60,60,60,0.8);
}
/* calendar cards */ /* calendar cards */
@ -271,23 +308,23 @@ footer.post-footer {
} }
.h-entry.calendar header { .h-event.calendar header {
display: flex; display: flex;
border-bottom: 2px solid cornflowerblue; border-bottom: 2px solid cornflowerblue;
} }
.h-entry.calendar header h2{ .h-event.calendar header h2{
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0; margin: 0;
border-right: none; border-right: none;
} }
.h-entry.calendar header h2:hover{ .h-event.calendar header h2:hover{
box-shadow: inset 4px 4px 0px royalblue; box-shadow: inset 4px 4px 0px royalblue;
cursor: pointer; cursor: pointer;
} }
.h-entry.calendar header h2 a { .h-event.calendar header h2 a {
text-decoration: none; text-decoration: none;
color: royalblue; color: royalblue;
} }