Various fixes for IE 7 and 8 and use filter instead of PIE for box-shadow

about/index.php

@@ -27,7 +27,7 @@
                                 <img class="icon" src="/assets/icons/xmpp.png" alt="">
                             </picture>
                             <span>XMPP:</span>
-                            <a href="xmpp://%72%65%69%6D%61%72%40%72%65%69%6D%2E%61%72">&#114;&#101;&#105;&#109;&#97;&#114;&commat;&#114;&#101;&#105;&#109;&period;&#97;&#114;</a>
+                            <a href="xmpp://%72%65%69%6D%61%72%40%72%65%69%6D%2E%61%72">&#114;&#101;&#105;&#109;&#97;&#114;@&#114;&#101;&#105;&#109;.&#97;&#114;</a>
                             <br>
 
                             <picture>

assets/script/compatibility.js

@@ -1,11 +1,40 @@
 if (!document.getElementsByClassName) {
     document.getElementsByClassName = function(className) {
-        return document.querySelectorAll("." + className);
+
+        if (document.querySelectorAll)
+            return document.querySelectorAll("." + className);
+
+        var results = [];
+        for (var i = 0; i < document.all.length; i++) {
+            if (new RegExp("\\b" + className + "\\b").test(document.all[i].className))
+                results.push(document.all[i]);
+        }
+        return results;
+    }
+}
+
+if (!document.querySelector) {
+    var style = document.createStyleSheet();
+
+    // https://stackoverflow.com/a/53554212
+    document.querySelector = function(query) {
+        style.addRule(query, "foo:bar");
+        for (var i = 0; i < document.all.length; i++) {
+            if (document.all[i].currentStyle.foo === "bar")
+                return document.all[i];
+        }
+        style.removeRule(0);
     }
 }
 
 if (!window.addEventListener) {
-    window.addEventListener = window.attachEvent;
+    window.addEventListener = function(event, callback) {
+        window.attachEvent("on" + event, callback);
+    }
+}
+
+if (!document.head) {
+    document.head = document.getElementsByTagName("head")[0];
 }
 
 function toArray(iter) {

assets/script/theme.js

@@ -83,7 +83,7 @@ window.addEventListener("load", function() {
         // Set trees
         var trees = document.getElementsByClassName("tree");
         for (var i = 0; i < trees.length; i++) {
-            trees[i].src = "/assets/img/tree_" + theme + ".svg";
+            trees[i].src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
         }
 
         if (!firstTime) {
@@ -94,13 +94,13 @@ window.addEventListener("load", function() {
             jsTheme.href = "/assets/style/" + theme + "-mode.css";
             document.head.appendChild(jsTheme);
 
-            if (linkOnloadSupported) {
+            if (window.linkOnloadSupported) {
                 document.body.className += " loading";
                 jsTheme.onload = function () {
                     document.body.className = document.body.className.replace(/\s*loading/g, "");
                     var themeStyles = document.getElementsByClassName("theme-style");
                     for (var i = 0; i < themeStyles.length; i++) {
-                        document.querySelector("head").removeChild(themeStyles[i]);
+                        document.head.removeChild(themeStyles[i]);
                     }
                 }
             }
@@ -112,12 +112,14 @@ window.addEventListener("load", function() {
     // Functions to select/deselect a theme button
 
     function selectThemeButton(themeBtn) {
-        themeBtn.textContent += " ✓";
+        if (themeBtn.textContent) themeBtn.textContent += " ✓";
+        else themeBtn.innerText += " ✓";
         themeBtn.className += "selected";
     }
 
     function deselectThemeButton(themeBtn) {
-        themeBtn.textContent = themeBtn.textContent.replace(" ✓", "");
+        if (themeBtn.textContent) themeBtn.textContent = themeBtn.textContent.replace(" ✓", "");
+        else themeBtn.innerText = themeBtn.innerText.replace(" ✓", "");
         themeBtn.className = themeBtn.className.replace("selected", "");
     }
 

assets/style/dark-mode.css

@@ -46,6 +46,7 @@ body {
     -o-box-shadow:      2px 2px 0 black;
     -moz-box-shadow:    2px 2px 0 black;
     -webkit-box-shadow: 2px 2px 0 black;
+    filter: progid:DXImageTransform.Microsoft.DropShadow(color=#FF000000, offX=2, offY=2);
 }
 .container::selection, .container *::selection {
     background-color: #EEE;

assets/style/light-mode.css

@@ -46,6 +46,7 @@ body {
     -o-box-shadow:      2px 2px 0 #BDBDBD;
     -moz-box-shadow:    2px 2px 0 #BDBDBD;
     -webkit-box-shadow: 2px 2px 0 #BDBDBD;
+    filter: progid:DXImageTransform.Microsoft.DropShadow(color=#FFBDBDBD, offX=2, offY=2);
 }
 .container::selection, .container *::selection {
     background-color: #212121;

assets/style/main.css

@@ -62,10 +62,12 @@ a:hover {
     padding: 5px 10px;
     cursor: pointer;
     margin: 1px;
+    *margin: 0; /* Fix spacing on IE7 */
     border-bottom-width: 3px;
     border-bottom-style: solid;
     font-weight: bold;
     text-decoration: none;
+    display: inline-block; /* Fix drop shadow on IE8- */
     transition:         border-bottom-color 0.2s;
     -o-transition:      border-bottom-color 0.2s;
     -moz-transition:    border-bottom-color 0.2s;
@@ -143,7 +145,9 @@ h1, h2 {
 .container {
     direction: ltr;
     /* IE polyfills */
-    behavior: url("/assets/lib/css3pie/PIE.htc");
+    /* behavior: url("/assets/lib/css3pie/PIE.htc"); */
+    position: relative; /* Fix z-index on IE */
+    *display: inline-block;
     /* Re-enable user select for text */
     user-select:         text;
     -ms-user-select:     text;
@@ -152,6 +156,9 @@ h1, h2 {
     -webkit-user-select: text;
     -webkit-touch-callout: default;
 }
+.container > * {
+    position: relative; /* Don't apply drop shadow on children on IE8- */
+}
 
 /* Inline code */
 .inline-code-text {

inc/head.inc

@@ -15,8 +15,16 @@
 <? if (!$_COOKIE["theme"]) : ?>
 	<style>@import "/assets/style/dark-mode.css" (prefers-color-scheme: dark)</style>
 <? endif ?>
-<!--[if lt IE 6]><style>.container { box-shadow: none !important; }</style><![ENDIF]-->
+<!--[if lt IE 6]><style>.container { box-shadow: none !important; }</style><![endif]-->
-<script src="/assets/script/compatibility.js" defer></script>
+<!--[if lte IE 9]>
-<script src="/assets/script/theme.js" defer></script>
+    <script src="/assets/script/compatibility.js"></script>
-<script src="/assets/script/navigation.js" defer></script>
+    <script src="/assets/script/theme.js"></script>
-<script src="/assets/script/inline-code.js" defer></script>
+    <script src="/assets/script/navigation.js"></script>
+    <script src="/assets/script/inline-code.js"></script>
+<![endif]-->
+<!--[if gt IE 10]><!-->
+    <script src="/assets/script/compatibility.js" defer></script>
+    <script src="/assets/script/theme.js" defer></script>
+    <script src="/assets/script/navigation.js" defer></script>
+    <script src="/assets/script/inline-code.js" defer></script>
+<!--<![endif]-->

inc/nav.inc

@@ -13,8 +13,8 @@
                 $is_selected = $link[0] == $path || $link[0] == rtrim($path, '/');
                 echo
                     $is_selected ?
-                        "<span class='container nav-button nav-button-selected'>$link[1]</span>\n" :
+                        "<span class='container nav-button nav-button-selected'>$link[1]</span>" :
-                        "<a href='$link[0]' class='container nav-button nav-button-not-selected'>$link[1]</a>\n";
+                        "<a href='$link[0]' class='container nav-button nav-button-not-selected'>$link[1]</a>";
             }
         
         ?>