Add reduced CSS for IE6 visitors

2026-02-21 09:05:35 -07:00 · 2021-12-03 18:57:44 -03:00
parent 8d400dcc19
commit 93f6a1b820
10 changed files with 192 additions and 33 deletions
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,4 +1,4 @@
 		<footer>
-			<div>86Box is maintained by <a href="https://github.com/OBattler">OBattler</a> and <a href="https://github.com/orgs/86Box/people">the 86Box developers</a>. Website developed by <a href="https://github.com/foxlet">Foxlet</a>.</div>
+			<div id="footer">86Box is maintained by <a href="https://github.com/OBattler">OBattler</a> and <a href="https://github.com/orgs/86Box/people">the 86Box developers</a>. Website developed by <a href="https://github.com/foxlet">Foxlet</a><span id="reduced"> with retro-reduced version by <a href="https://github.com/richardg867">richardg867</a></span>.</div>
 		</footer>
 </body></html>
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -11,20 +11,27 @@
 		<meta property="og:type" content="website" />
 		<meta property="og:image" itemprop="image" content="{{ page.image | default: "/avaicon.png" }}" />
 		<meta property="og:description" content="{{ page.description }}" />
+		<link rel="shortcut icon" href="/favicon.ico">
 		<link rel="icon" href="/favicon.png" type="image/png">
 		<meta name="theme-color" content="#ff4848">
 		<meta name="viewport" content="width=640, initial-scale=0.5">
-		<link rel="stylesheet" href="/assets/css/style.css">
-		<link rel="stylesheet" href="/assets/css/fonts.css">
+		<!--[if !IE]><!-->
+			<link rel="stylesheet" href="/assets/css/style.css">
+			<link rel="stylesheet" href="/assets/css/fonts.css">
+		<!--<![endif]-->
+		<!--[if IE]>
+			<script src="/assets/js/style-reduced.js"></script>
+			<link rel="stylesheet" href="/assets/css/style-reduced.css">
+		<![endif]-->
 		<link rel="alternate" type="application/atom+xml" title="Blog posts" href="/feed.xml" />
 	</head>
 	<body>
 		<header>
-			<a href="/"><img src="/avaicon.png" id="icon" /><img src="/assets/images/86box-logo.png" id="logo" /></a>
+			<a href="/"><img src="/avaicon.png" id="icon" alt="86Box icon" /><img src="/assets/images/86box-logo.png" id="logo" alt="86Box logo" /></a>
 		</header>
 		<nav>
-			<a href="/#downloads">Downloads</a>
-			<a href="https://86box.readthedocs.io/en/latest/index.html">Docs</a>
-			<a href="/blog.html">Blog</a>
-			<a href="https://github.com/86Box/86Box">GitHub</a>
+			<a class="navlink" href="/#downloads">Downloads</a>
+			<a class="navlink" href="https://86box.readthedocs.io/en/latest/index.html">Docs</a>
+			<a class="navlink" href="/blog.html">Blog</a>
+			<a class="navlink" href="https://github.com/86Box/86Box">GitHub</a>
 		</nav>
--- a/_includes/image.html
+++ b/_includes/image.html
@@ -1,6 +1,6 @@
-<figure class="image" style="text-align: center;">
-  <a href="{{ include.url }}" target="_blank"><img src="{{ include.url }}" alt="{{ include.description }}" style="max-width: 100%; width: auto; height: auto;" /></a>
+<figure class="image">
+  <a href="{{ include.url }}" target="_blank"><img class="image" src="{{ include.url }}" alt="{{ include.description }}" /></a>
 {% if include.description %}
-  <figcaption>{{ include.description }}</figcaption>
+  <figcaption><div class="imagecaption">{{ include.description }}</div></figcaption>
 {% endif %}
 </figure>
--- a/_includes/imageheading.html
+++ b/_includes/imageheading.html
@@ -1,4 +1,4 @@
 {{ include.separator | default: "<hr />" }}
-<figure class="image" style="text-align: center;">
-  <img src="{{ include.url }}" alt="{{ include.heading }}" style="max-width: 100%; width: auto; height: auto;" />
+<figure class="image">
+  <img src="{{ include.url }}" alt="{{ include.heading }}" class="heading" />
 </figure>
--- a/_posts/2021-12-01-86box-v3-0.md
+++ b/_posts/2021-12-01-86box-v3-0.md
@@ -23,22 +23,22 @@ Several refinements have been made to the 86Box user interface introduced in the

 The user interface now has **translations** contributed by community members, also available through the **Preferences** window:

