brk/website/styles/main.css

main {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  display: flex;
  min-height: 0;

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none;
  }

  &::before {
    top: 0;
    height: var(--main-padding);
    background-image: linear-gradient(
      to top,
      transparent,
      var(--background-color)
    );
  }

  &::after {
    bottom: 0;
    height: var(--main-padding);
    background-image: linear-gradient(
      to bottom,
      transparent,
      var(--background-color)
    );
  }

  html[data-layout="full"] & {
    width: 100% !important;
  }

  html[data-layout="split"] & {
    overflow-x: hidden;
    contain: inline-size;
  }

  > nav,
  > search {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--main-padding);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 12rem;
  }
}

#resize-bar {
  display: none;
  grid-column: 1;
  grid-row: 1 / -1;
  justify-self: end;
  width: 8px;
  margin: 0 -4px;
  z-index: 50;
  position: relative;
  cursor: col-resize;
  touch-action: none;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    translate: -50% 0;
    background: transparent;
    transition: background 0.15s;
  }

  &:hover {
    background: var(--border-color);

    &::after {
      background: var(--color);
    }
  }

  html[data-resize] &::after {
    background: var(--color);
  }

  html[data-layout="split"] & {
    display: block;
  }
}

footer {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  text-transform: uppercase;
  padding-bottom: var(--main-padding);

  html[data-layout="split"] & {
    grid-column: 1;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--main-padding);
    z-index: 1;
    pointer-events: none;
  }

  &::before {
    left: 0;
    background-image: linear-gradient(
      to left,
      transparent,
      var(--background-color)
    );
  }

  &::after {
    right: 0;
    background-image: linear-gradient(
      to right,
      transparent,
      var(--background-color)
    );
  }

  > fieldset {
    display: flex;
    gap: 1.125rem;
    overflow-x: auto;
    scrollbar-width: thin;
    min-width: 0;
    margin: -0.5rem 0;
    padding: 0.5rem var(--main-padding);
    pointer-events: auto;

    > label,
    > button {
      flex-shrink: 0;
    }

    > button {
      color: var(--off-color);
    }
  }
}