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;