Unverified Commit 6a533564 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3210199 by mherchel, Gauravmahlawat, bnjmnm, thejimbirch: Olivero:... 

Issue #3210199 by mherchel, Gauravmahlawat, bnjmnm, thejimbirch: Olivero: Adjustments to landmark regions
parent 4880807b

core/themes/olivero/css/layout/layout-sidebar.css

+39 −87
Original line number Diff line number Diff line
@@ -10,7 +10,7 @@ 
 * Special grid system for sidebar.

 */



.sidebar-grid > .grid-full {

.sidebar-grid > .site-main {

    -ms-grid-column: 1;

    -ms-grid-column-span: 6;

    grid-column: 1 / 7;
@@ -20,7 +20,7 @@ 


@media (min-width: 43.75rem) {



.sidebar-grid > .grid-full {

.sidebar-grid > .site-main {

      -ms-grid-column: 1;

      -ms-grid-column-span: 14;

      grid-column: 1 / 15
@@ -29,75 +29,36 @@ 


@media (min-width: 62.5rem) {



.sidebar-grid > .grid-full {

      -ms-grid-columns: (minmax(0, 1fr))[10];

      grid-template-columns: repeat(10, minmax(0, 1fr));

      -ms-grid-column: 1;

      -ms-grid-column-span: 10;

      grid-column: 1 / 11

  }



      .sidebar-grid > .grid-full .layout--content-narrow,

      .sidebar-grid > .grid-full .layout--pass--content-narrow > *,

      .sidebar-grid > .grid-full .layout--content-medium,

      .sidebar-grid > .grid-full .layout--pass--content-medium > * {

.sidebar-grid > .site-main {

      display: -ms-grid;

      display: grid;

      -ms-grid-columns: (minmax(0, 1fr))[8];

      grid-template-columns: repeat(8, minmax(0, 1fr));

      -ms-grid-column: 3;

      -ms-grid-column-span: 8;

      grid-column: 3 / 11

  }



        .sidebar-grid > .grid-full .layout--content-narrow .grid-full, .sidebar-grid > .grid-full .layout--pass--content-narrow > * .grid-full, .sidebar-grid > .grid-full .layout--content-medium .grid-full, .sidebar-grid > .grid-full .layout--pass--content-medium > * .grid-full {

      .sidebar-grid > .site-main > .region--content-above,

      .sidebar-grid > .site-main > .region--content {

        -ms-grid-columns: (minmax(0, 1fr))[8];

        grid-template-columns: repeat(8, minmax(0, 1fr));

        }



        .sidebar-grid > .grid-full .layout--content-narrow .layout--content-narrow,

        .sidebar-grid > .grid-full .layout--content-narrow .layout--pass--content-narrow > *,

        .sidebar-grid > .grid-full .layout--content-narrow .layout--content-medium,

        .sidebar-grid > .grid-full .layout--content-narrow .layout--pass--content-medium > *,

        .sidebar-grid > .grid-full .layout--pass--content-narrow > * .layout--content-narrow,

        .sidebar-grid > .grid-full .layout--pass--content-narrow > * .layout--pass--content-narrow > *,

        .sidebar-grid > .grid-full .layout--pass--content-narrow > * .layout--content-medium,

        .sidebar-grid > .grid-full .layout--pass--content-narrow > * .layout--pass--content-medium > *,

        .sidebar-grid > .grid-full .layout--content-medium .layout--content-narrow,

        .sidebar-grid > .grid-full .layout--content-medium .layout--pass--content-narrow > *,

        .sidebar-grid > .grid-full .layout--content-medium .layout--content-medium,

        .sidebar-grid > .grid-full .layout--content-medium .layout--pass--content-medium > *,

        .sidebar-grid > .grid-full .layout--pass--content-medium > * .layout--content-narrow,

        .sidebar-grid > .grid-full .layout--pass--content-medium > * .layout--pass--content-narrow > *,

        .sidebar-grid > .grid-full .layout--pass--content-medium > * .layout--content-medium,

        .sidebar-grid > .grid-full .layout--pass--content-medium > * .layout--pass--content-medium > * {

        -ms-grid-column: 1;

        -ms-grid-column-span: 8;

        grid-column: 1 / 9;

      }

    }



@media (min-width: 43.75rem) {



.sidebar-grid .layout--content-narrow,

  .sidebar-grid .layout--pass--content-narrow > *,

  .sidebar-grid .layout--content-medium,

  .sidebar-grid .layout--pass--content-medium > * {

      -ms-grid-column: 2;

      -ms-grid-column-span: 12;

      grid-column: 2 / 14

  }

    }



@media (min-width: 62.5rem) {



.sidebar-grid .layout--content-narrow,

  .sidebar-grid .layout--pass--content-narrow > *,

  .sidebar-grid .layout--content-medium,

  .sidebar-grid .layout--pass--content-medium > * {

      -ms-grid-column: 3;

      .sidebar-grid > .site-main .layout--content-narrow,

      .sidebar-grid > .site-main .layout--pass--content-narrow > *,

      .sidebar-grid > .site-main .layout--content-medium,

      .sidebar-grid > .site-main .layout--pass--content-medium > * {

        -ms-grid-column: 1;

        -ms-grid-column-span: 8;

      grid-column: 3 / 11

        grid-column: 1 / 9;

      }

    }



.region--sidebar {

.sidebar-grid .region--sidebar {

    -ms-grid-row: 2;

    -ms-grid-column: 1;

    -ms-grid-column-span: 6;
@@ -106,7 +67,7 @@ 


@media (min-width: 43.75rem) {



.region--sidebar {

.sidebar-grid .region--sidebar {

      -ms-grid-column: 3;

      -ms-grid-column-span: 10;

      grid-column: 3 / 13
@@ -115,17 +76,8 @@ 


@media (min-width: 62.5rem) {



.region--sidebar {

.sidebar-grid .region--sidebar {

      -ms-grid-row: 1;

    -ms-grid-column: 11;

    -ms-grid-column-span: 4;

    grid-column: 11 / 15

}

  }



@media (min-width: 81.25rem) {



.region--sidebar {

      -ms-grid-column: 12;

      -ms-grid-column-span: 3;

      grid-column: 12 / 15

core/themes/olivero/css/layout/layout-sidebar.pcss.css

+18 −39
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
@import "../base/variables.pcss.css";



.sidebar-grid {

  & > .grid-full {

  & > .site-main {

    grid-column: 1 / 7;

    align-self: flex-start;

    -ms-grid-row-align: start;
@@ -16,44 +16,26 @@ 
    }



    @media (--lg) {

      grid-template-columns: repeat(10, minmax(0, 1fr));

      grid-column: 1 / 11;



      & .layout--content-narrow,

      & .layout--pass--content-narrow > *,

      & .layout--content-medium,

      & .layout--pass--content-medium > * {

      display: grid;

      grid-template-columns: repeat(8, minmax(0, 1fr));

      grid-column: 3 / 11;



        & .grid-full {

      & > .region--content-above,

      & > .region--content {

        grid-template-columns: repeat(8, minmax(0, 1fr));

        }



        & .layout--content-narrow,

        & .layout--pass--content-narrow > *,

        & .layout--content-medium,

        & .layout--pass--content-medium > * {

        grid-column: 1 / 9;

      }

      }

    }

  }



      & .layout--content-narrow,

      & .layout--pass--content-narrow > *,

      & .layout--content-medium,

      & .layout--pass--content-medium > * {

    @media (--grid-md) {

      grid-column: 2 / 14;

    }



    @media (--lg) {

      grid-column: 3 / 11;

        grid-column: 1 / 9;

      }

    }

  }



.region--sidebar {

  & .region--sidebar {

    -ms-grid-row: 2;

    grid-column: 1 / 7;
@@ -63,10 +45,7 @@ 


    @media (--lg) {

      -ms-grid-row: 1;

    grid-column: 11 / 15;

  }



  @media (--xl) {

      grid-column: 12 / 15;

    }

  }

}

core/themes/olivero/templates/layout/page.html.twig

+12 −5
Original line number Diff line number Diff line
@@ -91,24 +91,31 @@ 


    <div id="main-wrapper" class="layout-main-wrapper layout-container">

      <div id="main" class="layout-main">

        <main id="content" class="main-content " role="main">

        <div class="main-content">

          <a id="main-content" tabindex="-1"></a>

          {{ page.hero }}

          <div class="main-content__container container">

            {{ page.highlighted }}

            {{ page.breadcrumb }}

            {{ page.content_above }}



            {% if page.sidebar %}

              <div class="sidebar-grid grid-full">

                <main role="main" class="site-main ie11-autorow">

                  {{ page.content_above }}

                  {{ page.content }}

                </main>



                {{ page.sidebar }}

              </div>

            {% else %}

              <main role="main">

                {{ page.content_above }}

                {{ page.content }}

              </main>

            {% endif %}

            {{ page.content_below }}

          </div>

        </main>

        </div>

        <div class="social-bar">

          {{ page.social }}

        </div>

core/themes/olivero/templates/layout/region--content-below.html.twig

+2 −2
Original line number Diff line number Diff line
@@ -22,7 +22,7 @@ 
{{ attach_library('olivero/content-below') }}



{% if content %}

  <aside{{ attributes.addClass(classes) }}>

  <div{{ attributes.addClass(classes) }}>

    {{ content }}

  </aside>

  </div>

{% endif %}

core/themes/olivero/templates/layout/region--content.html.twig

+1 −1
Original line number Diff line number Diff line
@@ -24,7 +24,7 @@ 
%}



{% if content %}

  <div{{ attributes.addClass(classes) }}>

  <div{{ attributes.addClass(classes) }} id="content">

    {{ content }}

  </div>

{% endif %}