diff --git a/README.md b/README.md index 782bc7f..9adf4af 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ ## Why? -I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the uglyness of the default styles. +I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the ugliness of the default styles. Water.css is a css framework that doesn't require any classes. You just include it in your `` and forget about it, while it silently makes everything nicer. @@ -41,9 +41,7 @@ Well, there's a dark theme and a light theme. If you want the light theme, use ` No other classes or code is required to make Water.css work. If you want a specific version, you can replace `@latest` with `@version`. See [all the versions](https://github.com/kognise/water.css/releases). -Oh, you want a demo you say? Cheeky fellah! - -[Well, here's your demo.](https://kognise.github.io/water.css/) +**Oh, you want a demo you say?** Cheeky fellah! [Well, here's your demo.](https://kognise.github.io/water.css/) Don't like how it looks? Feel free to submit an issue or PR with suggestions. @@ -78,6 +76,10 @@ Do you want to make your own theme different from the light or dark themes? Sinc - `$form-placeholder` - `$form-text` +Wanna quickly try out theming without installing anything or just explore our build environment? + +[![Try on repl.it](https://repl-badge.jajoosam.repl.co/edit.png)](https://repl.it/github/https://github.com/amasad/water.css?lang=nodejs&ref=button) + ### Based on an existing theme You can base your theme off of the existing light or dark themes, which already have some variables predefined to make it easier for you. @@ -122,4 +124,5 @@ You can also only import parts you want, but this is not recommended. See the `s - [Blockquotes](https://github.com/kognise/water.css/issues/13) - Add a screenshot -- Jekyll theme +- [Jekyll theme](https://github.com/kognise/water.css/issues/18) +- [Radio buttons](https://github.com/kognise/water.css/issues/22) diff --git a/dev.js b/dev.js deleted file mode 100644 index 7223e11..0000000 --- a/dev.js +++ /dev/null @@ -1,75 +0,0 @@ -const express = require('express') -const app = express() -const http = require('http').Server(app) -const io = require('socket.io')(http) -const fs = require('fs-extra') -const chokidar = require('chokidar') -const sass = require('node-sass') - -const script = ` -const socket = io() -socket.on('reload', () => location.reload()) -` - -app.get('/', async (req, res) => { - console.log('> Serving index') - const html = await fs.readFile('index.html') - const injected = html.toString().replace('', ``) - res.send(injected) -}) - -app.get('/script.js', async (req, res) => { - console.log('> Serving script') - const script = await fs.readFile('script.js') - res.contentType('javascript') - res.send(script) -}) - -app.use('/dist', (req, res, next) => { - console.log('> Serving a stylesheet') - next() -}, express.static('dist')) - -function reload() { - console.log('> Reloading') - io.emit('reload') -} - -chokidar.watch('index.html', { ignoreInitial: true }).on('all', () => { - console.log('> Index changed') - reload() -}) - -chokidar.watch('script.js', { ignoreInitial: true }).on('all', () => { - console.log('> Script changed') - reload() -}) - -function buildSass(file) { - sass.render({ file, outputStyle: 'compressed' }, async (errors, result) => { - if (errors) { - console.log('> Sass errors!') - console.log(errors) - return - } - const outFile = file.replace('src', 'dist').replace('.scss', '.css') - await fs.outputFile(outFile, result.css) - reload() - }) -} - -chokidar.watch('src/*.scss', { ignoreInitial: true }).on('all', (event, file) => { - console.log('> Stylesheet changed') - buildSass(file) -}) - -chokidar.watch('src/parts/*.scss', { ignoreInitial: true }).on('all', async () => { - console.log('> Stylesheet part changed') - const src = await fs.readdir('src') - const files = src.filter(file => file !== 'parts').map(file => `src/${file}`) - for (let file of files) { - buildSass(file) - } -}) - -http.listen(3000, () => console.log('> Ready at http://localhost:3000/')) \ No newline at end of file diff --git a/dist/dark.css b/dist/dark.css index 85d3280..826ab73 100644 --- a/dist/dark.css +++ b/dist/dark.css @@ -1 +1,6 @@ +<<<<<<< HEAD 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:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}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:#fff}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#fff;background-color:#161f27;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:#324759}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}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:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto;scrollbar-color:#3b5469 #2c3f4f;scrollbar-width:thin}pre>code::-webkit-scrollbar{height:10px}pre>code::-webkit-scrollbar-track{background:#2c3f4f;border-bottom-left-radius:6px;border-bottom-right-radius:6px}pre>code::-webkit-scrollbar-thumb{background:#3b5469;border-bottom-left-radius:6px;border-bottom-right-radius:6px}pre>code::-webkit-scrollbar-thumb:hover{background:#1c2832}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px}table,th,td{border:1px solid #dbdbdb} +======= +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:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}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:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=submit]:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27} +/*# sourceMappingURL=dark.css.map */ +>>>>>>> master diff --git a/dist/dark.css.map b/dist/dark.css.map new file mode 100644 index 0000000..616a9c5 --- /dev/null +++ b/dist/dark.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["parts/_base.scss","dark.scss","parts/_typography.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAAA,KACE,mIAA8J,CAC9J,eAAgB,CAEhB,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CAEf,aCLiB,CDMjB,kBCTkB,CDWlB,iCAAkC,CAGpC,sBACE,wHAI8C,CEnBhD,GACE,eAAgB,CAChB,YAAa,CAGf,kBACE,kBAAmB,CAGrB,yBACE,UDNmB,CCSrB,8BACE,eAAgB,CCdlB,kEAIE,cAAe,CAGjB,kCACE,aAAc,CAGhB,6BACE,UFGiB,CEFjB,wBFZsB,CEctB,mBAAoB,CACpB,iBAAkB,CAElB,gBAAiB,CACjB,iBAAkB,CAClB,YAAa,CAEb,WAAY,CACZ,iBAAkB,CAClB,YAAa,CAGf,kDACE,uBAAwB,CAG1B,SACE,cAAe,CACf,UAAW,CACX,qBAAsB,CACtB,eAAgB,CAGlB,6CACE,kBAAmB,CACnB,iBAAkB,CAGpB,+DAGE,kBFnCoB,CEsCtB,qDAIE,wCF9Ce,CEiDjB,8FAIE,yBAA0B,CAG5B,eACE,kBAAmB,CACnB,UAAW,CAGb,4BACE,aFvDwB,CEsD1B,uBACE,aFvDwB,CEsD1B,wBACE,aFvDwB,CEsD1B,cACE,aFvDwB,CGd1B,EACE,oBAAqB,CACrB,aHIa,CGDf,QACE,yBAA0B,CCN5B,SACE,kBJAsB,CICtB,aJOY,CINZ,WAAY,CACZ,iBAAkB,CAGpB,SACE,YAAa,CACb,aAAc,CACd,eAAgB,CCVlB,IACE,cAAe,CAGjB,GAEE,WLEc,CKFd,4BLEc,CKChB,MACE,wBAAyB,CACzB,kBAAmB,CACnB,UAAW,CAGb,MACE,WAAY,CACZ,eAAgB,CAGlB,GACE,+BLbc,CKgBhB,uBACE,wBLxBsB","file":"dark.css","sourcesContent":["body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n line-height: 1.4;\r\n\r\n max-width: 800px;\r\n margin: 20px auto;\r\n padding: 0 10px;\r\n\r\n color: $text-main;\r\n background: $background;\r\n\r\n text-rendering: optimizeLegibility;\r\n}\r\n\r\nbutton, input, textarea {\r\n transition: background-color $animation-duration linear,\r\n border-color $animation-duration linear,\r\n color $animation-duration linear,\r\n box-shadow $animation-duration linear,\r\n transform $animation-duration ease;\r\n}","$background: #202b38 !default;\r\n$background-alt: #161f27 !default;\r\n\r\n$text-main: #dbdbdb !default;\r\n$text-bright: #ffffff !default;\r\n\r\n$links: #41adff !default;\r\n$focus: #0096bfab !default;\r\n$border: #dbdbdb !default;\r\n$code: #ffbe85 !default;\r\n\r\n$button-hover: #324759 !default;\r\n$animation-duration: 0.1s !default;\r\n\r\n$form-placeholder: #a9a9a9 !default;\r\n$form-text: #ffffff !default;\r\n\r\n@import 'parts/core';","h1 {\r\n font-size: 2.2em;\r\n margin-top: 0;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6 {\r\n margin-bottom: 12px;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6, strong {\r\n color: $text-bright;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6, b, strong, th {\r\n font-weight: 600;\r\n}","button,\r\ninput[type='submit'],\r\ninput[type='button'],\r\ninput[type='checkbox'] {\r\n cursor: pointer;\r\n}\r\n\r\ninput:not([type='checkbox']), select {\r\n display: block;\r\n}\r\n\r\ninput, select, button, textarea {\r\n color: $form-text;\r\n background-color: $background-alt;\r\n\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n margin-right: 6px;\r\n margin-bottom: 6px;\r\n padding: 10px;\r\n\r\n border: none;\r\n border-radius: 6px;\r\n outline: none;\r\n}\r\n\r\ninput:not([type='checkbox']), select, button, textarea {\r\n -webkit-appearance: none;\r\n}\r\n\r\ntextarea {\r\n margin-right: 0;\r\n width: 100%;\r\n box-sizing: border-box;\r\n resize: vertical;\r\n}\r\n\r\nbutton, input[type='submit'], input[type='button'] {\r\n padding-right: 30px;\r\n padding-left: 30px;\r\n}\r\n\r\nbutton:hover,\r\ninput[type='submit']:hover,\r\ninput[type='button']:hover {\r\n background: $button-hover;\r\n}\r\n\r\ninput:focus,\r\nselect:focus,\r\nbutton:focus,\r\ntextarea:focus {\r\n box-shadow: 0 0 0 2px $focus;\r\n}\r\n\r\ninput[type='checkbox']:active,\r\ninput[type='submit']:active,\r\ninput[type='button']:active,\r\nbutton:active {\r\n transform: translateY(2px);\r\n}\r\n\r\ninput:disabled {\r\n cursor: not-allowed;\r\n opacity: .5;\r\n}\r\n\r\n::placeholder {\r\n color: $form-placeholder;\r\n}","a {\r\n text-decoration: none;\r\n color: $links;\r\n}\r\n\r\na:hover {\r\n text-decoration: underline;\r\n}","code, kbd {\r\n background: $background-alt;\r\n color: $code;\r\n padding: 5px;\r\n border-radius: 6px;\r\n}\r\n\r\npre > code {\r\n padding: 10px;\r\n display: block;\r\n overflow-x: auto;\r\n}","img {\r\n max-width: 100%;\r\n}\r\n\r\nhr {\r\n border: none;\r\n border-top: 1px solid $border;\r\n}\r\n\r\ntable {\r\n border-collapse: collapse;\r\n margin-bottom: 10px;\r\n width: 100%;\r\n}\r\n\r\ntd, th {\r\n padding: 6px;\r\n text-align: left;\r\n}\r\n\r\nth {\r\n border-bottom: 1px solid $border;\r\n}\r\n\r\ntbody tr:nth-child(even) {\r\n background-color: $background-alt;\r\n}"]} \ No newline at end of file diff --git a/dist/light.css b/dist/light.css index 0f8d551..0d0e5b3 100644 --- a/dist/light.css +++ b/dist/light.css @@ -1 +1,6 @@ +<<<<<<< HEAD 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:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}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:#000}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#000;background-color:#efefef;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:#ddd}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}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:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto;scrollbar-color:#eaeaea #d5d5d5;scrollbar-width:thin}pre>code::-webkit-scrollbar{height:10px}pre>code::-webkit-scrollbar-track{background:#d5d5d5;border-bottom-left-radius:6px;border-bottom-right-radius:6px}pre>code::-webkit-scrollbar-thumb{background:#eaeaea;border-bottom-left-radius:6px;border-bottom-right-radius:6px}pre>code::-webkit-scrollbar-thumb:hover{background:#bebebe}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px}table,th,td{border:1px solid #dbdbdb} +======= +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:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}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:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=submit]:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef} +/*# sourceMappingURL=light.css.map */ +>>>>>>> master diff --git a/dist/light.css.map b/dist/light.css.map new file mode 100644 index 0000000..3e20633 --- /dev/null +++ b/dist/light.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["parts/_base.scss","light.scss","parts/_typography.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAAA,KACE,mIAA8J,CAC9J,eAAgB,CAEhB,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CAEf,aCLiB,CDMjB,eCTkB,CDWlB,iCAAkC,CAGpC,sBACE,wHAI8C,CEnBhD,GACE,eAAgB,CAChB,YAAa,CAGf,kBACE,kBAAmB,CAGrB,yBACE,UDNmB,CCSrB,8BACE,eAAgB,CCdlB,kEAIE,cAAe,CAGjB,kCACE,aAAc,CAGhB,6BACE,UFGiB,CEFjB,wBFZsB,CEctB,mBAAoB,CACpB,iBAAkB,CAElB,gBAAiB,CACjB,iBAAkB,CAClB,YAAa,CAEb,WAAY,CACZ,iBAAkB,CAClB,YAAa,CAGf,kDACE,uBAAwB,CAG1B,SACE,cAAe,CACf,UAAW,CACX,qBAAsB,CACtB,eAAgB,CAGlB,6CACE,kBAAmB,CACnB,iBAAkB,CAGpB,+DAGE,eFnCoB,CEsCtB,qDAIE,wCF9Ce,CEiDjB,8FAIE,yBAA0B,CAG5B,eACE,kBAAmB,CACnB,UAAW,CAGb,4BACE,aFvDwB,CEsD1B,uBACE,aFvDwB,CEsD1B,wBACE,aFvDwB,CEsD1B,cACE,aFvDwB,CGd1B,EACE,oBAAqB,CACrB,aHIa,CGDf,QACE,yBAA0B,CCN5B,SACE,kBJAsB,CICtB,UJOY,CINZ,WAAY,CACZ,iBAAkB,CAGpB,SACE,YAAa,CACb,aAAc,CACd,eAAgB,CCVlB,IACE,cAAe,CAGjB,GAEE,WLEc,CKFd,4BLEc,CKChB,MACE,wBAAyB,CACzB,kBAAmB,CACnB,UAAW,CAGb,MACE,WAAY,CACZ,eAAgB,CAGlB,GACE,+BLbc,CKgBhB,uBACE,wBLxBsB","file":"light.css","sourcesContent":["body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n line-height: 1.4;\r\n\r\n max-width: 800px;\r\n margin: 20px auto;\r\n padding: 0 10px;\r\n\r\n color: $text-main;\r\n background: $background;\r\n\r\n text-rendering: optimizeLegibility;\r\n}\r\n\r\nbutton, input, textarea {\r\n transition: background-color $animation-duration linear,\r\n border-color $animation-duration linear,\r\n color $animation-duration linear,\r\n box-shadow $animation-duration linear,\r\n transform $animation-duration ease;\r\n}","$background: #ffffff !default;\r\n$background-alt: #efefef !default;\r\n\r\n$text-main: #363636 !default;\r\n$text-bright: #000000 !default;\r\n\r\n$links: #0076d1 !default;\r\n$focus: #0096bfab !default;\r\n$border: #dbdbdb !default;\r\n$code: #000000 !default;\r\n\r\n$button-hover: #dddddd !default;\r\n$animation-duration: 0.1s !default;\r\n\r\n$form-placeholder: #949494 !default;\r\n$form-text: #000000 !default;\r\n\r\n@import 'parts/core';","h1 {\r\n font-size: 2.2em;\r\n margin-top: 0;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6 {\r\n margin-bottom: 12px;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6, strong {\r\n color: $text-bright;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6, b, strong, th {\r\n font-weight: 600;\r\n}","button,\r\ninput[type='submit'],\r\ninput[type='button'],\r\ninput[type='checkbox'] {\r\n cursor: pointer;\r\n}\r\n\r\ninput:not([type='checkbox']), select {\r\n display: block;\r\n}\r\n\r\ninput, select, button, textarea {\r\n color: $form-text;\r\n background-color: $background-alt;\r\n\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n margin-right: 6px;\r\n margin-bottom: 6px;\r\n padding: 10px;\r\n\r\n border: none;\r\n border-radius: 6px;\r\n outline: none;\r\n}\r\n\r\ninput:not([type='checkbox']), select, button, textarea {\r\n -webkit-appearance: none;\r\n}\r\n\r\ntextarea {\r\n margin-right: 0;\r\n width: 100%;\r\n box-sizing: border-box;\r\n resize: vertical;\r\n}\r\n\r\nbutton, input[type='submit'], input[type='button'] {\r\n padding-right: 30px;\r\n padding-left: 30px;\r\n}\r\n\r\nbutton:hover,\r\ninput[type='submit']:hover,\r\ninput[type='button']:hover {\r\n background: $button-hover;\r\n}\r\n\r\ninput:focus,\r\nselect:focus,\r\nbutton:focus,\r\ntextarea:focus {\r\n box-shadow: 0 0 0 2px $focus;\r\n}\r\n\r\ninput[type='checkbox']:active,\r\ninput[type='submit']:active,\r\ninput[type='button']:active,\r\nbutton:active {\r\n transform: translateY(2px);\r\n}\r\n\r\ninput:disabled {\r\n cursor: not-allowed;\r\n opacity: .5;\r\n}\r\n\r\n::placeholder {\r\n color: $form-placeholder;\r\n}","a {\r\n text-decoration: none;\r\n color: $links;\r\n}\r\n\r\na:hover {\r\n text-decoration: underline;\r\n}","code, kbd {\r\n background: $background-alt;\r\n color: $code;\r\n padding: 5px;\r\n border-radius: 6px;\r\n}\r\n\r\npre > code {\r\n padding: 10px;\r\n display: block;\r\n overflow-x: auto;\r\n}","img {\r\n max-width: 100%;\r\n}\r\n\r\nhr {\r\n border: none;\r\n border-top: 1px solid $border;\r\n}\r\n\r\ntable {\r\n border-collapse: collapse;\r\n margin-bottom: 10px;\r\n width: 100%;\r\n}\r\n\r\ntd, th {\r\n padding: 6px;\r\n text-align: left;\r\n}\r\n\r\nth {\r\n border-bottom: 1px solid $border;\r\n}\r\n\r\ntbody tr:nth-child(even) {\r\n background-color: $background-alt;\r\n}"]} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..0383dec --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,81 @@ +const gulp = require('gulp') +const sass = require('gulp-sass') +const postcss = require('gulp-postcss') +const autoprefixer = require('autoprefixer') +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 paths = { + styles: { + src: 'src/**/*.scss', + 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]; +}; + +function formatByteMessage(source, data) { + const change = (data.savings > 0 ? 'saved' : 'gained') + const prettySavings = humanFileSize(Math.abs(data.savings)) + const prettyStartSize = humanFileSize(data.startSize) + let prettyEndSize = humanFileSize(data.endSize) + + if (data.endSize > data.startSize) { + prettyEndSize = chalk.yellow(prettyEndSize) + } + + if (data.endSize < data.startSize) { + prettyEndSize = chalk.green(prettyEndSize) + } + + return `${chalk.cyan(source.padStart(12, ' '))}: ${data.fileName} ${change} ${prettySavings} (${prettyStartSize} -> ${prettyEndSize})` +} + +function style() { + return ( + gulp.src(paths.styles.src) + .pipe(sourcemaps.init()) + .pipe(sass()) + .on('error', sass.logError) + .pipe(bytediff.start()) + .pipe(postcss([ autoprefixer()])) + .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) + .pipe(bytediff.start()) + .pipe(postcss([cssnano()])) + .pipe(bytediff.stop((data) => formatByteMessage('cssnano', data))) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest(paths.styles.dest)) + .pipe(browserSync.stream()) + ) +} + +function reload() { + browserSync.reload() +} + +function watch() { + style() + + browserSync.init({ + server: { + baseDir: './', + }, + startPath: 'index.html' + }) + + gulp.watch(paths.styles.src, style) + gulp.watch(paths.html.src, reload) +} + +module.exports.style = style +module.exports.watch = watch \ No newline at end of file diff --git a/index.html b/index.html index 4b594ca..74415a0 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@

Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.

- Water.css - Make your tiny website just a little nicer | Product Hunt Embed + Water.css - Make your tiny website just a little nicer | Product Hunt Embed

Goals