From da1b16c7dd83a235f5725c3f6588df1ea77c9e1b Mon Sep 17 00:00:00 2001
From: Athanasios <ath.kouk.oid@gmail.com>
Date: Thu, 28 Oct 2021 19:02:08 +0200
Subject: [PATCH] Optimize card appearance

Add card-portrait class
Rearrange elements in card title
Card title and body have fixed height
---
 views/DE/project/pagesList.pug | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/views/DE/project/pagesList.pug b/views/DE/project/pagesList.pug
index f9e5e75..afd80b3 100644
--- a/views/DE/project/pagesList.pug
+++ b/views/DE/project/pagesList.pug
@@ -11,6 +11,8 @@ html(lang="de")
         .title-container {
             position: relative;
             color: white;
+            height: 12rem;
+            overflow: hidden;
         }
         .card-title-bottom-left {
             position: absolute;
@@ -23,8 +25,26 @@ html(lang="de")
             padding: 5px
         }
         .card-img-top {
-            height: 15vw;
-            object-fit: cover;
+            height: 100%;
+            object-fit: contain;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            margin-left: 0;
+            margin-right: 0;
+        }
+        .card-img-bg {
+            background-size: cover;
+            filter: blur(30px);
+            width: 100%;
+            height: 100%;
+        }
+        .clamp-lines {
+            display: -webkit-box;
+            -webkit-line-clamp: 6;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
         }
   body
     div(class="container")
@@ -50,11 +70,12 @@ html(lang="de")
             | <div class="row">
             for item in pages
                 div(class="card-deck py-4 col-sm")
-                    div(class="card width_18" style="transform: rotate(0);")
+                    div(class="card card-portrait" style="transform: rotate(0);")
                         div(class="title-container")
-                            h5(class="card-title-bottom-left") #{item.name}
+                            div(class="card-img-bg" style=`background-image: url(${item.logo});`)
                             img(class="card-img-top", src=item.logo)
-                        div(class="card-body")
+                            h5(class="card-title-bottom-left") #{item.name}
+                        div(class="card-body-fixed-height")
                             div(class="row")
                                 each key in item.keywords
                                     h6
@@ -62,7 +83,7 @@ html(lang="de")
                                         | &nbsp;
                             div(class="row")
                                 div(class="col-9")
-                                    p(class="card-text") #{item.desc}
+                                    p(class="card-text clamp-lines") #{item.desc}
                                 a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank")
             | </div>
 
-- 
GitLab