From b9bb436cb9683ea0e0bc959c9271a4891f712a02 Mon Sep 17 00:00:00 2001 From: Sebastian Tschan Date: Mon, 4 May 2020 04:43:56 +0900 Subject: [PATCH 01/20] Demo: Improve layout and design. This adds support for a light/dark theme based on the OS color scheme setting. --- css/demo.css | 146 +++++++++++++++++++++++++++++++++++------------- index.html | 9 ++- js/demo/demo.js | 6 +- 3 files changed, 117 insertions(+), 44 deletions(-) diff --git a/css/demo.css b/css/demo.css index a21cb17..4134e00 100644 --- a/css/demo.css +++ b/css/demo.css @@ -13,63 +13,133 @@ 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: 'Lucida Console', Monaco, monospace; + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; + padding: 5px; } -.result { - padding: 20px 40px; - background: #fff; - color: #222; +input[type='file'] { + padding: inherit; } -.error { - color: red; + +#template, +#data { + width: 100%; + font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; +} + +#result { + background: #363636; + padding: 20px; + border-radius: 5px; +} + +@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; + } + + #result { + background: #fff; + padding: 20px; + border-radius: 5px; + } } @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; -} -* + html .result { - width: 400px; -} diff --git a/index.html b/index.html index 86d6b76..63d280d 100644 --- a/index.html +++ b/index.html @@ -32,12 +32,11 @@

JavaScript Templates Demo

JavaScript templating engine with zero dependencies.
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.

-