:art: hardcore line-clamping

vue-theme/src/components/card.vue

@@ -44,7 +44,6 @@ export default {
     overflow: hidden
     text-overflow: clip
     &--info
-        justify-content: center
         > a
             line-height: 0
             /* Force crop images */
@@ -69,6 +68,10 @@ export default {
         font-size: $ms-0
         padding: 0
         line-height: initial
+        display: -webkit-box
+        -webkit-line-clamp: $card-line-clamp
+        -webkit-box-orient: vertical
+        overflow-y: clip
     p
         &.datetime
             font-size: $ms--1
@@ -76,14 +79,15 @@ export default {
         &.excerpt
             overflow: hidden
             margin: 0
+            -webkit-line-clamp: $card-line-clamp
+            -webkit-box-orient: vertical
+            display: -webkit-box
         &.read-more
             font-size: $ms--1
     
 /* for widths larger than 768px */
 @media (min-width: $medium)
     .card
-        &--info 
-            justify-content: center
         .wide
             display: flex
             padding: 0

vue-theme/src/pages/index.vue

@@ -111,6 +111,8 @@ export default {
                     margin: 0 0 $ms-0 0
                     .featured-or-hero-image img
                         max-height: $max-card-img-height
+                    p.excerpt
+                        -webkit-line-clamp: calc($card-line-clamp * 2)
             &.max 
                 margin: 0
                 > ul
@@ -135,6 +137,8 @@ export default {
                 margin: 0
                 min-height: 10em
                 &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
+                    p.excerpt
+                        -webkit-line-clamp: calc($card-line-clamp * 2)
                     .featured-or-hero-image img
                         max-height: calc($max-card-img-height / 2)
                 /* n1 episode */

vue-theme/src/sss/variables.sss

@@ -13,6 +13,7 @@ $path: 4px
 $base: 0.95em
 
 $max-card-img-height: 260px
+$card-line-clamp: 3
 
 $ratio: $minor-third
 /* $ratio = 1.2 from _ratios.sss */