-* 🇨🇳 **Chinese (Simplified)** by [**startmenu**](https://github.com/startmenu)
-* 🇭🇷 **Croatian** by [**dob205**](https://github.com/dob205)
-* 🇨🇿 **Czech** by [**dhrdlicka**](https://github.com/dhrdlicka)
-* 🇬🇧 **English (United Kingdom)** by [**jriwanek**](https://github.com/jriwanek)
-* 🇫🇮 **Finnish** by [**ts-korhonen**](https://github.com/ts-korhonen)
-* 🇫🇷 **French** by [**jvernet**](https://github.com/jvernet)
-* 🇩🇪 **German** by [**dob205**](https://github.com/dob205)
-* 🇭🇺 **Hungarian** by [**laciba96**](https://github.com/laciba96)
-* 🇮🇹 **Italian** by **explorerexe**
-* 🇯🇵 **Japanese** by [**OBattler**](https://github.com/OBattler)
-* 🇧🇷 **Portuguese (Brazil)** by [**altiereslima**](https://github.com/altiereslima)
-* 🇵🇹 **Portuguese (Portugal)** by [**OBattler**](https://github.com/OBattler) and **DoutorHouse**
-* 🇷🇺 **Russian** by [**OBattler**](https://github.com/OBattler)
-* 🇸🇮 **Slovenian** by [**daviunic**](https://github.com/daviunic) and [**OBattler**](https://github.com/OBattler)
-* 🇪🇸 **Spanish (Spain)** by [**mgtroyas**](https://github.com/mgtroyas)
-* 🇹🇷 **Turkish** by **luennix**
+* <span class="emoji">🇨🇳</span> **Chinese (Simplified)** by [**startmenu**](https://github.com/startmenu)
+* <span class="emoji">🇭🇷</span> **Croatian** by [**dob205**](https://github.com/dob205)
+* <span class="emoji">🇨🇿</span> **Czech** by [**dhrdlicka**](https://github.com/dhrdlicka)
+* <span class="emoji">🇬🇧</span> **English (United Kingdom)** by [**jriwanek**](https://github.com/jriwanek)
+* <span class="emoji">🇫🇮</span> **Finnish** by [**ts-korhonen**](https://github.com/ts-korhonen)
+* <span class="emoji">🇫🇷</span> **French** by [**jvernet**](https://github.com/jvernet)
+* <span class="emoji">🇩🇪</span> **German** by [**dob205**](https://github.com/dob205)
+* <span class="emoji">🇭🇺</span> **Hungarian** by [**laciba96**](https://github.com/laciba96)
+* <span class="emoji">🇮🇹</span> **Italian** by **explorerexe**
+* <span class="emoji">🇯🇵</span> **Japanese** by [**OBattler**](https://github.com/OBattler)
+* <span class="emoji">🇧🇷</span> **Portuguese (Brazil)** by [**altiereslima**](https://github.com/altiereslima)
+* <span class="emoji">🇵🇹</span> **Portuguese (Portugal)** by [**OBattler**](https://github.com/OBattler) and **DoutorHouse**
+* <span class="emoji">🇷🇺</span> **Russian** by [**OBattler**](https://github.com/OBattler)
+* <span class="emoji">🇸🇮</span> **Slovenian** by [**daviunic**](https://github.com/daviunic) and [**OBattler**](https://github.com/OBattler)
+* <span class="emoji">🇪🇸</span> **Spanish (Spain)** by [**mgtroyas**](https://github.com/mgtroyas)
+* <span class="emoji">🇹🇷</span> **Turkish** by **luennix**

 Inspired by other PC virtualizers, [**dhrdlicka**](https://github.com/dhrdlicka) introduced the **Media menu**, which provides an alternative way of changing the emulated machine's removable media aside from clicking their respective status bar icons.

--- a/assets/css/style-reduced.css
+++ b/assets/css/style-reduced.css
@@ -0,0 +1,104 @@
+/* Reduced stylesheet for retro browsers (targeting Internet Explorer 6). */
+
+/* Global Defaults */
+html {
+	color: #f9f9f9;
+	font-family: "Source Code Pro", monospace;
+}
+
+/* Body Layout */
+body {
+	background: #212e40;
+	margin: 12px 8px;
+}
+
+/* Page Layout */
+img {
+	border: none;
+}
+img#icon, img#logo {
+	height: 70px;
+	padding-right: 20pt;
+}
+a.navlink {
+	font-size: 15pt;
+	margin: 6pt;
+}
+header, nav { /* N/A on IE6 */
+	padding-bottom: 20pt;
+}
+div#footer {
+	background-color: #2b496f;
+	text-align: center;
+	color: #8c9dbb;
+	padding: 10pt;
+	font-size: 11pt;
+}
+
+/* Buttons */
+button {
+	color: #0f1934;
+	background-color: #f9f9f9;
+	font: bold 16px "Source Code Pro", monospace;
+	text-align: center;
+	text-transform: uppercase;
+	border: none;
+	border-radius: 4px; /* N/A on IE6 */
+	padding: 9px 0px;
+	border: 1px solid #f9f9f9;
+}
+
+/* Links */
+a {
+	color: #b9d3e8;
+	font-weight: bold;
+	text-decoration: none;
+}
+a:hover {
+	color: white;
+}
+a:active {
+	color: #cecece;
+}
+div#socialnew {
+	display: none;
+}
+
+/* Blog */
+img.heading, img.image {
+	text-align: center;
+	max-width: 100%; /* N/A on IE6 */
+	width: expression((getNaturalWidth(this) >= (document.body.clientWidth - 16)) ? "100%" : "auto");
+	display: block;
+	margin-top: 10pt;
+	margin-bottom: 5pt;
+}
+div.imagecaption {
+	text-align: center;
+	margin-bottom: 10pt;
+}
+hr {
+	border-color: #808080;
+	width: 100%;
+}
+span.emoji {
+	display: none;
+}
+div.scroll {
+	max-height: 500px;
+	padding-right: 1px;
+	overflow-y: scroll;
+}
+table {
+	border: 1px solid #808080;
+}
+th, td {
+	border: 1px solid #808080;
+	padding: 5px;
+}
+code {
+	font-size: 11pt;
+	background: #404040;
+	padding-left: 3pt;
+	padding-right: 3pt;
+}
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -41,6 +41,10 @@ body > header {
 	grid-area: head;
 	padding: 30pt 30pt;
 }
+img#icon {
+	max-height: 75px;
+	padding-right: 20pt;
+}
 body > nav {
 	/* background-color: #ffa08c; */
 	grid-area: nav;
@@ -98,9 +102,12 @@ body > footer {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	color: #8c9dbb; 
+	color: #8c9dbb;
 	font-size: 11pt;
 }
+body > footer > div > #reduced {
+	display: none;
+}
@media (max-width: 768px) {
    body > footer {
    	padding: 10pt;
@@ -138,16 +145,34 @@ a:hover {
 a:active {
 	color: #cecece;
 }
-img#icon {
-	max-height: 75px;
-	padding-right: 20pt;
+div#socialold {
+	display: none;
 }

 /* Blog */
+figure.image {
+	text-align: center;
+}
+img.heading {
+	max-width: 100%;
+	width: auto;
+	height: auto;
+}
+img.image {
+	max-width: 100%;
+	width: auto;
+	height: auto;
+}
+div.imagecaption {
+	display: inline;
+}
 hr {
 	border-color: #808080;
 	width: 100%;
 }
+span.emoji {
+	font-family: Tweemoji Mozilla; /* work around Windows' lack of flags where supported (Firefox) */
+}
 div.scroll {
 	max-height: 500px;
 	padding-right: 1px; /* make border less ugly on Chrome on Windows */
--- a/assets/js/style-reduced.js
+++ b/assets/js/style-reduced.js
@@ -0,0 +1,15 @@
+var imgCache = {};
+
+function getNaturalWidth(img) {
+	if (img.naturalWidth) {
+		return img.naturalWidth;
+	} else {
+		var img2 = imgCache[img.src];
+		if (!img2) {
+			img2 = new Image();
+			img2.src = img.src;
+			imgCache[img.src] = img2;
+		}
+		return img2.width;
+	}
+}
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.md
+++ b/index.md
@@ -47,10 +47,18 @@ Get in touch
 ------------
 You can reach us on our IRC channel, Discord server or Twitter to discuss anything related to retro computing and, of course, 86Box. We look forward to hearing from you!

+<div id="socialnew" markdown="block">
+
 [![Visit our IRC channel](https://kiwiirc.com/buttons/irc.ringoflightning.net/softhistory.png)](https://kiwiirc.com/client/irc.ringoflightning.net/?nick=github?#softhistory)

 [![Visit our Discord server](https://discordapp.com/api/guilds/262614059009048590/embed.png)](https://discord.gg/v5fCgFw)

+</div><div id="socialold" markdown="block">
+
+[Visit our IRC channel](irc://irc.ringoflightning.net/#softhistory) (requires an IRC client)
+
+</div>
+
 [Twitter: @86BoxEmulator](https://twitter.com/86BoxEmulator)*

 YouTube