From 86d40b364cbcaf2bbfc8350372dbb8ce9200e362 Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 27 May 2020 21:03:51 -0500 Subject: [PATCH 01/23] Force arrow functions --- .eslintrc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 93126d3..b70099c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -31,6 +31,7 @@ "classPropertiesAllowed": false } ], - "func-style": ["error", "expression"] + "func-style": ["error", "expression"], + "arrow-parens": ["error", "always"] } } From 9d96ee32f96f7fb045585ebee620479b2c9078ba Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 27 May 2020 21:04:05 -0500 Subject: [PATCH 02/23] Update file structure --- gulpfile.js | 58 ++++++++++++++++++++++---- package.json | 16 +------ src/builds/dark-legacy.css | 9 ---- src/builds/dark-legacy.standalone.css | 8 ---- src/builds/dark.css | 8 +--- src/builds/dark.standalone.css | 8 ---- src/builds/light-legacy.css | 9 ---- src/builds/light-legacy.standalone.css | 8 ---- src/builds/light.css | 8 +--- src/builds/light.standalone.css | 8 ---- src/builds/water.css | 9 ++++ 11 files changed, 63 insertions(+), 86 deletions(-) delete mode 100755 src/builds/dark-legacy.css delete mode 100755 src/builds/dark-legacy.standalone.css mode change 100644 => 100755 src/builds/dark.css delete mode 100755 src/builds/dark.standalone.css delete mode 100755 src/builds/light-legacy.css delete mode 100755 src/builds/light-legacy.standalone.css mode change 100644 => 100755 src/builds/light.css delete mode 100755 src/builds/light.standalone.css create mode 100644 src/builds/water.css diff --git a/gulpfile.js b/gulpfile.js index ef56068..80104f1 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,7 +20,7 @@ const postcssImport = require('postcss-import') const postcssInlineSvg = require('postcss-inline-svg') const postcssColorModFunction = require('postcss-color-mod-function').bind(null, { /* Use `.toRGBLegacy()` as other methods can result in lots of decimals */ - stringifier: color => color.toRGBLegacy() + stringifier: (color) => color.toRGBLegacy() }) const paths = { @@ -53,14 +53,58 @@ const formatByteMessage = (source, data) => { } const style = () => { - const isLegacy = (path) => /legacy/.test(path) + // const isLegacy = (path) => /legacy/.test(path) - const excludeModern = filter(file => isLegacy(file.path), { restore: true }) - const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true }) + // const excludeModern = filter(file => isLegacy(file.path), { restore: true }) + // const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true }) // Don't inline minified versions, so builds can lazily import them at runtime const cssImportOptions = { filter: (path) => !/\.min/.test(path) } + const startDiff = () => bytediff.start() + const endDiff = (source) => bytediff.stop((data) => formatByteMessage(source, data)) + + return ( + gulp + .src(paths.styles.src) + .pipe(sourcemaps.init()) + .pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction(), postcssInlineSvg()])) + + .pipe(startDiff()) + .pipe(postcss([postcssCssVariables({ preserve: true })])) + .pipe(endDiff('css variables')) + + .pipe(startDiff()) + .pipe(postcss([autoprefixer({ env: 'legacy' })])) + .pipe(endDiff('autoprefixer')) + + .pipe(sourcemaps.write('.')) + .pipe(flatten()) // Put files in dist/*, not dist/builds/* + .pipe(gulp.dest(paths.styles.dest)) + + .pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline + + // + .pipe(startDiff()) + .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })])) + .pipe(endDiff('minification')) + .pipe(rename({ suffix: '.min' })) + // + + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest(paths.styles.dest)) + .pipe(gulp.dest(paths.docs.dest + '/water.css')) + + .pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline + .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' })) + .pipe(browserSync.stream()) + ) + + // return gulp.parallel( + // gulp.src(paths.styles.src) + // .pipe(sourcemaps.init()) + // ) + return ( gulp .src(paths.styles.src) @@ -80,7 +124,7 @@ const style = () => { env: 'legacy' })])) // Write the amount gained by autoprefixing - .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data))) + .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) .pipe(excludeModern.restore) // * Process modern builds * @@ -92,7 +136,7 @@ const style = () => { env: 'modern' })])) // Write the amount gained by autoprefixing - .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data))) + .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) .pipe(excludeLegacy.restore) // Write the sourcemaps after making pre-minified changes @@ -108,7 +152,7 @@ const style = () => { // Minify using cssnano, use extra-low precision while minifying inline SVGs .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })])) // Write the amount saved by minifying - .pipe(bytediff.stop(data => formatByteMessage('cssnano', data))) + .pipe(bytediff.stop((data) => formatByteMessage('cssnano', data))) // Rename the files have the .min suffix .pipe(rename({ suffix: '.min' })) // Write the sourcemaps after making all changes diff --git a/package.json b/package.json index 0abe881..e4b7bcb 100644 --- a/package.json +++ b/package.json @@ -70,24 +70,10 @@ "browserslist": { "legacy": [ "defaults AND not android 4.4.3" - ], - "modern": [ - "Edge > 16", - "Firefox > 31", - "Chrome > 49", - "Safari > 9.1", - "Opera > 36", - "ios_saf > 9.3", - "Android > 76", - "OperaMobile > 46", - "ChromeAndroid > 76", - "FirefoxAndroid > 68", - "UCAndroid > 12.12", - "Samsung > 5" ] }, "files": [ "dist/*.css", "LICENSE.md" ] -} +} \ No newline at end of file diff --git a/src/builds/dark-legacy.css b/src/builds/dark-legacy.css deleted file mode 100755 index 7d51f27..0000000 --- a/src/builds/dark-legacy.css +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Dark-themed version for legacy browsers: - * Loads the compiled, standalone version of the dark theme, - * but overrides it with the compiled, standalone version of the light theme - * if a system-wide theme preference is set on the user's device. - */ - -@import url('./dark-legacy.standalone.min.css'); -@import url('./light-legacy.standalone.min.css') (prefers-color-scheme: light); diff --git a/src/builds/dark-legacy.standalone.css b/src/builds/dark-legacy.standalone.css deleted file mode 100755 index e089e9b..0000000 --- a/src/builds/dark-legacy.standalone.css +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Standalone dark-themed version for legacy browsers. - * Includes dark variables and core, compiled at build time so the final output - * will only include regular CSS, no variables. - */ - -@import '../variables-dark.css'; -@import '../parts/_core.css'; diff --git a/src/builds/dark.css b/src/builds/dark.css old mode 100644 new mode 100755 index 3805bd9..7203514 --- a/src/builds/dark.css +++ b/src/builds/dark.css @@ -1,12 +1,6 @@ /** - * Dark-themed version: - * uses dark theme by default but switches to light theme - * if a system-wide theme preference is set on the user's device. - * - * Variables will remain uncompiled so the theme can update dynamically - * at runtime in the browser. + * Forced dark theme version */ @import '../variables-dark.css'; -@import '../variables-light.css' (prefers-color-scheme: light); @import '../parts/_core.css'; diff --git a/src/builds/dark.standalone.css b/src/builds/dark.standalone.css deleted file mode 100755 index 7db6fa8..0000000 --- a/src/builds/dark.standalone.css +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Standalone dark-themed version. - * Includes dark variables and core, left as CSS variables - * so the theming can be adjusted at runtime. - */ - -@import '../variables-dark.css'; -@import '../parts/_core.css'; diff --git a/src/builds/light-legacy.css b/src/builds/light-legacy.css deleted file mode 100755 index 1a3eef3..0000000 --- a/src/builds/light-legacy.css +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Light-themed version for legacy browsers: - * Loads the compiled, standalone version of the light theme at runtime, - * but overrides it with the compiled, standalone version of the dark theme - * if a system-wide theme preference is set on the user's device. - */ - -@import url('./light-legacy.standalone.min.css'); -@import url('./dark-legacy.standalone.min.css') (prefers-color-scheme: dark); diff --git a/src/builds/light-legacy.standalone.css b/src/builds/light-legacy.standalone.css deleted file mode 100755 index f201c1a..0000000 --- a/src/builds/light-legacy.standalone.css +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Standalone light-themed version for legacy browsers. - * Includes light variables and core, compiled at build time so the final output - * will only include regular CSS, no variables. - */ - -@import '../variables-light.css'; -@import '../parts/_core.css'; diff --git a/src/builds/light.css b/src/builds/light.css old mode 100644 new mode 100755 index 41dac0f..b7b8d26 --- a/src/builds/light.css +++ b/src/builds/light.css @@ -1,12 +1,6 @@ /** - * Light-themed version: - * uses light theme by default but switches to dark theme - * if a system-wide theme preference is set on the user's device. - * - * Variables will remain uncompiled so the theme can update dynamically - * at runtime in the browser. + * Forced light theme version */ @import '../variables-light.css'; -@import '../variables-dark.css' (prefers-color-scheme: dark); @import '../parts/_core.css'; diff --git a/src/builds/light.standalone.css b/src/builds/light.standalone.css deleted file mode 100755 index cfd3e83..0000000 --- a/src/builds/light.standalone.css +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Standalone light-themed version. - * Includes light variables and core, left as CSS variables - * so the theming can be adjusted at runtime. - */ - -@import '../variables-light.css'; -@import '../parts/_core.css'; diff --git a/src/builds/water.css b/src/builds/water.css new file mode 100644 index 0000000..32d2d02 --- /dev/null +++ b/src/builds/water.css @@ -0,0 +1,9 @@ +/** + * Automatic version: + * Uses light theme by default but switches to dark theme + * if a system-wide theme preference is set on the user's device. + */ + +@import '../variables-light.css'; +@import '../variables-dark.css' (prefers-color-scheme: dark); +@import '../parts/_core.css'; From 2c2926971001d80bf90371b6bf7b3b161367bf61 Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 27 May 2020 21:10:50 -0500 Subject: [PATCH 03/23] Fix some linting issues --- docs/style.css | 34 +++++++++++++++++++++--- gulpfile.js | 72 -------------------------------------------------- package.json | 2 +- 3 files changed, 32 insertions(+), 76 deletions(-) diff --git a/docs/style.css b/docs/style.css index 8ac913e..b7cae6a 100755 --- a/docs/style.css +++ b/docs/style.css @@ -13,12 +13,14 @@ html { .version-select__snippet h3 { margin: 1rem 2.5rem 1rem 0; } + /* Make the ✔ / ❌ Emoji appear next to the button */ .version-select__snippet__btn { position: relative; margin: 0 2px 0 auto; overflow: visible; } + .version-select__snippet__btn span { position: absolute; left: -2rem; @@ -29,19 +31,23 @@ html { .version-select__options > label { white-space: pre; } + .version-select__options > label:not(:last-of-type) { margin-right: 1rem; } + .version-select__options__additional, .version-select__options__additional > *:not(summary) { display: block; margin: 1rem 0; } + .version-select__options__additional summary { outline: none; cursor: pointer; font-weight: 600; } + .version-select__options__additional summary:hover span, .version-select__options__additional summary:focus span { text-decoration: underline; @@ -50,6 +56,7 @@ html { .version-select__info caption { text-align: left; } + .version-select__info th { border: none; vertical-align: top; @@ -69,22 +76,40 @@ body > footer { align-items: center; justify-content: space-between; } + .emoji { /* Use proper Emoji instead of plain Unicode chars */ - font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, - Helvetica Neue, sans-serif; + font-family: + 'Segoe UI Emoji', + 'Apple Color Emoji', + 'Noto Color Emoji', + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Oxygen, + Ubuntu, + Cantarell, + Fira Sans, + Droid Sans, + Helvetica Neue, + sans-serif; } + .opacity-4 { opacity: 0.4; } + .opacity-7 { opacity: 0.76; } + .tooltip { position: relative; cursor: help; } + .tooltip::after { content: ''; position: absolute; @@ -100,13 +125,16 @@ body > footer { .v-leave-to { transform: scale(0) !important; } + .v-enter-active, .v-leave-active { transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } + [v-cloak] > * { display: none; } + [v-cloak]::after { content: 'Version picker is loading...'; } diff --git a/gulpfile.js b/gulpfile.js index 80104f1..dde5df2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -53,11 +53,6 @@ const formatByteMessage = (source, data) => { } const style = () => { - // const isLegacy = (path) => /legacy/.test(path) - - // const excludeModern = filter(file => isLegacy(file.path), { restore: true }) - // const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true }) - // Don't inline minified versions, so builds can lazily import them at runtime const cssImportOptions = { filter: (path) => !/\.min/.test(path) } @@ -99,73 +94,6 @@ const style = () => { .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' })) .pipe(browserSync.stream()) ) - - // return gulp.parallel( - // gulp.src(paths.styles.src) - // .pipe(sourcemaps.init()) - // ) - - return ( - gulp - .src(paths.styles.src) - // Add sourcemaps - .pipe(sourcemaps.init()) - // Resolve imports, calculated colors and inlined SVG files - .pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction(), postcssInlineSvg()])) - - // * Process legacy builds * - .pipe(excludeModern) - // Inline variable values so CSS works in legacy browsers - .pipe(postcss([postcssCssVariables()])) - // Calculate size before autoprefixing - .pipe(bytediff.start()) - // autoprefix - .pipe(postcss([autoprefixer({ - env: 'legacy' - })])) - // Write the amount gained by autoprefixing - .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) - .pipe(excludeModern.restore) - - // * Process modern builds * - .pipe(excludeLegacy) - // Calculate size before autoprefixing - .pipe(bytediff.start()) - // autoprefix modern builds - .pipe(postcss([autoprefixer({ - env: 'modern' - })])) - // Write the amount gained by autoprefixing - .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) - .pipe(excludeLegacy.restore) - - // Write the sourcemaps after making pre-minified changes - .pipe(sourcemaps.write('.')) - // Flatten output so files end up in dist/*, not dist/builds/* - .pipe(flatten()) - // Write pre-minified styles - .pipe(gulp.dest(paths.styles.dest)) - // Remove sourcemaps from the pipeline, only keep css - .pipe(filter('**/*.css')) - // Calculate size before minifying - .pipe(bytediff.start()) - // Minify using cssnano, use extra-low precision while minifying inline SVGs - .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })])) - // Write the amount saved by minifying - .pipe(bytediff.stop((data) => formatByteMessage('cssnano', data))) - // Rename the files have the .min suffix - .pipe(rename({ suffix: '.min' })) - // Write the sourcemaps after making all changes - .pipe(sourcemaps.write('.')) - // Write the minified files - .pipe(gulp.dest(paths.styles.dest)) - // Output files to docs directory so documentation site can use them - .pipe(gulp.dest(paths.docs.dest + '/water.css')) - // Final size report including gzipped sizes - .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' })) - // Stream any changes to browserSync - .pipe(browserSync.stream()) - ) } const docs = () => { diff --git a/package.json b/package.json index e4b7bcb..e0bbfa7 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "gulp build", "dev": "gulp watch", "lint:js": "eslint **/*.js **/*.html gulpfile.js --fix", - "lint:css": "stylelint src/**/*.css --fix", + "lint:css": "stylelint src/**/*.css docs/style.css --fix", "lint": "yarn lint:js && yarn lint:css" }, "repository": { From 7e4251f5c160b64aaef71799c1253971fc7b746c Mon Sep 17 00:00:00 2001 From: Felix Date: Thu, 28 May 2020 14:40:02 -0500 Subject: [PATCH 04/23] Update docs pt.1 --- docs/index.html | 71 +++++++-- docs/script.js | 396 +++++++++++++++++++++++++++--------------------- docs/style.css | 84 +--------- 3 files changed, 289 insertions(+), 262 deletions(-) diff --git a/docs/index.html b/docs/index.html index abad607..9710379 100644 --- a/docs/index.html +++ b/docs/index.html @@ -10,7 +10,6 @@ content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer." /> - @@ -24,17 +23,13 @@ - - - + + + + @@ -48,7 +43,7 @@ /> @@ -87,16 +82,19 @@

Water.css is a drop-in collection of CSS styles to make simple websites like this just a little bit nicer. -
+

+

Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.

+
+

Installation

- +
+
+

Paste this into the <head> of your HTML:

+ +
+ + 
Oh noes, the JavaScript hasn't loaded!
+ +

Options

+
+ + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

Version info

+
File
Size (min + gzip)
Theme
Browser support
+

Goals

Installation

-
+

Paste this into the <head> of your HTML:

- 
Oh noes, the JavaScript hasn't loaded!
+

Options

diff --git a/docs/script.js b/docs/script.js index 02d72d0..3e79fb0 100644 --- a/docs/script.js +++ b/docs/script.js @@ -1,6 +1,5 @@ 'use strict' -const cdnBase = 'https://cdn.jsdelivr.net/npm/water.css@2/dist/' const localBase = './water.css/' const fileSizes = { @@ -10,10 +9,10 @@ const fileSizes = { } const themeForm = document.getElementById('theme-form') -const linkSnippet = document.getElementById('link-snippet') const stylesheet = document.getElementById('js-stylesheet') const startupStylesheet = document.getElementById('js-startup-stylesheet') const productHunt = document.getElementById('product-hunt') +const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre')) const table = { fileName: document.getElementById('table-file-name'), @@ -33,12 +32,14 @@ const updateTheme = () => { const theme = themeForm.querySelector('input[name="theme"]:checked').value const fileName = `${theme === 'auto' ? 'water' : theme}.min.css` - const cdnUrl = `${cdnBase}${fileName}` const localUrl = `${localBase}${fileName}` stylesheet.href = localUrl - linkSnippet.innerText = `` + for (const snippet of linkSnippets) { + snippet.hidden = snippet.id.indexOf(theme) === -1 + } + table.fileName.innerText = fileName table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb` diff --git a/docs/style.css b/docs/style.css index 34b20f8..88e1e80 100755 --- a/docs/style.css +++ b/docs/style.css @@ -6,10 +6,6 @@ html { margin-top: 1rem; } -.version-select { - overflow: hidden; -} - .version-select-snippet h3 { margin: 1rem 2.5rem 1rem 0; } @@ -67,4 +63,25 @@ body > footer { Droid Sans, Helvetica Neue, sans-serif; -} \ No newline at end of file +} + +#link-snippet-container { + overflow: hidden; + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr; +} + +#link-snippet-container > pre { + overflow: auto; + grid-column: 1; + grid-row: 1; + transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 220ms; +} + +#link-snippet-container > pre[hidden] { + display: block; + visibility: hidden; + transform: scale(0); + transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0ms 220ms; +} From c938689a7ea4eec8826502bcc9d961d7e1e03cf6 Mon Sep 17 00:00:00 2001 From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com> Date: Sat, 30 May 2020 04:27:57 +0200 Subject: [PATCH 18/23] feat: wire up copy button --- docs/index.html | 8 +++++++- docs/script.js | 13 +++++++++++++ docs/style.css | 4 ++-- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/docs/index.html b/docs/index.html index 3fe3f07..68d9db5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -57,6 +57,11 @@ } + + - - From 4af11172f13c8f0f89276808cd832bd490284cb6 Mon Sep 17 00:00:00 2001 From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com> Date: Sat, 30 May 2020 04:46:54 +0200 Subject: [PATCH 21/23] feat: remove misleading note about browser support --- docs/index.html | 5 ----- docs/script.js | 12 +++--------- 2 files changed, 3 insertions(+), 14 deletions(-) diff --git a/docs/index.html b/docs/index.html index e1b6acc..78b816b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -168,11 +168,6 @@ Theme - - - Browser support - -
diff --git a/docs/script.js b/docs/script.js index 8b43794..314b194 100644 --- a/docs/script.js +++ b/docs/script.js @@ -19,8 +19,7 @@ const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-cont const table = { fileName: document.getElementById('table-file-name'), fileSize: document.getElementById('table-file-size'), - theme: document.getElementById('table-theme'), - browserSupport: document.getElementById('table-browser-support') + theme: document.getElementById('table-theme') } const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)') @@ -49,16 +48,11 @@ const updateTheme = () => { if (theme === 'auto') { table.theme.innerHTML = ` - Defaults to light, but respects user-defined theme settings.
- (detected via prefers-color-scheme) - ` - table.browserSupport.innerHTML = ` - All current browsers - (support for CSS Custom Properties) + Respects user-defined theme settings using prefers-color-scheme.
+ Light in browsers where the theme settings can't be detected. ` } else { table.theme.innerText = `Theme is forced to ${theme}.` - table.browserSupport.innerText = 'All browsers (including Internet Explorer)' } } From 30cbcfa4921ca2447597ef2c3a09aba2cdcc9db3 Mon Sep 17 00:00:00 2001 From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com> Date: Sat, 30 May 2020 05:09:52 +0200 Subject: [PATCH 22/23] fix: no bouncey transition, max scale 1 --- docs/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/style.css b/docs/style.css index 034dd22..ba7c144 100755 --- a/docs/style.css +++ b/docs/style.css @@ -35,14 +35,14 @@ html { overflow: auto; grid-column: 1; grid-row: 1; - transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 220ms; + transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1) 220ms; } #link-snippet-container > pre[hidden] { display: block; visibility: hidden; transform: scale(0); - transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0ms 220ms; + transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1), visibility 0ms 220ms; } #theme-form > label:not(:last-of-type) { From 827691d5513ea52dfbc5cfc403ee28597a6ee548 Mon Sep 17 00:00:00 2001 From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com> Date: Sat, 30 May 2020 05:16:45 +0200 Subject: [PATCH 23/23] fix: allow overriding product hunt theme --- docs/script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/script.js b/docs/script.js index 314b194..4e9f01f 100644 --- a/docs/script.js +++ b/docs/script.js @@ -24,8 +24,8 @@ const table = { const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)') -const updateProductHunt = () => { - const theme = prefersColorScheme.matches ? 'light' : 'dark' +const updateProductHunt = (theme) => { + theme = theme || (prefersColorScheme.matches ? 'light' : 'dark') productHunt.src = `https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=${theme}&period=daily` } @@ -44,14 +44,14 @@ const updateTheme = () => { table.fileName.innerText = fileName table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb` - updateProductHunt() - if (theme === 'auto') { + updateProductHunt() table.theme.innerHTML = ` Respects user-defined theme settings using prefers-color-scheme.
Light in browsers where the theme settings can't be detected. ` } else { + updateProductHunt(theme) table.theme.innerText = `Theme is forced to ${theme}.` } }