ie5

src/public/css/ie/boxsizing.css

@@ -0,0 +1 @@
+*{behavior:url(boxsizing.htc)}

src/public/css/ie/ie.css

@@ -0,0 +1 @@
+#header .ie-nav{margin-left:90px}#main .col{display:block !important;width:100% !important}#main .col.left{padding-right:0 !important}#main .section .heading{background:#366199 !important}#main #post .posted,#main #writeup .posted{margin-top:16px}#main #comments #new_comment{width:400px}#main #comments #new_comment #author,#main #comments #new_comment #content{width:400px !important}#main table{behavior:url(boxsizing.htc)}

src/public/css/ie/ie5.css

@@ -0,0 +1 @@
+.ie-nav{margin-left:90px}#main .col{display:block !important;width:100% !important}#main .left{padding-right:0 !important;padding-bottom:16px}#main .right{margin-top:16px}#new_comment{width:400px}#new_comment .input{width:400px}

src/public/css/ie/ie6.css

@@ -0,0 +1 @@
+*{behavior:url(boxsizing.htc)}body #main .col.left{margin-bottom:16px}body #main .col.right{margin-top:16px !important}body #contact{margin-bottom:0 !important}body #footer{margin-top:16px !important}

src/public/css/ie/ie6.scss.css

@@ -0,0 +1 @@
+*{behavior:url(boxsizing.htc)}

src/public/css/ie/main.css

@@ -0,0 +1 @@
+.ie-nav{margin-left:90px}#main .col{display:block !important;width:100% !important}#main .left{padding-right:0 !important;padding-bottom:16px}#main .right{margin-top:16px}#new_comment{width:400px}#new_comment .input{width:400px}

src/scss/_variables.scss

@@ -10,8 +10,8 @@ $blue-alt: #244266;
 $black: #14171d;
 $black-alt: #242526;
 
-$font: 'Courier New', Courier, monospace;
+$font: 'Courier New', monospace;
-$header-font: 'FontStuck-Extended', monospace;
+$header-font: 'FontStuck-Extended', Verdana, Courier, monospace;
 
 $inner-gap: 16px;
 $outer-gap: 16px;

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;
 	}

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);
+	}
+}

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;
+	}
+}

src/scss/legacy.scss

@@ -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;
-	}
-}

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,
+	body > .center,
-	#main, #footer,
+	#header,
+	#main,
+	#footer,
 	#container {
 		width: 100%;
 		max-width: 100%;

src/web/_model/blog.php

@@ -42,7 +42,7 @@ class Blog_model extends Model {
 		$base = $this->get_url('');
 
 		$replace = "<a href=\"{$base}\\1\">";
-		$replace .= "<img src=\"{$base}\\1\" title=\"\\2\" alt=\"\\2\">";
+		$replace .= IE_START . "<img class=\"center\" src=\"{$base}\\1\" title=\"\\2\" alt=\"\\2\">" . IE_END;
 		$replace .= "</a>";
 
 		$md = preg_replace($pattern, $replace, $md);

src/web/_views/apps/blog.php

@@ -6,8 +6,8 @@
 			$meta = $post['meta'];
 			$link = $this->get_url('blog/post/' . substr($name, 0, -3));
 			echo '<a href="' . $link . '"><h3>' . $meta['name'] . '</h3></a>';
-			echo '<span>' . $meta['desc'] . '</span><br>';
+			echo '<div class="span">' . $meta['desc'] . '</div>';
-			echo '<span><time>' . $this->format_date($meta['date']) . '</time></span>';
+			echo '<div class="span"><time>' . $this->format_date($meta['date']) . '</time></div>';
 		}
 	?>
 </div>

src/web/_views/apps/blog_post.php

@@ -1,6 +1,8 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?=aria_section('post', $post['meta']['name'])?>
-	<span><?=ucfirst(lang('posted'))?>: <time><?=$this->format_date($post['meta']['date'])?></time></span>
+	<div class="span posted">
-	<br>
+		<?=ucfirst(lang('posted'))?>:
+		<time><?=$this->format_date($post['meta']['date'])?></time>
+	</div>
 	<?=$post['content']?>
 </div>

src/web/_views/comments.php

@@ -7,7 +7,7 @@
 
 			echo '<div class="comment">';
 			echo '<h3 class="header">' . esc($comment['author']) . '</h3>';
-			echo '<span class="date">' . $date . '</span>';
+			echo '<div class="span" class="date">' . $date . '</div>';
 			echo '<p class="content">' . esc($comment['content']) . '</p>';
 			echo '</div>';
 		}

src/web/_views/footer.php

@@ -33,6 +33,8 @@
 			<iframe
 				height="94"
 				class="john"
+				<?php /* hack to disable firefox cookie warning*/?>
+				sandbox="allow-scripts"
 				title="<?=lang('john_title')?>"
 				src="https://john.citrons.xyz/embed?ref=freya.cat"
 			></iframe>

src/web/_views/head.php

@@ -22,7 +22,10 @@
 		<link rel="icon" type="image/png" sizes="640x640" href="<?=$this->get_url("public/icons/logo640.png", TRUE)?>">
 		<link rel="manifest" href="/manifest.json">
 		<!--[if lt IE 8 ]>
-			<?=$this->link_css('css/legacy.css')?>
+			<?=$this->embed_css('css/ie/ie.css')?>
+		<![endif]-->
+		<!--[if (gt IE 5)&(lt IE 8) ]>
+			<?=$this->embed_css('css/ie/ie6.css')?>
 		<![endif]-->
 		<?php foreach($css as $file)
 			echo $this->embed_css($file);

src/web/index.php

@@ -23,6 +23,11 @@ define('WEB_ROOT', PHP_ROOT . '/web');
 define('ASSET_ROOT', PHP_ROOT . '/assets');
 define('PUBLIC_ROOT', PHP_ROOT . '/public');
 
+// ========================== VARIABLES ==
+
+define('IE_START', "<!--[if lt IE 8 ]>\n<center>\n<![endif]-->");
+define('IE_END', "<!--[if lt IE 8 ]>\n</center>\n<![endif]-->");
+
 // ========================== BOOTSTRAP ==
 
 // load all third party