picocss/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} - 0.5rem);
  margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
  content: "";

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

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

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

  @if map-get($breakpoints, "xl") {
    @media (min-width: map-get($breakpoints, "xl")) {
      height: calc(4rem + #{$navHeight} - 0.5rem);
      margin-top: calc(-4rem - #{$navHeight} + 0.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: 0.66rem auto;
  content: "";
}

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