:art: checking conditional classes for list

vue-theme/src/components/card.vue

@@ -6,7 +6,7 @@
         router-link(v-else-if="!hideType" :to="`/${type}`")
             p.t-up {{type}}
 
-    article.card--info.f-col(:class="{ 'wide': wide }")
+    article.card--info(:class="{ 'wide': wide }")
         router-link(:to="`/${type}/${content.slug}`")
             //- set image to thumbnail setting
             featured-image(:post="content", thumbsize="'standard'")
@@ -43,15 +43,17 @@ export default {
     padding: $ms--1
     overflow: hidden
     text-overflow: clip
-    &--info
+    &--info 
+        display: flex
+        flex-direction: column
         > a
             line-height: 0
-            /* Force crop images */
-            .featured-or-hero-image img
-                object-fit: cover
-                object-position: 0% 30%
-                max-height: calc($max-card-img-height / 2)
-                overflow-y: clip
+        /* Force crop images */
+        .featured-or-hero-image img
+            object-fit: cover
+            object-position: 0% 30%
+            max-height: calc($max-card-img-height / 2)
+            overflow-y: clip
     header a
         font-size: $ms--2
         text-decoration: none
@@ -89,9 +91,15 @@ export default {
 @media (min-width: $medium)
     .card
         .wide
-            display: flex
             padding: 0
+            flex-direction: row
             grid-gap: $ms-0
             a
                 width: 100%
+                /* Force crop images */
+                .featured-or-hero-image img
+                    object-fit: cover
+                    object-position: 0% 30%
+                    max-height: $max-card-img-height
+                    overflow-y: clip
 </style>

vue-theme/src/pages/index.vue

@@ -83,7 +83,7 @@ export default {
             await this.$store.dispatch('getAllPages', { sortType: null, params: null })
         }
         await this.$store.dispatch('getRandomPosts', ['episode', 'exhibition', 'event', 'artist', 'post'])
-    },
+        },
     methods: {
         firstPostOfType(type) {
             return Object.values(this[`all${convertTitleCase(type)}s`])[0]

vue-theme/src/pages/list.vue

@@ -14,9 +14,9 @@
                 v-html="allPages[type].content"
             )
 
-        ul.posts(v-if="posts && loaded" :class="{ 'is-grid': grid }")
-            li(v-for="(post, i) in posts" :key="post.slug").post
-                card(:content="post" :type="type" :wide="type == 'exhibition' && i > 1 || type == 'event' && i > 1 ")
+        ul.posts.f-col(v-if="posts && loaded" :class="{ 'is-grid': grid }")
+            li(v-for="(post, i) in posts" :key="post.slug").post.w-max
+                card(:content="post" :type="type" :wide="isWide")
         
         //- Important: Do NOT remove this! Required for intersection observer
         footer
@@ -73,6 +73,9 @@ export default {
             if (!this.pType) return
             return this[`all${this.pType}`]
         },
+        isWide() {
+            return this.type == 'exhibition' && i > 1 || this.type == 'event' && i > 1 
+        }
     },
     methods: {
         clearAllPosts() {
@@ -227,10 +230,8 @@ export default {
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
 .page--list
-    /* background-color: white */
     article
         > header
-            /* padding: 1em 0 1em 0 */
             padding: 1em
             > h1
                 margin: 0
@@ -238,24 +239,21 @@ export default {
                 padding: 0
                 width: 100%
         > footer
-            background-color: white
             padding: $ms-0
         /* posts not grid list */
-        ul img
-            max-width: 50%
-
-        .is-grid
-            display: flex
-            flex-direction: row
-            flex-wrap: wrap
-            justify-content: space-between
-            section
-                width: 32.5%
-            ul
+        .posts
+            list-style: none
+            grid-gap: $ms-0
+            &.is-grid
+                flex-direction: row
                 flex-wrap: wrap
-                list-style: none
-                img
-                    max-width: 100%
+                justify-content: space-between
+                section
+                    width: 32.5%
+                ul
+                    flex-wrap: wrap
+                    img
+                        max-width: 100%
 
 @media (min-width: $medium)
     .page--list.f-col

vue-theme/src/sss/variables.sss

@@ -12,7 +12,7 @@ $path: 4px
 /* Proportion */
 $base: 0.95em
 
-$max-card-img-height: 260px
+$max-card-img-height: 320px
 $card-line-clamp: 3
 
 $ratio: $minor-third