Demo: Improve layout and design.

This adds support for a light/dark theme based on the OS color scheme setting.

Author: blueimp

css/demo.css

@@ -13,51 +13,120 @@ body {
   max-width: 750px;
   margin: 0 auto;
   padding: 1em;
-  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
-  font-size: 1em;
-  line-height: 1.4em;
-  background: #222;
-  color: #fff;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  line-height: 1.4;
+  background: #212121;
+  color: #dedede;
 }
 a {
-  color: orange;
+  color: #61afef;
   text-decoration: none;
 }
-img {
+a:visited {
+  color: #56b6c2;
+}
+a:hover {
+  color: #98c379;
+}
+figure,
+tr {
+  background: #363636;
+}
+tr:nth-child(odd) {
+  background: #414141;
+}
+td,
+th {
+  padding: 10px;
+  text-align: left;
+}
+table {
+  width: 100%;
+  word-wrap: break-word;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+figure {
+  margin: 0;
+  padding: 10px;
+  border-radius: 5px;
+  display: inline-block;
+}
+figure,
+table {
+  margin-bottom: 20px;
+}
+img,
+canvas {
   border: 0;
   vertical-align: middle;
 }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
 h1 {
-  line-height: 1em;
+  margin-top: 0.5em;
 }
-textarea,
-input {
-  display: inline-block;
-  width: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
+button,
+input,
+select,
+textarea {
   box-sizing: border-box;
-  padding: 10px;
-  margin: 0 0 10px;
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  padding: 5px;
+}
+input[type='file'] {
+  padding: inherit;
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background: #ececec;
+    color: #212121;
+  }
+  a {
+    color: #225c8d;
+  }
+  a:visited {
+    color: #378f9a;
+  }
+  a:hover {
+    color: #6fa349;
+  }
+  figure,
+  tr {
+    background: #fff;
+    color: #212121;
+  }
+  tr:nth-child(odd) {
+    background: #f6f6f6;
+  }
+}
+
+#input,
+#result {
+  width: 100%;
 }
 
 @media (min-width: 481px) {
-  .navigation {
+  #navigation {
     list-style: none;
     padding: 0;
   }
-  .navigation li {
+  #navigation li {
     display: inline-block;
   }
-  .navigation li:not(:first-child):before {
-    content: '| ';
+  #navigation li:not(:first-child)::before {
+    content: ' | ';
   }
 }
-
-/* IE7 fixes */
-* + html textarea,
-* + html input {
-  width: 460px;
-}

index.html

@@ -31,14 +31,15 @@ <h1>JavaScript MD5 Demo</h1>
       JavaScript
       <a href="https://en.wikipedia.org/wiki/MD5">MD5</a> implementation.<br />
       Compatible with server-side environments like
-      <a href="http://nodejs.org/">Node.js</a>, module loaders like
-      <a href="http://requirejs.org/">RequireJS</a>,
-      <a href="http://browserify.org/">Browserify</a> or
-      <a href="https://webpack.github.io/">webpack</a> and all web browsers.
+      <a href="https://nodejs.org/">Node.js</a>, module loaders like
+      <a href="https://requirejs.org/">RequireJS</a> or
+      <a href="https://webpack.js.org/">webpack</a> and all web browsers.
     </p>
-    <ul class="navigation">
+    <ul id="navigation">
       <li>
-        <a href="https://github.com/blueimp/JavaScript-MD5/tags">Download</a>
+        <a href="https://github.com/blueimp/JavaScript-MD5/releases"
+          >Download</a
+        >
       </li>
       <li>
         <a href="https://github.com/blueimp/JavaScript-MD5">Source Code</a>