refine network cards, wip #3

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) }}

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 {