network cards now have a different layout for portrait and landscape mode

layouts/partials/network_card.html

@@ -1,33 +1,36 @@
     <div class='network card'>
           <article class="h-entry network">
             <header>
+              {{ $postPermalink := .Permalink}}
               <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>
-               <div class="filler"></div>
-             </div>
+              
+
             </header>
 
             <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) }}
-                {{ $thumb := .Fit "540x360"}}
-              <div class="summary-image"> 
-              <img src="{{ $thumb.Permalink }}"  alt="{{ .Title }}">
-              </div>
+            {{ 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>
-            {{ if .Truncated }}
-              <footer class='post-footer'>
+            <footer class='post-footer'>
+              <div class='footer-filler'>
+               <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
+               </div>
+             {{ if .Truncated }}
                 <div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div>
-                <div class='footer-filler'></div>
-              </footer>
-            {{ end }}
-            
+                {{ end }}
+              </footer>            
           </article>
     </div>

static/css/main.css

@@ -206,19 +206,22 @@ body {
 .summary-text {
   flex: 1;
   padding: 1em;
-  max-height: 300px;
-  min-width: 20ch;
+  min-width: 34ch;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .summary-image > img {
-    height: 100%;
+/*    height: 100%;
     object-fit: cover;
-    max-width: 100%;
+    max-width: 100%;*/
 
 }
 
+.summary-image > a {
+  display: flex;
+}
+
 .summary-image{
   border-right: 2px solid var(--border-color);
 }
@@ -247,7 +250,7 @@ footer.post-footer {
       border: 2px solid darkcyan;
       box-shadow:1em 1em 0 #d2d1c8;
       background-color: lightgreen;
-      max-width: 540px;
+      max-width: min-content;
       margin-bottom: 2em;
       flex: auto;
       margin:  0 3em 3em 0;
@@ -264,7 +267,7 @@ footer.post-footer {
 .h-entry.network header h2{
   padding: 0.2em 0.5em 0.2em 0.5em;
   margin: 0;
-  border-color: darkcyan;
+  border: none;
 }
 
 .h-entry.network header h2:hover{
@@ -282,8 +285,7 @@ footer.post-footer {
 }
 
 .network .header-metadata .dt-published{
-  padding-left: 1.2em;
-  min-width: 16ch;
+
   border-bottom: 2px solid darkcyan;
 }
 
@@ -296,15 +298,25 @@ footer.post-footer {
   padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
-.network footer.post-footer{
-  border-top: 2px solid darkcyan;
+.network .p-summary {
+  display: flex;
 }
 
-.network .summary-image {
+.network .p-summary.portrait {
+  flex-direction: row;
+}
+.network .p-summary.landscape{
+  flex-direction: column;
+}
+.network .summary-image.portrait {
+  border-right: 2px solid darkcyan;
+}
+.network .summary-image.landscape {
   border-bottom: 2px solid darkcyan;
   border-right: none;
 }
 
+
 .network .summary-image > img {
   display: inherit;
 }
@@ -333,6 +345,13 @@ div.network-source{
   border-left: 2px solid darkcyan;
 }
 
+.network footer.post-footer{
+  border-top: 2px solid darkcyan;
+  flex-flow: row;
+  font-size: 0.8rem;
+  padding-left: 1.2em;
+  min-width: 16ch;
+}
 
 /* calendar cards */