better cartouch lisibility #2325

src/assets/main.scss

@@ -165,11 +165,11 @@ body{
     display: flex;
     gap: 0.5rem;
     @mixin main-cartouche{
-      background-color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(255, 255, 255, 1);
       box-sizing: border-box;
       width:$cartouch_width;
       height: 100%;
-      padding: 1rem 1rem 1rem;
+      padding: 2rem 2rem 1rem;
       overflow-y: auto;
       overflow-x: hidden;
       //
@@ -207,23 +207,42 @@ body{
       }
       >footer{
         flex: 0 0 auto;
-        padding: 1em 0 0;
+        padding: 0.5em 0 0;
+        margin: 1.5em 0 0;
+        border-top: #01ffe2 solid 0.5px;
       }
       
       >header{
         flex: 0 0 auto;
       }
       // contents
+
+      $gradpad: 20px;
       >header{
         display: flex;
         // height: 8rem;
         flex-direction: column;
         justify-content: flex-end;
+        
+        // gradiaent over scroll
+        position: relative;
+        &:before{
+          content: ' ';
+          display: block;
+          position:absolute;
+          width: 100%; height:$gradpad;
+          z-index: 500;
+          bottom: 0; left: 0; margin-bottom: - $gradpad;
+          // background-color: #01ffe2;
+          background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
+        }
+
         div.entite{
           // min-height: 10em;
           // display: flex;
           // flex-direction: column;
           // justify-content: flex-end;
+          padding-bottom: 0.5em;
           label, h3{
             // height: 70px;
             box-sizing: border-box;
@@ -247,7 +266,7 @@ body{
             display: block;
             font-weight: 100;
             font-size: 0.882em;
-            padding: 0.5em 0;
+            padding: 1em 0;
           }
         }
         div.concernement-cartouche-icons{
@@ -284,10 +303,11 @@ body{
       
       >main{
         overflow-y: auto;
-        
+        padding-top: $gradpad;
+
         >section:not(:last-of-type),
         .multiple >section:not(:last-of-type){
-          padding-bottom: 1em;
+          padding-bottom: 2em;
         }
         figure{
           margin:0.5em 0;
@@ -297,6 +317,10 @@ body{
         }
 
         section.entite{
+          
+          >section{
+            padding-bottom: 2em;
+          }
           .sources{
             padding-top: 1em;
             .source{
@@ -533,7 +557,7 @@ body{
         display: block;
         font-weight: 100;
         font-size: 0.882em;
-        padding: 0 0 0.5em 0;
+        padding: 0 0 1em 0;
       }
       ul, li{
         padding:0; margin:0;

src/components/contents/TerrainDeVie.vue

@@ -161,7 +161,7 @@ export default {
         <!-- TODO update entite with revisions -->
         <span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
         <span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
-        <h3 v-if="entite">{{ entite.title }}</h3>
+        <h3 v-if="entite">hello {{ entite.title }}</h3>
       </div>
     </template>