mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-25 06:00:55 +02:00
Code Issues Releases Wiki Activity

Merge branch 'master' into feature/style-code-scrollbars

Browse Source
This commit is contained in:
Kognise
2019-04-11 10:26:54 -04:00
parent 4aac7ed620 c77aa206d1
commit bdc8a566f8
13 changed files with 3074 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@@ -19,7 +19,7 @@
## Why? ## 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 `<head>` and forget about it, while it silently makes everything nicer. Water.css is a css framework that doesn't require any classes. You just include it in your `<head>` 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). 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! **Oh, you want a demo you say?** Cheeky fellah! [Well, here's your demo.](https://kognise.github.io/water.css/)
[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. 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-placeholder`
- `$form-text` - `$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 ### 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. 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) - [Blockquotes](https://github.com/kognise/water.css/issues/13)
- Add a screenshot - 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)

75
dev.js
View File

@@ -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('</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/'))

5
dist/dark.css vendored
View File

@@ -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}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

1
dist/dark.css.map vendored Normal file
View 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"],"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}"]}

5
dist/light.css vendored
View File

@@ -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}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

1
dist/light.css.map vendored Normal file
View 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"],"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}"]}

81
gulpfile.js Normal file
View 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

4
index.html
View File

@@ -22,7 +22,7 @@
<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> </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> <h2>Goals</h2>
<ul> <ul>
@@ -78,7 +78,7 @@
<h3>Other</h3> <h3>Other</h3>
<p>Here's a horizontal rule and image because I don't know where else to put them.</p> <p>Here's a horizontal rule and image because I don't know where else to put them.</p>
<img src='http://placekitten.com/408/287' alt='Example kitten'> <img src='https://placekitten.com/408/287' alt='Example kitten'>
<hr> <hr>
<p>And here's a nicely marked up table!</p> <p>And here's a nicely marked up table!</p>

2
index.js Normal file
View File

@@ -0,0 +1,2 @@
const gulpfile = require('./gulpfile')
gulpfile.watch()

23
package.json
View File

@@ -4,8 +4,8 @@
"description": "A just-add-css collection of styles to make simple websites just a little nicer.", "description": "A just-add-css collection of styles to make simple websites just a little nicer.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "node-sass src/ --output dist/ --output-style compressed", "build": "gulp style",
"dev": "node dev.js" "dev": "gulp watch"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@@ -24,10 +24,19 @@
}, },
"homepage": "https://github.com/kognise/water.css", "homepage": "https://github.com/kognise/water.css",
"devDependencies": { "devDependencies": {
"express": "^4.16.4", "autoprefixer": "^9.5.1",
"fs-extra": "^7.0.1", "browser-sync": "^2.26.3",
"node-sass": "^4.11.0", "cssnano": "^4.1.10",
"socket.io": "^2.2.0", "gulp": "^4.0.0",
"chokidar": "^2.1.5" "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"
} }
} }

4
src/parts/_base.scss
View File

@@ -1,5 +1,5 @@
body { 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; line-height: 1.4;
max-width: 800px; max-width: 800px;
@@ -18,4 +18,4 @@ button, input, textarea {
color $animation-duration linear, color $animation-duration linear,
box-shadow $animation-duration linear, box-shadow $animation-duration linear,
transform $animation-duration ease; transform $animation-duration ease;
} }

9
src/parts/_misc.scss
View File

@@ -15,8 +15,13 @@ table {
td, th { td, th {
padding: 6px; padding: 6px;
text-align: left;
} }
table, th, td { th {
border: 1px solid $border; border-bottom: 1px solid $border;
}
tbody tr:nth-child(even) {
background-color: $background-alt;
} }

3135
yarn.lock
View File

File diff suppressed because it is too large Load Diff