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,59 +13,105 @@ 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 {
-  border: 0;
-  vertical-align: middle;
+a:visited {
+  color: #56b6c2;
 }
-h1 {
-  line-height: 1em;
+a:hover {
+  color: #98c379;
 }
-h2,
-h3 {
-  margin-top: 2em;
+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;
 }
-tr {
-  background: #fff;
-  color: #222;
+img,
+canvas {
+  border: 0;
+  vertical-align: middle;
 }
-tr:nth-child(odd) {
-  background: #eee;
-  color: #222;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
 }
-td,
-th {
-  padding: 10px;
-  text-align: left;
+h1 {
+  margin-top: 0.5em;
 }
-#result,
-#thumbnail {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  color: #222;
-  text-align: center;
+button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  padding: 5px;
 }
-.jcrop-holder {
-  margin: 0 auto;
+input[type='file'] {
+  padding: inherit;
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background: #ececec;
+    color: #212121;
+  }
+  a {
+    filter: brightness(75%);
+  }
+  figure,
+  tr {
+    background: #fff;
+    color: #212121;
+  }
+  tr:nth-child(odd) {
+    background: #f6f6f6;
+  }
+}
+
+#url {
+  width: 100%;
+}
+#result {
+  display: block;
 }
 
 @media (min-width: 481px) {
@@ -76,7 +122,7 @@ th {
   #navigation li {
     display: inline-block;
   }
-  #navigation li:not(:first-child):before {
-    content: '| ';
+  #navigation li:not(:first-child)::before {
+    content: ' | ';
   }
 }

index.html

@@ -82,6 +82,7 @@ <h2>Select an image file</h2>
       <input type="url" id="url" placeholder="Image URL" />
     </p>
     <p>Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
+    <h3>Options</h3>
     <p>
       <label for="orientation">Orientation:</label>
       <select id="orientation">
@@ -110,19 +111,18 @@ <h2>Result</h2>
       <button type="button" id="crop">Crop</button>
       <button type="button" id="cancel">Cancel</button>
     </p>
-    <div id="result">
-      <p style="display: none;">
+    <figure id="result">
+      <figcaption style="display: none;">
         This demo works only in browsers with support for the
         <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or
         <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a>
         API.
-      </p>
-    </div>
+      </figcaption>
+    </figure>
     <div id="meta" style="display: none;">
       <h3>Image metadata</h3>
-      <div id="thumbnail" style="display: none;"></div>
+      <figure id="thumbnail" style="display: none;"></figure>
     </div>
-
     <script src="js/vendor/canvas-to-blob.js"></script>
     <script src="js/load-image.js"></script>
     <script src="js/load-image-scale.js"></script>