From 79ad695531b4ac03b048de6ec62dbb6092dab92c Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Mon, 27 May 2019 22:41:36 +0200
Subject: [PATCH] feat: add build files, add docs/ and .github/

---
 .../CODE_OF_CONDUCT.md                        |   0
 .github/CONTRIBUTING.md                       |   1 +
 index.html => docs/index.html                 |  47 +++++++++++-----
 logo.png => docs/logo.png                     | Bin
 logo.svg => docs/logo.svg                     |   0
 screenshot.jpg => docs/screenshot.jpg         | Bin
 script.js => docs/script.js                   |   0
 gulpfile.js                                   |  53 +++++++++---------
 index.js                                      |   2 +-
 src/builds/dark-legacy.standalone.css         |   8 +++
 src/builds/dark.standalone.css                |   4 +-
 src/builds/light-legacy.standalone.css        |   8 +++
 src/builds/light.standalone.css               |   4 +-
 13 files changed, 80 insertions(+), 47 deletions(-)
 rename CODE_OF_CONDUCT.md => .github/CODE_OF_CONDUCT.md (100%)
 create mode 100755 .github/CONTRIBUTING.md
 rename index.html => docs/index.html (74%)
 rename logo.png => docs/logo.png (100%)
 rename logo.svg => docs/logo.svg (100%)
 rename screenshot.jpg => docs/screenshot.jpg (100%)
 rename script.js => docs/script.js (100%)
 create mode 100755 src/builds/dark-legacy.standalone.css
 create mode 100755 src/builds/light-legacy.standalone.css
diff --git a/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
similarity index 100%
rename from CODE_OF_CONDUCT.md
rename to .github/CODE_OF_CONDUCT.md
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
new file mode 100755
index 0000000..7f003bd
--- /dev/null
+++ b/.github/CONTRIBUTING.md
@@ -0,0 +1 @@
+> 💡 TODO: Add contributing guide
diff --git a/index.html b/docs/index.html
similarity index 74%
rename from index.html
rename to docs/index.html
index 727cb6f..a5e2472 100644
--- a/index.html
+++ b/docs/index.html
@@ -1,28 +1,36 @@
 <!DOCTYPE html>
 <html lang='en'>
+
   <head>
     <title>Water.css</title>
-    <link id='stylesheet' rel='stylesheet' href='dist/dark.css'>
+    <link id='stylesheet' rel='stylesheet' href='../dist/dark.css'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 
     <script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
     <script>
       window.dataLayer = window.dataLayer || []
-      function gtag(){dataLayer.push(arguments)}
+      function gtag() { dataLayer.push(arguments) }
       gtag('js', new Date())
       gtag('config', 'UA-116663597-6')
     </script>
   </head>
+
   <body>
     <h1>Water.css</h1>
     <p>
-      Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
+      Water.css is a just-add-css collection of styles to make simple websites like this just a
+      little bit nicer.
       <a href='https://github.com/kognise/water.css'>Get it already!</a>
     </p>
     <p>
-      Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
+      Now you can write your simple static site with nice semantic html, and Water.css will manage
+      the styling for you.
     </p>
-    <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img id='ph' src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
+    <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css'
+      target='_blank'><img id='ph'
+        src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily'
+        alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed'
+        style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
 
     <h2>Goals</h2>
     <ul>
@@ -36,8 +44,10 @@
 
     <h2>Is it responsive?</h2>
     <p>
-      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile responsive.
-      Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive viewport tag</a> and you'll be good to go!
+      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
+      responsive.
+      Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive
+        viewport tag</a> and you'll be good to go!
     </p>
     <p>
       In fact, try resizing this page. Everything flows super nicely as you'll see.
@@ -127,15 +137,23 @@
 
     <h3>Typography</h3>
     <p>
-      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.
-      <strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.
+      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.
+      <strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is
+        emphasized!</em> And heck, <a href='/'>here</a>'s a link.
     </p>
 
     <blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'>
       "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
-      <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
+      <a
+        href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
       for how to change it). A URL for the source of the quotation may be given using the
       <code>cite</code> attribute, while a text representation of the source
       can be given using the <code>&ltcite&gt</code> cite element."
@@ -160,9 +178,9 @@
       Addresses are also styled to be <strong>awesome</strong>!
     </p>
     <address>
