:art: styling changes for image hovers

vue-theme/src/app.vue

@@ -36,8 +36,13 @@ html
             width: 100%
             margin: 0 0 3vh 0
             
-            :--headings
-                color: yellow
+            :--headings, a
+                color: $cia_red
+            img
+                transition: $transition ease-in
+                &:hover
+                    filter: grayscale(100%) brightness(85%)
+                    cursor: pointer
 
             > [class^="page--"]
                 background-color: lightblue

vue-theme/src/components/card.vue

@@ -1,8 +1,9 @@
 <template lang="pug">
 .card(v-if="content")
-    router-link(:to="`/${type}`")
-        p.t-up {{type}}
-    .card--info(:class="{ 'wide': wide }")
+    header
+        router-link(:to="`/${type}`")
+            p.t-up {{type}}
+    article.card--info(:class="{ 'wide': wide }")
         router-link(:to="`/${type}/${content.slug}`")
             featured-image(:post="content")
         .f-col.w-max
@@ -28,6 +29,9 @@ export default {
     text-overflow: clip
     &--info
         justify-content: center
+    header
+        a
+            text-decoration: none
     img
         width: 100%
         height: auto

vue-theme/src/components/featured-image.vue

@@ -27,9 +27,6 @@ export default {
         getThumbnailFromYt(url) {
             return ytThumbnail(url, 'medium')
         }
-    },
-    created() {
-        console.log(this.post)
     }
 }
 </script>

vue-theme/src/pages/index.vue

@@ -10,17 +10,17 @@
 
         section
             ul
-                li.shadow(v-for="type in ['episodes', 'exhibitions', 'events', 'artists', 'posts']")
+                li.shadow(v-for="type in firstRow")
                     card(:content="firstPostOfType(type)" :type="type")
 
         section.max
             ul.w-max
-                li.shadow(v-for="post in [randomPostOfType('artists')]")
+                li.shadow(v-for="post in [randomPostOfType(secondRow)]")
                     card(v-if="post" :content="post" :type="`${post.type}s`" :wide="true")
 
         section
             ul.flipped
-                li.shadow(v-for="type in ['episodes', 'exhibitions', 'events', 'artists', 'artists']")
+                li.shadow(v-for="type in thirdRow")
                     .random--wrapper(v-for="post in [randomPostOfType(type)]")
                         card(:content="post" :type="type")
 </template>
@@ -34,6 +34,13 @@ import { convertTitleCase, postTypes } from '@/utils/helpers'
 export default {
     mixins: [postTypeGetters, scrollTop],
     components: { card },
+    data() { 
+        return {
+            firstRow: ['episodes', 'exhibitions', 'events', 'artists', 'posts'],
+            secondRow: 'artists', // This is only ONE post
+            thirdRow: ['episodes', 'exhibitions', 'events', 'artists', 'artists']
+        }
+    },
     created() {
         // console.log(wp)
         postTypes.forEach(type => {

vue-theme/src/pages/list.vue

@@ -155,14 +155,14 @@ export default {
         ul
             img
                 max-width: 50%
-            li
-                
+
         .is-grid
             display: flex
             flex-direction: row
             flex-wrap: wrap
+            justify-content: space-between
             section
-                width: 33%
+                width: 32.5%
             ul
                 flex-wrap: wrap
                 list-style: none

vue-theme/src/sss/variables.sss

@@ -1,6 +1,6 @@
 @import './_ratios.sss'
 
-$transition: 300ms
+$transition: 500ms
 
 $min-width: 20em
 $max-width: 77em