:recycle: rough re-layout of home page

vue-theme/src/app.vue

@@ -34,6 +34,7 @@ html
         main 
             background-color: green
             width: 100%
+            margin: 0 0 3vh 0
             
             :--headings
                 color: yellow

vue-theme/src/pages/index.vue

@@ -4,35 +4,40 @@
     article.w-max
         section
             ul
-                li.wide
-                    p 1 - 1
-                li
-                    p 1 - 2
-                li
-                    p 1 - 3
-                li
-                    p 1 - 4
-                li
-                    p 1 - 5
+                li.shadow(v-for="type in ['episodes', 'exhibitions', 'events', 'artists', 'posts']")
+                    .card(v-if="firstPostOfType(type)")
+                        router-link(:to="`/${type}`")
+                            p.t-up {{type}}
+                        router-link(:to="`/${type}/${firstPostOfType(type).slug}`")
+                            img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
+                            h1.t-up.t-cntr {{ firstPostOfType(type).title }}
+                        p episode excerpt, Lorem ipsum dolor sit amet, consectetu
 
         section
-            ul.max
-                li
-                    p 2 - 1
+            ul.max.w-max
+                li.shadow(v-for="post in [randomPostOfType('artists')]")
+                    .card(v-if="post")
+                        router-link(:to="`/${'artists'}/${post.slug}`")
+                            p.t-up {{'artists'}}
+                        .f-row(style="justify-content: flex-start;")
+                            img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
+                            .card--info.f-col.w-max
+                                router-link(:to="`/artists/${post.slug}`")
+                                    h1.t-up.t-cntr {{ post.title }}
+                                    p episode excerpt, Lorem ipsum dolor sit amet, consectetu
 
         section
             ul.flipped
-                li
-                    p 3 - 1
-                li
-                    p 3 - 2
-                li
-                    p 3 - 3
-                li
-                    p 3 - 4
-                li.wide
-                    p 3 - 5
-        
+                li.shadow(v-for="type in ['episodes', 'exhibitions', 'events', 'artists', 'artists']")
+                    .random--wrapper(v-for="post in [randomPostOfType(type)]")
+                        .card(v-if="post")
+                            router-link(:to="`/${type}`")
+                                p.t-up {{type}}
+                            router-link(:to="`/${type}/${post.slug}`")
+                                img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
+                                h1.t-up.t-cntr {{ post.title }}
+                            p episode excerpt, Lorem ipsum dolor sit amet, consectetu
+                                
         //- if sticky
         //- li.f-row.wrap.w-max
         //-     h3(v-if="!allStickyLoaded") loading...
@@ -45,48 +50,6 @@
         //- li.f-row.wrap.w-max
         //-     h3(v-if="!allPagesLoaded") loading...
         //-     .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")
-
-        //- top section
-        //- section(v-if="allEpisodesLoaded").shadow
-        //-     router-link(:to="`/episodes`")
-        //-         h3.t-up episodes
-        //-     router-link(:to="`/episodes/${Object.values(allEpisodes)[0]}`")
-        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-        //-         h2.t-up.t-cntr {{ Object.values(allEpisodes)[0] }}
-        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[…]
-
-        //- section(v-if="allExhibitionsLoaded").shadow
-        //-     router-link(:to="`/exhibitions`")
-        //-         h3.t-up exhibitions
-        //-     router-link(:to="`/exhibitions/${Object.values(allExhibitions)[0]}`")
-        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-        //-         h2.t-up.t-cntr {{ Object.values(allExhibitions)[0] }}
-        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[…]
-
-        //- section(v-if="allEventsLoaded").shadow
-        //-     router-link(:to="`/events`")
-        //-         h3.t-up events
-        //-     router-link(:to="`/events/${Object.values(allEvents)[0]}`")
-        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-        //-         h2.t-up.t-cntr {{ Object.values(allEvents)[0] }}
-        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[…]
-
-        //- section(v-if="allPostsLoaded").shadow
-        //-     router-link(:to="`/posts`")
-        //-         h3.t-up shorts PLACEHOLDER
-        //-     router-link(:to="`/posts/${Object.values(allPosts)[0]}`")
-        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-        //-         h2.t-up.t-cntr {{ Object.values(allPosts)[0] }}
-        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[…]
-
-        //- //- middle row
-        //- section(v-if="allArtistsLoaded").shadow
-        //-     router-link(:to="`/artists`")
-        //-         h3.t-up artists
-        //-     router-link(:to="`/artists/${Object.values(allArtists)[0]}`")
-        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-        //-         h2.t-up.t-cntr {{ Object.values(allArtists)[0] }}
-        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[…]
 </template>
 
 <script>
@@ -118,6 +81,15 @@ export default {
             }
             this.$store.commit('SET_HERO', json)
         },
+        firstPostOfType(type) {
+            return Object.values(this[`all${convertTitleCase(type)}`])[0]
+        },
+        randomPostOfType(type) {
+            const postsOfType = Object.values(this[`all${convertTitleCase(type)}`])
+            const max = postsOfType.length
+            const rand = Math.floor(Math.random() * max)
+            return postsOfType[rand]
+        }
     }
 }
 </script>
@@ -132,33 +104,29 @@ export default {
         flex-direction: column
         align-items: stretch
         section
-            border: 1px yellow solid
             ul
                 list-style: none
 @media (min-width: $medium)
     .page--index > article > section
         &:nth-of-type(2)
-            margin: 1em auto
+            margin: 3% 0 2% 0
         ul
             display: grid
             grid-template-columns: 
                 50% 24% 24%
             grid-template-rows: 
-                47% 47%
+                48% 48%
             gap: 4% 1%
-            justify-items: strech
-            align-items: stretch
-            height: auto
             li
-                min-height: 20em
+                min-height: 10em
                 background-color: purple
-                &.wide:nth-of-type(1)
+                &:nth-of-type(1)
                     grid-column-start: 1
                     grid-row-start: 1
-                    grid-row-end: end
+                    grid-row-end: 3
                 &:nth-of-type(2), &:nth-of-type(3)
-                    grid-row-start: 1
                     grid-column-start: 2
+                    grid-row-start: 1
                 &:nth-of-type(3)
                     grid-column-start: 3
                 &:nth-of-type(4), &:nth-of-type(5)
@@ -166,21 +134,40 @@ export default {
                     grid-row-start: 2
                 &:nth-of-type(5)
                     grid-column-start: 3
+                .card
+                    padding: $ms--3 $ms--1
+                    overflow: hidden
+                    text-overflow: clip
+                    &--info
+                        justify-content: center
+                    img
+                        width: 100%
+                        height: auto
+                    h1, h2, h3, p
+                        padding: 0
+                        margin: 0
+                    h1
+                        font-size: $ms-1
             &.max
                 grid-template-columns: 
                     auto
                 grid-template-rows: 
                     auto
+                > li > .card > img
+                    max-width: 50%
             &.flipped
                 grid-template-columns: 
                     24% 24% 50%
                 li
+                    &:nth-of-type(1)
+                        grid-column-start: 1
+                        grid-row-start: 1
+                        grid-row-end: 2
                     &:nth-of-type(3)
                         grid-column-start: 1
                         grid-row-start: 2
-                    &.wide:nth-of-type(5)
-                        grid-column-start: 3
+                    &:nth-of-type(5)
                         grid-row-start: 1
-                        grid-row-end: end
+                        grid-row-end: 3
 
 </style>