layout.pcss.css in Drupal 10

Base Layout.

File

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

/**
 * @file
 * Base Layout.
 */

@import "../base/media-queries.pcss.css";

.container {
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--container-padding);

  /* This fixes an issue where if the toolbar is open in vertical mode, and
   * the mobile navigation is open, the "close" button gets pushed outside of
   * the viewport. */
  @nest body.is-fixed & {
    width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
  }
}

.page-wrapper {
  max-width: var(--max-bg-color);
  background: var(--color--white);
}

/**
 * Creates stacking context ensuring that child elements can never appear in
 * front of mobile navigation.
 */
.layout-main-wrapper {
  position: relative;
  z-index: 1;
}

/* Contains the social sidebar, and the primary content area. */
.layout-main {
  @media (--nav) {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
}

.main-content {
  @media (--nav) {
    width: calc(100% - var(--content-left));
    margin-inline-end: auto;
  }
}

.main-content__container {
  padding-block-start: var(--sp3);

  @media (--md) {
    padding-block-start: var(--sp5);
  }
}