Merge branch 'master' of ssh://gitea.yvvas.com:4022/craft-in-america/vue-wp

vue-theme/src/components/breadcrumb.vue

 <template lang="pug">
 //- breadcrumb links at top of page, needs link routing
 nav.breadcrumb.f-row.start.t-up
-    router-link(v-if="['event','exhibition'].includes(type)" :to="`/${type}/sorted/by-date`")
+    router-link(v-if="['event','exhibition'].includes(type)" :to="`/${type}/sorted/by-current-and-upcoming`")
         h5.t-up {{ type }}
     router-link(v-else :to="`/${type}`")
         h5.t-up {{ type }}

vue-theme/src/components/card.vue

 <template lang="pug">
 .card(v-if="content")
     header
-        router-link(v-if="!hideType && ['event','exhibition'].includes(type)" :to="`/${type}/by-current-and-upcoming`")
-            p.t-up {{type}}
+        router-link(v-if="!hideType && ['event','exhibition'].includes(type)" :to="`/${type}/sorted/by-current-and-upcoming`")
+            h4.t-up {{type}}
         router-link(v-else-if="!hideType" :to="`/${type}`")
-            p.t-up {{type}}
+            h4.t-up {{type}}
 
     article.card--info(:class="{ 'wide': wide }")
         router-link(:to="`/${type}/${content.slug}`")

vue-theme/src/components/hero.vue

     },
     methods: {
         onResize() {
-            this.heroHeight = this.$el.offsetWidth / 2.1
+            this.heroHeight = this.$el.offsetWidth / 1.8
         },
         getThumbnailFromYt(url) {
             return ytThumbnail(url, 'max')
         },
     },
     mounted() {
-        this.heroHeight = this.$el.offsetWidth / 2.1
+        this.heroHeight = this.$el.offsetWidth / 1.8
         this.$nextTick(() => {
             window.addEventListener('resize', this.onResize)
         })
 
 .hero
     /* background-color: rebeccapurple */
-    min-height: 25vh
+    /* min-height: 25vh */
+    min-height: 54vw
     position: relative
     overflow: hidden
     justify-content: flex-start !important
                 color: $cia_white
                 text-shadow: 1px 1px $cia_black
                 max-width: 70vw
+            a 
+                color: inherit 
+                text-decoration: none
+
     &--video
         width: 100vw
         height: 100%
 
     .embedded
-        min-height: 25vh
+        /* min-height: 25vh */
+        min-height: 54vw
         height: 100%
         position: relative
         z-index: 10002
     .hero
         /* min-height: 50vh */
         .embedded
-            min-height: 50vh
+            /* min-height: 50vh */
+            min-height: 54vw
         &--image
             &--overlay
                 h2

vue-theme/src/components/sidebars/sidebar.vue

         flex-direction: column
         flex-wrap: wrap 
         li
-            padding: 0 $ms-0 0 0
+            padding: 0 0 $ms-0 0
             img
                 width: 100%
     .shadow

vue-theme/src/pages/index.vue

     components: { card },
     data() {
         return {
-            firstRow: ['episode', 'exhibition', 'event', 'artist', 'post'],
+            firstRow: ['episode', 'exhibition', 'event', 'short', 'post'],
             secondRow: 'artist', // This is only ONE post
-            thirdRow: ['episode', 'exhibition', 'event', 'artist', 'post'],
+            thirdRow: ['object', 'short', 'publication', 'post', 'guide'],
         }
     },
     async created() {
             await this.$store.dispatch('getAllPages', { sortType: null, params: null })
         }
         await this.checkAndSetHero('welcome')
-        await this.$store.dispatch('getRandomPosts', ['episode', 'exhibition', 'event', 'artist', 'post'])
+        await this.$store.dispatch('getRandomPosts', ['artist', 'guide', 'object', 'short', 'publication', 'post'])
     },
     methods: {
         firstPostOfType(type) {
                             grid-row-start: 2
                         &:nth-of-type(5)
                             grid-column-start: 3
+                    &.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
                 &.max
                     li .featured-or-hero-image img
                         max-height: $max-card-img-height

vue-theme/src/pages/list.vue

 
         header.center.t-up
             .title.f-row
-                h3 {{ type }} list
+                h3 {{ type }}s 
                 span(v-if="sortBy")
-                    h3  sorted {{ sortBy.replace('-', ' ') }}
+                    h3 {{ sortBy.replace('-', ' ') }}
 
             h3(v-if="!loaded") loading...
             .content(
 
 const TIMEOUT = 1
 const INTERSECT_SELECTOR = '.page--list > article footer'
-const wideTypes = ['event', 'exhibition']
-const gridTypes = ['episode', 'artist']
+const wideTypes = ['event', 'exhibition', 'guide', 'post', 'publication']
+const gridTypes = ['episode', 'artist', 'object', 'short']
 const sansSidebarTypes = ['episode']
 
 export default {
             > .content
                 padding: 0
                 width: 100%
+            .title.f-row
+                /* flex-direction: column  */
+                justify-content: flex-start
+
         > footer
             padding: $ms-0
 
             flex-direction: row !important
         > article
             margin: 0 $ms--2 0 0
+            header 
+                .title.f-row
+                    flex-direction: row 
+                    justify-content: center
+
             .posts.is-grid
                 grid-template-columns: repeat(3, 1fr)
                 .post.inbetween

vue-theme/src/pages/single.vue

         .wp-block-embed, .is-type-video
             position: relative
             width: 100% 
-            padding-bottom: 56.25% 
+            padding-bottom: 56.25%
+            margin-bottom: $ms-7 
             &__wrapper
                 display: contents
             /* TBD if kept- edit ot test */

vue-theme/src/sss/_typography.sss

 h4
     font-size: $ms-1
     /* margin-top: 1.33em */
-    margin-bottom: $ms-1
+    margin-bottom: $ms--3
 h5
     font-size: $ms-0
     /* margin-top: 1.6em */