<header class="header">
  <div class="header__title">
    <h1>
      <code>radial-gradient()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#search=radial-gradient()">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      This example contains a variety of gradients, each using the <code>radial-gradient()</code> function's syntax to create a variety of visual effects:
    </p>

    <div class="example__demo example__demo--radial-gradient">
      <h2>2 color radial gradient</h2>
      <div class="gradient gradient--a"></div>
      <h2>Circle</h2>
      <div class="gradient gradient--b"></div>
      <h2>Multiple radial gradients</h2>
      <div class="gradient gradient--c"></div>
      <h2>Danger grill <a class="hat-tip" href="https://css-tricks.com/why-do-we-have-repeating-linear-gradient-anyway/">h/t Anna Tudor</a></h2>
      <div class="gradient gradient--d"></div>
    </div>
  </div>
</main>

// Demo
.gradient--a {
  background: radial-gradient(ellipse at center,  rgba(255,130,0,1) 0%,rgba(249,0,112,1) 100%);
  border-radius: 250px;
  height: 250px;
  width: 250px;
}

.gradient--b {
  background: radial-gradient(ellipse at center, #3053b9 0%, #5343ff 50%, #00ffff 50.25%, #00ffff 100%);
  height: 325px;
  width: 325px;
}

.gradient--c {
  background: 
    radial-gradient(
      circle at top left,
      #5B3376, 
      transparent 200px
    ),
    radial-gradient(
      circle at top right,
      #FF2E7E, 
      transparent 300px
    ),
    radial-gradient(
      at bottom left,
      #1D2E72, 
      transparent 600px
    ),
    radial-gradient(
      at bottom right,
      #FF5245, 
      transparent 1200px
  );
  height: 300px;
  width: 100%;
}

.gradient--d {
  background: 
    repeating-linear-gradient(
      65deg, 
      #ffa500 0, 
      #000000 1px,
      #ffa500 0.25rem,
      #ffa500 0.75rem
  );
  height: 100px;
  width: 100%;
}


// Pen Setup
.example__demo--radial-gradient {
  background-color: var(--color-cinder);
}

h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

h2:not(:first-of-type) {
  margin-top: var(--size-epsilon);
}

.hat-tip {
  font-size: 75%;
  margin-left: 0.5em;
}