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")
|
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