From f35ca8c818f46ba67fa7ee872c14005a9667c71b Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Fri, 25 Dec 2020 12:39:37 +0100
Subject: [PATCH] #44 Text in place teaser is cut of

---
 .../placeTeaser/_placeTeaser.scss             | 54 +++++++++++--------
 public/main.css                               | 10 +++-
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/components/02_Molecules/placeTeaser/_placeTeaser.scss b/components/02_Molecules/placeTeaser/_placeTeaser.scss
index 39d0a14..d95e3df 100644
--- a/components/02_Molecules/placeTeaser/_placeTeaser.scss
+++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss
@@ -1,18 +1,18 @@
-.LP-PlaceTeaser{
+.LP-PlaceTeaser {
     width: 100%;
 
-    .LP-PlaceTeaser__Image{
+    .LP-PlaceTeaser__Image {
         width: 100%;
         overflow: hidden;
 
-        .LP-Image{
-            max-width:unset;
-            max-height:unset;
+        .LP-Image {
+            max-width: unset;
+            max-height: unset;
             object-fit: cover;
         }
     }
 
-    .LP-PlaceTeaser__Meta{
+    .LP-PlaceTeaser__Meta {
         display: flex;
         flex-wrap: wrap;
         gap: $-spacing-small;
@@ -21,8 +21,8 @@
         padding: 5px;
         padding-bottom: 10px;
         padding-top: 10px;
-        
-        .LP-Paragraph{
+
+        .LP-Paragraph {
             font-family: $-primary-sans-serif-font;
             padding: 0;
             margin: 0;
@@ -30,7 +30,7 @@
             font-size: 1.3rem;
         }
 
-        .LP-Headline{
+        .LP-Headline {
             font-family: $-primary-sans-serif-font;
             color: $-grey;
             font-size: 2rem;
@@ -44,18 +44,19 @@
         }
     }
 
-    .LP-PlaceTeaser__Description{
+    .LP-PlaceTeaser__Description {
         font-family: $-primary-sans-serif-font;
         color: $-grey;
         order: 3;
         flex-basis: 100%;
+
         .LP-Paragraph {
             font-size: 22px;
         }
     }
 }
 
-@media(min-width: $-viewport-small){
+@media(min-width: $-viewport-small) {
     .LP-PlaceTeaser {
         width: 280px;
 
@@ -64,14 +65,15 @@
             height: 165px;
         }
     }
-    .LP-PlaceTeaser--extended{
+
+    .LP-PlaceTeaser--extended {
         display: flex;
         flex-direction: row;
         width: auto;
         padding-right: 25px;
         height: 165px;
 
-        .LP-PlaceTeaser__Meta{
+        .LP-PlaceTeaser__Meta {
             margin: 0;
             padding-left: 25px;
             display: flex;
@@ -81,20 +83,21 @@
             align-items: flex-start;
             gap: unset;
 
-            .LP-Headline, .LP-Paragraph {
+            .LP-Headline,
+            .LP-Paragraph {
                 font-size: unset;
             }
 
-            .LP-PlaceTeaser__Info{
-                .LP-Headline{
+            .LP-PlaceTeaser__Info {
+                .LP-Headline {
                     font-size: 28px;
                 }
             }
 
-            .LP-PlaceTeaser__Icons{
+            .LP-PlaceTeaser__Icons {
                 margin-top: auto;
-                
-                ul{
+
+                ul {
                     padding: 0;
                     margin: 0;
                 }
@@ -106,7 +109,7 @@
             }
         }
 
-        .LP-PlaceTeaser__Description{
+        .LP-PlaceTeaser__Description {
             display: block;
             max-height: 55px;
             overflow: hidden;
@@ -114,15 +117,20 @@
 
             .LP-Paragraph {
                 font-size: unset;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
         }
 
-        .LP-PlaceTeaser__Image{
-            height:165px;
+        .LP-PlaceTeaser__Image {
+            height: 165px;
             width: 280px;
             flex-shrink: 0;
             flex-grow: 0;
-            
+
         }
     }
 }
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index 8d6ab35..b8c6642 100644
--- a/public/main.css
+++ b/public/main.css
@@ -923,7 +923,8 @@ body {
       justify-content: space-between;
       align-items: flex-start;
       gap: unset; }
-      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline, .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline,
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
         font-size: unset; }
       .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline {
         font-size: 28px; }
@@ -941,7 +942,12 @@ body {
       overflow: hidden;
       order: unset; }
       .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description .LP-Paragraph {
-        font-size: unset; }
+        font-size: unset;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis; }
     .LP-PlaceTeaser--extended .LP-PlaceTeaser__Image {
       height: 165px;
       width: 280px;