more cartouche lisibility improvements: concernement title ellipsis on scroll #2325

src/assets/main.scss

@@ -288,6 +288,16 @@ body{
             //   font-weight: 100;
             // }
             padding-bottom: 0.5em;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 20;
+            max-height: 20em;
+            transition: -webkit-line-clamp 0.5s ease-in-out, max-height 0.5s ease-in-out;
+            &.ellipsed{
+              max-height: 2em;
+              -webkit-line-clamp: 2;
+            }
           }
           // nav.icons{
           //   ul{

src/components/layout/CartoucheLayout.vue

@@ -54,7 +54,7 @@ export default {
   <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
       <label :class="{ hidden: mainscrolled }">{{ ct_concernement.title.description }}</label>
-      <h2>{{ concernement.title }}</h2>
+      <h2 :class="{ ellipsed: mainscrolled }">{{ concernement.title }}</h2>
       <!-- <nav class="icons">
         <ul>
           <li v-if="concernement.has_recit" >