1 files changed, 91 insertions, 72 deletions

diff --git a/src/scss/main.scss b/src/scss/main.scss
index 362e6b9..3a3a149 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,7 +1,6 @@
 @import "./variables";
 @import "./mixins";
 
-@include box-sizing;
 @include font-face("FontStuck-Extended");
 @include font-face("CourierNew");
 
@@ -114,33 +113,26 @@ html {
 }
 
 body {
-	background-image: url("../img/background.png?ref=3");
+	@include background-image(
+		url("WEB_ROOT/public/img/background.png?ref=4"),
+		url("WEB_ROOT/public/img/background.webp?ref=7") type("image/webp"),
+		url("WEB_ROOT/public/img/background.png?ref=4") type("image/png")
+	);
 	background-repeat: repeat;
 	background-size: 512px;
 	background-color: #181818;
-}
-
-.center {
-	display: block;
-	margin-left: auto !important;
-	margin-right: auto !important;
+	min-height: 100%;
 }
 
 html,
 body,
-#container {
+.container {
 	width: 100%;
 	margin: 0;
 	padding: 0;
-}
-
-body {
-	padding: $inner-gap;
-	min-height: 100%;
 
-	> .center {
-		display: table;
-		margin: 0 auto;
+	.section {
+		@include section;
 	}
 }
 
@@ -151,52 +143,58 @@ body {
 #header,
 #main,
 #footer,
-#container {
-	@include border-radius($outer-radius);
+.container {
+	display: block;
 	width: $page-width;
-	text-align: left;
 }
 
 #header,
 #footer {
-	display: block;
-	@include section;
+	margin-bottom: $outer-gap;
+
+	.section {
+		padding: $inner-gap;
+	}
 }
 
 #header {
-	$logo-size: 200px;
-	height: #{$logo-size + $inner-gap * 2 + 10px};
-	padding: $inner-gap;
+	margin-top: $outer-gap;
 
-	img {
+	&, &.container {
+	  height: $logo-width + $inner-gap * 2 + $border-width * 2;
+
+	  .section {
+		height: $logo-width;
+	  }
+	}
+
+	#logo {
 		@include border-radius($inner-radius);
 		float: left;
-		height: $logo-size;
-		width: $logo-size;
+		height: $logo-width;
+		width: $logo-width;
 	}
 
 	.content {
-		padding-top: 30px;
-		padding-left: $logo-size;
+		height: $logo-width;
 
 		.logo-text {
 			margin: 0;
 			text-align: center;
 			text-shadow: 3px 3px $white-alt;
+			height: $logo-width / 2;
+			line-height: $logo-width / 2;
 		}
 
 		#nav {
-			margin: 0;
 			padding: 0;
-			list-style-type: none;
 			margin: 0 auto;
+			list-style-type: none;
 			@include display-table($inner-gap);
 
-			ul { padding: none;}
-
 			li {
-				@include display-table-cell;
 				float: left;
+				@include display-table-cell;
 				padding: $inner-gap;
 
 				a {
@@ -218,41 +216,51 @@ body {
 	}
 }
 
-/* once the page has been shrank to max content width */
-@media (max-width: ($page-width + $outer-gap * 2)) {
-	body {
-		width: 1px;
-		min-width: 100%;
-
-		> .center {
-			  display: block;
-		}
-	}
+#header,
+#main,
+#footer {
+	display: block;
+	margin-left: auto !important;
+	margin-right: auto !important;
+}
 
-	body > .center,
+/* once the page has been shrank to max content width */
+@media (max-width: ($page-width + $outer-gap * 2 + $border-width * 2)) {
+	body,
 	#header,
 	#main,
-	#footer,
-	#container {
+	#footer {
 		width: 100%;
-		max-width: 100%;
+
+		.container {
+			padding: 0 $outer-gap;
+			width: auto;
+		}
 	}
 }
 
 @media (max-width: 800px) {
 	#header {
-		display: block;
-		height: auto;
+		&, &.container {
+		  height: auto;
 
-		img {
+		  .section {
+			height: auto;
+		  }
+		}
+
+		#logo {
 			float: none;
 			display: block;
 			margin: 0 auto;
 		}
 
 		.content {
-			padding-top: 0;
-			padding-left: 0;
+			height: auto;
+
+			.logo-text {
+				height: auto;
+			}
 
 			#nav {
 				text-align: center;
@@ -264,21 +272,22 @@ body {
 @media (max-width: 550px) {
 	#header .content #nav {
 		li {
-			float: none;
 			display: block;
+			float: none;
 		}
 	}
 }
 
 @media (max-width: 300px) {
-	body {
-	      width: 300px;
+	body,
+	#header,
+	#main,
+	#footer {
+		width: 300px;
 	}
 }
 
 #footer {
-	padding: $inner-gap;
-
 	.footer-text {
 		display: block;
 		margin: 10px 0;
@@ -314,6 +323,7 @@ body {
 
 #main .section {
 	@include section;
+	margin-bottom: $outer-gap;
 
 	.heading {
 		@include linear-gradient(to bottom, $blue, $black);
@@ -335,20 +345,22 @@ body {
 		border-left: 5px solid $blue;
 	}
 
-	pre {
-		background: black;
-		margin-right: $inner-gap;
-		@include border-radius($outer-radius);
-		padding: $inner-gap;
-	}
-
 	code {
 		font-family: $font;
 		color: $green;
 	}
 
-	pre code {
-		color: $white;
+	pre {
+		@include border-radius($outer-radius);
+		background: black;
+		overflow-x: scroll;
+		margin-right: $inner-gap;
+
+		code {
+			padding: $inner-gap;
+			padding-bottom: 0px;
+			color: $white;
+		}
 	}
 
 	table {
@@ -359,6 +371,7 @@ body {
 			font-family: $header-font;
 			font-size: 120%;
 			line-height: 120%;
+			text-align: left;
 
 			@media (max-width: 400px) {
 				font-size: 100%;
@@ -383,7 +396,6 @@ body {
 
 		th {
 			background: $blue;
-			text-align: left;
 		}
 
 		tr:last-child {
@@ -395,8 +407,15 @@ body {
 			}
 		}
 	}
-}
 
-#main #ad {
-	padding: $inner-gap;
+	&#post,
+	&#writeup {
+		.posted {
+			margin-top: $inner-gap;
+		}
+	}
+
+	&#ad {
+	  padding: $inner-gap;
+	}
 }