Hey, hey you there, Mr. Nosey! Thanks for taking a peek. Don't be shy,

dabblet.css

/*
Hey, hey you there, Mr. Nosey! Thanks for taking a peek. Don't be shy,
cut snippets of my code out and learn what they do, 
experiment. After all, it's how I learned.

Have fun, learn something. Peace out.
– Mr. Stezz
*/
/*	
	stezycki v.2 temp core styles:
		http://stezycki.com
		http://stez.me
		
	CSS contents:
		$Base - base styles for page styles
		$Layout - styles for page layout
		$Modules - styles for components throughout the site
		$Themes - styles for buttons, tabs and other non browser default UI
		$States - styles for different states, media queries etc.
*/
/*-- 
$Base
	--*/
*{
	/* Lets fix that age old box model shall we? */
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/* A real simple reset */
	padding:0;
	margin:0;
}

html{
	min-height:100%;
	/* give me full height, lassy! So we can force a scrollbar on the world! */
	overflow-y:scroll;
}

body{
	/* base font size = 16px / leading = 28px */
	font: 100%/1.75 "helvetica neue", sans-serif;
	color:rgb(218,212,192);
	background-color:rgb(181,101,101);
	/* fixes funky type sizes on iOS */
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	/* give me purrdy kerning on webkit browsers */
	text-rendering:optimizeLegibility;
	/* alernative to sub pixel aliasing on OS X */
	-webkit-font-smoothing:antialiased;
}

::selection,
::-moz-selection{
	/* this stuff modifies selected content. Go ahead, select something and see */
	color:rgb(147,128,94);
	background-color:rgba(236,217,161,.8);
}

/* vertical rhythm, basically bottom margins */
ul,ol,dd,
p,figure,
pre,table,fieldset,hr,
.img{
	margin-bottom:1.75em;
}

/* anchors are the things you click to go somewhere else */
a{
	text-decoration:none;
}

/*--
$Layout
	--*/

.nav{
	list-style:none;
	margin-left:0;
}

	.nav > li,
		.nav a{
			display:inline-block;
		}

/*--
$Modules
	--*/
.spotlight{
	width:100%;
	height:100%;
	position:fixed;
	/* put me in the centre of the page, horizontally */
	text-align:center;
	z-index:150;
	/* put me roughly in the centre of the page, vertically */
	padding-top:20%

}
	/* stop me from hugging the edges, we hate hugging and edges */
	.boundary{
		margin:0 5%;
	}

/*--
$Themes
	--*/
/* buttons */
.btn{
	font-weight:bold;
	color:rgb(181,101,101);
	background-color:rgba(104,28,28,.44);
	border-radius:4px;
	padding:10px 12px;
}

.btn:hover{
	background-color:rgba(42,12,12,.44);
}

.btn:active{
	color:rgb(74,130,117);
	background-color:rgb(110,209,186);
}

.nav > .btn + .btn{
	margin-left:10px;
}

/* well, we want to optimize for desktops, don't we? */
@media screen and (min-width:37.875em){
	.heading{
		font-size:4.25em;
		line-height:1.3529411764705883;
	}

	.intro{
		font-weight:200;
		font-size:1.625em;
		line-height:1.6153846153846154;
	}	
}

dabblet.html

<div class=spotlight>
	<div class=boundary>
		<h1 class=heading>Michael Stezycki</h1>
		<p class=intro>A visual / interactive designer who also likes to dabble in photography.</p>
		<menu type=list class="nav page-actions">
			<li><a href=/work title="View my work." class=btn>View my work</a></li>
			<li><a href=/contact title="Contact me." class=btn>Let's Chat</a></li>
		</menu>
	</div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}