:art: using grid layout for homepage

vue-theme/src/app.vue

                 /* Single & List Pages */
                 > article
                     background-color: lightpink
-                    > * > * 
-                        padding: $ms-0
-                    > section, > header
-                        margin: 0 0 $ms-0
-                    .block-wrapper
-                        .wp-block-gallery
-                            .blocks-gallery
-                                /* &-grid
-                                    list-style: none
-                                &-item
-                                    float: left
-                            &.columns-1
-                                .blocks-gallery-item
-                                    width: 100%
-                            &.columns-2
-                                .blocks-gallery-item
-                                    width: 50%
-                            &.columns-3
-                                .blocks-gallery-item
-                                    width: 33.33%
-                            &.columns-4
-                                .blocks-gallery-item
-                                    width: 25% */
                 
         nav, footer
             &.main

vue-theme/src/pages/index.vue

 // Homepage grid
 <template lang="pug">
 .page--index.f-row.between
-    article 
-        ul.f-grow.f-col
-            //- if sticky
-            //- li.f-row.wrap.w-max
-            //-     h3(v-if="!allStickyLoaded") loading...
-            //-     section(v-else-if="allStickyLoaded").shadow
-            //-         h4.t-cap sticky
-            //-         ul
-            //-             li(v-for="sticky in allSticky")
-            //-                 p {{ sticky.type }}: {{ sticky.title }}
-            //- loading
-            //- li.f-row.wrap.w-max
-            //-     h3(v-if="!allPagesLoaded") loading...
-            //-     .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")
+    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
 
-            //- top section
-            li.f-row.wrap.w-max
-                section(v-if="allEpisodesLoaded && allEpisodes").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;]
+        section
+            ul.max
+                li
+                    p 2 - 1
 
-                section(v-if="allExhibitionsLoaded && allExhibitions").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 }}
-                    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;]
+        section
+            ul.flipped
+                li
+                    p 3 - 1
+                li
+                    p 3 - 2
+                li
+                    p 3 - 3
+                li
+                    p 3 - 4
+                li.wide
+                    p 3 - 5
+        
+        //- if sticky
+        //- li.f-row.wrap.w-max
+        //-     h3(v-if="!allStickyLoaded") loading...
+        //-     section(v-else-if="allStickyLoaded").shadow
+        //-         h4.t-cap sticky
+        //-         ul
+        //-             li(v-for="sticky in allSticky")
+        //-                 p {{ sticky.type }}: {{ sticky.title }}
+        //- loading
+        //- li.f-row.wrap.w-max
+        //-     h3(v-if="!allPagesLoaded") loading...
+        //-     .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")
 
-                section(v-if="allEventsLoaded && allEvents").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 }}
-                    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;]
+        //- 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...[&hellip;]
 
-                section(v-if="allPostsLoaded && allPosts").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 }}
-                    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;]
+        //- 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...[&hellip;]
 
-            //- middle row
-            li.f-row.wrap.w-max
-                section(v-if="allArtistsLoaded && allArtists").shadow
-                    router-link(:to="`/artists`")
-                        h3.t-up artists
-                    router-link(:to="`/artists/${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 }}
-                    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;]
+        //- 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...[&hellip;]
 
-            //- footer row
-            li.f-row.wrap.w-max
-                footer.f-col
-                    p end of article icon
-                    img(src="../star.svg")
+        //- 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...[&hellip;]
+
+        //- //- 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...[&hellip;]
 </template>
 
 <script>
 <style lang="postcss">
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
-
 .page--index
-    article
-        ul > li
-            justify-content: space-around
+    > article
+        display: flex
+        justify-content: space-around
+        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
+        ul
+            display: grid
+            grid-template-columns: 
+                50% 24% 24%
+            grid-template-rows: 
+                47% 47%
+            gap: 4% 1%
+            justify-items: strech
             align-items: stretch
-            section
-                padding: 1em
-    footer
-        img
-            width: 30px
-            height: 30px
-            
+            height: auto
+            li
+                min-height: 20em
+                background-color: purple
+                &.wide:nth-of-type(1)
+                    grid-column-start: 1
+                    grid-row-start: 1
+                    grid-row-end: end
+                &:nth-of-type(2), &:nth-of-type(3)
+                    grid-row-start: 1
+                    grid-column-start: 2
+                &:nth-of-type(3)
+                    grid-column-start: 3
+                &: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
+                grid-template-columns: 
+                    auto
+                grid-template-rows: 
+                    auto
+            &.flipped
+                grid-template-columns: 
+                    24% 24% 50%
+                li
+                    &:nth-of-type(3)
+                        grid-column-start: 1
+                        grid-row-start: 2
+                    &.wide:nth-of-type(5)
+                        grid-column-start: 3
+                        grid-row-start: 1
+                        grid-row-end: end
+
 </style>