:art: forcing image crop | altering hero to 2.1:1 aspect ratio (between 21:9 and 16:9)

vue-theme/src/app.vue

@@ -41,9 +41,6 @@ html
             /* :--headings, a */
             a
                 color: $cia_red
-                &:hover
-                    /* leave obvious for testing */
-                    color: green
 
             img
                 transition: $transition ease-in
@@ -52,40 +49,11 @@ html
                     cursor: pointer
 
             > [class^="page--"]
-                /* background-color: lightblue */
                 max-width: $max-width
                 margin: 0 auto
                 padding: $ms-0 0
                 align-items: flex-start
-                
                 /* Block Shadow Thing */
                 .shadow
                     box-shadow: rgba(0 0 0 / 15%) 0.3px 0.5px 1.5px 0.5px
-
-                /* Content Pieces excluding index*/
-                .post
-                    /* bg for list pages */
-                    background-color: white
-                    margin: 0 0 $ms-0
-                    &--title
-                        color: yellow
-                        padding: 0 0 $ms-0
-                    &--content
-                        color: orange
-                        &--block > p
-                            color: grey
-                        .wp-block-image
-                            margin: 0
-                            img
-                                width: 100%
-                    > ul
-                        list-style: none
-                
-                /* Single & List Pages*/
-                /* > article */
-                article
-                    /* background-color: lightpink */
-                
-        nav, footer
-            &.main /* background-color: pink */
 </style>

vue-theme/src/components/card.vue

@@ -16,7 +16,8 @@
             p(v-if="content.end && type == 'event'" class="datetime") {{ dateFrom(content.start, type=='event') }} – {{ dateFrom(content.end, type=='event').split(',')[1] }}
             p(v-else-if="content.end" class="datetime") {{ dateFrom(content.start, type=='event') }} – {{ dateFrom(content.end, type=='event') }}
             p.excerpt {{ content.excerpt }}
-            router-link(:to="`/${type}/${content.slug}`") read more
+            router-link(:to="`/${type}/${content.slug}`")
+                p.read-more read more
 </template>
 
 <script>
@@ -46,6 +47,12 @@ export default {
         justify-content: center
         > a
             line-height: 0
+            /* Force crop images */
+            .featured-or-hero-image img
+                object-fit: cover
+                object-position: 0% 30%
+                max-height: 160px
+                overflow-y: clip
     header a
         font-size: $ms--2
         text-decoration: none
@@ -65,12 +72,12 @@ export default {
     p
         &.datetime
             font-size: $ms--1
-            margin: 0 0 calc($ms-0/2) 0
-            line-height: calc($ms-0/2)
+            margin: 0
         &.excerpt
             overflow: hidden
-            margin: 0 0 $ms--2 0
-
+            margin: 0
+        &.read-more
+            font-size: $ms--1
     
 /* for widths larger than 768px */
 @media (min-width: $medium)

vue-theme/src/components/hero.vue

@@ -55,14 +55,14 @@ export default {
     },
     methods: {
         onResize() {
-            this.heroHeight = this.$el.offsetWidth / 1.8
+            this.heroHeight = this.$el.offsetWidth / 2.1
         },
         getThumbnailFromYt(url) {
             return ytThumbnail(url, 'max')
         },
     },
     mounted() {
-        this.heroHeight = this.$el.offsetWidth / 1.8
+        this.heroHeight = this.$el.offsetWidth / 2.1
         this.$nextTick(() => {
             window.addEventListener('resize', this.onResize)
         })
@@ -105,10 +105,21 @@ export default {
         z-index: 0
 
     &--image
+        min-width: 360px
+        max-height: 50vh
+        img
+            position: relative
+            min-width: 100vw
+            height: auto
+            z-index: -1
+            top: -30%
         &--overlay
-            /* color: $cia_white */
             position: absolute
-            margin: 19% 0
+            height: 100%
+            width: 100vw
+            right: 0
+            left: 0
+            overflow: clip
             h2
                 /* need better responsive solution for heading size  */
                 font-size: 3vw

vue-theme/src/pages/index.vue

@@ -132,6 +132,11 @@ export default {
             li
                 margin: 0
                 min-height: 10em
+                /* Big boxes */
+                &:nth-of-type(1), &:nth-of-type(3)
+                    /* Force crop images */
+                    .featured-or-hero-image img
+                        max-height: 300px
                 /* n1 episode */
                 &:nth-of-type(1)
                     grid-column-start: 1