From 3494a8f292197cc10566064d374bb42dcaf4b3f0 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Tue, 7 Sep 2021 17:02:25 +0300
Subject: [PATCH] Issue #3229094 by mherchel, rikki_iki, Gauravmahlawat:
Olivero: Titles should wrap around images in teaser when necessary
---
.../olivero/css/components/node-teaser.css | 25 ++++++++++++++-----
.../css/components/node-teaser.pcss.css | 15 ++++++++---
2 files changed, 31 insertions(+), 9 deletions(-)
diff --git a/core/themes/olivero/css/components/node-teaser.css b/core/themes/olivero/css/components/node-teaser.css
index 04fe2a50b352..09b63b683fb6 100644
--- a/core/themes/olivero/css/components/node-teaser.css
+++ b/core/themes/olivero/css/components/node-teaser.css
@@ -36,16 +36,15 @@
.node--view-mode-teaser .node__top-wrapper {
display: flex;
+ flex-wrap: wrap;
align-items: center;
- margin: 0;
- margin-bottom: 1.125rem
+ margin: 0
}
@media (min-width: 62.5rem) {
.node--view-mode-teaser .node__top-wrapper {
- position: relative; /* Anchor the image */
- margin: 0
+ position: relative /* Anchor the image */
}
}
@@ -59,9 +58,23 @@
.node--view-mode-teaser .primary-image {
flex-shrink: 0;
- margin: 0
+ margin: 0;
+ margin-bottom: 1.125rem
+
+ /* Ensure title does not wrap under image until necessary. */
}
+.node--view-mode-teaser .primary-image + .node__title {
+ flex-basis: calc(100% - 5.0625rem)
+ }
+
+@media (min-width: 62.5rem) {
+
+.node--view-mode-teaser .primary-image + .node__title {
+ flex-basis: auto
+ }
+ }
+
.node--view-mode-teaser .primary-image a {
display: block;
}
@@ -138,6 +151,7 @@
.node--view-mode-teaser .node__title {
margin: 0;
+ margin-bottom: 1.125rem;
color: #0d1214;
font-size: 1.5rem;
line-height: 1.6875rem
@@ -146,7 +160,6 @@
@media (min-width: 62.5rem) {
.node--view-mode-teaser .node__title {
- margin-bottom: 1.125rem;
font-size: 2.25rem;
line-height: 3.375rem
}
diff --git a/core/themes/olivero/css/components/node-teaser.pcss.css b/core/themes/olivero/css/components/node-teaser.pcss.css
index 29ec28bbca10..82335fa89a44 100644
--- a/core/themes/olivero/css/components/node-teaser.pcss.css
+++ b/core/themes/olivero/css/components/node-teaser.pcss.css
@@ -30,21 +30,30 @@
& .node__top-wrapper {
display: flex;
+ flex-wrap: wrap;
align-items: center;
margin: 0;
- margin-block-end: var(--sp1);
@media (--lg) {
position: relative; /* Anchor the image */
- margin: 0;
}
}
& .primary-image {
flex-shrink: 0;
margin: 0;
+ margin-block-end: var(--sp1);
margin-inline-end: var(--sp1);
+ /* Ensure title does not wrap under image until necessary. */
+ & + .node__title {
+ flex-basis: calc(100% - calc(4.5 * var(--sp)));
+
+ @media (--lg) {
+ flex-basis: auto;
+ }
+ }
+
& a {
display: block;
}
@@ -89,12 +98,12 @@
& .node__title {
margin: 0;
+ margin-block-end: var(--sp1);
color: var(--color--gray-0);
font-size: 24px;
line-height: var(--line-height-base);
@media (--lg) {
- margin-block-end: var(--sp1);
font-size: var(--sp2);
line-height: var(--sp3);
}
--
GitLab