pico/docs/scss/layout/_main.scss

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

$navHeight: 3.5rem;

body > main {
  padding-top:map-get($spacing-factor, "xs") + $navHeight;

  @media (min-width: map-get($breakpoints, "sm")) {
    padding-top: map-get($spacing-factor, "sm") + $navHeight;
  }

  @media (min-width: map-get($breakpoints, "md")) {
    padding-top: map-get($spacing-factor, "md") + $navHeight;
  }

  @media (min-width: map-get($breakpoints, "lg")) {
    grid-column-gap: $spacing-gutter*4;
    display: grid;
    grid-template-columns: 200px auto;
    padding-top: map-get($spacing-factor, "lg") + $navHeight;
  }

  @media (min-width: map-get($breakpoints, "xl")) {
    padding-top: map-get($spacing-factor, "xl") + $navHeight;
  }

  > * {
    min-width: 0; // HACK for childs in overflow
  }
}


// Anchors hacks for internal links
// ––––––––––––––––––––

div[role="document"] > section::before {
  display: block;
  height: map-get($spacing-factor, "xs") + $navHeight;
  margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
  content: '';


  @media (min-width: map-get($breakpoints, "sm")) {
    height: map-get($spacing-factor, "sm") + $navHeight;
    margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
  }

  @media (min-width: map-get($breakpoints, "md")) {
    height: map-get($spacing-factor, "md") + $navHeight;
    margin-top: -(map-get($spacing-factor, "md") + $navHeight);
  }

  @media (min-width: map-get($breakpoints, "lg")) {
    height: map-get($spacing-factor, "lg") + $navHeight;
    margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
  }

  @media (min-width: map-get($breakpoints, "xl")) {
    height: map-get($spacing-factor, "xl") + $navHeight;
    margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
  }
}


// External links
// ––––––––––––––––––––

div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  // Source: https://feathericons.com/
  $caret-icon-color: "808080"; // Without '#' !important
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: .66rem auto;
  content: '';
}


// Form grid
// ––––––––––––––––––––

form.grid {
  > input:not([type=checkbox]):not([type=radio]),
  > button {
    margin-bottom: 0;
  }
}