lens/src/renderer/components/layout/page-layout.scss

.PageLayout {
  --width: 60%;
  --max-width: 1000px;
  --min-width: 570px;
  --nav-width: 180px;
  --spacing: calc(var(--unit) * 2);

  position: relative;
  width: 100%;
  height: 100%;
  display: grid !important;
  grid-template-rows: min-content 1fr;

  &.showNavigation {
    --width: 70%;

    > .content-scrollable-area {
      > .content-wrapper {
        grid-template-columns: var(--nav-width) 1fr;
      }
    }
  }

  // covers whole app view area
  &.showOnTop {
    position: fixed !important; // allow to cover ClustersMenu
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mainBackground);

    // adds extra space for traffic-light top buttons (mac only)
    .is-mac & > .header {
      padding-top: calc(var(--spacing) * 2);
    }
  }

  > .header {
    position: sticky;
    padding: var(--spacing);
    background-color: var(--layoutTabsBackground);
  }

  > .content-scrollable-area {
    overflow: auto;
    display: grid;
    place-items: center;

    > .content-wrapper {
      display: grid;
      grid-template-columns: none;
      column-gap: 24px;
      width: var(--width);
      min-width: var(--min-width);
      max-width: var(--max-width);
      padding: calc(var(--spacing) * 2);

      .content-navigation {
        > ul {
          position: fixed;
          width: var(--nav-width);
        }
      }
    }
  }

  p {
    line-height: 140%;
  }

  a {
    color: var(--colorInfo);
  }

  .SubTitle {
    text-transform: none;
    margin-bottom: 0 !important;
  }

  .Select {
    &__control {
      box-shadow: 0 0 0 1px var(--borderFaintColor);
    }
  }

  section {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing);

    > :not(:last-child) {
      margin-bottom: var(--spacing);
    }

    h1, h2 {
      color: var(--textColorAccent);
    }

    h1 {
      font-size: x-large;
      border-bottom: 1px solid var(--borderFaintColor);
      padding-bottom: var(--padding);
    }

    h2 {
      font-size: large;
    }

    small.hint {
      margin-top: calc(var(--unit) * -1.5);
    }

    .SubTitle {
      margin-top: 0;
    }
  }
}