ie5

6 files changed, 108 insertions, 46 deletions

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index cfb5f0c..55627f8 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -10,8 +10,8 @@ $blue-alt: #244266;
 $black: #14171d;
 $black-alt: #242526;
 
-$font: 'Courier New', Courier, monospace;
-$header-font: 'FontStuck-Extended', monospace;
+$font: 'Courier New', monospace;
+$header-font: 'FontStuck-Extended', Verdana, Courier, monospace;
 
 $inner-gap: 16px;
 $outer-gap: 16px;
diff --git a/src/scss/blog.scss b/src/scss/blog.scss
index 3a59a04..415530a 100644
--- a/src/scss/blog.scss
+++ b/src/scss/blog.scss
@@ -5,10 +5,6 @@
 	padding-bottom: $inner-gap;
 }
 
-#main span {
-	display: inline-block;
-}
-
 #post {
 	max-width: 100%;
 
@@ -23,9 +19,6 @@
 
 	img {
 		margin: $inner-gap;
-		margin-left: auto;
-		margin-right: auto;
-		display: block;
 		max-width: 100%;
 		width: 400px;
 	}
diff --git a/src/scss/ie/ie.scss b/src/scss/ie/ie.scss
new file mode 100644
index 0000000..bf8cc4f
--- /dev/null
+++ b/src/scss/ie/ie.scss
@@ -0,0 +1,49 @@
+/* IE 5-7 Styles */
+
+@import "../variables";
+
+#header {
+	.ie-nav {
+		margin-left: 90px;
+	}
+}
+
+#main {
+	.col {
+		display: block !important;
+		width: 100% !important;
+
+		&.left {
+			padding-right: 0 !important;
+		}
+
+	}
+
+	.section {
+		.heading {
+			background: $blue !important;
+		}
+	}
+
+	#post,
+	#writeup {
+		.posted {
+			margin-top: $inner-gap;
+		}
+	}
+
+	#comments {
+		#new_comment {
+			width: 400px;
+
+			#author,
+			#content {
+				width: 400px !important;
+			}
+		}
+	}
+
+	table {
+		behavior: url(boxsizing.htc);
+	}
+}
diff --git a/src/scss/ie/ie6.scss b/src/scss/ie/ie6.scss
new file mode 100644
index 0000000..2731e24
--- /dev/null
+++ b/src/scss/ie/ie6.scss
@@ -0,0 +1,41 @@
+/* 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 {
+
+			&.left {
+				margin-bottom: $inner-gap;
+			}
+
+			&.right {
+				margin-top: $inner-gap !important;
+			}
+
+		}
+	}
+
+	#contact {
+		margin-bottom: 0 !important;
+	}
+
+	#footer {
+		margin-top: $inner-gap !important;
+	}
+}
diff --git a/src/scss/legacy.scss b/src/scss/legacy.scss
deleted file mode 100644
index c6198cf..0000000
--- a/src/scss/legacy.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/* IE 6 & 7 Styles */
-
-@import "./variables";
-
-#header, #footer {
-	behavior: url(boxsizing.htc);
-}
-
-.ie-nav {
-	margin-left: 90px;
-}
-
-#main .col {
-	display: block !important;
-	width: 100% !important;
-}
-
-#main .left {
-	padding-right: 0 !important;
-	padding-bottom: $outer-gap;
-}
-
-#main .right {
-	margin-top: $outer-gap;
-}
-
-#new_comment {
-	width: 400px;
-
-	.input {
-		width: 400px;
-	}
-}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 3dcbf5e..cca93d8 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -82,6 +82,12 @@ html {
 	background-size: 512px;
 }
 
+.center {
+	display: block;
+	margin-left: auto !important;
+	margin-right: auto !important;
+}
+
 html,
 body,
 #container {
@@ -94,12 +100,16 @@ body {
 	padding: $inner-gap;
 	min-height: 100%;
 
-	.center {
+	> .center {
 		display: table;
 		margin: 0 auto;
 	}
 }
 
+#main div.span {
+	padding-left: $inner-gap;
+}
+
 #header,
 #main,
 #footer,
@@ -176,13 +186,15 @@ body {
 		width: 1px;
 		min-width: 100%;
 
-		.center {
+		> .center {
 			  display: block;
 		}
 	}
 
-	.center, #header,
-	#main, #footer,
+	body > .center,
+	#header,
+	#main,
+	#footer,
 	#container {
 		width: 100%;
 		max-width: 100%;