1 files changed, 79 insertions, 58 deletions

diff --git a/src/scss/main.scss b/src/scss/main.scss
index 362e6b9..ae3ac11 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,33 +143,41 @@ 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;
+
+	&, &.container {
+	  height: $logo-width + $inner-gap * 2 + $border-width * 2;
+
+	  .section {
+		height: $logo-width;
+	  }
+	}
 
 	img {
 		@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;
+		padding-left: $logo-width;
 
 		.logo-text {
 			margin: 0;
@@ -218,24 +218,26 @@ 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;
+		}
 	}
 }
 
@@ -244,6 +246,14 @@ body {
 		display: block;
 		height: auto;
 
+		&, &.container {
+		  height: auto;
+
+		  .section {
+			height: auto;
+		  }
+		}
+
 		img {
 			float: none;
 			display: block;
@@ -271,14 +281,15 @@ body {
 }
 
 @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 +325,7 @@ body {
 
 #main .section {
 	@include section;
+	margin-bottom: $outer-gap;
 
 	.heading {
 		@include linear-gradient(to bottom, $blue, $black);
@@ -335,20 +347,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 {
@@ -395,8 +409,15 @@ body {
 			}
 		}
 	}
-}
 
-#main #ad {
-	padding: $inner-gap;
+	&#post,
+	&#writeup {
+		.posted {
+			margin-top: $inner-gap;
+		}
+	}
+
+	&#ad {
+	  padding: $inner-gap;
+	}
 }