_circle-layout.scss

// The mixin that made experimenting nice on http://arleym.com/resume/

@mixin blipper($x) {
  width: ($x * $base);
  height: ($x * $base);
  margin: ($x * ($base * -.5)) 0 0 ($x * ($base * -.5)); // should have used transform-origin, but I didn't know about that at the time!
  z-index: (100 - $x);
}

.circles {
	// Circles from smallest to biggest
	.alpha {
		@include blipper(1);
	}
	.beta {
		@include blipper(2);
	}
	.charlie {
		@include blipper(3);
	}
	.delta {
		@include blipper(4);
	}
	.epsilon {
		@include blipper(5);
	}
	.foxtrot {
		@include blipper(6);
	}
	.gamma {
		@include blipper(7);
	}
	.hotel {
		@include blipper(8);
	}
	.india {
		@include blipper(9);
	}
	.juliette {
		@include blipper(10);
		background:url(../img/textured_paper.png);
	}
}