Unverified Commit f6b77620 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3280985 by mherchel, andy-blum: Olivero's code block styling is... 

Issue #3280985 by mherchel, andy-blum: Olivero's code block styling is slightly broken at various viewport widths

(cherry picked from commit a595534d)
parent a9234d09

core/themes/olivero/css/layout/layout-content-narrow.css

+16 −1
Original line number Diff line number Diff line
@@ -226,7 +226,6 @@ 
@media (min-width: 43.75rem) {



.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {

        width: calc(71.42857vw - 2.25rem);

        margin-top: 3.375rem;

        margin-bottom: 3.375rem

    }
@@ -249,6 +248,14 @@ 


@media (min-width: 75rem) {



[dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"]  .layout--content-narrow .text-content pre,[dir="ltr"]  .layout--pass--content-narrow > *.text-content pre,[dir="ltr"]  .layout--pass--content-narrow > * .text-content pre {

        margin-left: calc(-7.14286vw - -0.62946rem)

  }



[dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"]  .layout--content-narrow .text-content pre,[dir="rtl"]  .layout--pass--content-narrow > *.text-content pre,[dir="rtl"]  .layout--pass--content-narrow > * .text-content pre {

        margin-right: calc(-7.14286vw - -0.62946rem)

  }



.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {

        width: calc(85.71429vw - 9.80357rem)

    }
@@ -256,6 +263,14 @@ 


@media (min-width: 90rem) {



[dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"]  .layout--content-narrow .text-content pre,[dir="ltr"]  .layout--pass--content-narrow > *.text-content pre,[dir="ltr"]  .layout--pass--content-narrow > * .text-content pre {

        margin-left: -5.86607rem

  }



[dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"]  .layout--content-narrow .text-content pre,[dir="rtl"]  .layout--pass--content-narrow > *.text-content pre,[dir="rtl"]  .layout--pass--content-narrow > * .text-content pre {

        margin-right: -5.86607rem

  }



.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {

        width: 68.14286rem

    }

core/themes/olivero/css/layout/layout-content-narrow.pcss.css

+2 −1
Original line number Diff line number Diff line
@@ -112,7 +112,6 @@ 


    & pre {

      @media (--grid-md) {

        width: calc(10 * var(--grid-col-width--md) + 9 * var(--grid-gap--md));

        margin-block: var(--sp3);

      }
@@ -123,10 +122,12 @@ 


      @media (--nav) {

        width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));

        margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));

      }



      @media (--grid-max) {

        width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));

        margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));

      }

    }

  }