Browse Source

refine network cards, wip #3

main
rra 3 years 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> <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
<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 }} <div class="filler"></div>
<div class='author p-author'>{{.Params.author}}</div>
{{ 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="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" > <div class="p-summary {{if .Truncated}} truncated {{end}} img" >
{{ with (index (.Resources.ByType "image") 0) }} {{ with (index (.Resources.ByType "image") 0) }}

68
static/css/main.css

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

Loading…
Cancel
Save