update css to not using box-sizingHEADmain

7 files changed, 87 insertions, 125 deletions

diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 25eb0c1..62ae802 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,16 +1,8 @@
-@mixin box-sizing {
-	* {
-		-moz-box-sizing: border-box;
-		-webkit-border-box: border-box;
-		box-sizing: border-box;
-	}
-}
-
 @mixin section {
-	border: $border-width solid $border-color;
 	@include border-radius($outer-radius);
+	border: $border-width solid $border-color;
 	background: $black;
-	margin-bottom: $outer-gap;
+	text-align: left;
 }
 
 @mixin linear-gradient($deg, $first, $values...) {
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 55627f8..9f493ff 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -23,3 +23,4 @@ $border-width: 5px;
 $border-color: #ccc;
 
 $page-width: 1000px;
+$logo-width: 200px;
diff --git a/src/scss/blog.scss b/src/scss/blog.scss
index 665c5a4..dbb652f 100644
--- a/src/scss/blog.scss
+++ b/src/scss/blog.scss
@@ -13,14 +13,11 @@
 			margin-left: 0 !important;
 		}
 
-		overflow-x: scroll;
 		max-width: $page-width - $outer-gap * 2 - $inner-gap;
 	}
 
 	code {
 		display: inline-block;
-		max-width: 100%;
-		overflow-x: scroll;
 	}
 
 	img {
diff --git a/src/scss/bucket/_style.scss b/src/scss/bucket/_style.scss
index 8d65c68..050485c 100644
--- a/src/scss/bucket/_style.scss
+++ b/src/scss/bucket/_style.scss
@@ -1,4 +1,3 @@
-@include box-sizing;
 @include font-face("Merriweather");
 @include font-face("CourierNew");
 
diff --git a/src/scss/ie/ie.scss b/src/scss/ie/ie.scss
index 0498093..6305875 100644
--- a/src/scss/ie/ie.scss
+++ b/src/scss/ie/ie.scss
@@ -4,7 +4,7 @@
 
 #header {
 	.ie-nav {
-		margin-left: 90px;
+		margin-left: 70px;
 	}
 }
 
@@ -23,12 +23,13 @@
 		h2.heading {
 			background: $blue;
 		}
-	}
 
-	#post,
-	#writeup {
-		.posted {
-			margin-top: $inner-gap;
+		table {
+			width: 99%;
+		}
+
+		pre code {
+			width: 95%;
 		}
 	}
 
@@ -45,8 +46,4 @@
 			}
 		}
 	}
-
-	table {
-		behavior: url(boxsizing.htc);
-	}
 }
diff --git a/src/scss/ie/ie6.scss b/src/scss/ie/ie6.scss
deleted file mode 100644
index a443956..0000000
--- a/src/scss/ie/ie6.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/* IE 6 and 7 Only */
-
-@import "../variables";
-
-/**
- * IE5 and below seem to look fine without boxsizing
- * additions, its only the jump to IE5 where things seem
- * to start breaking and thus this is needed
- */
-
-* {
-	behavior: url(boxsizing.htc);
-}
-
-/**
- * Fix homepage margin near footer, only caused
- * by the boxsizing i think
- */
-body {
-	#main {
-		.col {
-
-			&div.left {
-				margin-bottom: $inner-gap;
-			}
-
-			&div.right {
-				margin-top: $inner-gap;
-			}
-
-		}
-	}
-
-	div#contact {
-		margin-bottom: 0;
-	}
-
-	div#footer {
-		margin-top: $inner-gap;
-	}
-}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 925cfef..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");
 
@@ -115,36 +114,25 @@ html {
 
 body {
 	@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")
+		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;
 	}
 }
 
@@ -155,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;
@@ -222,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;
+		}
 	}
 }
 
@@ -248,6 +246,14 @@ body {
 		display: block;
 		height: auto;
 
+		&, &.container {
+		  height: auto;
+
+		  .section {
+			height: auto;
+		  }
+		}
+
 		img {
 			float: none;
 			display: block;
@@ -275,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;
@@ -318,6 +325,7 @@ body {
 
 #main .section {
 	@include section;
+	margin-bottom: $outer-gap;
 
 	.heading {
 		@include linear-gradient(to bottom, $blue, $black);
@@ -339,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 {
@@ -399,8 +409,15 @@ body {
 			}
 		}
 	}
-}
 
-#main #ad {
-	padding: $inner-gap;
+	&#post,
+	&#writeup {
+		.posted {
+			margin-top: $inner-gap;
+		}
+	}
+
+	&#ad {
+	  padding: $inner-gap;
+	}
 }