From 9db897346c80b4e2aa310b2952579bb06f0c9f75 Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 6 Apr 2019 17:13:33 -0400 Subject: [PATCH] Add code styles and update dev server --- dev.js | 21 +++++++++++++++++---- dist/dark.css | 2 +- dist/light.css | 2 +- index.html | 7 +++++++ src/dark.scss | 4 +++- src/light.scss | 4 +++- src/parts/_code.scss | 12 ++++++++++++ src/parts/_core.scss | 1 + src/parts/_forms.scss | 2 +- 9 files changed, 46 insertions(+), 9 deletions(-) create mode 100644 src/parts/_code.scss diff --git a/dev.js b/dev.js index f3c5ac1..7223e11 100644 --- a/dev.js +++ b/dev.js @@ -45,18 +45,31 @@ chokidar.watch('script.js', { ignoreInitial: true }).on('all', () => { reload() }) -chokidar.watch('src/*.scss', { ignoreInitial: true }).on('all', (event, file) => { - console.log('> Stylesheet changed') - sass.render({ file, outputStyle: 'compressed' }, async (errors, { css }) => { +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, 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 19e2082..24cb8e5 100644 --- a/dist/dark.css +++ b/dist/dark.css @@ -1 +1 @@ -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}img{max-width:100%}hr{border:none;border-top: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}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb} diff --git a/dist/light.css b/dist/light.css index 2492ddb..63262cf 100644 --- a/dist/light.css +++ b/dist/light.css @@ -1 +1 @@ -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}img{max-width:100%}hr{border:none;border-top: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}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb} diff --git a/index.html b/index.html index 3f133aa..1470270 100644 --- a/index.html +++ b/index.html @@ -64,6 +64,13 @@ +

H3 for separation

+

+ Below is some code, you can copy it with Ctrl-C. + Did you know, alert(1) can show an alert in JavaScript! +

+ 
// This logs a message to the console
console.log('Hello, world!')
+ diff --git a/src/dark.scss b/src/dark.scss index 6876260..97598fc 100644 --- a/src/dark.scss +++ b/src/dark.scss @@ -1,15 +1,17 @@ $background: #202b38 !default; +$background-alt: #161f27 !default; + $text-main: #dbdbdb !default; $text-bright: #ffffff !default; $links: #41adff !default; $focus: #0096bfab !default; $border: #dbdbdb !default; +$code: #ffbe85 !default; $button-hover: #324759 !default; $animation-duration: 0.1s !default; -$form-background: #161f27 !default; $form-placeholder: #a9a9a9 !default; $form-text: #ffffff !default; diff --git a/src/light.scss b/src/light.scss index fbac776..82e3d5b 100644 --- a/src/light.scss +++ b/src/light.scss @@ -1,15 +1,17 @@ $background: #ffffff !default; +$background-alt: #efefef !default; + $text-main: #363636 !default; $text-bright: #000000 !default; $links: #0076d1 !default; $focus: #0096bfab !default; $border: #dbdbdb !default; +$code: #000000 !default; $button-hover: #dddddd !default; $animation-duration: 0.1s !default; -$form-background: #efefef !default; $form-placeholder: #949494 !default; $form-text: #000000 !default; diff --git a/src/parts/_code.scss b/src/parts/_code.scss new file mode 100644 index 0000000..06e41c8 --- /dev/null +++ b/src/parts/_code.scss @@ -0,0 +1,12 @@ +code, kbd { + background: $background-alt; + color: $code; + padding: 5px; + border-radius: 6px; +} + +pre > code { + padding: 10px; + display: block; + overflow-x: auto; +} \ No newline at end of file diff --git a/src/parts/_core.scss b/src/parts/_core.scss index d59c4ac..0e7be37 100644 --- a/src/parts/_core.scss +++ b/src/parts/_core.scss @@ -2,4 +2,5 @@ @import 'typography'; @import 'forms'; @import 'links'; +@import 'code'; @import 'misc'; \ No newline at end of file diff --git a/src/parts/_forms.scss b/src/parts/_forms.scss index 88dca39..6b1023f 100644 --- a/src/parts/_forms.scss +++ b/src/parts/_forms.scss @@ -11,7 +11,7 @@ input:not([type='checkbox']), select { input, select, button, textarea { color: $form-text; - background-color: $form-background; + background-color: $background-alt; font-family: inherit; font-size: inherit;