-      <a href='mailto:john.doe@example.com'>john.doe@example.com</a><br/>
-      <a href='tel:778-330-2389'>778-330-2389</a><br/>
-      <a href='sms:666-666-6666'>666-666-6666</a><br/>
+      <a href='mailto:john.doe@example.com'>john.doe@example.com</a><br />
+      <a href='tel:778-330-2389'>778-330-2389</a><br />
+      <a href='sms:666-666-6666'>666-666-6666</a><br />
     </address>
 
     <h1>Heading 1</h1>
@@ -174,4 +192,5 @@
 
     <script src='script.js'></script>
   </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/logo.png b/docs/logo.png
similarity index 100%
rename from logo.png
rename to docs/logo.png
diff --git a/logo.svg b/docs/logo.svg
similarity index 100%
rename from logo.svg
rename to docs/logo.svg
diff --git a/screenshot.jpg b/docs/screenshot.jpg
similarity index 100%
rename from screenshot.jpg
rename to docs/screenshot.jpg
diff --git a/script.js b/docs/script.js
similarity index 100%
rename from script.js
rename to docs/script.js
diff --git a/gulpfile.js b/gulpfile.js
index fc7c619..01f8ad0 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,33 +5,36 @@ const cssnano = require('cssnano')
 const sourcemaps = require('gulp-sourcemaps')
 const bytediff = require('gulp-bytediff')
 const browserSync = require('browser-sync').create()
-const chalk = require('chalk');
-const rename = require('gulp-rename');
-const filter = require('gulp-filter');
+const chalk = require('chalk')
+const rename = require('gulp-rename')
+const filter = require('gulp-filter')
 const flatten = require('gulp-flatten')
 const sizereport = require('gulp-sizereport')
 const postcssCssVariables = require('postcss-css-variables')
 const postcssImport = require('postcss-import')
