From e3cbc432c827a7de196cb929f908d6246641d6db Mon Sep 17 00:00:00 2001 From: Sebastian Tschan Date: Mon, 4 May 2020 04:14:15 +0900 Subject: [PATCH 01/19] Demo: Improve layout and design. This adds support for a light/dark theme based on the OS color scheme setting. --- css/demo.css | 125 +++++++++++++++++++++++++++++++++++++++------------ index.html | 13 +++--- 2 files changed, 104 insertions(+), 34 deletions(-) diff --git a/css/demo.css b/css/demo.css index 4de2265..1f22b97 100644 --- a/css/demo.css +++ b/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; -} diff --git a/index.html b/index.html index 1d0f89e..8d95266 100644 --- a/index.html +++ b/index.html @@ -31,14 +31,15 @@

JavaScript MD5 Demo

JavaScript MD5 implementation.
Compatible with server-side environments like - Node.js, module loaders like - RequireJS, - Browserify or - webpack and all web browsers. + Node.js, module loaders like + RequireJS or + webpack and all web browsers.

-