$background-color: #fafafa;
$base-text-color: #1A364F;
$muted-text-color: #687876;
$light-gray: #9CA395;
$heading-color: #9E1814;
$link-color: #2A7F89;

$unit: 9px;
$monospace: monospace;
$serif: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', 'Georgia', serif;

$container-width: $unit * 100;
$header-height: $unit * 5;
$font-size: $unit * 2;
$date-column-width: 200px;

@mixin container {
	max-width: $container-width;
}

.muted {
	color: $muted-text-color;
}

body {
	font-family: $monospace;
	color: $base-text-color;
	font-size: $font-size;
	padding: $font-size;
	margin: 0;
  background-color: $background-color;
}

header {
  @include container;
  text-align: center;

  a.nav-up {
    color: $base-text-color;
    font-size: 3 * $unit;
    font-weight: bold;

    &:hover,
    &:focus {
      color: $link-color;
    }
  }
}

footer {
	@extend .muted;
	padding: $unit;
	text-align: center;
}

h1,
h2 {
	@include container;
	color: $heading-color;
	font-weight: bold;

  a {
    color: $heading-color;
  }
}

h1 {
	font-size: 4 * $unit;
}

h2 {
	font-size: 2 * $unit;
}

table {
	width: 100%;
}

td {
	padding: $unit;
}

p {
	@include container;
	line-height: 1.5;
  margin-bottom: $unit;
  font-family: $serif;
}

ol, ul {
	@include container;
  font-family: $serif;
}

li {
	margin-left: 4 * $unit;
	margin-right: 2 * $unit;
	padding: $unit;
}

pre {
	font-family: $monospace;
	overflow: auto;
	margin: $unit 0;
}

kbd {
  font-family: $monospace;
}

code {
  font-family: $monospace;
}

hr {
	border: none;
	margin: $unit 0;
	text-align: center;
  width: $container-width;

	&:after {
		@extend .muted;
		content: '~~~';
	}
}

.d3container {
	text-align: center;
}

blockquote {
	font-style: italic;
	p {
		box-sizing: border-box;
		padding: 0 3 * $unit;
	}
}

a {
	color: $base-text-color;
	text-decoration: underline;

	&:hover,
  &:focus {
		color: $link-color;
    outline: none;
	}
}

time {
	@extend .muted;
}

aside {
	@extend .muted;
	@include container;
	&>* {
		margin-left: 2 * $unit;
	}
	a {
		color: $muted-text-color;
	}
}

.text-center {
  @include container;
	text-align: center;
}

.post {
  @include container;
  margin: 1em;
  font-family: $serif;
  clear: both;
}

.post-date {
  text-align: right;
  width: $date-column-width;
  float: left;
}

.post-title {
  padding-left: $date-column-width + 2 * $unit;
}

.highlight {
	margin: 0;
	padding: 0 $unit;
  font-size: 2 * $unit;
}

.highlight pre {
	@include container;
}

.footer-link::after {
  content: ' ~ ';
}

.footer-link:last-of-type::after {
  content: '';
}