Browse Source

refine network cards, wip #3

main
rra 2 months ago
parent
commit
b19bfc8ed7
  1. 6
      layouts/partials/network_card.html
  2. 68
      static/css/main.css

6
layouts/partials/network_card.html

@ -4,13 +4,11 @@
<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>
{{ if .Params.author }}
<div class='author p-author'>{{.Params.author}}</div>
{{ end }}
<div class="filler"></div>
</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="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) }}

68
static/css/main.css

@ -96,6 +96,7 @@ body {
padding-top: 5%;
}
/* base header & menu */
#top-menu{
@ -143,6 +144,7 @@ body {
.h-entry header {
display: flex;
border-bottom: 2px solid var(--border-color);
justify-content: space-between;
}
.h-entry header h2{
@ -150,7 +152,8 @@ body {
margin: 0;
padding-right: 0.3em;
padding-left: 0.3em;
border-right: 2px solid var(--border-color);
border-left: 2px solid var(--border-color);
flex-grow: 1;
}
.h-entry header h2:hover{
@ -166,13 +169,21 @@ body {
.h-entry header .header-metadata{
margin: 0;
padding: 0.5em;
display: flex;
flex-flow: column wrap;
font-size: 0.9em;
align-content: flex-end;
font-size: 0.8rem;
}
.header-metadata .dt-published{
padding: 0.5em 1.2em 0.5em 1.2em;
}
.author.p-author {
border-top: 2px solid var(--border-color);
padding: 0.5em 1.2em 0.5em 1.2em;
}
.p-summary.truncated.image {
display: flex;
flex-direction: row-reverse;
@ -224,44 +235,59 @@ footer.post-footer {
.card.network{
border: 2px solid lightseagreen;
border: 2px solid darkcyan;
box-shadow:1em 1em 0 #d2d1c8;
background-color: lightgreen;
max-width: 360px;
max-width: 540px;
margin-bottom: 2em;
flex: auto;
margin: 0 3em 3em 0;
align-self: start;
color: rgba(60,60,60,0.8);
color: darkcyan;
}
.h-entry.network header {
display: flex;
border-bottom: 2px solid lightseagreen;
border-bottom: 2px solid darkcyan;
flex-direction: row-reverse;
}
.h-entry.network header h2{
padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0;
border-right: 2px solid lightseagreen;
border-color: darkcyan;
}
.h-entry.network header h2:hover{
box-shadow: inset 4px 4px 0px lightseagreen;
box-shadow: inset 4px 4px 0px darkcyan;
cursor: pointer;
}
.h-entry.network header h2 a {
text-decoration: none;
color: royalblue;
color: darkcyan;
}
.network .header-metadata {
align-items: center;
}
.network .header-metadata .dt-published{
padding-left: 1.2em;
min-width: 16ch;
}
.network .author.p-author {
border-color: darkcyan;
padding: 0.5em 1.2em 0.5em 1.2em;
}
.network footer.post-footer{
border-top: 2px solid lightseagreen;
border-top: 2px solid darkcyan;
}
.network .summary-image {
border-bottom: 2px solid lightseagreen;
border-bottom: 2px solid darkcyan;
border-right: none;
}
@ -271,28 +297,26 @@ footer.post-footer {
div.network-source{
padding: 0.5em 1.2em 0.5em 1.2em;
border-bottom: 2px solid lightseagreen;
border-bottom: 2px solid darkcyan;
font-size: 14px;
display: flex;
justify-content: space-between;
}
.network-source a {
font-weight: bold;
color: darkcyan;
}
.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);
border-left: 2px solid darkcyan;
}
/* calendar cards */
.card.calendar {

Loading…
Cancel
Save