diff --git a/dist/docs/index.html b/dist/docs/index.html new file mode 100644 index 0000000..903d5f4 --- /dev/null +++ b/dist/docs/index.html @@ -0,0 +1,329 @@ + + + + Water.css + + + + + + + + + + + + + + + + + + + +

Water.css

+ +

+ Water.css is a just-add-css collection of 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

+ +
+
+

Paste this into the <head> of your HTML:

+ +
+ + + 
{{selectedVersion.fileSnippet}}
+ + +

Version options:

+
+ + +

+ +

+ +
+ +

Version info:

+ + + + + + + + + + + + + + + + + + + +
File{{ selectedVersion.fileName }}
Size (min+gzip){{ selectedVersion.fileSize }}KB
Theme + + + +
Browser support + + +
+
+
+ + +

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.

+ +

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

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/dist/docs/logo.png b/dist/docs/logo.png new file mode 100644 index 0000000..37b80ce Binary files /dev/null and b/dist/docs/logo.png differ diff --git a/dist/docs/logo.svg b/dist/docs/logo.svg new file mode 100644 index 0000000..67c43f4 --- /dev/null +++ b/dist/docs/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/docs/screenshot.jpg b/dist/docs/screenshot.jpg new file mode 100644 index 0000000..4d7610c Binary files /dev/null and b/dist/docs/screenshot.jpg differ diff --git a/dist/docs/script.js b/dist/docs/script.js new file mode 100644 index 0000000..195543e --- /dev/null +++ b/dist/docs/script.js @@ -0,0 +1 @@ +"use strict";var e="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",t={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},n=function(e){var t=e.theme,n=e.isLegacy,r=e.isStandalone;return"".concat(t).concat(n?"-legacy":"").concat(r?".standalone":"",".min.css")},r=function(t){var r=t.theme,s=t.isLegacy,i=t.isStandalone,a=n({theme:r,isLegacy:s,isStandalone:i}),c='');if(!s||i)return c;var o="dark"===r?"dark":"light";return(function(t,n,r){return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n\n')}(n({theme:r,isLegacy:!0,isStandalone:!0}),n({theme:o,isLegacy:!0,isStandalone:!0}),o)+"\n\n"+c).trim()},s={_phImage:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),updateStylesheet:function(e){this._stylesheet.href=e},updateProductHunt:function(e){this._phImage.src=this._phImage.src.replace(/dark|light/,e)},update:function(e,t){var r=e.theme,s=e.isStandalone,i="../"+n(e),a=s?r:t||r;this.updateStylesheet(i),this.updateProductHunt(a)}},i=function(e,t){var n=matchMedia("(prefers-color-scheme: ".concat(e,")"));n.addListener(function(e){return t(e.matches)}),t(n.matches)};new Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:{theme:"dark",isStandalone:!1,isLegacy:!1},preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:n(this.versionOptions),fileSize:(e=this.versionOptions,t[n(e)]||"..."),fileSnippet:r(this.versionOptions)};var e}},created:function(){var e=this;i("dark",function(t){return t&&(e.preferedColorScheme="dark")}),i("light",function(t){return t&&(e.preferedColorScheme="light")}),this.preferedColorScheme&&s.updateProductHunt(this.preferedColorScheme)},methods:{copyToClipboard:function(){var e=this;Promise.resolve().then(function(){return clipboard.writeText(e.selectedVersion.fileSnippet)}).then(function(){return e.copyStatus="success"}).catch(function(){return e.copyStatus="failed"}),setTimeout(function(){return e.copyStatus=void 0},1e3)}},watch:{preferedColorScheme:function(e){s.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){s.update(e,this.preferedColorScheme)}}}}); \ No newline at end of file diff --git a/dist/docs/style.css b/dist/docs/style.css new file mode 100755 index 0000000..1ca4067 --- /dev/null +++ b/dist/docs/style.css @@ -0,0 +1 @@ +html{scroll-behavior:smooth}#js-producthunt{margin-top:1rem}#installation header>h3{margin:1rem 2.5rem 1rem 0}#installation header button{position:relative;margin-left:auto;overflow:visible}#installation header button span{position:absolute;left:-2rem;display:inline-block;transform:scale(1.3)}#installation table{table-layout:fixed}#installation table th{border:none;vertical-align:top;width:35%}.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.emoji{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}.translucent{opacity:.5}.v-enter,.v-leave-to{transform:scale(0)}.v-enter-active,.v-leave-active{transition:transform .22s cubic-bezier(.175,.885,.32,1.275)}[v-cloak]>*{display:none}[v-cloak]:before{content:"Version picker is loading..."} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 3c5d83a..80f4d91 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,8 +16,26 @@ - - + + + + + + + + @@ -64,10 +82,11 @@ +

Installation

-
+

Paste this into the <head> of your HTML: