layout position for index page with placeholder images

vue-theme/src/pages/index.vue

@@ -2,6 +2,7 @@
 <template lang="pug">
 .page--index.f-row.between
     article.f-grow
+        //- if sticky
         .f-row
             h3(v-if="!allStickyLoaded") loading...
             section(v-else-if="allStickyLoaded").shadow
@@ -9,33 +10,106 @@
                 ul
                     li(v-for="sticky in allSticky")
                         p {{ sticky.type }}: {{ sticky.title }}
+        //- loading
         .f-row
             h3(v-if="!allPagesLoaded") loading...
             .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")
-        .f-row
-            section(v-if="allEpisodesLoaded").shadow
-                router-link(:to="`/episodes`")
-                    h4.t-cap episodes
-                router-link(:to="`/episodes/${Object.values(allEpisodes)[0].slug}`")
-                    p {{ Object.values(allEpisodes)[0].slug }}
 
+        //- top section
+        .f-row.around
+            .f-col
+                section(v-if="allEpisodesLoaded").shadow
+                    router-link(:to="`/episodes`")
+                        h3.t-up episodes
+                    router-link(:to="`/episodes/${Object.values(allEpisodes)[0].slug}`")
+                        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].slug }}
+                    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...[&hellip;]
+
+            .f.col
+                .f-row
+                    section(v-if="allExhibitionsLoaded").shadow
+                        router-link(:to="`/exhibitions`")
+                            h3.t-up exhibitions
+                        router-link(:to="`/exhibitions/${Object.values(allExhibitions)[0].slug}`")
+                            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].slug }}
+
+                    section(v-if="allEventsLoaded").shadow
+                        router-link(:to="`/events`")
+                            h3.t-up events
+                        router-link(:to="`/events/${Object.values(allEvents)[0].slug}`")
+                            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].slug }}
+                .f-row
+                    section(v-if="allPostsLoaded").shadow
+                        router-link(:to="`/posts`")
+                            h3.t-up shorts PLACEHOLDER
+                        router-link(:to="`/posts/${Object.values(allPosts)[0].slug}`")
+                            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].slug }}
+
+                    section(v-if="allPostsLoaded").shadow
+                        router-link(:to="`/posts`")
+                            h3.t-up posts
+                        router-link(:to="`/events/${Object.values(allPosts)[0].slug}`")
+                            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].slug }}
+
+        //- middle row
+        .f-row.around
             section(v-if="allArtistsLoaded").shadow
                 router-link(:to="`/artists`")
-                    h4.t-cap artists
+                    h3.t-up artists
                 router-link(:to="`/artists/${Object.values(allArtists)[0].slug}`")
-                    p {{ Object.values(allArtists)[0].slug }}
+                    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].slug }}
 
-            section(v-if="allPagesLoaded").shadow
-                h4.t-cap pages
-                    p {{ Object.values(allPages)[0].slug }}
+        //- bottom row
+        .f-row.around
+            .f.col
+                .f-row
+                    section(v-if="allPostsLoaded").shadow
+                        router-link(:to="`/objects`")
+                            h3.t-up objects PLACEHOLDER
+                        router-link(:to="`/objects/${Object.values(allPosts)[0].slug}`")
+                            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].slug }}
+
+                    section(v-if="allPostsLoaded").shadow
+                        router-link(:to="`/techniques`")
+                            h3.t-up techniques PLACEHOLDER
+                        router-link(:to="`/techniques/${Object.values(allPosts)[0].slug}`")
+                            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].slug }}
+                .f-row
+                    section(v-if="allPostsLoaded").shadow
+                        router-link(:to="`/talks`")
+                            h3.t-up talks PLACEHOLDER
+                        router-link(:to="`/talks/${Object.values(allPosts)[0].slug}`")
+                            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].slug }}
+
+                    section(v-if="allPostsLoaded").shadow
+                        router-link(:to="`/center`")
+                            h3.t-up center PLACEHOLDER
+                        router-link(:to="`/center/${Object.values(allPosts)[0].slug}`")
+                            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].slug }}
+            .f-col
+                section(v-if="allPostsLoaded").shadow
+                    router-link(:to="`/guides`")
+                        h3.t-up guides
+                    router-link(:to="`/guides/${Object.values(allPosts)[0].slug}`")
+                            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].slug }}
 
         .f-row
-            section(v-if="allPostsLoaded").shadow
-                router-link(:to="`/posts`")
-                    h4.t-cap posts
-                router-link(:to="`/posts/${Object.values(allPosts)[0].slug}`")
-                    p {{ Object.values(allPosts)[0].slug }}
-     
+            section(v-if="allPagesLoaded").shadow
+                h3.t-up pages
+                    h2.t-up.t-cntr {{ Object.values(allPages)[0].slug }}
+
+        //- footer row     
         .f-row
             footer.f-col
                 p end of article icon
@@ -93,6 +167,11 @@ export default {
                 margin: 0 0 0 $ms-0
             &:nth-of-type(5), &:nth-of-type(6)
                 flex-grow: 4
+            img.index
+                display: block
+                width: 20em 
+                margin-left: auto
+                margin-right: auto
     footer
         img
             width: 30px