:recycle: cleaned up sticky layout

vue-theme/src/pages/index.vue

@@ -2,6 +2,21 @@
 <template lang="pug">
 .page--index.f-row.between
     article.w-max
+        section(v-if="allSticky && Object.keys(allSticky).length").stickies
+            ul.flipped(:class="[`sticky-${Object.keys(allSticky).length}`]")
+                //- if sticky
+                li.shadow(v-for="sticky in allSticky")
+                    .card(v-if="sticky")
+                        router-link(:to="`/${sticky.type}`")
+                            p.t-up {{sticky.type}}
+                        .card--info
+                            router-link(:to="`/${sticky.type}/${sticky.slug}`")
+                                img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
+                            .f-col.w-max
+                                router-link(:to="`/${sticky.type}/${sticky.slug}`")
+                                    h1.t-up.t-cntr {{ sticky.title }}
+                                p episode excerpt, Lorem ipsum dolor sit amet, consectetu
+
         section
             ul
                 li.shadow(v-for="type in ['episodes', 'exhibitions', 'events', 'artists', 'posts']")
@@ -13,18 +28,19 @@
                             h1.t-up.t-cntr {{ firstPostOfType(type).title }}
                         p episode excerpt, Lorem ipsum dolor sit amet, consectetu
 
-        section
-            ul.max.w-max
+        section.max
+            ul.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
+                        .card--info.f-row
+                            router-link(:to="`/artists/${post.slug}`")
+                                img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
+                            .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
+                                p episode excerpt, Lorem ipsum dolor sit amet, consectetu
 
         section
             ul.flipped
@@ -38,18 +54,7 @@
                                 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...
-        //-     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")
+
 </template>
 
 <script>
@@ -106,14 +111,41 @@ export default {
         section
             ul
                 list-style: none
+                .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 
+                margin: 0
+                > ul
+                    grid-template-columns: 
+                        auto
+                    grid-template-rows: 
+                        auto
+                    > li > .card > img
+                        width: 100%
 @media (min-width: $medium)
     .page--index > article > section
-        &:nth-of-type(2)
-            margin: 3% 0 2% 0
+        &.stickies
+            margin: 0 0 2% 0
+        &.max 
+            margin: 3.5% 0 3% 0
+            > li .card--info > a:first-of-type
+                width: 100%
         ul
             display: grid
             grid-template-columns: 
-                50% 24% 24%
+                49.5% 24.25% 24.25%
             grid-template-rows: 
                 48% 48%
             gap: 4% 1%
@@ -148,26 +180,54 @@ export default {
                         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
-                    &:nth-of-type(5)
-                        grid-row-start: 1
-                        grid-row-end: 3
-
+        &.stickies
+            ul
+                &.flipped
+                    grid-template-columns: 
+                        24.25% 24.25% 49.5% 
+                    li
+                        &:nth-of-type(1)
+                            grid-row-end: 2
+                        &:nth-of-type(3)
+                            grid-column-start: 1
+                            grid-row-start: 2
+                        &:nth-of-type(5)
+                            grid-row-start: 1
+                            grid-row-end: 3
+                &.sticky-1
+                    display: flex
+                    > li .card--info 
+                        display: flex
+                        > a:first-of-type
+                            width: 100%
+                &.sticky-2
+                    display: flex
+                &.sticky-3
+                    display: flex
+                &.sticky-4
+                    display: flex
+                &.sticky-5
+                    grid-template-columns: 
+                        24.25% 24.25% 49.5%
+                    grid-template-rows: 
+                        48% 48%
+                    gap: 4% 1%
+                    > li
+                        &:nth-of-type(1)
+                            grid-row-end: 2
+                        &:nth-of-type(2)
+                            grid-column-start: 2
+                            grid-row-start: 1
+                            grid-row-end: 2
+                        &:nth-of-type(3)
+                            grid-column-start: 1
+                            grid-row-start: 2
+                            margin: 0 0 8% 0
+                        &:nth-of-type(4)
+                            grid-column-start: 2
+                            grid-row-start: 2
+                            margin: 0 0 8% 0
+                        &:nth-of-type(5)
+                            grid-column-start: 3
+                            margin: 0 0 4% 0
 </style>