diff --git a/dist/water-dark.css b/dist/dark.css similarity index 84% rename from dist/water-dark.css rename to dist/dark.css index 86517fb..ebaf07e 100644 --- a/dist/water-dark.css +++ b/dist/dark.css @@ -8,28 +8,8 @@ body { background: #202b38; text-rendering: optimizeLegibility; } -button, -input[type='submit'], -input[type='button'], -input[type='checkbox'] { - cursor: pointer; } - -img { - max-width: 100%; } - -a, button, input, textarea { - transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s linear; } - -a { - text-decoration: none; - color: #41adff; } - -a:hover { - text-decoration: underline; } - -hr { - border: none; - border-top: 1px solid #dbdbdb; } +button, input, textarea { + transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s linear; } h1 { font-size: 2.2em; @@ -38,16 +18,24 @@ h1 { h1, h2, h3, h4, h5, h6 { margin-bottom: 12px; } +h1, h2, h3, h4, h5, h6, strong { + color: #ffffff; } + h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: 600; } -h1, h2, h3, h4, h5, h6 { - color: #ffffff; } +button, +input[type='submit'], +input[type='button'], +input[type='checkbox'] { + cursor: pointer; } input:not([type='checkbox']), select { display: block; } input, select, button, textarea { + color: #ffffff; + background-color: #161f27; font-family: inherit; font-size: inherit; margin-right: 6px; @@ -57,14 +45,6 @@ input, select, button, textarea { border-radius: 6px; outline: none; } -input, select, textarea { - color: #ffffff; - background-color: #161f27; } - -button { - color: #ffffff; - background-color: #161f27; } - input:not([type='checkbox']), select, button, textarea { -webkit-appearance: none; } @@ -98,3 +78,20 @@ button:active { input:disabled { cursor: not-allowed; opacity: .5; } + +::placeholder { + color: #a9a9a9; } + +a { + text-decoration: none; + color: #41adff; } + +a:hover { + text-decoration: underline; } + +img { + max-width: 100%; } + +hr { + border: none; + border-top: 1px solid #dbdbdb; } diff --git a/dist/water-light.css b/dist/light.css similarity index 82% rename from dist/water-light.css rename to dist/light.css index c7cad8a..7c8c710 100644 --- a/dist/water-light.css +++ b/dist/light.css @@ -5,31 +5,11 @@ body { margin: 20px auto; padding: 0 10px; color: #363636; - background: #fff; + background: #ffffff; text-rendering: optimizeLegibility; } -button, -input[type='submit'], -input[type='button'], -input[type='checkbox'] { - cursor: pointer; } - -img { - max-width: 100%; } - -a, button, input, textarea { - transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s linear; } - -a { - text-decoration: none; - color: #0076d1; } - -a:hover { - text-decoration: underline; } - -hr { - border: none; - border-top: 1px solid #dbdbdb; } +button, input, textarea { + transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s linear; } h1 { font-size: 2.2em; @@ -38,16 +18,24 @@ h1 { h1, h2, h3, h4, h5, h6 { margin-bottom: 12px; } +h1, h2, h3, h4, h5, h6, strong { + color: #000000; } + h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: 600; } -h1, h2, h3, h4, h5, h6 { - color: #000; } +button, +input[type='submit'], +input[type='button'], +input[type='checkbox'] { + cursor: pointer; } input:not([type='checkbox']), select { display: block; } input, select, button, textarea { + color: #000000; + background-color: #efefef; font-family: inherit; font-size: inherit; margin-right: 6px; @@ -57,14 +45,6 @@ input, select, button, textarea { border-radius: 6px; outline: none; } -input, select, textarea { - color: #000; - background-color: #efefef; } - -button { - color: #000; - background-color: #ddd; } - input:not([type='checkbox']), select, button, textarea { -webkit-appearance: none; } @@ -98,3 +78,20 @@ button:active { input:disabled { cursor: not-allowed; opacity: .5; } + +::placeholder { + color: #949494; } + +a { + text-decoration: none; + color: #0076d1; } + +a:hover { + text-decoration: underline; } + +img { + max-width: 100%; } + +hr { + border: none; + border-top: 1px solid #dbdbdb; } diff --git a/index.html b/index.html index f92e895..9e1c690 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ Water.css - + diff --git a/package.json b/package.json index 5ef374a..569383e 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,9 @@ "description": "A just-add-css collection of styles to make simple websites just a little nicer.", "main": "index.js", "scripts": { - "build:dark": "node-sass ./src/water-dark.scss > ./dist/water-dark.css", - "build:light": "node-sass ./src/water-light.scss > ./dist/water-light.css", - "build": "yarn build:dark && yarn build:light" + "build": "node-sass src/ --output dist/", + "dev:build": "yarn build --watch", + "dev:demo": "servor" }, "repository": { "type": "git", @@ -25,6 +25,7 @@ }, "homepage": "https://github.com/kognise/water.css", "devDependencies": { - "node-sass": "^4.11.0" + "node-sass": "^4.11.0", + "servor": "^2.0.3" } } diff --git a/script.js b/script.js index 90eab7c..71b4935 100644 --- a/script.js +++ b/script.js @@ -1,8 +1,8 @@ document.getElementById('switch').addEventListener('click', () => { const stylesheet = document.getElementById('stylesheet') - if (stylesheet.getAttribute('href') === 'dist/water-dark.css') { - stylesheet.setAttribute('href', 'dist/water-light.css') + if (stylesheet.getAttribute('href') === 'dist/dark.css') { + stylesheet.setAttribute('href', 'dist/light.css') } else { - stylesheet.setAttribute('href', 'dist/water-dark.css') + stylesheet.setAttribute('href', 'dist/dark.css') } }) \ No newline at end of file diff --git a/src/_water-core.scss b/src/_water-core.scss deleted file mode 100644 index 96f3609..0000000 --- a/src/_water-core.scss +++ /dev/null @@ -1,132 +0,0 @@ -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - line-height: 1.4; - - max-width: 800px; - margin: 20px auto; - padding: 0 10px; - - color: $font-color; - background: $background-color; - - text-rendering: optimizeLegibility; -} - -button, -input[type='submit'], -input[type='button'], -input[type='checkbox'] { - cursor: pointer; -} - -img { - max-width: 100%; -} - -a, button, input, textarea { - transition: background-color .1s linear, - border-color .1s linear, - color .1s linear, - box-shadow .1s linear, - transform .1s linear; -} - -a { - text-decoration: none; - color: $link-color; -} - -a:hover { - text-decoration: underline; -} - -hr { - border: none; - border-top: 1px solid $border-color; -} - -h1 { - font-size: 2.2em; - margin-top: 0; -} - -h1, h2, h3, h4, h5, h6 { - margin-bottom: 12px; -} - -h1, h2, h3, h4, h5, h6, b, strong, th { - font-weight: 600; -} - -h1, h2, h3, h4, h5, h6 { - color: $heading-color; -} - -input:not([type='checkbox']), select { - display: block; -} - -input, select, button, textarea { - font-family: inherit; - font-size: inherit; - - margin-right: 6px; - margin-bottom: 6px; - padding: 10px; - - border: none; - border-radius: 6px; - outline: none; -} - -input, select, textarea { - color: $form-font-color; - background-color: $form-background-color; - -} - -button { - color: $button-font-color; - background-color: $button-background-color -} - -input:not([type='checkbox']), select, button, textarea { - -webkit-appearance: none; -} - -textarea { - margin-right: 0; - width: 100%; - box-sizing: border-box; - resize: vertical; -} - -button, input[type='submit'], input[type='button'] { - padding-right: 30px; - padding-left: 30px; -} - -button:hover, -input[type='submit']:hover, -input[type='button']:hover { - background: $button-hover-color; -} - -input:focus, -select:focus, -button:focus, -textarea:focus { - box-shadow: 0 0 0 2px $focus-color; -} - -input[type='checkbox']:active, -input[type='submit']:active, -input[type='button']:active, -button:active { - transform: translateY(2px); -} - -input:disabled { - cursor: not-allowed; - opacity: .5; -} \ No newline at end of file diff --git a/src/dark.scss b/src/dark.scss new file mode 100644 index 0000000..083687e --- /dev/null +++ b/src/dark.scss @@ -0,0 +1,14 @@ +$background: #202b38 !default; +$text-main: #dbdbdb !default; +$text-bright: #ffffff !default; + +$links: #41adff !default; +$focus: #0096bfab !default; +$border: #dbdbdb !default; +$button-hover: #324759 !default; + +$form-background: #161f27 !default; +$form-placeholder: #a9a9a9 !default; +$form-text: #ffffff !default; + +@import 'parts/core'; \ No newline at end of file diff --git a/src/light.scss b/src/light.scss new file mode 100644 index 0000000..08ebcf3 --- /dev/null +++ b/src/light.scss @@ -0,0 +1,14 @@ +$background: #ffffff !default; +$text-main: #363636 !default; +$text-bright: #000000 !default; + +$links: #0076d1 !default; +$focus: #0096bfab !default; +$border: #dbdbdb !default; +$button-hover: #dddddd !default; + +$form-background: #efefef !default; +$form-placeholder: #949494 !default; +$form-text: #000000 !default; + +@import 'parts/core'; \ No newline at end of file diff --git a/src/parts/_base.scss b/src/parts/_base.scss new file mode 100644 index 0000000..0ee6606 --- /dev/null +++ b/src/parts/_base.scss @@ -0,0 +1,21 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + line-height: 1.4; + + max-width: 800px; + margin: 20px auto; + padding: 0 10px; + + color: $text-main; + background: $background; + + text-rendering: optimizeLegibility; +} + +button, input, textarea { + transition: background-color .1s linear, + border-color .1s linear, + color .1s linear, + box-shadow .1s linear, + transform .1s linear; +} \ No newline at end of file diff --git a/src/parts/_core.scss b/src/parts/_core.scss new file mode 100644 index 0000000..d59c4ac --- /dev/null +++ b/src/parts/_core.scss @@ -0,0 +1,5 @@ +@import 'base'; +@import 'typography'; +@import 'forms'; +@import 'links'; +@import 'misc'; \ No newline at end of file diff --git a/src/parts/_forms.scss b/src/parts/_forms.scss new file mode 100644 index 0000000..88dca39 --- /dev/null +++ b/src/parts/_forms.scss @@ -0,0 +1,71 @@ +button, +input[type='submit'], +input[type='button'], +input[type='checkbox'] { + cursor: pointer; +} + +input:not([type='checkbox']), select { + display: block; +} + +input, select, button, textarea { + color: $form-text; + background-color: $form-background; + + font-family: inherit; + font-size: inherit; + + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + + border: none; + border-radius: 6px; + outline: none; +} + +input:not([type='checkbox']), select, button, textarea { + -webkit-appearance: none; +} + +textarea { + margin-right: 0; + width: 100%; + box-sizing: border-box; + resize: vertical; +} + +button, input[type='submit'], input[type='button'] { + padding-right: 30px; + padding-left: 30px; +} + +button:hover, +input[type='submit']:hover, +input[type='button']:hover { + background: $button-hover; +} + +input:focus, +select:focus, +button:focus, +textarea:focus { + box-shadow: 0 0 0 2px $focus; +} + +input[type='checkbox']:active, +input[type='submit']:active, +input[type='button']:active, +button:active { + transform: translateY(2px); +} + +input:disabled { + cursor: not-allowed; + opacity: .5; +} + +::placeholder { + color: $form-placeholder; +} \ No newline at end of file diff --git a/src/parts/_links.scss b/src/parts/_links.scss new file mode 100644 index 0000000..59b6727 --- /dev/null +++ b/src/parts/_links.scss @@ -0,0 +1,8 @@ +a { + text-decoration: none; + color: $links; +} + +a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/src/parts/_misc.scss b/src/parts/_misc.scss new file mode 100644 index 0000000..372b0a1 --- /dev/null +++ b/src/parts/_misc.scss @@ -0,0 +1,8 @@ +img { + max-width: 100%; +} + +hr { + border: none; + border-top: 1px solid $border; +} \ No newline at end of file diff --git a/src/parts/_typography.scss b/src/parts/_typography.scss new file mode 100644 index 0000000..69ff941 --- /dev/null +++ b/src/parts/_typography.scss @@ -0,0 +1,16 @@ +h1 { + font-size: 2.2em; + margin-top: 0; +} + +h1, h2, h3, h4, h5, h6 { + margin-bottom: 12px; +} + +h1, h2, h3, h4, h5, h6, strong { + color: $text-bright; +} + +h1, h2, h3, h4, h5, h6, b, strong, th { + font-weight: 600; +} \ No newline at end of file diff --git a/src/water-dark.scss b/src/water-dark.scss deleted file mode 100644 index e22eb1c..0000000 --- a/src/water-dark.scss +++ /dev/null @@ -1,19 +0,0 @@ -$background-color: #202b38; -$font-color: #dbdbdb; -$link-color: #41adff; - -$heading-color: #ffffff; - -$border-color: #dbdbdb; - -$focus-color: #0096bfab; - -$button-background-color: #161f27; -$button-font-color: #ffffff; -$button-hover-color: #324759; - -$form-font-color: #ffffff; -$form-background-color: #161f27; -$form-placeholder-color: #a9a9a9; - -@import 'water-core' \ No newline at end of file diff --git a/src/water-light.scss b/src/water-light.scss deleted file mode 100644 index 5b43dee..0000000 --- a/src/water-light.scss +++ /dev/null @@ -1,19 +0,0 @@ -$background-color: #fff; -$font-color: #363636; -$link-color: #0076d1; - -$heading-color: #000; - -$border-color: #dbdbdb; - -$focus-color: #0096bfab; - -$button-background-color: #ddd; -$button-font-color: #000; -$button-hover-color: #dddddd; - -$form-font-color: #000; -$form-background-color: #efefef; -$form-placeholder-color: #949494; - -@import 'water-core' \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3ae5624..4fffcc4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -971,6 +971,11 @@ semver@~5.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f" integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8= +servor@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/servor/-/servor-2.0.3.tgz#629c64b778639db8181276441a616942d1eb49af" + integrity sha512-LuXdSg+1w/0LnnKjZrwFGcpnHpFLvAQj7t6Kes4h1LUVmeGKA6X/9NdcWnjj25nJDDHXdhRKusMf5ftG/2BGBQ== + set-blocking@^2.0.0, set-blocking@~2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"