Unverified Commit 3494a8f2 authored by lauriii's avatar lauriii
Browse files

Issue #3229094 by mherchel, rikki_iki, Gauravmahlawat: Olivero: Titles should...

Issue #3229094 by mherchel, rikki_iki, Gauravmahlawat: Olivero: Titles should wrap around images in teaser when necessary
parent 672b00fa
......@@ -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
}
......
......@@ -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);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment