style pen cards

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 */