style pen cards

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

@@ -0,0 +1,36 @@
+    <div class='pen card {{ .Params.feed_name }}'>
+      <article class="h-entry pen">
+        <header>
+        <div class="pen-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>
+          
+          {{ $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>
+        
+        {{ with (index (.Resources.ByType "image") 0) }}
+        {{ $height := add .Height 0.0}}
+        {{ $ratio := div $height .Width}}
+        {{ $thumb := .Fit "540x540 q80 webp"}}
+        <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>
+          
+          <footer class='post-footer'>
+            <a href="{{ .RelPermalink }}">
+              <svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
+              </svg>
+            </a>
+          </footer>            
+        </article>
+      </div>