pico/docs/scss/layout/_main.scss

/**
 * Docs: Main (Grid)
 */

// Config
$navHeight: 3.5rem;

// Main grid
body > main {

  padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});

  @if map-get($breakpoints, "lg") {
    @media (min-width: map-get($breakpoints, "lg")) {
      --block-spacing-horizontal: calc(var(--spacing) * 1.75);
      grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
      display: grid;
      grid-template-columns: 200px auto;
    }
  }

  @if map-get($breakpoints, "xl") {
    @media (min-width: map-get($breakpoints, "xl")) {
      --block-spacing-horizontal: calc(var(--spacing) * 2);
    }
  }

  > aside,
  div[role="document"] {
    min-width: 0;
  }
}

// Anchors hacks for internal links
div[role="document"] > section::before {

  display: block;
  height: calc(2rem + #{$navHeight} - .5rem);
  margin-top: calc(-2rem - #{$navHeight} + .5rem);
  content: '';

  @if map-get($breakpoints, "sm") {
    @media (min-width: map-get($breakpoints, "sm")) {
      height: calc(2.5rem + #{$navHeight} - .5rem);
      height: calc(-2.5rem - #{$navHeight} + .5rem);
    }
  }

  @if map-get($breakpoints, "md") {
    @media (min-width: map-get($breakpoints, "md")) {
      height: calc(3rem + #{$navHeight} - .5rem);
      margin-top: calc(-3rem - #{$navHeight} + .5rem);
    }
  }

  @if map-get($breakpoints, "lg") {
    @media (min-width: map-get($breakpoints, "lg")) {
      height: calc(3.5rem + #{$navHeight} - .5rem);
      margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
    }
  }

  @if map-get($breakpoints, "xl") {
    @media (min-width: map-get($breakpoints, "xl")) {
      height: calc(4rem + #{$navHeight} - .5rem);
      margin-top: calc(-4rem - #{$navHeight} + .5rem);
    }
  }
}

// External links
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: var(--icon-external);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: .66rem auto;
  content: '';
}

// Embedded SVG
svg {
  height: 1rem;
}