From 234152f181359190ceb831ade3fcb497a8c379e1 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Thu, 30 May 2019 22:13:57 +0200
Subject: [PATCH 001/131] feat: add new installation guide, move to docs/
---
README.md | 2 +-
.../icons}/android-chrome-192x192.png | Bin
.../icons}/android-chrome-512x512.png | Bin
{icons => docs/icons}/apple-touch-icon.png | Bin
docs/icons/browserconfig.xml | 12 +
{icons => docs/icons}/favicon-16x16.png | Bin
{icons => docs/icons}/favicon-32x32.png | Bin
{icons => docs/icons}/favicon.ico | Bin
{icons => docs/icons}/light-favicon-16x16.png | Bin
{icons => docs/icons}/light-favicon-32x32.png | Bin
{icons => docs/icons}/light-favicon.ico | Bin
{icons => docs/icons}/mstile-150x150.png | Bin
{icons => docs/icons}/mstile-310x150.png | Bin
{icons => docs/icons}/mstile-310x310.png | Bin
{icons => docs/icons}/mstile-70x70.png | Bin
{icons => docs/icons}/safari-pinned-tab.svg | 0
{icons => docs/icons}/site.webmanifest | 4 +-
docs/index.html | 318 ++++++++++++++++++
logo.png => docs/logo.png | Bin
logo.svg => docs/logo.svg | 0
screenshot.jpg => docs/screenshot.jpg | Bin
docs/script.js | 138 ++++++++
docs/style.css | 63 ++++
gulpfile.js | 8 +-
icons/browserconfig.xml | 12 -
index.html | 216 ------------
script.js | 114 -------
27 files changed, 537 insertions(+), 350 deletions(-)
rename {icons => docs/icons}/android-chrome-192x192.png (100%)
rename {icons => docs/icons}/android-chrome-512x512.png (100%)
rename {icons => docs/icons}/apple-touch-icon.png (100%)
create mode 100755 docs/icons/browserconfig.xml
rename {icons => docs/icons}/favicon-16x16.png (100%)
rename {icons => docs/icons}/favicon-32x32.png (100%)
rename {icons => docs/icons}/favicon.ico (100%)
rename {icons => docs/icons}/light-favicon-16x16.png (100%)
rename {icons => docs/icons}/light-favicon-32x32.png (100%)
rename {icons => docs/icons}/light-favicon.ico (100%)
rename {icons => docs/icons}/mstile-150x150.png (100%)
rename {icons => docs/icons}/mstile-310x150.png (100%)
rename {icons => docs/icons}/mstile-310x310.png (100%)
rename {icons => docs/icons}/mstile-70x70.png (100%)
rename {icons => docs/icons}/safari-pinned-tab.svg (100%)
rename {icons => docs/icons}/site.webmanifest (74%)
create mode 100644 docs/index.html
rename logo.png => docs/logo.png (100%)
rename logo.svg => docs/logo.svg (100%)
rename screenshot.jpg => docs/screenshot.jpg (100%)
create mode 100644 docs/script.js
create mode 100755 docs/style.css
delete mode 100755 icons/browserconfig.xml
delete mode 100644 index.html
delete mode 100644 script.js
diff --git a/README.md b/README.md
index f0b6e38..cbbc0b6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# Water.css
-[](https://watercss.netlify.com/)
+[](https://watercss.netlify.com/)
_A just-add-css collection of styles to make simple websites just a little nicer_
diff --git a/icons/android-chrome-192x192.png b/docs/icons/android-chrome-192x192.png
similarity index 100%
rename from icons/android-chrome-192x192.png
rename to docs/icons/android-chrome-192x192.png
diff --git a/icons/android-chrome-512x512.png b/docs/icons/android-chrome-512x512.png
similarity index 100%
rename from icons/android-chrome-512x512.png
rename to docs/icons/android-chrome-512x512.png
diff --git a/icons/apple-touch-icon.png b/docs/icons/apple-touch-icon.png
similarity index 100%
rename from icons/apple-touch-icon.png
rename to docs/icons/apple-touch-icon.png
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 @@
+
+
+ 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.
+
<head> of your HTML:{{selectedVersion.fileSnippet}}
+ | File | +{{ selectedVersion.fileName }} | +
|---|---|
| Size (min+gzip) | +{{ selectedVersion.fileSize }}KB | +
| Theme | ++ + 🌙 + ☀ + {{ versionOptions.theme | capitalize }} + + + + 🌙 / ☀ + ☀ / 🌙 + Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings + if set. + + Your device is currently set to {{ preferedColorScheme }} mode. + + + | +
| Browser support | ++ + All browsers including Internet Explorer + + + All current browsers (support for CSS Custom Properties) + + | +
+ 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.
+ +This is supposed to be a demo page so we need more elements!
+ +
+ 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!')
+
+ Here's a horizontal rule and image because I don't know where else to put them.
+And here's a nicely marked up table!
+| Name | +Quantity | +Price | +
|---|---|---|
| Godzilla | +2 | +$299.99 | +
| Mozilla | +10 | +$100,000.00 | +
| Quesadilla | +1 | +$2.22 | +
+ 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 ++ +citeattribute, while a text representation of the source can be given using the +<cite>cite element." + + +
Addresses are also styled to be awesome!
+ + john.doe@example.com- Water.css is a just-add-css collection of styles to make simple websites like this just a - little bit nicer. - Get it already! -
-- Now you can write your simple static site with nice semantic html, and Water.css will manage - the styling for you. -
-- 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. -
- - -- This is supposed to be a demo page so we need more elements! -
- -
- Below is some code, with a variable, you can copy it with Ctrl-C.
- Did you know, alert(1) can show an alert in JavaScript!
-
var myNumber = 0;
- // This logs a message to the console and check out the scrollbar.
console.log('Hello, world!')
-
- Here are some more keyboard buttons
-Press Ctrl + Shift + Print Screen to take a selected area screenshot on Linux.
-Here's a horizontal rule and image because I don't know where else to put them.
-And here's a nicely marked up table!
-| Name | -Quantity | -Price | -
|---|---|---|
| Godzilla | -2 | -$299.99 | -
| Mozilla | -10 | -$100,000.00 | -
| Quesadilla | -1 | -$2.22 | -
- 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 -- -citeattribute, while a text representation of the source - can be given using the<cite>cite element." - - -
Quotes (<q>) share the same style as blockquotes.- -
Use <mark> to highlight the important stuff.
- -- Addresses are also styled to be awesome! -
- - john.doe@example.com
+ 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.
+
+ 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.
+ +This is supposed to be a demo page so we need more elements!
+ +
+ 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!')
+
+ Here's a horizontal rule and image because I don't know where else to put them.
+And here's a nicely marked up table!
+| Name | +Quantity | +Price | +
|---|---|---|
| Godzilla | +2 | +$299.99 | +
| Mozilla | +10 | +$100,000.00 | +
| Quesadilla | +1 | +$2.22 | +
+ 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 ++ +citeattribute, while a text representation of the source can be given using the +<cite>cite element." + + +
Addresses are also styled to be awesome!
+ + john.doe@example.com!&u7_JRX4gac6AEE?>mv+IKo
ztZXC8roYGs(MA$be%yQ0R1)(MY!pMx7O!LSPz;g?&>ktdxszm`V}}#4k>kHii(GE~
zAW-s(R|@VNS=jFZf UF@t@Wy1dOGOReV7Ndl(I~2`>WF@^&AH~miwLx
zDJ%hu oTfmvv2 MJ0;R FbyWw^Ibg+%GpN$6Ztr+)w6S
z0=Du-5KGfx)0~;mo+27Fg8q4qf-#|*
z0|9U_k+>bEhz$%@fBZXubKvKetP!Xre0?B@;KFbMq9=F9e%+=U`Cp$$8^q{{Zuvn@
zH@|+cYX4_5rTAwVFccFKS3=R8(iy*j*GkheivIPk!EULy;|blN0El9dT@%lg_xAU@
zcTc9d@Gsb*5E@WYQa*_$<_UUC=X!q3oH{KCbbod653qv-Kn{SFQExT}qa#09st}bb
z9Dwp=l;_Wanz&;OfZ|s@&{NZGI+9oElrnHdy<8
+OD-;GN|2e7nC5tINFFu==G;EV=PhB28md
zxEqV}A&PU!7+s60Q1LuTgsF=6IMC8Jb%vR%pVF_U;>P>tJgdGh#Ssav=6`+7MBiLz
zB_%GZAg?ZWsq*2&hiMsAd}$8v0S3h^{)Ipx_tJEj4GY~p&$JCf`+~Q^|8cLunfnN|
z$;y(idd;uZ
J@;K=QJ
zKRaJ{7v>BPuz+}AJ0)IT{O!uOeoyQ9
Rj~JTT3BZaZ6D0LvZlYtrqET0O?41ea!fH^yr_
i6!EwkqucEw&IbwxJU+=-%%p+;lkCwKx6|Z!1_EWal9Z_mSQ|`y3Yl
zPIuAc#R4nNryRE0?=B{7O<*{(%J3K(`&AG4LhdRdjBj>rLJs~dWhG97-##(vTVrH+
zD?nx>mVGrsae*r1{=$H+OsQ8jqPu^tZqC*;Co);g8=V^PjHcK;6xhOJeDe23E=DoV
zc!O@hbTyH8X`ReTF8Sz(7unFKlZXcaPLTu+ZWp)b&=zXq0iuXzZP+=HlLTZX?9