mirror of
https://github.com/kognise/water.css.git
synced 2025-08-10 23:24:08 +02:00
merge and gulped
This commit is contained in:
Federico Pérez
3
dist/dark.css
vendored
3
dist/dark.css
vendored
@@ -1 +1,2 @@
|
||||
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}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}blockquote{border-left:0.2em solid rgba(0,150,191,0.670588);background:#161f27;margin:1.5em 1em;padding:0.5em 1em;border-top-right-radius:6px;border-bottom-right-radius:6px}
|
||||
body{font-family:system-ui,-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}blockquote{border-left:.2em solid rgba(0,150,191,.67);background:#161f27;margin:1.5em 1em;padding:.5em 1em;border-top-right-radius:6px;border-bottom-right-radius:6px}
|
||||
/*# sourceMappingURL=dark.css.map */
|
||||
|
||||
1
dist/dark.css.map
vendored
Normal file
1
dist/dark.css.map
vendored
Normal file
@@ -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","parts/_blockquote.scss","parts/_variables.scss"],"names":[],"mappings":"AAAA,KACE,6IAAyK,CACzK,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,CMDxB,WACE,0CNMe,CMLf,kBNDsB,CMEtB,gBAAiB,CACjB,gBAAkB,CAClB,2BCJiB,CDKjB,8BCLiB","file":"dark.css","sourcesContent":["body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: $text-main;\n background: $background;\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color $animation-duration linear,\n border-color $animation-duration linear,\n color $animation-duration linear,\n box-shadow $animation-duration linear,\n transform $animation-duration ease;\n}\n","$background: #202b38 !default;\n$background-alt: #161f27 !default;\n\n$text-main: #dbdbdb !default;\n$text-bright: #ffffff !default;\n\n$links: #41adff !default;\n$focus: #0096bfab !default;\n$border: #dbdbdb !default;\n$code: #ffbe85 !default;\n\n$button-hover: #324759 !default;\n$animation-duration: 0.1s !default;\n\n$form-placeholder: #a9a9a9 !default;\n$form-text: #ffffff !default;\n\n@import 'parts/core';","h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin-bottom: 12px;\n}\n\nh1, h2, h3, h4, h5, h6, strong {\n color: $text-bright;\n}\n\nh1, h2, h3, h4, h5, h6, b, strong, th {\n font-weight: 600;\n}\n","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']), select {\n display: block;\n}\n\ninput, select, button, textarea {\n color: $form-text;\n background-color: $background-alt;\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']), select, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: $button-hover;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px $focus;\n}\n\ninput[type='checkbox']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: $form-placeholder;\n}","a {\n text-decoration: none;\n color: $links;\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: $background-alt;\n color: $code;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n}\n\nhr {\n border: none;\n border-top: 1px solid $border;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid $border;\n}\n\ntbody tr:nth-child(even) {\n background-color: $background-alt;\n}","blockquote {\n border-left: 0.2em solid $focus;\n background: $background-alt;\n margin: 1.5em 1em;\n padding: 0.5em 1em;\n border-top-right-radius: $border-radius;\n border-bottom-right-radius: $border-radius;\n}\n","// radius\n$border-radius: 6px;"]}
|
||||
3
dist/light.css
vendored
3
dist/light.css
vendored
@@ -1 +1,2 @@
|
||||
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}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}blockquote{border-left:0.2em solid rgba(0,150,191,0.670588);background:#efefef;margin:1.5em 1em;padding:0.5em 1em;border-top-right-radius:6px;border-bottom-right-radius:6px}
|
||||
body{font-family:system-ui,-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}blockquote{border-left:.2em solid rgba(0,150,191,.67);background:#efefef;margin:1.5em 1em;padding:.5em 1em;border-top-right-radius:6px;border-bottom-right-radius:6px}
|
||||
/*# sourceMappingURL=light.css.map */
|
||||
|
||||
1
dist/light.css.map
vendored
Normal file
1
dist/light.css.map
vendored
Normal file
@@ -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","parts/_blockquote.scss","parts/_variables.scss"],"names":[],"mappings":"AAAA,KACE,6IAAyK,CACzK,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,CMDxB,WACE,0CNMe,CMLf,kBNDsB,CMEtB,gBAAiB,CACjB,gBAAkB,CAClB,2BCJiB,CDKjB,8BCLiB","file":"light.css","sourcesContent":["body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: $text-main;\n background: $background;\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color $animation-duration linear,\n border-color $animation-duration linear,\n color $animation-duration linear,\n box-shadow $animation-duration linear,\n transform $animation-duration ease;\n}\n","$background: #ffffff !default;\n$background-alt: #efefef !default;\n\n$text-main: #363636 !default;\n$text-bright: #000000 !default;\n\n$links: #0076d1 !default;\n$focus: #0096bfab !default;\n$border: #dbdbdb !default;\n$code: #000000 !default;\n\n$button-hover: #dddddd !default;\n$animation-duration: 0.1s !default;\n\n$form-placeholder: #949494 !default;\n$form-text: #000000 !default;\n\n@import 'parts/core';","h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin-bottom: 12px;\n}\n\nh1, h2, h3, h4, h5, h6, strong {\n color: $text-bright;\n}\n\nh1, h2, h3, h4, h5, h6, b, strong, th {\n font-weight: 600;\n}\n","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']), select {\n display: block;\n}\n\ninput, select, button, textarea {\n color: $form-text;\n background-color: $background-alt;\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']), select, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: $button-hover;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px $focus;\n}\n\ninput[type='checkbox']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: $form-placeholder;\n}","a {\n text-decoration: none;\n color: $links;\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: $background-alt;\n color: $code;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n}\n\nhr {\n border: none;\n border-top: 1px solid $border;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid $border;\n}\n\ntbody tr:nth-child(even) {\n background-color: $background-alt;\n}","blockquote {\n border-left: 0.2em solid $focus;\n background: $background-alt;\n margin: 1.5em 1em;\n padding: 0.5em 1em;\n border-top-right-radius: $border-radius;\n border-bottom-right-radius: $border-radius;\n}\n","// radius\n$border-radius: 6px;"]}
|
||||
81
gulpfile.js
Normal file
81
gulpfile.js
Normal file
@@ -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
|
||||
@@ -22,7 +22,7 @@
|
||||
<p>
|
||||
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/featured.svg?post_id=150490&theme=dark' 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>
|
||||
|
||||
77
index.js
77
index.js
@@ -1,75 +1,2 @@
|
||||
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('</body>', `<script src='/socket.io/socket.io.js'></script><script>${script}</script></body>`)
|
||||
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/'))
|
||||
const gulpfile = require('./gulpfile')
|
||||
gulpfile.watch()
|
||||
23
package.json
23
package.json
@@ -4,8 +4,8 @@
|
||||
"description": "A just-add-css collection of styles to make simple websites just a little nicer.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "node-sass src/ --output dist/ --output-style compressed",
|
||||
"dev": "node index.js"
|
||||
"build": "gulp style",
|
||||
"dev": "gulp watch"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -24,10 +24,19 @@
|
||||
},
|
||||
"homepage": "https://github.com/kognise/water.css",
|
||||
"devDependencies": {
|
||||
"express": "^4.16.4",
|
||||
"fs-extra": "^7.0.1",
|
||||
"node-sass": "^4.11.0",
|
||||
"socket.io": "^2.2.0",
|
||||
"chokidar": "^2.1.5"
|
||||
"autoprefixer": "^9.5.1",
|
||||
"browser-sync": "^2.26.3",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-bytediff": "^1.0.0",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-sourcemaps": "^2.6.5"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults AND not android 4.4.3"
|
||||
],
|
||||
"dependencies": {
|
||||
"chalk": "^2.4.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
@@ -18,4 +18,4 @@ button, input, textarea {
|
||||
color $animation-duration linear,
|
||||
box-shadow $animation-duration linear,
|
||||
transform $animation-duration ease;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,8 +15,13 @@ table {
|
||||
|
||||
td, th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid $border;
|
||||
th {
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: $background-alt;
|
||||
}
|
||||
Reference in New Issue
Block a user