try the fonts suggested by 4oo2 and add start of #9

layouts/_default/list.html

@@ -15,6 +15,10 @@
 
         {{- partial "network_card.html" . -}}
 
+      {{ else if in .Params.categories "shouts" }}
+
+        {{- partial "shout_card.html" . -}}
+
       {{ else }}
 
         {{- partial "card.html" . -}}

layouts/index.html

@@ -15,6 +15,10 @@
 
         {{- partial "network_card.html" . -}}
 
+      {{ else if in .Params.categories "shouts" }}
+
+        {{- partial "shout_card.html" . -}}
+
       {{ else }}
 
         {{- partial "card.html" . -}}

layouts/partials/head.html

@@ -11,6 +11,9 @@
     <meta name="author" content='{{ .Site.Params.author }}'>
     {{- end }}
 
+    {{ template "_internal/opengraph.html" . }}
+    {{ template "_internal/twitter_cards.html" . }}
+
     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css">
     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/video-box.css">
     <link media="print" rel="stylesheet" href="{{ .Site.BaseURL }}css/print.css">

layouts/partials/shout_card.html

@@ -0,0 +1,36 @@
+    <div class='shout card'>
+          <article class="h-entry shout">
+            <header>
+              {{ $postPermalink := .Permalink}}
+              <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
+            </header>
+
+            {{ with (index (.Resources.ByType "image") 0) }}
+              {{ $height := add .Height 0.0}}
+              {{ $ratio := div $height .Width}}
+              {{ $thumb := .Fit "540x360"}}
+            <div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
+              <div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}"> 
+              <a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}"  alt="{{ .Title }}"> </a>
+            </div>
+              {{ else }}
+              <div class="p-summary">
+              {{ end }}
+              <div class="summary-text">
+                {{ .Summary }}
+              </div>
+              </div>
+              <div class="shout-source"></div>
+
+            <footer class='post-footer'>
+              <div class='footer-metadata'>
+              <span class="from p-author">From {{ if .Params.author }}<b>{{.Params.author}}</b> on{{ end }}</span>
+               <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
+               </div>
+             {{ if .Truncated }}
+                <div class="footer-filler"></div>
+                <div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div>
+                {{ end }}
+              </footer>            
+          </article>
+    </div>

static/css/main.css

@@ -5,20 +5,40 @@ peachpuff - tomato
 lightpink - crimson
 lightblue - cornflowerblue
 palegreen - lightseagreen
+steelblue - aliceblue
 
 fonts
 bungeeshade
 allerta
 */
 
+@font-face {
+  font-family: BarrioRegular;
+  src: url(fonts/Barrio_Regular.woff);
+}
+
+@font-face {
+  font-family: ZenMaruGothic;
+  src: url(fonts/Zen_Maru_Gothic_Regular.woff);
+}
+
+@font-face {
+  font-family: AnonymousPro;
+  src: url(fonts/Anonymous_Pro_Regular.woff);
+}
+
+h1, h2, h3 {
+  font-family: BarrioRegular;
+}
+
 :root {
   --border-color: tomato;
 }
 
 /*Main Stuff*/
 body {
-  font-size:16px;
-  font-family: sans-serif;
+  font-size:24px;
+  font-family: ZenMaruGothic;
   color: maroon;
 }
   
@@ -321,7 +341,7 @@ footer.post-footer {
   display: inherit;
 }
 .network .summary-text {
-  font-size: 14px;
+  font-size: 18px;
 }
 
 div.network-source{
@@ -358,6 +378,21 @@ div.network-source{
   padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
+/* shouts cards */
+
+.card.shout{
+      border-color: steelblue;
+      border: 2px solid;
+      box-shadow:1em 1em 0 #d2d1c8;
+      background-color: aliceblue;
+      max-width: min-content;
+      margin-bottom: 2em;
+      flex: auto;
+      margin:  0 3em 3em 0;
+      align-self: start;
+      color: steelblue;
+    }
+
 /* calendar cards */
 
 .card.calendar {