jerrylow

// Pure CSS Donut Chart
// By: Jerry Low
// How to use sample: https://codepen.io/jerrylow/pen/KKdNXbJ
.donut {
  --donut-size: 300px;
  --donut-border-width: 20px;

  --donut-spacing: 0;
  --donut-spacing-color: 255, 255, 255;
  --donut-spacing-deg: calc(1deg * var(--donut-spacing));

jerrylow

{
  "sort-order": [[
    "$include",
    "$extend",
    "align-items",
    "align-self",
    "animation",
    "animation-delay",
    "animation-direction",
    "animation-duration",

jerrylow

/* Variables */
@function breakpoints($name) {
  @return map-get($breakpoints, $name);
}

$breakpoints: (
  xs: 480px,
  sm: 768px,
  md: 992px,
  lg: 1200px,

jerrylow

@import url('https://fonts.googleapis.com/css?family=VT323');

$block-gap: 8px;
$block-size: 25px;
$blocks-per-row: 7;
$blocks-color: #233f5a;
$blocks-active: #fabc7f;
$blocks-bg: #172031;
$speed: 2.5s;

jerrylow

/**
 * @file responsive.js
 * Helper script that will be used for making front-end changes bases on
 * boostrap breakpoints.
 * Full Library Version: https://github.com/jerrylow/breakpoints
 * ---------------------------------------------------------------------
 *
 *
 * Initiate:
 * $(window).responsive();

jerrylow

div#content