style.scss

---
# keep the first three line front matter
---
@import "color";

body {
	margin: 0;
	background-color: #0f2540;
	background-image: // https://projects.verou.me/css3patterns/#cicada-stripes
		linear-gradient(90deg, rgba(255,255,255,.007) 50%, transparent 50%),
		linear-gradient(90deg, rgba(255,255,255,.013) 50%, transparent 50%),
		linear-gradient(90deg, transparent 50%, rgba(255,255,255,.017) 50%),
		linear-gradient(90deg, transparent 50%, rgba(255,255,255,.019) 50%);
	background-size: 13px, 29px, 37px, 53px;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-size: 16px;
}

ul._inline {
	list-style-type: none;
	padding: 0;
	> li {
		display: inline-block;
	}
}

h1 {
	display: inline-block;
	font-size: 1.5em;
	margin: 0;
	color: $font-color;
	align-self: center;
	a {
		padding: 0 1em;
	}
}

body > header {
	background-color: $bg-color1;
	width: 100%;
	position: fixed;
	z-index: 9999;
	border-bottom: 1px solid $font-color;
	a {
		text-decoration: none;
		color: $font-color;
	}
}

nav {
	h2 {
		display: none;
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 .5em;
		position: relative;
		a {
			display: inline-block;
			padding: .8em .5em;
		}
		&.current::after {
			display: block;
			content: '';
			position: absolute;
			width: 100%;
			height: 3px;
			background-color: $font-color;
			bottom: 0;
			left: 0;
		}
	}
}

main {
	line-height: 1.5em;
	padding: 4em 2em 4em;
	border-radius: 0.5em;
	color: $font-color;
	flex-grow: 1;
	a {
		color: $font-color;
	}
	li {
		line-height: 1.5em;
		word-break: break-all;
	}
	p {
		padding: 0 1em;
		img {
			display: block;
			margin: 0 auto;
		}
	}
	pre {
		padding: 0 4em;
	}
	details {
		margin: 1em;
	}
	details > summary {
		cursor: pointer;
	}
	h4 {
		text-indent: 1em;
	}
}

#extra {
	header {
		position: relative;
	}
	h4 {
		padding-bottom: .5em;
		background-size: calc(100% - 2em);
		background-repeat: no-repeat;
		background-position: center;
		background-image: linear-gradient(transparent calc(100% - .1em), $bg-color2 calc(100% - .1em));
	}
	time {
		position: absolute;
		background-color: #434343;
		padding: .2em .5em;
		right: 1em;
		top: -2.5em;
	}
}

#news {
	list-style-type: none;
	padding-left: 4em;
	li {
		padding: 1em 0;
		margin: .5em 0;
	}
	time {
		margin: 0 1em;
		background-color: #434343;
		padding: .5em;
		border-radius: .3em;
	}
}

#post {
	header {
		position: relative;
	}
	time {
		position: absolute;
		background-color: #434343;
		padding: .2em .5em;
		right: 1em;
		bottom: -1em;
	}
}

#projects {
	ul {
		list-style-type: none;
		margin: 0 0 1em;
	}
	li {
		font-size: 1.2em;
		margin: .5em 0;
	}
}

#contributor {
	list-style-type: none;
	margin: 0;
	padding: 2em 0;
	li {
		min-height: 120px;
		margin-bottom: 2em;
		a::after {
			content: attr(title);
			text-align: center;
		}
		img {
			border-radius: 50%;
			border: 4px solid $font-color;
			float: left;
			margin: 0 1em;
		}
		div {
			@extend img;
			height: 80px;
			width: 80px;
			background-color: $bg-color2;
		}
	}
}

h2, h3 {
	position: relative;
	background-color: #1c1c1c;
	margin: 0;
	padding: 1em;
	color: $font-color;
	box-shadow: inset 0 0 1px 1px #434343;
	time {
		float: right;
		margin-right: 1em;
	}
	&::after {
		content: attr(title);
		display: inline-block;
		margin-left: .5em;
		padding-left: .5em;
		color: $bg-color2;
	}
}

h2 {
	margin: 0 auto 1em;
	background-image: linear-gradient(transparent calc(100% - .3em), #434343 calc(100% - .3em));
}

h3 {
	padding-left: 1.8em;
}

.status {
	text-align: center;
}

main + footer {
	padding: 1em;
	text-align: center;
	color: $font-color;
	background-color: $bg-color1;
	border-top: 1px solid $font-color;
}

@import "layout"; // TODO: move to the top and fix responsive appearance