<div class="CodingPotions"></div>

/*
   CodingPotions https://twitter.com/CodingPotions
   Joan Leon
   @nucliweb
*/

// Colors
$border: #000000;
$capfulLighted: #ffe1ad;
$capful: #f1d5a5;
$capfulShadow: #d0bb86;
$glass: #f2f2f2;
$glassShadow: #757575;
$potion: #b08cfa;
$potionShadow: #532e73;
$potionReflection: #d589e4;

$grid: 17;

// Map of colors
$colors: (
  1: $border,
  2: $capfulLighted,
  3: $capful,
  4: $capfulShadow,
  5: $glass,
  6: $glassShadow,
  7: $potion,
  8: $potionShadow,
  9: $potionReflection
);

// CodingPotions
$CodingPotions: 0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,
                0,0,0,0,0,1,2,3,3,4,3,1,0,0,0,0,0,
                0,0,0,0,0,1,2,3,3,4,3,1,0,0,0,0,0,
                0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,
                0,0,0,0,0,0,1,5,6,5,1,0,0,0,0,0,0,
                0,0,0,0,0,0,1,5,6,5,1,0,0,0,0,0,0,
                0,0,0,0,0,0,1,5,6,5,1,0,0,0,0,0,0,
                0,0,0,0,0,1,5,5,6,6,5,1,0,0,0,0,0,
                0,0,0,0,1,5,5,5,5,6,6,5,1,0,0,0,0,
                0,0,0,1,5,5,5,5,5,5,6,6,5,1,0,0,0,
                0,0,1,5,9,9,5,5,5,5,5,6,6,5,1,0,0,
                0,1,7,9,5,5,9,7,7,7,7,8,8,7,7,1,0,
                0,1,7,9,5,5,9,7,7,7,7,8,8,7,7,1,0,
                1,7,8,7,9,9,7,7,7,7,7,7,8,8,7,7,1,
                1,7,8,8,7,9,7,7,7,7,7,8,8,8,7,7,1,
                1,9,8,8,8,7,7,7,7,7,8,8,8,8,8,7,1,
                1,9,8,8,8,8,8,8,8,8,8,8,8,8,8,7,1,
                0,1,9,8,8,8,8,8,8,8,8,8,8,8,7,1,0,
                0,1,9,9,8,8,8,8,8,8,8,8,8,8,7,1,0,
                0,0,1,9,9,9,8,8,8,8,8,8,7,7,1,0,0,
                0,0,0,1,1,9,9,7,7,7,7,7,1,1,0,0,0,
                0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0;



@function pixelart($pixel-list, $colors: $colors, $grid: $grid) {
  $shadows: ();
  $row: 0;
  $col: 1;

  @for $i from 1 through length($pixel-list) {
    @if( nth($pixel-list,$i) > 0 ) {
      $shadows: append($shadows, ($col * 1px) ($row * 1px) 0 map-get($colors,nth($pixel-list,$i)), 'comma');
    }

    @if($i % $grid == 0) {
      $row: $row+1;
      $col: 0;
    }

    $col: $col + 1;
  }

  @return $shadows;
}

body {
  background-color: #222f40;
}

.CodingPotions {
  width: 1px;
  height: 1px;
  margin: 100px 100px;

  transform: scale(10);

  box-shadow: pixelart($CodingPotions);
}