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

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'>

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