layout-sidebar.css

Special grid system for sidebar.

File

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Special grid system for sidebar.

  11.  */

  12. 

  13. .sidebar-grid > .site-main {

  14.   grid-column: 1 / 7;

  15.   align-self: flex-start;

  16. }

  17. 

  18. @media (min-width: 43.75rem) {

  19.   .sidebar-grid > .site-main {

  20.     grid-column: 1 / 15;

  21.   }

  22. }

  23. 

  24. @media (min-width: 62.5rem) {

  25.   .sidebar-grid > .site-main {

  26.     display: grid;

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

  28.     grid-column: 3 / 11;

  29.   }

  30. 

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

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

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

  34.     grid-column: 1 / 9;

  35.   }

  36. 

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

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

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

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

  41.     grid-column: 1 / 9;

  42.   }

  43. }

  44. 

  45. .sidebar-grid .region--sidebar {

  46.   grid-column: 1 / 7;

  47. }

  48. 

  49. @media (min-width: 43.75rem) {

  50.   .sidebar-grid .region--sidebar {

  51.     grid-column: 3 / 13;

  52.   }

  53. }

  54. 

  55. @media (min-width: 62.5rem) {

  56.   .sidebar-grid .region--sidebar {

  57.     grid-column: 12 / 15;

  58.   }

  59. }