ol.snow-bros
li.a
li.b
li.c
li.d
li.e
li.f
li.g
li.h
li.i
li.j
li.k
li.l
li.m
li.n
li.o
li.p
li.q
li.r
li.s
li.t
li.u
li.v
li.w
li.x
li.y
li.z
ol.snow-bros
li.zero
li.one
li.two
li.three
li.four
li.five
li.six
li.seven
li.eight
li.nine// Arcade Lettering from Snow Bros. (1990)
// As seen in Toshi Omagari’s book Arcade Game Typography: https://readonlymemory.vg/shop/book/arcade-game-typography/
$blue = #00A2E2
$blue-light = #09C5D8
$green = #00A323
$shadow = #3D060A
$green-single = linear-gradient(to top, $shadow 10px,
$green 10px, $green 20px,
$blue-light 20px, $blue-light 30px,
$blue 30px)
$green-double = linear-gradient(to top, $shadow 10px,
$green 10px, $green 30px,
$blue-light 30px, $blue-light 40px,
$blue 40px)
full(color)
linear-gradient(to top, color, color)
green(direction)
linear-gradient(to direction, $shadow 10px, $green 10px)
blue(direction)
linear-gradient(to direction, $shadow 10px, $blue 10px)
blue-light(direction)
linear-gradient(to direction, $shadow 10px, $blue-light 10px)
halfsies(color1,color2,direction)
linear-gradient(to direction, color1 50%, color2 50%)
span(width1, width2)
(10px * width1) (10px * width2)
body
padding: 30px
background-color: #eee
.snow-bros li
width: 80px
height: @width
margin: 15px
background-repeat: no-repeat
display: inline-block
&.a
background-image: blue(left),
$green-double,
full($shadow),
blue(left),
blue(top),
full($shadow),
$green-double,
full($shadow)
background-size: span(5,1),
span(3,7),
span(1,1),
span(2,1),
span(2,2),
span(1,8),
span(2,6),
span(1,6)
background-position: span(1,0),
span(0,1),
span(4,1),
span(5,1),
span(3,3),
span(3,0),
span(5,2),
span(7,2)
&.b
background-image: $green-double,
blue(left),
full($shadow),
blue(left),
blue(left),
full($shadow),
green(top),
full($shadow),
$green-double,
full($shadow)
background-size: span(3,8),
span(4,1),
span(1,1),
span(3,2),
span(4,1),
span(1,1),
span(2,2),
span(1,8),
span(2,4),
span(1,4)
background-position: span(0,0),
span(3,0),
span(4,1),
span(5,1),
span(3,3),
span(4,4),
span(3,6),
span(3,0),
span(5,4),
span(7,4)
&.c
background-image: $green-single,
$green-double,
blue(left),
full($shadow),
blue(left),
green(left),
green(left),
full($shadow),
full($shadow)
background-size: span(1,6),
span(2,8),
span(4,1),
span(1,1),
span(3,1),
span(3,1),
span(4,1),
span(2,1),
span(1,8)
background-position: span(0,1),
span(1,0),
span(3,0),
span(4,1),
span(5,1),
span(5,5),
span(3,6),
span(4,7),
span(3,0)
&.d
background-image: $green-double,
blue(left),
blue(left),
blue(left),
green(top),
$green-single,
full($shadow),
full($shadow)
background-size: span(3,8),
span(2,1),
span(2,1),
span(2,1),
span(3,2),
span(2,4),
span(1,8),
span(1,3)
background-position: span(0,0),
span(3,0),
span(4,1),
span(5,2),
span(3,6),
span(5,3),
span(3,0),
span(7,3)
&.e
background-image: $green-double,
blue(left),
full($shadow),
blue(left),
full($shadow),
green(left),
full($shadow),
full($shadow)
background-size: span(3,8),
span(5,1),
span(5,1),
span(5,1),
span(5,1),
span(5,1),
span(5,1),
span(1,8)
background-position: span(0,0),
span(3,0),
span(4,1),
span(3,3),
span(4,4),
span(3,6),
span(4,7),
span(3,0)
&.f
background-image: $green-double,
blue(left),
full($shadow),
blue(left),
full($shadow),
full($shadow)
background-size: span(3,8),
span(5,1),
span(5,1),
span(5,1),
span(5,1),
span(1,8)
background-position: span(0,0),
span(3,0),
span(4,1),
span(3,3),
span(4,4),
span(3,0)
&.g
background-image: $green-single,
$green-double,
blue(left),
full($shadow),
blue(top),
blue(top),
$green-double,
green(top),
full($shadow),
full($shadow)
background-size: span(1,6),
span(2,8),
span(4,1),
span(1,1),
span(2,2),
span(1,2),
span(2,5),
span(2,2),
span(1,7),
span(1,8)
background-position: span(0,1),
span(1,0),
span(3,0),
span(4,1),
span(5,1),
span(4,3),
span(5,3),
span(3,6),
span(7,1),
span(3,0)
&.h
background-image: $green-double,
blue(top),
full($shadow),
$green-double,
full($shadow)
background-size: span(3,8),
span(2,2),
span(1,8),
span(2,8),
span(1,8)
background-position: span(0,0),
span(3,3),
span(3,0),
span(5,0),
span(7,0)
&.i
background-image: $green-double,
full($shadow)
background-size: span(3,8),
span(1,8)
background-position: span(2,0),
span(5,0)
&.j
background-image: blue-light(left),
green(left),
full($shadow),
green(top),
$green-double,
$green-single,
full($shadow)
background-size: span(4,1),
span(4,1),
span(1,1),
span(4,2),
span(1,8),
span(1,7),
span(1,7)
background-position: span(0,4),
span(0,5),
span(0,6),
span(1,6),
span(5,0),
span(6,0),
span(7,0)
&.k
background-image: $green-double,
blue(left),
blue(left),
blue(left),
blue(left),
full($blue-light),
full($green),
green(right),
full($shadow),
full($shadow)
background-size: span(3,8),
span(3,1),
span(3,1),
span(3,1),
span(2,1),
span(2,1),
span(2,1),
span(3,1),
span(1,8),
span(3,1)
background-position: span(0,0),
span(5,0),
span(4,1),
span(3,2),
span(3,3),
span(3,4),
span(4,5),
span(4,6),
span(3,0),
span(5,7)
&.l
background-image: $green-double,
green(left),
full($shadow),
full($shadow)
background-size: span(3,8),
span(5,1),
span(1,8),
span(5,1)
background-position: span(0,0),
span(3,6),
span(3,0),
span(3,7)
&.m
background-image: blue(left),
$green-double,
blue(bottom),
blue(top),
full($shadow),
$green-double,
full($shadow)
background-size: span(3,1),
span(3,7),
span(1,3),
span(1,3),
span(1,4),
span(2,8),
span(1,8)
background-position: span(0,0),
span(0,1),
span(3,1),
span(4,1),
span(3,4),
span(5,0),
span(7,0)
&.n
background-image: $green-double,
$green-double,
linear-gradient(to bottom, $blue 20px, $shadow 20px),
linear-gradient(to bottom, $blue 10px, $blue-light 10px, $blue-light 20px, $shadow 20px),
$green-double,
full($shadow)
background-size: span(2,8),
span(1,7),
span(1,6),
span(1,3),
span(2,8),
span(1,8)
background-position: span(0,0),
span(2,1),
span(3,2),
span(4,3),
span(5,0),
span(7,0)
&.o,
&.zero
background-image: $green-single,
$green-double,
blue(top),
full($shadow),
green(top),
full($shadow),
$green-double,
$green-single,
full($shadow)
background-size: span(1,6),
span(2,8),
span(2,2),
span(1,1),
span(2,2),
span(1,8),
span(1,8),
span(1,6),
span(1,6)
background-position: span(0,1),
span(1,0),
span(3,0),
span(6,0),
span(3,6),
span(3,0),
span(5,0),
span(6,1),
span(7,1)
&.p
background-image: $green-double,
blue(left),
full($shadow),
blue(left),
blue(left),
blue-light(left),
full($shadow),
full($shadow)
background-size: span(3,8),
span(3,1),
span(1,1),
span(2,1),
span(3,2),
span(5,1),
span(1,8),
span(3,1)
background-position: span(0,0),
span(3,0),
span(4,1),
span(5,1),
span(5,2),
span(3,4),
span(3,0),
span(4,5)
&.q
background-image: $green-single,
$green-double,
blue(top),
full($shadow),
green(top),
blue-light(top),
full($shadow),
$green-double,
$green-double,
full($shadow)
background-size: span(1,6),
span(2,8),
span(2,2),
span(1,1),
span(2,2),
span(2,2),
span(1,8),
span(1,8),
span(1,7),
span(1,7)
background-position: span(0,1),
span(1,0),
span(3,0),
span(6,0),
span(3,6),
span(3,4),
span(3,0),
span(5,0),
span(6,1),
span(7,1)
&.r
background-image: $green-double,
blue(left),
full($shadow),
linear-gradient(to bottom, $blue 10px, $blue-light 10px),
full($shadow),
blue(left),
full($shadow),
full($green),
green(right),
full($shadow)
background-size: span(3,8),
span(4,1),
span(1,1),
span(2,2),
span(1,8),
span(3,3),
span(3,1),
span(2,1),
span(3,1),
span(3,1)
background-position: span(0,0),
span(3,0),
span(4,1),
span(3,3),
span(3,0),
span(5,1),
span(5,4),
span(4,5),
span(4,6),
span(5,7)
&.s
background-image: blue(left),
blue(left),
blue(right),
full($shadow),
full($shadow),
blue(right),
blue(left),
full($shadow),
blue-light(left),
green(left),
green(left),
green(right),
green(left),
full($shadow)
background-size: span(6,1),
span(4,2),
span(3,1),
span(1,1),
span(3,1),
span(3,1),
span(4,1),
span(4,1),
span(3,1),
span(4,1),
span(3,1),
span(3,1),
span(4,1),
span(6,1)
background-position: span(1,0),
span(0,1),
span(4,1),
span(7,1),
span(5,2),
span(0,3),
span(3,3),
span(1,4),
span(5,4),
span(0,5),
span(5,5),
span(0,6),
span(3,6),
span(1,7)
&.t
background-image: blue(left),
$green-double,
full($shadow),
full($shadow)
background-size: span(8,1),
span(3,7),
span(8,1),
span(1,7)
background-position: span(0,0),
span(2,1),
span(0,1),
span(5,1)
&.u
background-image: $green-single,
$green-double,
green(top),
full($shadow),
$green-double,
$green-single,
full($shadow)
background-size: span(1,7),
span(2,8),
span(2,2),
span(1,8),
span(1,8),
span(1,7),
span(1,7)
background-position: span(0,0),
span(1,0),
span(3,6),
span(3,0),
span(5,0),
span(6,0),
span(7,0)
&.v
background-image: blue(left),
blue(left),
blue-light(right),
blue-light(right),
full($shadow),
green(right),
green(left),
green(right),
full($shadow),
full($shadow)
background-size: span(4,4),
span(3,4),
span(3,1),
span(3,1),
span(1,1),
span(3,1),
span(2,1),
span(2,1),
span(1,1),
span(1,1)
background-position: span(0,0),
span(5,0),
span(0,4),
span(3,4),
span(6,4),
span(1,5),
span(4,5),
span(2,6),
span(4,6),
span(3,7)
&.w
background-image: $green-double,
$green-single,
full($shadow),
blue(left),
full($blue-light),
green(right),
$green-double,
full($shadow)
background-size: span(2,8),
span(1,7),
span(1,3),
span(2,1),
span(2,1),
span(2,1),
span(2,8),
span(1,8)
background-position: span(0,0),
span(2,0),
span(3,0),
span(3,3),
span(3,4),
span(3,5),
span(5,0),
span(7,0)
&.x
background-image: full($blue),
blue(left),
blue(right),
blue(left),
blue(right),
blue(left),
full($blue),
blue-light(left),
full($blue-light),
green(left),
green(right),
green(left),
green(right),
full($shadow),
full($shadow),
full($shadow)
background-size: span(2,1),
span(3,1),
span(3,1),
span(3,1),
span(3,1),
span(2,1),
span(3,1),
span(3,1),
span(2,1),
span(3,1),
span(3,1),
span(2,1),
span(2,1),
span(1,1),
span(1,1),
span(2,1)
background-position: span(0,0),
span(5,0),
span(0,1),
span(4,1),
span(1,2),
span(4,2),
span(2,3),
span(1,4),
span(4,4),
span(0,5),
span(4,5),
span(0,6),
span(5,6),
span(0,7),
span(7,6),
span(6,7)
&.y
background-image: blue(left),
blue(left),
blue(left),
blue(left),
blue(left),
blue(left),
$green-double,
full($shadow)
background-size: span(2,1),
span(2,1),
span(3,1),
span(3,1),
span(3,1),
span(3,1),
span(3,5),
span(1,5)
background-position: span(0,0),
span(6,0),
span(0,1),
span(5,1),
span(1,2),
span(4,2),
span(2,3),
span(5,3)
&.z
background-image: blue(left),
full($shadow),
blue(left),
blue(left),
blue(left),
blue-light(left),
blue(left),
green(left),
green(left),
full($shadow)
background-size: span(8,1),
span(4,1),
span(3,1),
span(4,1),
span(3,1),
span(3,1),
span(2,1),
span(3,1),
span(8,1),
span(8,1)
background-position: span(0,0),
span(0,1),
span(4,1),
span(2,2),
span(2,3),
span(1,4),
span(4,4),
span(0,5),
span(0,6),
span(0,7)
&.one
background-image: full($blue),
green(top),
$green-double,
full($shadow),
green(top),
full($shadow)
background-size: span(1,1),
span(1,2),
span(3,8),
span(1,6),
span(1,2),
span(1,2)
background-position: span(1,1),
span(1,6),
span(2,0),
span(5,0),
span(5,6),
span(6,6)
&.two
background-image: blue(left),
blue(top),
full($shadow),
full($shadow),
blue(left),
blue(left),
blue-light(left),
halfsies($green,$shadow,right),
green(left),
full($shadow)
background-size: span(6,1),
span(3,3),
span(1,3),
span(1,1),
span(3,2),
span(3,1),
span(4,1),
span(4,1),
span(8,1),
span(8,1)
background-position: span(1,0),
span(0,1),
span(3,1),
span(4,1),
span(5,1),
span(4,3),
span(2,4),
span(1,5),
span(0,6),
span(0,7)
&.three
background-image: blue(left),
blue(top),
full($shadow),
full($shadow),
blue(left),
blue(left),
blue-light(right),
full($shadow),
green(left),
green(left),
green(top),
full($shadow)
background-size: span(6,1),
span(3,3),
span(1,3),
span(1,1),
span(3,2),
span(3,1),
span(3,1),
span(1,1),
span(4,1),
span(3,1),
span(6,2),
span(8,1)
background-position: span(1,0),
span(0,1),
span(3,1),
span(4,1),
span(5,1),
span(4,3),
span(4,4),
span(7,4),
span(0,5),
span(5,5),
span(1,6),
span(0,6)
&.four
background-image: blue(top),
blue(top),
full($blue),
full($blue-light),
$green-double,
green(left),
full($shadow),
full($shadow)
background-size: span(1,3),
span(1,3),
span(1,1),
span(2,1),
span(2,8),
span(8,1),
span(8,1),
span(1,8)
background-position: span(3,1),
span(2,2),
span(1,3),
span(0,4),
span(4,0),
span(0,5),
span(0,6),
span(6,0)
&.five
background-image: blue(left),
blue(left),
full($shadow),
blue(left),
full($blue-light),
full($shadow),
green(left),
green(left),
full($shadow)
background-size: span(8,1),
span(4,2),
span(8,1),
span(7,1),
span(2,1),
span(8,1),
span(3,1),
span(7,1),
span(6,1)
background-position: span(0,0),
span(0,1),
span(0,1),
span(0,3),
span(5,4),
span(0,4),
span(5,5),
span(0,6),
span(0,7)
&.six
background-image: $green-single,
$green-double,
blue(left),
full($shadow),
blue(left),
full($shadow),
blue(left),
full($shadow),
blue-light(left),
green(left),
green(left),
full($shadow),
full($shadow)
background-size: span(1,6),
span(2,8),
span(4,1),
span(1,1),
span(3,1),
span(3,1),
span(4,1),
span(1,1),
span(3,1),
span(3,1),
span(4,1),
span(1,8),
span(3,1)
background-position: span(0,1),
span(1,0),
span(3,0),
span(4,1),
span(5,1),
span(5,2),
span(3,3),
span(4,4),
span(5,4),
span(5,5),
span(3,6),
span(3,0),
span(4,7)
&.seven
background-image: blue(top),
blue(top),
blue(left),
blue(left),
blue-light(left),
green(left),
full($shadow)
background-size: span(2,2),
span(4,3),
span(3,3),
span(3,1),
span(3,1),
span(3,2),
span(3,1)
background-position: span(3,0),
span(0,0),
span(5,0),
span(4,3),
span(3,4),
span(2,5),
span(2,7)
&.eight
background-image: blue(left),
blue(left),
full($shadow),
blue(left),
blue(left),
blue-light(left),
full($shadow),
blue-light(left),
green(left),
green(left),
green(top),
full($shadow)
background-size: span(6,1),
span(4,2),
span(1,1),
span(3,2),
span(6,1),
span(4,1),
span(1,1),
span(3,1),
span(4,1),
span(3,1),
span(5,2),
span(7,1)
background-position: span(1,0),
span(0,1),
span(4,1),
span(5,1),
span(1,3),
span(0,4),
span(4,4),
span(5,4),
span(0,5),
span(5,5),
span(1,6),
span(0,6)
&.nine
background-image: blue(left),
blue(left),
full($shadow),
blue(left),
blue(right),
full($shadow),
blue(left),
green(left),
green(left),
full($shadow)
background-size: span(6,1),
span(4,2),
span(1,1),
span(3,3),
span(5,1),
span(4,1),
span(3,1),
span(3,1),
span(6,1),
span(5,1)
background-position: span(1,0),
span(0,1),
span(4,1),
span(5,1),
span(0,3),
span(1,4),
span(5,4),
span(5,5),
span(1,6),
span(1,7)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.