website/sass/style.scss

@import "fonts";


$width-wrap: 960px;
$width-narrow: ($width-wrap/3)*2;

$col-light: #e8e6e3;
$col-dark: #131516;
$col-gray: lighten($col-dark, 5);
$col-accent: #fc0;


*, *:before, *:after {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	max-width: 60em;
	width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	background: $col-dark;
	color: $col-light;
	font-family: open-sans, sans;
	text-rendering: optimizeLegibility;
}

p {
	line-height: 1.75;
}

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

body>header {
	.img {
		display: block;
		width: 100%;
		height: 8rem;
		background:
			url(/logo.svg),
			linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
			url(/header.jpg);
		background-size: auto 60%, cover, cover;
		background-position: center;
		background-repeat: no-repeat;

		@media only screen and (min-width: $width-narrow) {
			height: 10rem;
			background-position: 3em, center, center;
		}
	}
}

body>nav {
	width: 100%;
	height: 3rem;
	background: $col-gray;

	display: flex;
	justify-content: center;
	align-items: stretch;

	a {
		display: flex;
		align-items: center;
		padding: 0 1em;
		height: 100%;

		color: $col-accent;
		text-decoration: none;

		&:hover, &.active {
			background: $col-dark;
		}

		@media only screen and (min-width: $width-narrow) {
			padding: 0 1.5em;
		}
	}
}

body>main {
	margin-top: 3em;
	padding: 0 1em;

	@media only screen and (min-width: $width-wrap) {
		padding: 0;
	}
}

body>footer {
	width: 100%;
	padding: 1rem;
	margin-top: auto;
	font-size: .8em;

	@media only screen and (min-width: $width-wrap) {
		padding: 1em 0;
	}
}