Unverified Commit 221a70a4 authored by Lauri Timmanee's avatar Lauri Timmanee
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

(cherry picked from commit 3494a8f2)
parent a3034ecc

core/themes/olivero/css/components/node-teaser.css

+19 −6
Original line number Diff line number Diff line
@@ -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,7 +58,21 @@ 


.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 {
@@ -139,6 +152,7 @@ 


.node--view-mode-teaser .node__title {

    margin: 0;

    margin-bottom: 1.125rem;

    color: #0d1214;

    font-size: 1.5rem;

    line-height: 1.6875rem
@@ -147,7 +161,6 @@ 
@media (min-width: 62.5rem) {



.node--view-mode-teaser .node__title {

      margin-bottom: 1.125rem;

      font-size: 2.25rem;

      line-height: 3.375rem

  }

core/themes/olivero/css/components/node-teaser.pcss.css

+12 −3
Original line number Diff line number Diff line
@@ -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);

    }