style pen cards

themes/lumbung-theme/layouts/_default/list.html

@@ -20,6 +20,10 @@
 
             {{- partial "shout_card.html" . -}}
 
+          {{ else if in .Params.categories "pen" }}
+
+            {{- partial "pen_card.html" . -}}
+          
           {{ else if in .Params.categories "page" }}
 
             {{- partial "blank.html" . -}}

themes/lumbung-theme/layouts/index.html

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

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>

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

@@ -507,6 +507,128 @@ div.network-source {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
+/* pen cards */
+.card.pen {
+    border: 2px solid var(--pen-dark);
+    background-color: var(--pen-light);
+    max-width: min-content;
+    margin-bottom: 2em;
+    flex: auto;
+    margin: 0 3em 3em 0;
+    align-self: start;
+    color: var(--shouts-dark);
+}
+
+.h-entry.pen header {
+    display: flex;
+    flex-direction: column;
+}
+
+.h-entry.pen header h2 {
+    padding: 0.2em 0.5em 0.5em 0.5em;
+    margin: 0;
+    border: none;
+}
+
+.h-entry.pen header h2:hover {
+    cursor: pointer;
+}
+
+.h-entry.pen header h2 a {
+    text-decoration: none;
+    color: var(--pen-dark);
+}
+
+.h-entry.pen header time {
+    text-align: right;
+    padding: 0.6em 0.8em;
+    padding-top: 0;
+    font-size: 1rem;
+}
+
+.pen .header-metadata {
+    align-items: center;
+}
+
+.pen .header-metadata .dt-published {
+    border-bottom: 2px solid var(--pen-dark);
+}
+
+.pen .filler {
+    min-height: 1rem;
+}
+
+.pen .author.p-author {
+    border-color: var(--pen-dark);
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
+
+.pen .p-summary {
+    display: flex;
+}
+
+.pen .p-summary.portrait {
+    flex-direction: row;
+}
+
+.pen .p-summary.landscape {
+    flex-direction: column;
+}
+
+.pen .summary-image > img {
+    display: inherit;
+}
+
+.pen .summary-text {
+    font-size: 18px;
+}
+
+div.pen-source {
+    padding: 1em;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--pen-dark);
+    color: white;
+    margin: auto;
+    position: relative;
+    bottom: 21px;
+    transform:  rotate(1deg);
+}
+
+
+.pen-source a {
+    font-weight: bold;
+    color: white;
+}
+
+.pen .footer-filler {
+    border-left: 2px solid var(--pen-dark);
+    border-top: none;
+}
+
+.pen footer.post-footer {
+    border-top: 2px solid var(--pen-dark);
+    flex-flow: row;
+    font-size: 0.9rem;
+    background-color: var(--pen-light);
+    color: var(--pen-dark);
+    padding: 0.25em 0.5em;
+}
+
+.pen footer svg {
+    fill: var(--pen-dark)
+}
+
+.pen .read-more {
+    border: none;
+    border-left: 2px solid var(--pen-dark);
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
+
+.pen .footer-metadata {
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
 
 /* shouts cards */