<figure class="badge">
  <img src="https://www.fillmurray.com/44/44" alt="Bill Murray" class="badge__image">
  <figcaption class="badge__caption">
    <h1 class="badge__heading">Bill Murray</h1>
    <p class="badge__description">for president 2020</p>
  </figcaption>
</figure>

<button class="btn" id="btn">Toggle Grid</button>

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

/** Our system will use a 4px base vertical rhythm */
$verticalRhythmBase: 4;

/** Our system's base font size */
$baseFontSize: 16;

/**
 * Calculate the type offset for a given font
 *
 * @param {number} $lh - the font's base line height
 * @param {number} $fontSize - the font's size
 * @param {number} $descenderHeightScale - the font's descender height as a ratio
 * @return {number} the offset to be added to a transformY to keep the text in place
 */
@function calculateTypeOffset($lh, $fontSize, $descenderHeightScale) {
  $lineHeightScale: $lh / $fontSize;
  @return ($lineHeightScale - 1) / 2 + $descenderHeightScale;
}

/**
 * The basekick base function
 *
 * @param {number} $typeSizeModifier - a multiplier to determine the font size
 * @param {number} $typeRowSpan - how many rows of our vertical rhythm should the type span
 * @param {number} $descenderHeightScale - the height of the descender expressed as a ratio of the font
 * @param {number} $capHeight - the font's cap height expressed as a ratio of the font
 */
@mixin basekick($typeSizeModifier, $typeRowSpan, $descenderHeightScale, $capHeight) {
  $fontSize: $typeSizeModifier * $baseFontSize;
  $lineHeight: $typeRowSpan * $verticalRhythmBase;
  $typeOffset: calculateTypeOffset($lineHeight, $fontSize, $descenderHeightScale);
  $topSpace: $lineHeight - $capHeight * $fontSize;
  $heightCorrection: 0;
  
  @if $topSpace > $verticalRhythmBase {
    $heightCorrection: $topSpace - ($topSpace % $verticalRhythmBase);
  }
  
  $preventCollapse: 1;
  
  font-size: #{$fontSize}px;
  line-height: #{$lineHeight}px;
  transform: translateY(#{$typeOffset}em);
  padding-top: #{$preventCollapse}px;
  &::before {
    content: "";
    margin-top: #{-($heightCorrection + $preventCollapse)}px;
    display: block;
    height: 0;
  }
}

/**
 * The Lato mixin to apply basekick styles
 *
 * @param {number} $typeSizeModifier - a multiplier for our system's $baseFontSize
 * @param {number} $typeRowSpan - the height of the descender expressed as a ratio of the font
 */
@mixin Lato($typeSizeModifier, $typeRowSpan) {
  $latoDescenderHeightScale: 0.11;
  $latoCapHeight: 0.75;
  
  @include basekick($typeSizeModifier, $typeRowSpan, $latoDescenderHeightScale, $latoCapHeight);
  font-family: Lato;
}

// The most basic of CSS resets
* {
  // box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  padding: 16px;
}

$eigengrau: #16161d;

.badge {
  background: #ffffff;
  box-shadow: inset 0px 0px 1px 1px $eigengrau;
  border-radius: 4px;
  color: $eigengrau;
  display: inline-flex;
  padding: 8px;
  
  &__caption {
    margin-left: 8px;
    & > * + * {
      margin-top: $verticalRhythmBase * 2px;
    }
  }
  
  &__heading {
    @include Lato(2, 10);    
  }
  
  &__description {
    @include Lato(1, 6);
  }
}

.btn {
  background: tomato;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  line-height: 1;
  height: 44px;
  margin-top: 16px;
  padding: 0 16px;
  transition: background 0.1s ease-in;
  
  &:hover {
    background: darken(tomato, 10%);
  }
  
  &:active {
    background: darken(tomato, 20%);
  }
}

.grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  z-index: 3000000;
  opacity: .75;
  background-size: 4px 4px;
  background-position: 0px 0px;
  pointer-events: none;
  mix-blend-mode: difference;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 93.749%, #00ffff 93.75%, #00ffff 100%), linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 93.749%, #00ffff 93.75%, #00ffff 100%);
}

'use strict';

const btn = document.getElementById('btn');

function toggleGrid() {
  document.body.classList.toggle('grid');
}

btn.addEventListener('click', toggleGrid);