style shouts card type

themes/lumbung-theme/layouts/partials/network_card.html

@@ -2,8 +2,8 @@
           <article class="h-entry network">
             <header>
               {{ $postPermalink := .Permalink}}
+              <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
               <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
-              
 
             </header>
 
@@ -26,8 +26,8 @@
 
             <footer class='post-footer'>
               <div class='footer-metadata'>
-               <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
-               </div>
+
+              </div>
              {{ if .Truncated }}
                 <div class="footer-filler"></div>
                 <div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div>

themes/lumbung-theme/static/css/main.css

@@ -44,6 +44,8 @@
     --social-dark: #0163A4;
     --gallery-light: #FCF4B9;
     --gallery-dark: #846A00;
+    --shouts-dark: #CB001D;
+    --shouts-light: #FFD9DD;
 }
 
 
@@ -55,6 +57,7 @@ body {
     margin: 0;
 
     /* pushes footer to bottom */
+    display: grid;
     grid-template-rows: auto auto 1fr auto;
     min-height: 100vh;
 }
@@ -319,36 +322,40 @@ footer.post-footer {
 /* network cards */
 
 .card.network {
-    border: 2px solid darkcyan;
-    background-color: lightgreen;
+    border: 2px solid var(--shouts-dark);
+    background-color: var(--shouts-light);
     max-width: min-content;
     margin-bottom: 2em;
     flex: auto;
     margin: 0 3em 3em 0;
     align-self: start;
-    color: darkcyan;
+    color: var(--shouts-dark);
 }
 
 .h-entry.network header {
     display: flex;
-    border-bottom: 2px solid darkcyan;
-    flex-direction: row-reverse;
+    flex-direction: column;
 }
 
 .h-entry.network header h2 {
-    padding: 0.2em 0.5em 0.2em 0.5em;
+    padding: 0.2em 0.5em 0.5em 0.5em;
     margin: 0;
     border: none;
 }
 
 .h-entry.network header h2:hover {
-    box-shadow: inset 4px 4px 0px darkcyan;
     cursor: pointer;
 }
 
 .h-entry.network header h2 a {
     text-decoration: none;
-    color: darkcyan;
+    color: var(--shouts-dark);
+}
+
+.h-entry.network header time {
+    text-align: right;
+    padding: 0.6em 0.8em;
+    font-size: 1rem;
 }
 
 .network .header-metadata {
@@ -356,7 +363,7 @@ footer.post-footer {
 }
 
 .network .header-metadata .dt-published {
-    border-bottom: 2px solid darkcyan;
+    border-bottom: 2px solid var(--shouts-dark);
 }
 
 .network .filler {
@@ -364,7 +371,7 @@ footer.post-footer {
 }
 
 .network .author.p-author {
-    border-color: darkcyan;
+    border-color: var(--shouts-dark);
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
@@ -381,11 +388,11 @@ footer.post-footer {
 }
 
 .network .summary-image.portrait {
-    border-right: 2px solid darkcyan;
+    border-right: 2px solid var(--shouts-dark);
 }
 
 .network .summary-image.landscape {
-    border-bottom: 2px solid darkcyan;
+    border-bottom: 2px solid var(--shouts-dark);
     border-right: none;
 }
 
@@ -398,32 +405,51 @@ footer.post-footer {
 }
 
 div.network-source {
-    padding: 0.5em 1em 0.5em 1em;
-    border-bottom: 2px solid darkcyan;
+    padding: 1em;
+    padding-right: 2em;
+    width: fit-content;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
+    background-color: var(--shouts-dark);
+    color: white;
+    position: relative;
+    right: 1em;
+}
+
+.network-source::before {
+    content: "";
+    position: absolute;
+    right: -20px;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border-left: 20px solid var(--shouts-dark);
+    border-top: 23px solid transparent;
+    border-bottom: 23px solid transparent;
 }
 
 .network-source a {
     font-weight: bold;
-    color: darkcyan;
+    color: white;
 }
 
 .network .footer-filler {
-    border-left: 2px solid darkcyan;
+    border-left: 2px solid var(--shouts-dark);
     border-top: none;
 }
 
 .network footer.post-footer {
-    border-top: 2px solid darkcyan;
+    border-top: 2px solid var(--shouts-dark);
     flex-flow: row;
     font-size: 0.9rem;
+    background-color: var(--shouts-light);
+    color: var(--shouts-dark)
 }
 
 .network .read-more {
     border: none;
-    border-left: 2px solid darkcyan;
+    border-left: 2px solid var(--shouts-dark);
     padding: 0.5em 1.2em 0.5em 1.2em;
 }