Add code styles and update dev server

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) => {
+function buildSass(file) {
-  console.log('> Stylesheet changed')
+  sass.render({ file, outputStyle: 'compressed' }, async (errors, result) => {
-  sass.render({ file, outputStyle: 'compressed' }, async (errors, { css }) => {
     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/'))

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}

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}

index.html

@@ -64,6 +64,13 @@
     <input disabled placeholder='This is disabled'>
     <input readonly value='This is readonly'>
 
+    <h3>H3 for separation</h3>
+    <p>
+      Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
+      Did you know, <code>alert(1)</code> can show an alert in JavaScript!
+    </p>
+    <pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
+
     <script src='script.js'></script>
   </body>
 </html>

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;
 

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;
 

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;
+}

src/parts/_core.scss

@@ -2,4 +2,5 @@
 @import 'typography';
 @import 'forms';
 @import 'links';
+@import 'code';
 @import 'misc';

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;