-const postcssColorModFunction = require('postcss-color-mod-function')
+const postcssColorModFunction = require('postcss-color-mod-function').bind(null, {
+  /* Use `.toRGBLegacy()` as other methods can result in lots of decimals */
+  stringifier: color => color.toRGBLegacy(),
+})
 
 const paths = {
   srcDir: 'src/*',
+  docsDir: 'docs/*',
   styles: { src: 'src/builds/*.css', dest: 'dist' },
-  html: { src: 'index.html' },
 }
 
 // https://stackoverflow.com/a/20732091
 function humanFileSize(size) {
-  var i = Math.floor(Math.log(size) / Math.log(1024));
-  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
-};
+  var i = Math.floor(Math.log(size) / Math.log(1024))
+  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
+}
 
 function formatByteMessage(source, data) {
   const prettyStartSize = humanFileSize(data.startSize)
-  let message = '';
+  let message = ''
 
   if (data.startSize !== data.endSize) {
-    const change = (data.savings > 0 ? 'saved' : 'gained')
+    const change = data.savings > 0 ? 'saved' : 'gained'
     const prettySavings = humanFileSize(Math.abs(data.savings))
     let prettyEndSize = humanFileSize(data.endSize)
 
@@ -41,16 +44,14 @@ function formatByteMessage(source, data) {
     message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
   } else message = chalk`kept original filesize. ({bold ${prettyStartSize}})`
 
-  return chalk`{cyan ${(source.padStart(12, ' '))}}: {bold ${data.fileName}} ${message}`
+  return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
 }
 
 function style() {
-  const isLegacyOrStandalone = path => /standalone|legacy/.test(path)
+  const isLegacy = path => /legacy/.test(path)
 
-  const excludeModern = filter(file => isLegacyOrStandalone(file.path), { restore: true })
-  const excludeLegacy = filter(file => !isLegacyOrStandalone(file.path), { restore: true })
-
-  const postcssColorMod = postcssColorModFunction({ stringifier: color => color.toRGBLegacy() })
+  const excludeModern = filter(file => isLegacy(file.path), { restore: true })
+  const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
 
   return (
     gulp
@@ -58,9 +59,9 @@ function style() {
       // Add sourcemaps
       .pipe(sourcemaps.init())
       // Resolve imports and calculated colors
-      .pipe(postcss([postcssImport(), postcssColorMod]))
+      .pipe(postcss([postcssImport(), postcssColorModFunction()]))
 
-      // * Process legacy & standalone builds *
+      // * Process legacy builds *
       .pipe(excludeModern)
       // Inline variable values so CSS works in legacy browsers
       .pipe(postcss([postcssCssVariables()]))
@@ -69,7 +70,7 @@ function style() {
       // autoprefix
       .pipe(postcss([autoprefixer()]))
       // Write the amount gained by autoprefixing
-      .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
+      .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
       .pipe(excludeModern.restore)
 
       // * Process modern builds *
@@ -80,7 +81,7 @@ function style() {
       // TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers
       .pipe(postcss([autoprefixer()]))
       // Write the amount gained by autoprefixing
-      .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
+      .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
       .pipe(excludeLegacy.restore)
 
       // Write the sourcemaps after making pre-minified changes
@@ -96,7 +97,7 @@ function style() {
       // Minify using cssnano
       .pipe(postcss([cssnano()]))
       // Write the amount saved by minifying
-      .pipe(bytediff.stop((data) => formatByteMessage('cssnano', data)))
+      .pipe(bytediff.stop(data => formatByteMessage('cssnano', data)))
       // Rename the files have the .min suffix
       .pipe(rename({ suffix: '.min' }))
       // Write the sourcemaps after making all changes
@@ -109,10 +110,6 @@ function style() {
   )
 }
 
-function reload() {
-  browserSync.reload()
-}
-
 function watch() {
   style()
 
@@ -120,12 +117,12 @@ function watch() {
     server: {
       baseDir: './',
     },
-    startPath: 'index.html'
+    startPath: 'docs/index.html',
   })
 
   gulp.watch(paths.srcDir, style)
-  gulp.watch([paths.srcDir, paths.html.src], reload)
+  gulp.watch([paths.srcDir, paths.docsDir], browserSync.reload)
 }
 
 module.exports.style = style
-module.exports.watch = watch
\ No newline at end of file
+module.exports.watch = watch
diff --git a/index.js b/index.js
index 111f86b..a9da854 100644
--- a/index.js
+++ b/index.js
@@ -1,2 +1,2 @@
 const gulpfile = require('./gulpfile')
-gulpfile.watch()
\ No newline at end of file
+gulpfile.watch()
diff --git a/src/builds/dark-legacy.standalone.css b/src/builds/dark-legacy.standalone.css
new file mode 100755
index 0000000..e089e9b
--- /dev/null
+++ b/src/builds/dark-legacy.standalone.css
@@ -0,0 +1,8 @@
+/**
+ * Standalone dark-themed version for legacy browsers.
+ * Includes dark variables and core, compiled at build time so the final output
+ * will only include regular CSS, no variables.
+ */
+
+@import '../variables-dark.css';
+@import '../parts/_core.css';
diff --git a/src/builds/dark.standalone.css b/src/builds/dark.standalone.css
index 421e316..7db6fa8 100755
--- a/src/builds/dark.standalone.css
+++ b/src/builds/dark.standalone.css
@@ -1,7 +1,7 @@
 /**
  * Standalone dark-themed version.
- * Includes dark variables and core, compiled at build time so the final output
- * will only include regular CSS, no variables.
+ * Includes dark variables and core, left as CSS variables
+ * so the theming can be adjusted at runtime.
  */
 
 @import '../variables-dark.css';
diff --git a/src/builds/light-legacy.standalone.css b/src/builds/light-legacy.standalone.css
new file mode 100755
index 0000000..f201c1a
--- /dev/null
+++ b/src/builds/light-legacy.standalone.css
@@ -0,0 +1,8 @@
+/**
+ * Standalone light-themed version for legacy browsers.
+ * Includes light variables and core, compiled at build time so the final output
+ * will only include regular CSS, no variables.
+ */
+
+@import '../variables-light.css';
+@import '../parts/_core.css';
diff --git a/src/builds/light.standalone.css b/src/builds/light.standalone.css
index 555084b..cfd3e83 100755
--- a/src/builds/light.standalone.css
+++ b/src/builds/light.standalone.css
@@ -1,7 +1,7 @@
 /**
  * Standalone light-themed version.
- * Includes light variables and core, compiled at build time so the final output
- * will only include regular CSS, no variables.
+ * Includes light variables and core, left as CSS variables
+ * so the theming can be adjusted at runtime.
  */
 
 @import '../variables-light.css';
