SASS mixin that hands a maxtrix of lists to a function, to create a bit of pixel art out of box shadows. Co-made with @shadowmint. TODO - multiple colours!
A Pen by Jack Armley on CodePen.
header.demo-header | |
h1 Cross-stich | |
p | |
| Little bits of 8-bit goodness generated | |
| from a clutch of sass lists. | |
ul.icons | |
each icon in ['hamburger','close','diamond','cross','heart','doublearr'] | |
li(class='icons--#{icon}') |
SASS mixin that hands a maxtrix of lists to a function, to create a bit of pixel art out of box shadows. Co-made with @shadowmint. TODO - multiple colours!
A Pen by Jack Armley on CodePen.
@function icon($matrix,$size,$color){ | |
$l: length($matrix); | |
$sh: ''; | |
$i: $l; | |
@for $i from 1 through $l{ | |
$row: nth($matrix,$i); | |
@for $j from 1 through length($row){ | |
$item: nth($row,$j); | |
@if $item == x{ | |
$sh: $sh + ($j*$size) + ' ' + ($i*$size) + ' ' + $color; | |
}@else{ | |
$sh: $sh + ($j*$size) + ' ' + ($i*$size) + ' ' + transparent; | |
} | |
@if not ($j == length($row) and $i == $l) { | |
$sh: $sh + ','; | |
} | |
} | |
} | |
@return unquote($sh); | |
} | |
@mixin icon($matrix,$size,$color,$radius:0){ | |
position:relative; | |
width:($size * length(nth($matrix,1))); | |
height:($size * length($matrix)); | |
&:after{ | |
content:' '; | |
position:absolute; | |
top:(-$size); | |
left:(-$size); | |
width:$size; | |
height:$size; | |
border-radius:$radius; | |
box-shadow: | |
icon($matrix,$size,$color); | |
} | |
} | |
$bodybg: #DFFF26; | |
$iconcolor: #727F20; | |
$textcolor: $iconcolor; | |
$iconsize: 8px; | |
$icons:( | |
hamburger:( | |
(x x x x x) | |
(o o o o o) | |
(x x x x x) | |
(o o o o o) | |
(x x x x x) | |
), | |
close:( | |
(x o o o x) | |
(o x o x o) | |
(o o x o o) | |
(o x o x o) | |
(x o o o x) | |
), | |
diamond:( | |
(o o x o o) | |
(o x o x o) | |
(x o o o x) | |
(o x o x o) | |
(o o x o o) | |
), | |
cross:( | |
(o o x o o) | |
(o o x o o) | |
(x x x x x) | |
(o o x o o) | |
(o o x o o) | |
), | |
heart:( | |
(o x o x o) | |
(x x x x x) | |
(x x x x x) | |
(o x x x o) | |
(o o x o o) | |
), | |
doublearr:( | |
(o o x o o) | |
(o x o x o) | |
(x o x o x) | |
(o x o x o) | |
(x o o o x) | |
) | |
); | |
$headerfont:'Oswald'; | |
$bodyfont:'PT Sans'; | |
@import url(http://fonts.googleapis.com/css?family=Oswald:300,700|PT+Sans);html, | |
body{ | |
height:100%; | |
} | |
html{ | |
background:$bodybg; | |
} | |
body{ | |
box-sizing:border-box; | |
width:100%; | |
max-width:600px; | |
margin:auto; | |
padding:60px; | |
color:$textcolor; | |
font:normal normal 120%/1.5em $bodyfont, sans-serif; | |
} | |
.demo-header{ | |
margin-bottom:2em; | |
text-align:center; | |
h1{ | |
margin:0; | |
color:#fff; | |
font:700 3em/1.5em $headerfont; | |
text-shadow:3px 3px 0 $iconcolor; | |
} | |
} | |
.icons{ | |
margin:0; | |
padding:0; | |
list-style:none; | |
text-align:center; | |
@at-root{ | |
[class^="icons--"]{ | |
display:inline-block; | |
margin:20px; | |
border:25px solid transparent; | |
} | |
} | |
@each $key,$value in $icons{ | |
&--#{$key}{ | |
@include icon( | |
$value, | |
$iconsize, | |
$iconcolor | |
); | |
} | |
} | |
} |