Browse Source

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

main
rra 2 months ago
parent
commit
56c3bc10be
  1. 13
      layouts/partials/network_card.html
  2. 47
      static/css/main.css

13
layouts/partials/network_card.html

@ -5,21 +5,24 @@
<div class="header-metadata">
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
{{ if .Params.author }}
<div class='author'>{{.Params.author}}</div>
<div class='author p-author'>{{.Params.author}}</div>
{{ end }}
</div>
</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="summary-text">
{{ .Summary }}
</div>
{{ with (index (.Resources.ByType "image") 0) }}
{{ $thumb := .Fit "480x320"}}
{{ $thumb := .Fit "540x360"}}
<div class="summary-image">
<img src="{{ $thumb.Permalink }}" alt="{{ .Title }}">
</div>
{{ end }}
<div class="summary-text">
{{ .Summary }}
</div>
</div>
{{ if .Truncated }}
<footer class='post-footer'>

47
static/css/main.css

@ -93,7 +93,7 @@ body {
}
.entries{
padding-top: 15%;
padding-top: 5%;
}
/* base header & menu */
@ -105,6 +105,7 @@ body {
width: 90%;
z-index: 1;
margin-top: 1em;
display: none;
}
.logo {
@ -255,6 +256,42 @@ footer.post-footer {
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 */
@ -271,23 +308,23 @@ footer.post-footer {
}
.h-entry.calendar header {
.h-event.calendar header {
display: flex;
border-bottom: 2px solid cornflowerblue;
}
.h-entry.calendar header h2{
.h-event.calendar header h2{
padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0;
border-right: none;
}
.h-entry.calendar header h2:hover{
.h-event.calendar header h2:hover{
box-shadow: inset 4px 4px 0px royalblue;
cursor: pointer;
}
.h-entry.calendar header h2 a {
.h-event.calendar header h2 a {
text-decoration: none;
color: royalblue;
}

Loading…
Cancel
Save