aboutsummaryrefslogtreecommitdiffstats
path: root/docs/script.js
diff options
context:
space:
mode:
Diffstat (limited to 'docs/script.js')
-rw-r--r--docs/script.js32
1 files changed, 4 insertions, 28 deletions
diff --git a/docs/script.js b/docs/script.js
index fb821c0..40b9996 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -1,38 +1,23 @@
'use strict'
-const localBase = './water.css/'
-
-const fileSizes = {
- dark: 2.57,
- light: 2.55,
- auto: 3.27
-}
+const localBase = './noir.css/'
const themeForm = document.getElementById('theme-form')
const stylesheet = document.getElementById('js-stylesheet')
const startupStylesheet = document.getElementById('js-startup-stylesheet')
-const productHunt = document.getElementById('product-hunt')
const copyButton = document.getElementById('copy-button')
const copyButtonFeedback = document.getElementById('copy-button-feedback')
const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
const table = {
fileName: document.getElementById('table-file-name'),
- fileSize: document.getElementById('table-file-size'),
theme: document.getElementById('table-theme')
}
-const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
-
-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`
-}
-
const updateTheme = () => {
const theme = themeForm.querySelector('input[name="theme"]:checked').value
- const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
+ const fileName = `${theme === 'auto' ? 'noir' : theme}.min.css`
const localUrl = `${localBase}${fileName}`
stylesheet.href = localUrl
@@ -42,28 +27,19 @@ const updateTheme = () => {
}
table.fileName.innerText = fileName
- table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb`
if (theme === 'auto') {
- updateProductHunt()
table.theme.innerHTML = `
Respects user-defined theme settings using <a style="--links: var(--code)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" target="_blank" rel="noopener"><code>prefers-color-scheme</code></a>.<br>
Light in browsers where the theme settings can't be detected.
`
} else {
- updateProductHunt(theme)
table.theme.innerText = `Theme is forced to ${theme}.`
}
}
themeForm.addEventListener('change', updateTheme)
-updateProductHunt()
-prefersColorScheme.addListener(() => {
- if (themeForm.theme.value !== 'auto') return
- updateProductHunt()
-})
-
updateTheme()
startupStylesheet.parentElement.removeChild(startupStylesheet)
@@ -73,8 +49,8 @@ copyButton.addEventListener('click', () => {
const snippetText = document.querySelector(`#link-snippet-${theme} code`).textContent
clipboard.writeText(snippetText)
- .then(() => { copyButtonFeedback.textContent = '✔' })
- .catch(() => { copyButtonFeedback.textContent = '❌' })
+ .then(() => { copyButtonFeedback.textContent = '\u2714' })
+ .catch(() => { copyButtonFeedback.textContent = '\u274C' })
.then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
})