diff --git a/docs/index.html b/docs/index.html index d9ec359..ca917e4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,363 +1,371 @@ - - - - - - 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
- - - - - + + + + + + + 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/style.css b/docs/style.css index a0c3fc9..a020915 100755 --- a/docs/style.css +++ b/docs/style.css @@ -1,65 +1,73 @@ -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; -} +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; +} +#push:hover{ + animation: pulse 0.3s linear 1; +} +@keyframes push{ + 80% {transform: scale(0.8); + + } +} + +#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; +}