Basic styles

sass/style.scss

@@ -0,0 +1,52 @@
+body {
+	font-size: 12pt;
+	line-height: 1.5;
+
+	max-width: 60em;
+	margin: 0 auto;
+	padding: 1em;
+
+	display: grid;
+	grid-template-columns: 10em auto;
+	grid-column-gap: 2em;
+}
+
+header {
+	grid-column: 1/-1;
+	padding: 2rem 0;
+	font-weight: bold;
+	font-size: 1.5em;
+
+	a { color: inherit }
+}
+
+aside {
+	span.title {
+		display: block;
+		margin: 2em 0 1em 0;
+		font-weight: bold;
+	}
+	ul {
+		list-style-type: none;
+		padding: 0;
+
+		li a {
+			color: #000;
+			display: block;
+			padding: 0 .5em;
+
+			&:hover {
+				color: #fff;
+				background-color: #000;
+				text-decoration: none;
+			}
+		}
+	}
+}
+
+a {
+	text-decoration: none;
+	color: #E1140A;
+
+	&:hover { text-decoration: underline }
+}

templates/index.html

@@ -3,6 +3,7 @@
 <head>
 	<meta charset="UTF-8">
 	<title>{% block title %}{{ config.title }}{% endblock %}</title>
+	<link rel="stylesheet" href="style.css">
 </head>
 <body>
 	<header>
@@ -14,9 +15,17 @@
 			<li><a href="">anchor</a></li>
 			<li><a href="">anchor</a></li>
 		</ul>
+		<span class="title">Title</span>
+		<ul>
+			<li><a href="">anchor</a></li>
+			<li><a href="">anchor</a></li>
+			<li><a href="">anchor</a></li>
+		</ul>
 	</aside>
 	<main>
 		{% block content %}
+			<h1>Title</h1>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum ipsum eros. Etiam aliquet ipsum lacus, vel congue est lobortis eu. Vestibulum laoreet leo vitae tincidunt euismod. Quisque urna lacus, eleifend vehicula eros sed, faucibus semper ipsum. Sed bibendum tortor blandit dolor finibus, a congue lacus lobortis. Aenean convallis quis risus at interdum.</p>
 		{% endblock %}
 	</main>
 </body>