layout.pcss.css 986 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. /**
  2. * @file
  3. * Base Layout.
  4. */
  5. @import "../base/variables.pcss.css";
  6. .container {
  7. width: 100%;
  8. max-width: var(--max-width);
  9. padding-inline: var(--container-padding);
  10. @media (--nav) {
  11. padding-inline: var(--container-padding-nav);
  12. }
  13. }
  14. .page-wrapper {
  15. max-width: var(--max-bg-color);
  16. background: var(--color--white);
  17. }
  18. /**
  19. * Creates stacking context ensuring that child elements can never appear in
  20. * front of mobile navigation.
  21. */
  22. .layout-main-wrapper {
  23. position: relative;
  24. z-index: 2; /* Ensure dropdown is not cut off by footer. */
  25. }
  26. /* Contains the social sidebar, and the primary content area. */
  27. .layout-main {
  28. @media (--nav) {
  29. display: flex;
  30. flex-direction: row-reverse;
  31. flex-wrap: wrap;
  32. }
  33. }
  34. .main-content {
  35. @media (--nav) {
  36. width: calc(100% - var(--content-left));
  37. margin-inline-end: auto;
  38. }
  39. }
  40. .main-content__container {
  41. padding-block-start: var(--sp3);
  42. @media (--md) {
  43. padding-block-start: var(--sp5);
  44. }
  45. }