:art: tweaking more img sizes | cropping hero sizes | adjusting breadcrumb

vue-theme/src/components/breadcrumb.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
 //- breadcrumb links at top of page, needs link routing
-.breadcrumb.f-row.start.t-up
+nav.breadcrumb.f-row.start.t-up
     router-link(v-if="['event','exhibition'].includes(type)" :to="`/${type}/by-current-and-upcoming`")
         h5.t-up {{ type }}
     router-link(v-else :to="`/${type}`")
         h5.t-up {{ type }}
-    h5 &#62;
+    h5 ➤
     router-link(:to="`/${type}/${post.slug}`")
         h5 {{ post.title }}
 </template>

vue-theme/src/components/card.vue

@@ -51,7 +51,7 @@ export default {
             .featured-or-hero-image img
                 object-fit: cover
                 object-position: 0% 30%
-                max-height: 160px
+                max-height: calc($max-card-img-height / 2)
                 overflow-y: clip
     header a
         font-size: $ms--2

vue-theme/src/components/credits.vue

@@ -14,4 +14,6 @@ export default {
 
 <style lang="postcss">
 .credits
+    p
+        font-size: 0.7em
 </style>

vue-theme/src/components/hero.vue

@@ -112,7 +112,6 @@ export default {
             min-width: 100vw
             height: auto
             z-index: -1
-            top: -30%
         &--overlay
             position: absolute
             height: 100%
@@ -121,8 +120,7 @@ export default {
             left: 0
             overflow: clip
             h2
-                /* need better responsive solution for heading size  */
-                font-size: 3vw
+                font-size: $ms-1
                 color: $cia_white
                 text-shadow: 1px 1px $cia_black
                 max-width: 70vw
@@ -174,4 +172,8 @@ export default {
         /* min-height: 50vh */
         .embedded
             min-height: 50vh
+        &--image
+            &--overlay
+                h2
+                    font-size: 4vw
 </style>

vue-theme/src/pages/index.vue

@@ -109,6 +109,8 @@ export default {
                 list-style: none
                 li
                     margin: 0 0 $ms-0 0
+                    .featured-or-hero-image img
+                        max-height: $max-card-img-height
             &.max 
                 margin: 0
                 > ul
@@ -132,11 +134,9 @@ export default {
             li
                 margin: 0
                 min-height: 10em
-                /* Big boxes */
-                &:nth-of-type(1), &:nth-of-type(3)
-                    /* Force crop images */
+                &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
                     .featured-or-hero-image img
-                        max-height: 300px
+                        max-height: calc($max-card-img-height / 2)
                 /* n1 episode */
                 &:nth-of-type(1)
                     grid-column-start: 1

vue-theme/src/pages/single.vue

@@ -311,7 +311,7 @@ export default {
 
         .related-artists
             ul li
-                margin: 0
+                margin: 0 0 $ms-0 0
                 .card
                     padding: 0
 

vue-theme/src/sss/variables.sss

@@ -12,6 +12,8 @@ $path: 4px
 /* Proportion */
 $base: 0.95em
 
+$max-card-img-height: 260px
+
 $ratio: $minor-third
 /* $ratio = 1.2 from _ratios.sss */