:art: tweaking logs | adjusting some styling on single

vue-theme/src/pages/list.vue

             section(v-for="(post, i) in posts" :key="post.slug").shadow.post
                 card(:content="post" :type="type" :wide="type == 'exhibition' && i > 1 || type == 'event' && i > 1 ")
 
-        footer
+        footer(v-if="loadingFetched || showMeta")
             p(v-if="loadingFetched") loading more {{ type }} ...
             p {{ `${type} count: ${Object.values(posts).length}` }}
             p {{ `show sidebar: ${sidebar}` }}
-                    
-    //- sidebar(v-if="sidebar" :type="`${type}`" layout="list")
+
+    sidebar(v-if="sidebar" :type="`${type}`" layout="list")
     
 </template>
 
     mixins: [postTypeGetters, scrollTop, heroUtils],
     data() {
         return {
+            showMeta: false,
             page: 0,
             perPage: 15,
             keepFetching: true,
             if(!type) return console.error(`type: ${type} not found...`)
             if(!this.keepFetching) return console.warn('nothing left to fetch...')
 
-            console.warn(`loading more ${type} posts...`)
+            console.warn(`loading page ${this.page} of ${type} posts: ${this.page * this.perPage} through ${this.perPage}`)
             this.loadingFetched = true
             this.page++
             await this.getPosts()
         // This only fires navigating from
         // a list page, to another list page
         type(newType, oldType){
-            console.log('old:', oldType)
-            console.log('new:', newType)
-            
             if(!postTypes.includes(newType)) return console.warn('type not found...')
             this.clearAndInitPostList()
             this.setIntersectionLoader()
             > .content
                 padding: 0
                 width: 100%
+        > footer
+            background-color:white
+            padding: $ms-0
         /* posts not grid list */
-        ul
-            img
-                max-width: 50%
+        ul img
+            max-width: 50%
 
         .is-grid
             display: flex
             flex-direction: row
             flex-wrap: wrap
             justify-content: space-between
-            /* extra padding required? */
-            /* padding: $ms-0 */
-            /* background-color: white */
             section
                 width: 32.5%
-                /* 4 column grid see how dense this becomes */
-                /* width: 24% */
             ul
                 flex-wrap: wrap
                 list-style: none
                 img
                     max-width: 100%
+
 @media (min-width: $medium)
     .page--list.f-col
         flex-direction: row

vue-theme/src/pages/single.vue

 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
 .page--single
-    /* background-color: $cia_white2 */
     article
         background-color: white
         padding: $ms-0
             margin: $ms-2 auto
             outline-style: auto
 
-            &.is-style-default
-                height: 1px
-                width: 15vw
-
-            &.is-style-wide
-                height: 1px
-                width: 50vw
-        
-            &.is-style-dots
-                outline-style: none
-                font-weight: bolder
+            &.is-style
+                &-default
+                    height: 1px
+                    width: 15vw
+                &-wide
+                    height: 1px
+                    width: 50vw
+                &-dots
+                    outline-style: none
+                    font-weight: bolder
 
         breadcrumb
             h5