From 6bf48e1615eef27cac94510b636e5cfc422b0af0 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Fri, 31 May 2019 03:31:15 +0200
Subject: [PATCH] refactor: add HTML processing, picker as partial
---
dist/docs/index.html | 359 +-----------------
dist/docs/style.css | 2 +-
dist/docs/style.css.map | 2 +-
docs/index.html | 121 +-----
docs/style.css | 7 +-
docs/versionpicker.html | 115 ++++++
gulpfile.js | 45 ++-
package.json | 5 +-
yarn.lock | 810 +++++++++++++++++++++++++++++++++++++++-
9 files changed, 954 insertions(+), 512 deletions(-)
create mode 100755 docs/versionpicker.html
diff --git a/dist/docs/index.html b/dist/docs/index.html
index 8cb789c..17ccabd 100644
--- a/dist/docs/index.html
+++ b/dist/docs/index.html
@@ -1,357 +1,2 @@
-
-
-
- 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.
-
-
-
-
-
-
Installation
-
-
-
- Paste this into the <head> of your HTML:
-
-
- ✔
- ❌
-
- Copy to clipboard
-
-
-
-
- {{selectedVersion.fileSnippet}}
-
-
Version options:
-
-
-
Version info:
-
-
-
- File
- {{ selectedVersion.fileName }}
-
-
- Size (min+gzip)
- {{ selectedVersion.fileSize }}KB
-
-
- Theme
-
-
- 🌙
- ☀
- {{ versionOptions.theme | capitalize }}
-
-
-
-
- 🌙 / ☀
-
-
- ☀ / 🌙
-
- Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
- (detected via prefers-color-scheme)
-
-
-
-
-
-
-
- Browser support
-
-
- All browsers (including Internet Explorer)
-
-
- All current browsers (support for CSS Custom Properties )
-
-
-
-
-
-
-
Goals
-
- Responsive
- Good code quality
- Good browser support
- Small size (< 2kb)
- Beautiful
- No classes
-
-
- 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!
-
-
-
-
- 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.Other
- 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
-
-
-
-
- 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."
-
-
- MDN, "The Block Quotation element"
-
-
-
-
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
-
-
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
-
-
- 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 just-add-css collection of styles to make simple websites like this just a little bit nicer.
Installation Paste this into the <head> of your HTML: ✔ ❌ Copy to clipboard {{selectedVersion.fileSnippet}} Version options: Version info: File {{ selectedVersion.fileName }} Size (min+gzip) {{ selectedVersion.fileSize }}KB Theme 🌙 ☀ {{ versionOptions.theme | capitalize }} 🌙 / ☀ ☀ / 🌙 Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings. (detected via prefers-color-scheme) Browser support All browsers (including Internet Explorer) All current browsers (support for CSS Custom Properties )
+
Goals Responsive Good code quality Good browser support Small size (< 2kb) Beautiful No classes 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!
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.Other 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
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." MDN, "The Block Quotation element" Unordered list item 1 Unordered list item 2 Unordered list item 3 Ordered list item 1 Ordered list item 2 Ordered list item 3 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
\ No newline at end of file
diff --git a/dist/docs/style.css b/dist/docs/style.css
index b185cd1..1ffb6f2 100755
--- a/dist/docs/style.css
+++ b/dist/docs/style.css
@@ -1,2 +1,2 @@
-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%}body>footer{padding-top:2rem;display:flex;justify-content:flex-end;align-items:flex-end}.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)!important}.v-enter-active,.v-leave-active{transition:transform .22s cubic-bezier(.175,.885,.32,1.275)}[v-cloak]>:not(h2){display:none}[v-cloak]:after{content:"Version picker is loading..."}
+html{scroll-behavior:smooth}#js-producthunt{margin-top:1rem}#installation{overflow:hidden}#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%}body>footer{padding-top:2rem;display:flex;justify-content:flex-end;align-items:flex-end}.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:.4}.v-enter,.v-leave-to{transform:scale(0)!important}.v-enter-active,.v-leave-active{transition:transform .22s cubic-bezier(.175,.885,.32,1.275)}[v-cloak]>*{display:none}[v-cloak]:after{content:"Version picker is loading..."}
/*# sourceMappingURL=style.css.map */
diff --git a/dist/docs/style.css.map b/dist/docs/style.css.map
index 2311f6b..bd4b3c5 100644
--- a/dist/docs/style.css.map
+++ b/dist/docs/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,KACE,sBACF,CAEA,gBACE,eACF,CAEA,wBACE,yBACF,CAEA,4BACE,iBAAkB,CAClB,gBAAiB,CACjB,gBACF,CACA,iCACE,iBAAkB,CAClB,UAAW,CACX,oBAAqB,CACrB,oBACF,CAEA,oBACE,kBACF,CACA,uBACE,WAAY,CACZ,kBAAmB,CACnB,SACF,CAEA,YACE,gBAAiB,CACjB,YAAa,CACb,wBAAyB,CACzB,oBACF,CAGA,KACE,YAAa,CACb,cAAe,CACf,kBAAmB,CACnB,6BACF,CAGA,OACE,+LAGF,CACA,aACE,UACF,CAGA,qBAEE,4BACF,CACA,gCAEE,2DACF,CACA,mBACE,YACF,CACA,gBACE,sCACF","file":"style.css","sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\n#js-producthunt {\n margin-top: 1rem;\n}\n\n#installation header > h3 {\n margin: 1rem 2.5rem 1rem 0;\n}\n/* Make the ✔ / ❌ Emoji appear next to the button */\n#installation header button {\n position: relative;\n margin-left: auto;\n overflow: visible;\n}\n#installation header button span {\n position: absolute;\n left: -2rem;\n display: inline-block;\n transform: scale(1.3);\n}\n/* Fixed layout so columns don't jump when content changes */\n#installation table {\n table-layout: fixed;\n}\n#installation table th {\n border: none;\n vertical-align: top;\n width: 35%;\n}\n\nbody > footer {\n padding-top: 2rem;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n}\n\n/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */\n.row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n}\n\n/* Use proper Emoji instead of plain Unicode chars */\n.emoji {\n font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,\n BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,\n Helvetica Neue, sans-serif;\n}\n.translucent {\n opacity: 0.5;\n}\n\n/* For the bounce transitions of code snippet and copy success Emoji */\n.v-enter,\n.v-leave-to {\n transform: scale(0) !important;\n}\n.v-enter-active,\n.v-leave-active {\n transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n[v-cloak] > *:not(h2) {\n display: none;\n}\n[v-cloak]::after {\n content: 'Version picker is loading...';\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,KACE,sBACF,CAEA,gBACE,eACF,CAEA,cACE,eACF,CACA,wBACE,yBACF,CAEA,4BACE,iBAAkB,CAClB,gBAAiB,CACjB,gBACF,CACA,iCACE,iBAAkB,CAClB,UAAW,CACX,oBAAqB,CACrB,oBACF,CAEA,oBACE,kBACF,CACA,uBACE,WAAY,CACZ,kBAAmB,CACnB,SACF,CAEA,YACE,gBAAiB,CACjB,YAAa,CACb,wBAAyB,CACzB,oBACF,CAGA,KACE,YAAa,CACb,cAAe,CACf,kBAAmB,CACnB,6BACF,CAGA,OACE,+LAGF,CACA,aACE,UACF,CAGA,qBAEE,4BACF,CACA,gCAEE,2DACF,CACA,YACE,YACF,CACA,gBACE,sCACF","file":"style.css","sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\n#js-producthunt {\n margin-top: 1rem;\n}\n\n#installation {\n overflow: hidden;\n}\n#installation header > h3 {\n margin: 1rem 2.5rem 1rem 0;\n}\n/* Make the ✔ / ❌ Emoji appear next to the button */\n#installation header button {\n position: relative;\n margin-left: auto;\n overflow: visible;\n}\n#installation header button span {\n position: absolute;\n left: -2rem;\n display: inline-block;\n transform: scale(1.3);\n}\n/* Fixed layout so columns don't jump when content changes */\n#installation table {\n table-layout: fixed;\n}\n#installation table th {\n border: none;\n vertical-align: top;\n width: 35%;\n}\n\nbody > footer {\n padding-top: 2rem;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n}\n\n/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */\n.row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n}\n\n/* Use proper Emoji instead of plain Unicode chars */\n.emoji {\n font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,\n BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,\n Helvetica Neue, sans-serif;\n}\n.translucent {\n opacity: 0.4;\n}\n\n/* For the bounce transitions of code snippet and copy success Emoji */\n.v-enter,\n.v-leave-to {\n transform: scale(0) !important;\n}\n.v-enter-active,\n.v-leave-active {\n transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n[v-cloak] > * {\n display: none;\n}\n[v-cloak]::after {\n content: 'Version picker is loading...';\n}\n"]}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 4263163..f9210de 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -82,125 +82,8 @@
-
-
-
Installation
-
-
-
- Paste this into the <head> of your HTML:
-
-
- ✔
- ❌
-
- Copy to clipboard
-
-
-
-
- {{selectedVersion.fileSnippet}}
-
-
Version options:
-
-
-
Version info:
-
-
-
- File
- {{ selectedVersion.fileName }}
-
-
- Size (min+gzip)
- {{ selectedVersion.fileSize }}KB
-
-
- Theme
-
-
- 🌙
- ☀
- {{ versionOptions.theme | capitalize }}
-
-
-
-
- 🌙 / ☀
-
-
- ☀ / 🌙
-
- Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
- (detected via prefers-color-scheme)
-
-
-
-
-
-
-
- Browser support
-
-
- All browsers (including Internet Explorer)
-
-
- All current browsers (support for CSS Custom Properties )
-
-
-
-
-
-
-
Installation
+ Goals
diff --git a/docs/style.css b/docs/style.css
index cd7c3c0..06fa519 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -6,6 +6,9 @@ html {
margin-top: 1rem;
}
+#installation {
+ overflow: hidden;
+}
#installation header > h3 {
margin: 1rem 2.5rem 1rem 0;
}
@@ -53,7 +56,7 @@ body > footer {
Helvetica Neue, sans-serif;
}
.translucent {
- opacity: 0.5;
+ opacity: 0.4;
}
/* For the bounce transitions of code snippet and copy success Emoji */
@@ -65,7 +68,7 @@ body > footer {
.v-leave-active {
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
-[v-cloak] > *:not(h2) {
+[v-cloak] > * {
display: none;
}
[v-cloak]::after {
diff --git a/docs/versionpicker.html b/docs/versionpicker.html
new file mode 100755
index 0000000..ee9f378
--- /dev/null
+++ b/docs/versionpicker.html
@@ -0,0 +1,115 @@
+
+
+
+ Paste this into the <head> of your HTML:
+
+
+ ✔
+ ❌
+
+ Copy to clipboard
+
+
+
+
+ {{selectedVersion.fileSnippet}}
+
+
Version options:
+
+
+
Version info:
+
+
+
+ File
+ {{ selectedVersion.fileName }}
+
+
+ Size (min+gzip)
+ {{ selectedVersion.fileSize }}KB
+
+
+ Theme
+
+
+ 🌙
+ ☀
+ {{ versionOptions.theme | capitalize }}
+
+
+
+
+ 🌙 / ☀
+
+
+ ☀ / 🌙
+
+
+ Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
+ (detected via prefers-color-scheme)
+
+
+
+
+
+
+
+ Browser support
+
+
+ All browsers (including Internet Explorer)
+
+
+ All current browsers (support for CSS Custom Properties )
+
+
+
+
+
+
-
-