<div class="wrapper">
  <h1 class="heading--large">Hello CSS-Tricks</h1>
  
  <p class="text--normal">Thanks for taking the time to read this far. I hope you've learned something useful or at the very least interesting.</p>
  <p class="text--normal">By clicking the button below you can see just how easy it can be to create pixel-perfect layouts. This page aligns to a base <code class="text--code">4px</code> grid.</p>
  <p class="text--normal">If you would like to get it touch, you can reach out to me on Twitter at <a class="link" href="https://twitter.com/calebwilliams12" target="_blank" rel="noopener">@calebwilliams12</a>.</p>
  <button class="btn" id="btn">Toggle Grid</button>
</div>

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

body {
  zoom: 200%;
}

/** 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;
$base: tomato;
$secondary: #478eff;
$tertiary: #6cff47;

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

/**
 * This component will place 24px of margin
 * between all direct descendants
 */
.wrapper {
  margin: 16px 0;
  max-width: 400px;
  & > * + * {
    margin-top: 24px;
  }
}

.heading {
  &--large {
    @include Lato(2, 2);
  }
}

.text {
  &--normal {
    @include Lato(1, 6);
  }
  &--code {
    background: $eigengrau;
    border-radius: 4px;
    color: $tertiary;
    font-family: "Operator Mono", Consolas, "Andale Mono WT", "Andale Mono", monospace;
    padding: 0 4px;
  }
}

.link {
  color: $secondary;
}

.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);