Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne

mirisuzanne/SassMeister-input-HTML.html

Last active August 29, 2015 14:08
Show Gist options
  • Save mirisuzanne/7d825cb64e820275494c to your computer and use it in GitHub Desktop.
Save mirisuzanne/7d825cb64e820275494c to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
@import "compass";
// Config
// ------
$colors: (
'blue': hsl(205, 85%, 40%),
'cyan': 'blue' (adjust-hue: -25),
'orange': 'blue' (adjust-hue: -180, lighten: 10%),
'yellow': 'blue' (adjust-hue: -160, saturate: 10%, lighten: 10%),
'green': 'blue' (adjust-hue: -125, desaturate: 20%, lighten: 10%),
'red': 'blue' (adjust-hue: -205),
'black': 'blue' (desaturate: 70%, darken: 20%),
'gray': 'blue' (adjust-hue: -25, desaturate: 70%, lighten: 55%),
'white': #fff,
);
// Tints/shades
$variants: (
lightest: (tint: 75%),
lighter: (tint: 50%),
light: (tint: 25%),
dark: (shade: 25%),
darker: (shade: 50%),
darkest: (shade: 75%),
);
// Colors
// ------
// Add colors to a pallette
@mixin colors(
$map
) {
$colors: map-merge($colors, $map) !global;
}
// Color
// -----
// Access your color pallette
@function color($color) {
// Parse arguments
$color: map-get($colors, $color) or $color;
$base: nth($color, 1);
$adjust: if(length($color) > 1, nth($color, 2), ());
// Recursive check
$color: if(map-has-key($colors, $base), color($base), $base);
// Adjustments
@each $function, $values in $adjust {
@if function-exists($function) {
$color: call($function, $color, $values...)
} @else {
@warn "#{$function} is not a valid color function.";
}
}
@return $color;
}
// Contrast
// --------
@function contrast($color) {
@return contrast-color(color($color));
}
// Output
// ------
div {
box-sizing: border-box;
float: left;
width: 50%;
}
$i: 0;
@each $name, $color in $colors {
$i: $i + 1;
div:nth-child(#{$i}) {
background: color($name);
color: contrast($name);
padding: 1rem;
text-align: center;
&:before {
content: '#{$name} » #{color($name)}';
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
$n: 0;
@each $var, $map in $variants {
$n: $n + 1;
span:nth-child(#{$n}) {
background: color($name $map);
color: contrast($name $map);
display: inline-block;
padding: 1rem;
&:before {
content: '#{$var}';
display: block;
}
&:after {
content: '#{color($name $map)}';
}
}
}
}
}
Raw
SassMeister-output.css
@charset "UTF-8";
div {
box-sizing: border-box;
float: left;
width: 50%;
}
div:nth-child(1) {
background: #0f74bd;
color: #fff;
padding: 1rem;
text-align: center;
}
div:nth-child(1):before {
content: "blue » #0f74bd";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(1) span:nth-child(1) {
background: #c3dcee;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(1) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(1) span:nth-child(1):after {
content: "#c3dcee";
}
div:nth-child(1) span:nth-child(2) {
background: #87b9de;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(1) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(1) span:nth-child(2):after {
content: "#87b9de";
}
div:nth-child(1) span:nth-child(3) {
background: #4b96cd;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(1) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(1) span:nth-child(3):after {
content: "#4b96cd";
}
div:nth-child(1) span:nth-child(4) {
background: #0b578d;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(1) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(1) span:nth-child(4):after {
content: "#0b578d";
}
div:nth-child(1) span:nth-child(5) {
background: #073a5e;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(1) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(1) span:nth-child(5):after {
content: "#073a5e";
}
div:nth-child(1) span:nth-child(6) {
background: #031d2f;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(1) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(1) span:nth-child(6):after {
content: "#031d2f";
}
div:nth-child(2) {
background: #0fbdbd;
color: #000;
padding: 1rem;
text-align: center;
}
div:nth-child(2):before {
content: "cyan » #0fbdbd";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(2) span:nth-child(1) {
background: #c3eeee;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(2) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(2) span:nth-child(1):after {
content: "#c3eeee";
}
div:nth-child(2) span:nth-child(2) {
background: #87dede;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(2) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(2) span:nth-child(2):after {
content: "#87dede";
}
div:nth-child(2) span:nth-child(3) {
background: #4bcdcd;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(2) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(2) span:nth-child(3):after {
content: "#4bcdcd";
}
div:nth-child(2) span:nth-child(4) {
background: #0b8d8d;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(2) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(2) span:nth-child(4):after {
content: "#0b8d8d";
}
div:nth-child(2) span:nth-child(5) {
background: #075e5e;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(2) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(2) span:nth-child(5):after {
content: "#075e5e";
}
div:nth-child(2) span:nth-child(6) {
background: #032f2f;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(2) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(2) span:nth-child(6):after {
content: "#032f2f";
}
div:nth-child(3) {
background: #ec6d13;
color: #000;
padding: 1rem;
text-align: center;
}
div:nth-child(3):before {
content: "orange » #ec6d13";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(3) span:nth-child(1) {
background: #fadac4;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(3) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(3) span:nth-child(1):after {
content: "#fadac4";
}
div:nth-child(3) span:nth-child(2) {
background: #f5b689;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(3) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(3) span:nth-child(2):after {
content: "#f5b689";
}
div:nth-child(3) span:nth-child(3) {
background: #f0914e;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(3) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(3) span:nth-child(3):after {
content: "#f0914e";
}
div:nth-child(3) span:nth-child(4) {
background: #b1510e;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(3) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(3) span:nth-child(4):after {
content: "#b1510e";
}
div:nth-child(3) span:nth-child(5) {
background: #763609;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(3) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(3) span:nth-child(5):after {
content: "#763609";
}
div:nth-child(3) span:nth-child(6) {
background: #3b1b04;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(3) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(3) span:nth-child(6):after {
content: "#3b1b04";
}
div:nth-child(4) {
background: #f9bc06;
color: #000;
padding: 1rem;
text-align: center;
}
div:nth-child(4):before {
content: "yellow » #f9bc06";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(4) span:nth-child(1) {
background: #fdeec0;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(4) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(4) span:nth-child(1):after {
content: "#fdeec0";
}
div:nth-child(4) span:nth-child(2) {
background: #fcdd82;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(4) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(4) span:nth-child(2):after {
content: "#fcdd82";
}
div:nth-child(4) span:nth-child(3) {
background: #facc44;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(4) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(4) span:nth-child(3):after {
content: "#facc44";
}
div:nth-child(4) span:nth-child(4) {
background: #ba8d04;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(4) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(4) span:nth-child(4):after {
content: "#ba8d04";
}
div:nth-child(4) span:nth-child(5) {
background: #7c5e03;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(4) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(4) span:nth-child(5):after {
content: "#7c5e03";
}
div:nth-child(4) span:nth-child(6) {
background: #3e2f01;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(4) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(4) span:nth-child(6):after {
content: "#3e2f01";
}
div:nth-child(5) {
background: #9bd22d;
color: #000;
padding: 1rem;
text-align: center;
}
div:nth-child(5):before {
content: "green » #9bd22d";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(5) span:nth-child(1) {
background: #e6f3ca;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(5) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(5) span:nth-child(1):after {
content: "#e6f3ca";
}
div:nth-child(5) span:nth-child(2) {
background: #cde896;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(5) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(5) span:nth-child(2):after {
content: "#cde896";
}
div:nth-child(5) span:nth-child(3) {
background: #b4dd61;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(5) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(5) span:nth-child(3):after {
content: "#b4dd61";
}
div:nth-child(5) span:nth-child(4) {
background: #749d21;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(5) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(5) span:nth-child(4):after {
content: "#749d21";
}
div:nth-child(5) span:nth-child(5) {
background: #4d6916;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(5) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(5) span:nth-child(5):after {
content: "#4d6916";
}
div:nth-child(5) span:nth-child(6) {
background: #26340b;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(5) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(5) span:nth-child(6):after {
content: "#26340b";
}
div:nth-child(6) {
background: #bd0f0f;
color: #fff;
padding: 1rem;
text-align: center;
}
div:nth-child(6):before {
content: "red » #bd0f0f";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(6) span:nth-child(1) {
background: #eec3c3;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(6) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(6) span:nth-child(1):after {
content: "#eec3c3";
}
div:nth-child(6) span:nth-child(2) {
background: #de8787;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(6) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(6) span:nth-child(2):after {
content: "#de8787";
}
div:nth-child(6) span:nth-child(3) {
background: #cd4b4b;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(6) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(6) span:nth-child(3):after {
content: "#cd4b4b";
}
div:nth-child(6) span:nth-child(4) {
background: #8d0b0b;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(6) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(6) span:nth-child(4):after {
content: "#8d0b0b";
}
div:nth-child(6) span:nth-child(5) {
background: #5e0707;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(6) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(6) span:nth-child(5):after {
content: "#5e0707";
}
div:nth-child(6) span:nth-child(6) {
background: #2f0303;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(6) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(6) span:nth-child(6):after {
content: "#2f0303";
}
div:nth-child(7) {
background: #2b343b;
color: #fff;
padding: 1rem;
text-align: center;
}
div:nth-child(7):before {
content: "black » #2b343b";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(7) span:nth-child(1) {
background: #caccce;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(7) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(7) span:nth-child(1):after {
content: "#caccce";
}
div:nth-child(7) span:nth-child(2) {
background: #95999d;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(7) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(7) span:nth-child(2):after {
content: "#95999d";
}
div:nth-child(7) span:nth-child(3) {
background: #60666c;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(7) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(7) span:nth-child(3):after {
content: "#60666c";
}
div:nth-child(7) span:nth-child(4) {
background: #20272c;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(7) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(7) span:nth-child(4):after {
content: "#20272c";
}
div:nth-child(7) span:nth-child(5) {
background: #151a1d;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(7) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(7) span:nth-child(5):after {
content: "#151a1d";
}
div:nth-child(7) span:nth-child(6) {
background: #0a0d0e;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(7) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(7) span:nth-child(6):after {
content: "#0a0d0e";
}
div:nth-child(8) {
background: #f0f4f4;
color: #000;
padding: 1rem;
text-align: center;
}
div:nth-child(8):before {
content: "gray » #f0f4f4";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(8) span:nth-child(1) {
background: #fbfcfc;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(8) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(8) span:nth-child(1):after {
content: "#fbfcfc";
}
div:nth-child(8) span:nth-child(2) {
background: #f7f9f9;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(8) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(8) span:nth-child(2):after {
content: "#f7f9f9";
}
div:nth-child(8) span:nth-child(3) {
background: #f3f6f6;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(8) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(8) span:nth-child(3):after {
content: "#f3f6f6";
}
div:nth-child(8) span:nth-child(4) {
background: #b4b7b7;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(8) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(8) span:nth-child(4):after {
content: "#b4b7b7";
}
div:nth-child(8) span:nth-child(5) {
background: #787a7a;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(8) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(8) span:nth-child(5):after {
content: "#787a7a";
}
div:nth-child(8) span:nth-child(6) {
background: #3c3d3d;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(8) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(8) span:nth-child(6):after {
content: "#3c3d3d";
}
div:nth-child(9) {
background: #fff;
color: #000;
padding: 1rem;
text-align: center;
}
div:nth-child(9):before {
content: "white » #fff";
display: block;
margin-bottom: .25rem;
text-transform: uppercase;
}
div:nth-child(9) span:nth-child(1) {
background: white;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(9) span:nth-child(1):before {
content: "lightest";
display: block;
}
div:nth-child(9) span:nth-child(1):after {
content: "white";
}
div:nth-child(9) span:nth-child(2) {
background: white;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(9) span:nth-child(2):before {
content: "lighter";
display: block;
}
div:nth-child(9) span:nth-child(2):after {
content: "white";
}
div:nth-child(9) span:nth-child(3) {
background: white;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(9) span:nth-child(3):before {
content: "light";
display: block;
}
div:nth-child(9) span:nth-child(3):after {
content: "white";
}
div:nth-child(9) span:nth-child(4) {
background: #bfbfbf;
color: #000;
display: inline-block;
padding: 1rem;
}
div:nth-child(9) span:nth-child(4):before {
content: "dark";
display: block;
}
div:nth-child(9) span:nth-child(4):after {
content: "#bfbfbf";
}
div:nth-child(9) span:nth-child(5) {
background: #7f7f7f;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(9) span:nth-child(5):before {
content: "darker";
display: block;
}
div:nth-child(9) span:nth-child(5):after {
content: "#7f7f7f";
}
div:nth-child(9) span:nth-child(6) {
background: #3f3f3f;
color: #fff;
display: inline-block;
padding: 1rem;
}
div:nth-child(9) span:nth-child(6):before {
content: "darkest";
display: block;
}
div:nth-child(9) span:nth-child(6):after {
content: "#3f3f3f";
}
Raw
SassMeister-rendered.html
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment