:art: fixing up margins for wide article tags on single and list | more adjustments to images in cards

vue-theme/src/components/card.vue

@@ -93,10 +93,16 @@ export default {
     .is-grid .card
         &--info 
             .featured-or-hero-image img
-                max-height: $max-card-img-height
+                max-height: calc($max-card-img-height / 3)
     .card
+        &--info 
+            .featured-or-hero-image img
+                max-height: $max-card-img-height
         .wide
             padding: 0
             flex-direction: row
             grid-gap: $ms--2
+            /* Featured image link */
+            > a
+                max-width: 50%
 </style>

vue-theme/src/pages/index.vue

@@ -109,6 +109,7 @@ export default {
                 list-style: none
                 li.post
                     background-color: white
+                    margin: 0 0 0.65em 0
                     .featured-or-hero-image img
                         max-height: $max-card-img-height
                     p.excerpt
@@ -121,40 +122,42 @@ export default {
                         auto
 /* min-width 768px */
 @media (min-width: $medium)
-    .page--index > article > section
-        ul
-            display: grid
-            grid-template-columns: 
-                49.5% 24.25% 24.25%
-            grid-template-rows: 
-                48% 48%
-            gap: 2% 1%
-            li
-                margin: 0
-                min-height: 10em
-                &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
-                    p.excerpt
-                        -webkit-line-clamp: $card-line-clamp
-                    .featured-or-hero-image img
-                        max-height: calc($max-card-img-height / 2)
-                /* n1 episode */
-                &:nth-of-type(1)
-                    grid-column-start: 1
-                    grid-row-start: 1
-                    grid-row-end: 3
-                /* n2 exhibition, n3 events */
-                &:nth-of-type(2), &:nth-of-type(3)
-                    grid-column-start: 2
-                    grid-row-start: 1
-                &:nth-of-type(3)
-                    grid-column-start: 3
+    .page--index 
+        > article 
+            grid-gap: $ms--2 0
+            > section ul
+                display: grid
+                grid-template-columns: 
+                    49.5% 24.25% 24.25%
+                grid-template-rows: 
+                    48% 48%
+                gap: 2% 1%
+                li
+                    margin: 0
+                    min-height: 10em
+                    &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
+                        p.excerpt
+                            -webkit-line-clamp: $card-line-clamp
+                        .featured-or-hero-image img
+                            max-height: calc($max-card-img-height / 2)
+                    /* n1 episode */
+                    &:nth-of-type(1)
+                        grid-column-start: 1
+                        grid-row-start: 1
+                        grid-row-end: 3
+                    /* n2 exhibition, n3 events */
+                    &:nth-of-type(2), &:nth-of-type(3)
+                        grid-column-start: 2
+                        grid-row-start: 1
+                    &:nth-of-type(3)
+                        grid-column-start: 3
 
-                /* n4 artists, n5 posts */
-                &:nth-of-type(4), &:nth-of-type(5)
-                    grid-column-start: 2
-                    grid-row-start: 2
-                &:nth-of-type(5)
-                    grid-column-start: 3
+                    /* n4 artists, n5 posts */
+                    &:nth-of-type(4), &:nth-of-type(5)
+                        grid-column-start: 2
+                        grid-row-start: 2
+                    &:nth-of-type(5)
+                        grid-column-start: 3
         &.max
             /* Need some extra gap on wide pages */
             padding: $ms--2 0

vue-theme/src/pages/list.vue

@@ -250,7 +250,7 @@ export default {
     .posts.is-grid
         width: 100%
         display: grid
-        grid-template-columns: auto 33.33% auto
+        grid-template-columns: repeat(3, 1fr)
         grid-gap: $ms--2
         align-items: start
         /* This is important for how the grid lines up to the page */
@@ -260,6 +260,9 @@ export default {
                 max-width: 100%
 
 @media (min-width: $medium)
-    .page--list.f-col
-        flex-direction: row
+    .page--list
+        &.f-col
+            flex-direction: row
+        article
+            margin: 0 $ms--2 0 0
 </style>

vue-theme/src/pages/single.vue

@@ -331,6 +331,9 @@ export default {
 
         
 @media (min-width: $medium)
-    .page--single.f-col
-        flex-direction: row
+    .page--single
+        article
+            padding: 0 0.65em 0 0
+        &.f-col
+            flex-direction: row
 </style>