:art: adding max width helper class | moving around markup for welcome

vue-theme/src/pages/index.vue

@@ -1,65 +1,66 @@
 // Homepage grid
 <template lang="pug">
 .page--index.f-row.between
-    article.f-grow.f-col
-        //- if sticky
-        .f-row
-            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
-        .f-row
-            h3(v-if="!allPagesLoaded") loading...
-            .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")
+    article 
+        ul.f-grow.f-col
+            //- if sticky
+            li.f-row.wrap.w-max
+                h3(v-if="!allStickyLoaded") loading...
+                section(v-else-if="allStickyLoaded").w-max.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")
 
-        //- top section
-        .f-row
-            section(v-if="allEpisodesLoaded").shadow
-                router-link(:to="`/episodes`")
-                    h3.t-up episodes
-                router-link(v-if="allEpisodes.length > 0" :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;]
+            //- top section
+            li.f-row.wrap.w-max
+                section(v-if="allEpisodesLoaded").w-max.shadow
+                    router-link(:to="`/episodes`")
+                        h3.t-up episodes
+                    router-link(v-if="allEpisodes.length > 0" :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(v-if="allExhibitionsLoaded").shadow
-                router-link(:to="`/exhibitions`")
-                    h3.t-up exhibitions
-                router-link(v-if="allExhibitions.length > 0" :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="allExhibitionsLoaded").w-max.shadow
+                    router-link(:to="`/exhibitions`")
+                        h3.t-up exhibitions
+                    router-link(v-if="allExhibitions.length > 0" :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(v-if="allEvents.length > 0" :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 }}
+                section(v-if="allEventsLoaded").w-max.shadow
+                    router-link(:to="`/events`")
+                        h3.t-up events
+                    router-link(v-if="allEvents.length > 0" :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 }}
 
-            section(v-if="allPostsLoaded").shadow
-                router-link(:to="`/posts`")
-                    h3.t-up shorts PLACEHOLDER
-                router-link(v-if="allPosts.length > 0" :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").w-max.shadow
+                    router-link(:to="`/posts`")
+                        h3.t-up shorts PLACEHOLDER
+                    router-link(v-if="allPosts.length > 0" :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 }}
 
-        //- middle row
-        .f-row
-            section(v-if="allArtistsLoaded").shadow
-                router-link(:to="`/artists`")
-                    h3.t-up artists
-                router-link(v-if="allArtists.length > 0" :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 }}
+            //- middle row
+            li.f-row.wrap.w-max
+                section(v-if="allArtistsLoaded").w-max.shadow
+                    router-link(:to="`/artists`")
+                        h3.t-up artists
+                    router-link(v-if="allArtists.length > 0" :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 }}
 
-        //- footer row
-        .f-row
-            footer.f-col
-                p end of article icon
-                img(src="../star.svg")
+            //- footer row
+            li.f-row.wrap.w-max
+                footer.f-col
+                    p end of article icon
+                    img(src="../star.svg")
 </template>
 
 <script>
@@ -101,14 +102,11 @@ export default {
 
 .page--index
     article
-        section
-            flex-grow: 1
-            &:nth-of-type(2)
-                flex-grow: 3
-            &:nth-of-type(3), &:nth-of-type(4)
-                flex-grow: 1
-            &:nth-of-type(5), &:nth-of-type(6)
-                flex-grow: 4
+        ul > li
+            justify-content: space-around
+            align-items: stretch
+            section
+                padding: 1em
     footer
         img
             width: 30px

vue-theme/src/sss/_helpers.sss

@@ -76,6 +76,10 @@ button
         background-color: transparent !important
         background: none
 
+.w
+    &-max
+        width: 100%
+
 .z
     &-top
         z-index: 10001