blog/src/components/Layout.module.css

.content {
  padding: 0 calc(var(--spacer) / 1.5);
  width: 100%;
  max-width: var(--maxWidthContainer);
  margin-left: auto;
  margin-right: auto;
}

/* topbar and footer as fixed
   site background
///////////////////////////////////// */

.document {
  width: 100%;
  padding-top: var(--spacer);
  background-color: var(--body-background-color);
  padding-bottom: calc(var(--spacer) * 2);
  transform: translate3d(0, 0, 0);
  transition: 0.4s var(--easing);
  transition-property: transform, background, border, box-shadow;
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 10px rgba(1, 85, 101, 0.1),
    0 -1px 4px rgba(1, 85, 101, 0.05);
}

:global(.has-menu-open) .document {
  transform: translate3d(0, calc(var(--spacer) * 2), 0);
}

:global(.dark) .document {
  border-top-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 8px rgba(0, 7, 8, 0.3), 0 -1px 4px rgba(0, 21, 25, 0.8);
}

@media (min-width: 60rem) {
  .document {
    padding-top: calc(var(--spacer) * 2);
  }
}

@media (min-width: 40rem) and (min-height: 500px) {
  .document {
    margin-top: calc(var(--spacer) * 2.5);

    /* height of footer */
    margin-bottom: calc(var(--spacer) * 12);
    position: relative;
    z-index: 2;
    min-height: 500px;
  }
}

.container {
  width: 100%;
  max-width: var(--maxWidthContent);
  margin-left: auto;
  margin-right: auto;
}

.wide {
  composes: container;
  max-width: none;
}

.breakout {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

@media (min-width: 1000px) {
  .breakout {
    margin-left: -8rem;
    margin-right: -8rem;
  }
}