From 44e5a55736c4ff99d404441936b055483ed9c42d Mon Sep 17 00:00:00 2001 From: kj_sh604 Date: Sat, 14 Feb 2026 12:39:43 -0500 Subject: fork: initial commit, derived from water.css (d950cbc) --- docs/icons/android-chrome-192x192.png | Bin 0 -> 11974 bytes docs/icons/android-chrome-512x512.png | Bin 0 -> 18630 bytes docs/icons/apple-touch-icon.png | Bin 0 -> 6610 bytes docs/icons/browserconfig.xml | 12 ++ docs/icons/favicon-16x16.png | Bin 0 -> 1591 bytes docs/icons/favicon-32x32.png | Bin 0 -> 2371 bytes docs/icons/favicon.ico | Bin 0 -> 15086 bytes docs/icons/light-favicon-16x16.png | Bin 0 -> 1415 bytes docs/icons/light-favicon-32x32.png | Bin 0 -> 1937 bytes docs/icons/light-favicon.ico | Bin 0 -> 15086 bytes docs/icons/mstile-150x150.png | Bin 0 -> 7658 bytes docs/icons/mstile-310x150.png | Bin 0 -> 8250 bytes docs/icons/mstile-310x310.png | Bin 0 -> 16721 bytes docs/icons/mstile-70x70.png | Bin 0 -> 5411 bytes docs/icons/safari-pinned-tab.svg | 22 +++ docs/index.html | 363 ++++++++++++++++++++++++++++++++++ docs/script.js | 88 +++++++++ docs/site.webmanifest | 20 ++ docs/style.css | 65 ++++++ 19 files changed, 570 insertions(+) create mode 100755 docs/icons/android-chrome-192x192.png create mode 100755 docs/icons/android-chrome-512x512.png create mode 100755 docs/icons/apple-touch-icon.png create mode 100755 docs/icons/browserconfig.xml create mode 100755 docs/icons/favicon-16x16.png create mode 100755 docs/icons/favicon-32x32.png create mode 100755 docs/icons/favicon.ico create mode 100755 docs/icons/light-favicon-16x16.png create mode 100755 docs/icons/light-favicon-32x32.png create mode 100755 docs/icons/light-favicon.ico create mode 100755 docs/icons/mstile-150x150.png create mode 100755 docs/icons/mstile-310x150.png create mode 100755 docs/icons/mstile-310x310.png create mode 100755 docs/icons/mstile-70x70.png create mode 100755 docs/icons/safari-pinned-tab.svg create mode 100644 docs/index.html create mode 100644 docs/script.js create mode 100755 docs/site.webmanifest create mode 100755 docs/style.css (limited to 'docs') diff --git a/docs/icons/android-chrome-192x192.png b/docs/icons/android-chrome-192x192.png new file mode 100755 index 0000000..5167499 Binary files /dev/null and b/docs/icons/android-chrome-192x192.png differ diff --git a/docs/icons/android-chrome-512x512.png b/docs/icons/android-chrome-512x512.png new file mode 100755 index 0000000..d231e0b Binary files /dev/null and b/docs/icons/android-chrome-512x512.png differ diff --git a/docs/icons/apple-touch-icon.png b/docs/icons/apple-touch-icon.png new file mode 100755 index 0000000..4aacc52 Binary files /dev/null and b/docs/icons/apple-touch-icon.png differ diff --git a/docs/icons/browserconfig.xml b/docs/icons/browserconfig.xml new file mode 100755 index 0000000..d649dd8 --- /dev/null +++ b/docs/icons/browserconfig.xml @@ -0,0 +1,12 @@ + + + + + + + + + #00aba9 + + + diff --git a/docs/icons/favicon-16x16.png b/docs/icons/favicon-16x16.png new file mode 100755 index 0000000..2ab553a Binary files /dev/null and b/docs/icons/favicon-16x16.png differ diff --git a/docs/icons/favicon-32x32.png b/docs/icons/favicon-32x32.png new file mode 100755 index 0000000..547ba5a Binary files /dev/null and b/docs/icons/favicon-32x32.png differ diff --git a/docs/icons/favicon.ico b/docs/icons/favicon.ico new file mode 100755 index 0000000..4810c23 Binary files /dev/null and b/docs/icons/favicon.ico differ diff --git a/docs/icons/light-favicon-16x16.png b/docs/icons/light-favicon-16x16.png new file mode 100755 index 0000000..c77529f Binary files /dev/null and b/docs/icons/light-favicon-16x16.png differ diff --git a/docs/icons/light-favicon-32x32.png b/docs/icons/light-favicon-32x32.png new file mode 100755 index 0000000..5d0fed3 Binary files /dev/null and b/docs/icons/light-favicon-32x32.png differ diff --git a/docs/icons/light-favicon.ico b/docs/icons/light-favicon.ico new file mode 100755 index 0000000..3f6ca95 Binary files /dev/null and b/docs/icons/light-favicon.ico differ diff --git a/docs/icons/mstile-150x150.png b/docs/icons/mstile-150x150.png new file mode 100755 index 0000000..b37065c Binary files /dev/null and b/docs/icons/mstile-150x150.png differ diff --git a/docs/icons/mstile-310x150.png b/docs/icons/mstile-310x150.png new file mode 100755 index 0000000..379ebd7 Binary files /dev/null and b/docs/icons/mstile-310x150.png differ diff --git a/docs/icons/mstile-310x310.png b/docs/icons/mstile-310x310.png new file mode 100755 index 0000000..e1230b3 Binary files /dev/null and b/docs/icons/mstile-310x310.png differ diff --git a/docs/icons/mstile-70x70.png b/docs/icons/mstile-70x70.png new file mode 100755 index 0000000..6282b8b Binary files /dev/null and b/docs/icons/mstile-70x70.png differ diff --git a/docs/icons/safari-pinned-tab.svg b/docs/icons/safari-pinned-tab.svg new file mode 100755 index 0000000..2f1cf28 --- /dev/null +++ b/docs/icons/safari-pinned-tab.svg @@ -0,0 +1,22 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..d9ec359 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,363 @@ + + + + + + Water.css + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Water.css

