docs-page-document.css

/**
 * Documentation layout
 */

.documentation {
  background-color: var(--color-document-background);
  align-content: flex-start;
  display: grid;
  height: 100%;
}

.documentation {
  @media screen and (max-width: 1023px) {
    grid-template-areas:
      "breadcrumbs"
      "toc"
      "article"
      "lastupdated"
      "relatedpages"
      "filler";
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  @media screen and (min-width: 1024px) and (max-width: 1479px) {
    grid-template-areas:
      "aside_filter breadcrumbs"
      "aside breadcrumbs"
      "aside toc"
      "aside article"
      "aside lastupdated"
      "aside relatedpages"
      "aside filler";
    grid-template-columns: minmax(380px, auto) 1fr;
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  @media screen and (min-width: 1480px) {
    grid-template-areas:
      "aside_filter breadcrumbs toc"
      "aside breadcrumbs toc"
      "aside article toc"
      "aside lastupdated toc"
      "aside relatedpages toc"
      "aside filler toc";
    grid-template-columns: minmax(440px, auto) 1fr minmax(18vw, 360px);
    grid-template-rows: auto auto auto auto auto 1fr;
  }
}

.documentation::after {
  content: "";
  grid-area: filler;
}

.documentation__article,
.documentation__last-updated,
.documentation__related-pages {
  justify-self: center;
  width: 100%;

  @media screen and (max-width: 1023px) {
    padding: 20px 20px 20px 20px;
  }
  @media screen and (min-width: 1024px) and (max-width: 1479px) {
    padding: 20px 20px 20px 40px;
  }
  @media screen and (min-width: 1480px) {
    max-width: 1280px;
    padding: 20px 20px 20px 80px;
  }
}

.documentation__article {
  grid-area: article;

  iframe {
    align-self: center;
    min-height: 480px;
    width: 100%;
  }
}

.documentation__aside,
.documentation__toc {
  font-size: var(--font-size-smaller);
  min-width: 200px;
  z-index: var(--z-index-documentation-aside);
}

.documentation__aside {
  @media screen and (max-width: 1023px) {
    display: none;
  }
  @media screen and (min-width: 1024px) {
    background: var(--color-aside-background);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    grid-area: aside;
    height: 100%;
    max-height: calc(
      100vh - var(--height-aside-filter) - var(--height-primary-navigation)
    );
    overflow-y: auto;
    position: sticky;
    top: calc(var(--height-aside-filter) + var(--height-primary-navigation));
    width: 100%;
  }
}

.documentation__aside-filter {
  @media screen and (max-width: 1023px) {
    display: none;
  }
  @media screen and (min-width: 1024px) {
    align-items: stretch;
    background-color: var(--color-aside-background);
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: var(--color-border);
    column-gap: 10px;
    display: flex;
    flex-direction: row;
    grid-area: aside_filter;
    height: var(--height-aside-filter);
    position: sticky;
    top: var(--height-primary-navigation);
    z-index: var(--z-index-documentation-aside-filter);
  }
}

.documentation__aside-filter__input {
  background-color: transparent;
  border: none;
  flex-grow: 1;
  padding: 15px 20px;

  &:focus {
    outline: none;
  }
}

.documentation__aside-filter__input::placeholder {
  color: inherit;
}

@media screen and (min-width: 1480px) {
  .documentation__toc__links {
    position: sticky;
    top: calc(var(--height-primary-navigation) + 20px);
  }
}

.documentation__aside__links,
.documentation__aside__links-group,
.documentation__toc__links {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

.documentation__aside__links {
  padding: 20px 20px 40px 20px;
}

.documentation__aside__links a,
.documentation__toc__links a {
  hyphens: auto;

  &:not(.active) {
    text-decoration: none;
  }
}

.documentation__aside__links a.active {
  color: var(--color-link-active);
}

.documentation__aside__links a.hidden {
  display: none;
}

.documentation__aside__links-group > .documentation__aside__links-group {
  padding-left: 2ch;
}

.documentation__aside__links-group:has(a.hidden)
  > .documentation__aside__links-group {
  padding-left: 0;
}

.documentation__aside__links-group.level-1,
.documentation__aside__links-group.level-2 {
  padding-top: 1em;
}

.documentation__aside__links-group.level-1 > a,
.documentation__aside__links-group.level-2 > a {
  font-weight: bold;
}

.documentation__aside__links-group:not(:has(a:not(.hidden))) {
  display: none;
}

.documentation__breadcrumbs {
  grid-area: breadcrumbs;

  @media screen and (max-width: 1023px) {
    padding: 20px;
  }
  @media screen and (min-width: 1024px) and (max-width: 1479px) {
    padding: 20px 20px 20px 30px;
  }
  @media screen and (max-width: 1479px) {
    border-color: var(--color-border);
    border-style: solid;
    border-width: 0 0 1px 0;
  }
  @media screen and (min-width: 1480px) {
    padding: 20px 20px 20px 40px;
  }
}

.documentation__last-updated {
  color: var(--color-body-font-highlight);
  grid-area: lastupdated;
  padding: 20px;
  text-align: right;
  font-size: var(--font-size-smaller);
}

.documentation__related-pages {
  gap: 20px;
  grid-area: relatedpages;
  margin-top: 72px;

  @media screen and (max-width: 1023px) {
    display: flex;
    flex-direction: column;
  }
  @media screen and (min-width: 1024px) {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 1fr);
    justify-content: flex-end;
  }
}

.documentation__related-pages a {
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 20px;
  row-gap: 10px;
  text-decoration: none;
}

.documentation__related-pages__description {
  font-size: var(--font-size-smaller);
  line-height: 1.5;
}

.documentation__related-pages__link {
  display: flex;
  flex-direction: row;
}

.documentation__related-pages__link.documentation__related-pages__link--next {
  align-items: flex-end;

  &:only-child {
    grid-column: 2;
  }

  .documentation__related-pages__description {
    text-align: right;
  }
}

.documentation__related-pages__label {
  font-size: var(--font-size-smaller);
}

.documentation__related-pages__title {
  color: var(--color-link-active);
}

.documentation__toc {
  grid-area: toc;
  position: relative;

  @media screen and (max-width: 1023px) {
    padding: 40px 20px;
  }
  @media screen and (max-width: 1479px) {
    border-color: var(--color-border);
    border-style: solid;
    border-width: 0 0 1px 0;
  }
  @media screen and (min-width: 1024px) and (max-width: 1479px) {
    padding: 40px 20px 40px 40px;
  }
  @media screen and (min-width: 1480px) {
    padding: 20px;
  }
}

@media screen and (min-width: 1480px) {
  .documentation__toc__links {
    border-left: 1px solid var(--color-border);
    max-width: 20vw;
    padding-left: 20px;
  }

  .documentation__toc__links .heading-permalink {
    display: none;
  }
}

.documentation__toc__links {
  a.level-1 {
    font-weight: bold;
  }

  a.level-2 {
    padding-left: 2ch;
  }

  a.level-3 {
    padding-left: 4ch;
  }

  a.level-4 {
    padding-left: 6ch;
  }

  a.level-5 {
    padding-left: 8ch;
  }

  a.level-6 {
    padding-left: 10ch;
  }
}

@media screen and (min-width: 1480px) {
  .documentation__toc__links a.visible {
/*    background-color: var(--color-link-active);*/
  }
}