make images full width on all screens

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

@@ -4,7 +4,7 @@
               {{ $postPermalink := .Permalink}}
               <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">
                 {{ range $i, $e := .Params.tags -}}
-                    {{- if $i -}}, {{ end -}}
+                    {{- if $i -}} {{ end -}}
                     <a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}'>#{{ $e | humanize }}</a>
                 {{- end -}}
               </a></h2>

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

@@ -36,21 +36,19 @@
 
 :root {
     --border-color: tomato;
-  
     --tv-dark: #237D0F;
     --tv-light: #E2FAD7;
-
     --pen-dark: #E0005C;
     --pen-light: #FEDAE9;
-
     --social-light: #C2E4F2;
     --social-dark: #0163A4;
-
     --gallery-light: #FCF4B9;
     --gallery-dark: #846A00;
 }
 
+
 /*Main Stuff*/
+
 body {
     font-size: 21px;
     font-family: Gudea;
@@ -75,7 +73,6 @@ body {
     flex: auto;
     margin: 0 3em 3em 0;
     align-self: start;
-  
 }
 
 .card {
@@ -87,7 +84,6 @@ body {
     max-width: 400px;
 }
 
-
 .card:nth-child(even) {
     transform: rotate(-1deg);
 }
@@ -100,7 +96,6 @@ body {
     transform: rotate(2deg);
 }
 
-
 .video.box {
     margin-top: 3em;
 }
@@ -118,7 +113,6 @@ body {
     display: flex;
     flex-flow: row wrap;
     width: 100%;
-  
 }
 
 .entries {
@@ -135,8 +129,9 @@ body {
     align-items: flex-start;
 }
 
-
-.home-link { text-decoration: none; }
+.home-link {
+    text-decoration: none;
+}
 
 .logo {
     width: 283px;
@@ -220,6 +215,7 @@ body {
     padding: 0.5em;
 }
 
+
 /*Article Summary Cards*/
 
 .h-entry header {
@@ -244,7 +240,6 @@ body {
     color: var(--border-color);
 }
 
-
 .h-entry header .header-metadata {
     margin: 0;
     display: flex;
@@ -252,6 +247,11 @@ body {
     font-size: 0.8rem;
 }
 
+.h-entry img {
+    max-width: 100%;
+    width: 100%;
+}
+
 .header-metadata .dt-published {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
@@ -261,7 +261,6 @@ body {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
-
 .p-summary.truncated.image {
     display: flex;
     flex-direction: row-reverse;
@@ -284,7 +283,6 @@ body {
     /*    height: 100%;
   object-fit: cover;
   max-width: 100%;*/
-  
 }
 
 .summary-image>a {
@@ -309,11 +307,11 @@ footer.post-footer {
     font-size: 0.9rem;
 }
 
+
 /* network cards */
 
 .card.network {
     border: 2px solid darkcyan;
-
     background-color: lightgreen;
     max-width: min-content;
     margin-bottom: 2em;
@@ -350,7 +348,6 @@ footer.post-footer {
 }
 
 .network .header-metadata .dt-published {
-  
     border-bottom: 2px solid darkcyan;
 }
 
@@ -370,21 +367,24 @@ footer.post-footer {
 .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;
 }
+
 .network .summary-text {
     font-size: 18px;
 }
@@ -423,12 +423,12 @@ div.network-source {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
+
 /* shouts cards */
 
 .card.shout {
     border-color: steelblue;
     border: 2px solid;
-
     background-color: aliceblue;
     max-width: min-content;
     margin-bottom: 2em;
@@ -441,11 +441,10 @@ div.network-source {
 .card.shout h2 a {
     color: var(--social-dark);
     cursor: pointer;
+    display: block;
 }
 
-.card
-
-.card.shout h2 a:hover {
+.card .card.shout h2 a:hover {
     border: none;
     text-decoration: none;
 }
@@ -455,6 +454,7 @@ div.network-source {
     color: var(--social-dark);
 }
 
+
 /* calendar cards */
 
 .card.calendar {
@@ -519,6 +519,7 @@ div.network-source {
     flex-flow: row-reverse;
     border-bottom: 2px solid cornflowerblue;
 }
+
 .start-scroller marquee {
     font-size: 0.8rem;
     padding-top: 0.2em;
@@ -542,6 +543,7 @@ div.network-source {
     display: inherit;
 }
 
+
 /* Card metadata (video & calendar) */
 
 .metadata {
@@ -592,6 +594,7 @@ label:hover {
     text-align: center;
 }
 
+
 /* Paginator */
 
 nav.pagination {
@@ -603,8 +606,10 @@ nav.pagination {
 
 ul.pagination {
     display: flex;
-  justify-content: space-evenly; /* align horizontal */
-  align-items: center; /* align vertical */
+    justify-content: space-evenly;
+    /* align horizontal */
+    align-items: center;
+    /* align vertical */
 }
 
 .page-item {
@@ -632,6 +637,7 @@ li.page-item.disabled {
     display: none;
 }
 
+
 /* 
 li.page-item:nth-child(even) {
   transform: rotate(-1deg);
@@ -672,7 +678,6 @@ li.page-item:nth-last-child(2)::after {
     display: none;
 }
 
-
 li.page-item a {
     text-decoration: none;
 }
@@ -721,6 +726,7 @@ footer a:hover {
     text-decoration: underline;
 }
 
+
 /* mobile styles */
 
 @media (max-width: 480px) {
@@ -761,10 +767,14 @@ footer a:hover {
         width: 0;
         z-index: 2;
         transition: 0.2s all ease-in-out;
-    padding-top: 120px; }
+        padding-top: 120px;
+    }
+    
     .drawer * {
         display: none;
-      opacity: 0; }
+        opacity: 0;
+    }
+
     #top-menu .drawer ul {
         display: flex;
         flex-direction: column;
@@ -773,27 +783,29 @@ footer a:hover {
         margin: 0;
         padding: 0;
     }
+    
     .drawer ul li {
         padding: 1em 0;
-        border-bottom: 1px solid #333; }
+        /* border-bottom: 1px solid #333; */
+    }
+    
     .drawer ul li a {
         color: white;
         text-decoration: none;
         text-transform: lowercase;
-          margin-left: 1em; }
-    .drawer.opened {
-      width: 80%; }
-      .drawer.opened * {
-        display: block;
-        opacity: 1; }
-  
-
-  /* card styles */
-  .h-entry img {
-    max-width: 100%;
-    width: 100%;
+        margin-left: 1em;
     }
 
+    .drawer.opened {
+        width: 80%;
+    }
+    
+    .drawer.opened * {
+        display: block;
+        opacity: 1;
+    }
+    
+    /* card styles */
     .summary-text {
         font-size: 17px;
         min-width: none;