+ +

+ 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. +

+ +
+
+ Get it already! +
+ GitHub +
+ + + Water.css - Make your tiny website just a little nicer | Product Hunt Embed + +
+ +

Installation

+
+
+ + +
+ + + +

Options

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

Version info

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

Goals

+ + +

Is it responsive?

+

+ Heck yeah! It doesn't include any fancy styles so it's easily mobile + responsive. Just add the famous + responsive viewport tag and + you'll be good to go! +

+

In fact, try resizing this page. Everything flows super nicely as you'll see.

+ +

Bookmarklet

+

+ A bookmarklet is a snippet of JavaScript that sits in your bookmarks bar. +

+

+ The Waterize bookmarklet can be used to make ugly websites more readable by replacing the styles with Water.css. Just drag this link to your bookmarks bar: +

+ + + Waterize + + + +

Element demos

+

This is supposed to be a demo page so we need more elements!

+ +

Form elements

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

Code

+

+ Below is some code, you can copy it with Ctrl-C. Did you know, + alert(1) can show an alert in JavaScript! +

+ 
// This logs a message to the console and check out the scrollbar.
console.log('Hello, world!')
+ +

Other

+

Here's a horizontal rule and image because I don't know where else to put them.

+ Example kitten +
+ +

And here's a nicely marked up table!

+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameQuantityPrice
Godzilla2$299.99
Mozilla10$100,000.00
Quesadilla1$2.22
+ +
+ Some summary/details can't hurt! +

Lorem ipsum dolor sit blah blah.

+
+ +

The dialog (form, and menu) tag

+ +
+ + +
+ + +
This is a sample dialog
+
+

What is your favorite pet animal?

+ + + + + +
+ + +

Typography

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis + ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis + ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu + felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui + aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos himenaeos. + This is strong, this is normal, this is just bold, + and this is emphasized! And heck, here's a link. +

+ +
+ "The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed + text is an extended quotation. Usually, this is rendered visually by indentation (see + Notes + for how to change it). A URL for the source of the quotation may be given using the + cite attribute, while a text representation of the source can be given using the + <cite> cite element." + + +
+ + +
    +
  1. Ordered list item 1
    2. +
  2. Ordered list item 2
    3. +
  3. Ordered list item 3
    4. +
+ +

Addresses are also styled to be awesome!

+
+ john.doe@example.com
+ 778-330-2389
+ 666-666-6666
+
+ +
+ +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ + + + + diff --git a/docs/script.js b/docs/script.js new file mode 100644 index 0000000..fb821c0 --- /dev/null +++ b/docs/script.js @@ -0,0 +1,88 @@ +'use strict' + +const localBase = './water.css/' + +const fileSizes = { + dark: 2.57, + light: 2.55, + auto: 3.27 +} + +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 localUrl = `${localBase}${fileName}` + + stylesheet.href = localUrl + + for (const snippet of linkSnippets) { + snippet.hidden = snippet.id.indexOf(theme) === -1 + } + + 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 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}.` + } +} + +themeForm.addEventListener('change', updateTheme) + +updateProductHunt() +prefersColorScheme.addListener(() => { + if (themeForm.theme.value !== 'auto') return + updateProductHunt() +}) + +updateTheme() +startupStylesheet.parentElement.removeChild(startupStylesheet) + +copyButton.addEventListener('click', () => { + const clipboard = navigator.clipboard || window.clipboard + const theme = themeForm.querySelector('input[name="theme"]:checked').value + const snippetText = document.querySelector(`#link-snippet-${theme} code`).textContent + + clipboard.writeText(snippetText) + .then(() => { copyButtonFeedback.textContent = '✔' }) + .catch(() => { copyButtonFeedback.textContent = '❌' }) + .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000)) +}) + +document.getElementById('dialog-trigger').addEventListener('click', () => { + document.getElementById('dialog-result').innerText = '' + document.getElementById('dialog').showModal() +}) + +document.getElementById('dialog').addEventListener('close', (event) => { + document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}` +}) diff --git a/docs/site.webmanifest b/docs/site.webmanifest new file mode 100755 index 0000000..e59d2da --- /dev/null +++ b/docs/site.webmanifest @@ -0,0 +1,20 @@ +{ + "name": "Water.css", + "short_name": "Water.css", + "start_url": "./", + "icons": [ + { + "src": "./icons/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "./icons/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/docs/style.css b/docs/style.css new file mode 100755 index 0000000..a0c3fc9 --- /dev/null +++ b/docs/style.css @@ -0,0 +1,65 @@ +html { + scroll-behavior: smooth; +} + +#product-hunt { + margin-top: 1rem; +} + +#link-snippet-headline { + margin: 1rem 2.5rem 1rem 0; +} + +/* Make the feedback Emoji appear next to the button */ +#copy-button { + position: relative; + margin-right: 2px; + overflow: visible; +} + +#copy-button-feedback { + position: absolute; + left: -2rem; + display: inline-block; + transform: scale(1.3); +} + +#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) 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), visibility 0ms 220ms; +} + +#theme-form > label:not(:last-of-type) { + margin-right: 1rem; +} + +#version-info th { + width: 35%; +} + +body > footer { + text-align: right; +} + +.row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} -- cgit v1.2.3