grids

grids.scss

.baseline_grid_toggle,
.vertical_grid_toggle {
  position: fixed;
  z-index: 9999;
  left: 0;
  bottom: 0;
  background: $color__gold;
  color: $color__white;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
  .vertical_grid_toggle {
    left: auto;
    right: 0;
  }

.baseline_grid {
  position: absolute;
  z-index: 9998;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: .25;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0),
    rgba(0,0,0,0) 5px,
    #7fffff 5px,
    #7fffff 10px
  );
}

.vertical_grid {
  position: absolute;
  z-index: 9998;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 320px;
  opacity: .25;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    #7fffff,
    #7fffff col-span(1,large),
    rgba(0,0,0,0) col-span(1,large),
    rgba(0,0,0,0) (col-span(1,large)+map-get($gutters,large))
  );

  @include breakpoint(medium) {
    background: repeating-linear-gradient(
      90deg,
      #7fffff,
      #7fffff col-span(1,medium),
      rgba(0,0,0,0) col-span(1,medium),
      rgba(0,0,0,0) (col-span(1,medium)+map-get($gutters,medium))
    );
  }

  @include breakpoint(small) {
    background: repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0),
      rgba(0,0,0,0) map-get($gutters, small),
      #7fffff map-get($gutters, small),
      #7fffff calc(
        (
          (100vw - #{7 * map-get($gutters, small)}) / 6)
          +
          #{map-get($gutters, small)}
        )
    );
  }
}