Improve style sheet

assets/style.scss

@@ -1,5 +1,6 @@
-@import 'fonts';
+@import 'breakpoints';
 @import 'colors';
+@import 'fonts';
 @import 'mixins';
 
 * {
@@ -24,8 +25,8 @@ header {
 
 main {
 	width: 100%;
-	max-width: 1200px;
-	margin: auto;
+	max-width: $large;
+	margin: 0 auto;
 
 	flex-grow: 1;
 }
@@ -48,10 +49,6 @@ h1 {
 	border-bottom: 2px $text-color solid;
 }
 
-a {
-	text-decoration: none;
-}
-
 figure {
 	margin-bottom: 1rem;
 
@@ -67,21 +64,14 @@ figure {
 }
 
 .nav {
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 0.5em;
-
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 
-	@media screen and (min-width: 800px) {
-		flex-direction: row;
-
-		hr {
-			margin: 0 0.5em !important;
-			align-self: center;
-		}
+	&.nav-main {
+		max-width: $large;
+		margin: 0 auto;
+		padding: 0.5em;
 	}
 
 	hr {
@@ -90,19 +80,20 @@ figure {
 
 	.nav-logo {
 		@include heading;
+		text-decoration: none;
 
 		margin: 0 auto;
 
-		@media screen and (min-width: 800px) {
-			margin-left: 0;
-		}
-
 		img {
 			width: 48px;
 			display: inline-block;
 			margin-right: 1em;
 			vertical-align: middle;
 		}
+
+		@media screen and (min-width: $small) {
+			margin-left: 0;
+		}
 	}
 
 	.nav-link {
@@ -112,4 +103,13 @@ figure {
 		&.nav-link-active {
 		}
 	}
+
+	@media screen and (min-width: $small) {
+		flex-direction: row;
+
+		hr {
+			margin: 0 0.5em;
+			align-self: center;
+		}
+	}
 }