resume.scss

$pw: 8.5in;
$ph: 11in;
$pvm: 0.5in;
$phm: $pvm;
$about-w: (($pw - 3*$phm)/4);
$expr-w: $pw - 3*$phm - $about-w;
$font-size: 0.9em;
$text-color: #444444;
$base-color: #0395DA;
$highlight-color: #48A2A8;
$hr-color: #CCCCCC;
$strong-text-color: #000000;

$ptPerPx: (12 / 16);

.unimportant { display: none; }
.notes { display: none; }
@media (min-width: 200pt) { .notes { display: inline; } }
@media (min-width: 300pt) { .unimportant { display: inline; } }

a {
	text-decoration: none;
	color: $text-color;
}

ul.inline {
	list-style: none;
	padding: 0em 0em 0em 2em;
	& li {
		display: inline;
		&:after { content: ","; }
		&:last-child:after { content: ""; }
	}
}
ul.reduce-padding {
	margin: 0em;
	padding: 0em 0em 0em 2em;
}
ul.totally.inline {
	margin: 0em;
	padding: 0em;
}

p {
	margin-bottom: 0em;
}

strong { color: $highlight-color; }

@media screen {
	html {
		background: #EEEEEE;
	}
}

body {
	color: $text-color;
	max-width: $pw - 2*$phm;
	min-height: $ph - 2*$pvm;
	padding: $pvm $phm;
	background: #FFFFFF;
	top: 0em;
	bottom: 0em;
	left: 0em;
	right: 0em;
	margin: auto;
	font-family: Lato;
	font-weight: 300;
	position: relative;
}

#header {
	position: relative;
	top: -0.8em;
	margin-bottom: 3em;
	& > * {
		margin: 0em;
	}
	h1 {
		font-size: 4em;
		font-family: Playball;
		letter-spacing: -0.85px;
		width: 200%;
	}
	.contact {
		margin: 0em;
		padding: 0em;
		li {
			position: absolute;
			left: 0em;
			right: 0em;
			text-align: center;
			display: inline;
			max-width: 12em;
			margin: auto;
			&:first-child {
				right: auto;
				text-align: left;
				z-index: 1;
			}
			&:last-child {
				left: auto;
				text-align: right;
				z-index: 1;
			}
		}
	}
}

@media print { #header h1 { letter-spacing: -0.85px * $ptPerPx; } }

h2 {
	position: relative;
	overflow: hidden;
	color: $base-color;
	&:after {
		content: " ";
		position: absolute;
		top: 0em;
		bottom: 0em;
		border-bottom: 2px solid $hr-color;
		height: 0px;
		width: 100%;
		display: inline-block;
		margin: auto 1em;
	}
}
@media print { h2:after { border-bottom-width: 1.125pt; } }

#about, #experience {
	font-size: $font-size;
	display: inline-block;
	top: 10em;
	& h2 {
		margin-top: 1.5em;
	}
}
#experience {
	& > *:first-child h2 { margin-top: 0em; }
	a {
		text-decoration: underline;
		color: darken(saturate($highlight-color, 100%), 15%);
	}
}

#about {
	h2 {
		margin-bottom: 0.5em;
		margin-top: 1em;
	}
}

#experience {
	.dates {
		font-style: italic;
		margin: 0.4em 0em 0.5em 0em;
		font-size: 0.8em;
	}
	h2 {
		margin-bottom: 0em;
	}
	ul {
		margin-top: 0em;
	}
}

#skills {
	$skills-padding: 3em;
	ol {
		list-style: none;
		padding-left: $skills-padding;
		& > li {
			margin: 1em 0px;
			position: relative;
			&:before {
				content: "B";
				color: $strong-text-color;
				font-weight: bold;
				text-align: center;
				width: $skills-padding;
				height: 1.2em;
				line-height: 1.2em;
				position: absolute;
				left: -$skills-padding;
				top: 0em;
				bottom: 0em;
				margin: auto;
			}
			&:first-child:before {
				content: "A";
			}
			&:last-child:before {
				content: "C";
			}
			&:after {
				content: " ";
				position: absolute;
				top: -0.5em;
				left: 0em;
				right: 0em;
				height: 0px;
				border-bottom: 1px solid transparentize($hr-color, 0.5);
			}
			&:first-child:after { display: none; }
		}
	}
}
@media print { #skills ol > li:after { border-bottom-width: 0.5625pt; } }


@media screen and (min-width: 450pt) and (max-width: 611pt) {
	#header {
		width: 32em;
		margin-right: auto;
		margin-left: auto;
		h1 {
			width: 200%;//Prevent overflow
			margin-left: -50%;
			text-align: center;
		}
	}
	#header .contact {
		position: absolute; // So it doesn't take up space
		padding-left: 0.2em;
		width: 200%;//Prevent overflow
		li {
			position: static;
			&:after { margin-left: 0.2em; }
			&:before { margin-right: 0.2em; }
			&:first-child:after, &:last-child:before {
				content: "\00B7";
				width: 4.5em;
				text-align: center;
				display: inline-block;
			}
		}
	}
}

@media print, (min-width: 8.5in) {
	#header { margin-bottom: 0em; }
	#header ul.contact {
		top: 0em;
		& {
			position: absolute;
			right: 0em;
			height: 100%;
			width: 100%;
			list-style: none;
			margin: 0em;
			padding: 0em;
		}
		& > li, & > li:first-child {
			right: 0em;
			left: auto;
			width: 100%;
			top: 0.25em;
			bottom: 0.75em; //More on bottom as my name has only 1 descender
			text-align: right;
			margin: auto;
			height: 1.2em;
			line-height: 1.2em;
			&:first-child { bottom: auto; }
			&:last-child { top: auto; }
			&:before, &:after { display: none; }
		}
	}
	#about {
		right: $phm;
		width: $about-w;
		float: right;
		& > *:first-child h2 { margin-top: 0em; }
	}
	#experience {
		left: $phm;
		width: $expr-w;
		h2 { margin-top: 1em; }
	}
}

@for $i from 449 to 180 {
	@media (max-width: #{$i}pt) {
		$index: (450 - $i) / (450 - 300);
		body { padding: (1 - 0.4 * $index) * $pvm (1 - 0.4 * $index) * $phm; }
		#header { font-size: #{1 - 0.3 * $index}em }
		#header .contact { font-size: #{1 + 0.2 * $index}em }
		h2 { font-size: #{1.5 - 0.3 * $index}em }
	}
}

@page {
	size: 9.08in 12.05in; // Yeah, I have no idea why these are the correct numbers either
	margin: 0em;
	padding: 0em;
}