diff --git a/views/DE/project/pagesList.pug b/views/DE/project/pagesList.pug index f9e5e7579e1b58d05c8d5a5e52ab06becf2a17da..afd80b33108ef1ae46f8a958106b302be466d42f 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") |
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") |