From 690b41e257760854a59ea57eb492120cd8853d35 Mon Sep 17 00:00:00 2001 From: lazarljubenovic Date: Sun, 12 Aug 2018 12:06:39 +0200 Subject: [PATCH] build: use sass --- .idea/watcherTasks.xml | 4 ++ build.ts | 6 +- sizes.json | 12 ++-- src/_vars.scss | 8 +++ src/styles.css | 121 ----------------------------------------- src/styles.scss | 120 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 143 insertions(+), 128 deletions(-) create mode 100644 .idea/watcherTasks.xml create mode 100644 src/_vars.scss delete mode 100644 src/styles.css create mode 100644 src/styles.scss diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 0000000..fb0d65a --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/build.ts b/build.ts index 7120a57..9215577 100644 --- a/build.ts +++ b/build.ts @@ -19,6 +19,7 @@ import { rollup } from 'rollup' import uglify from 'rollup-plugin-uglify' // @ts-ignore import rollupPluginTypescript from 'rollup-plugin-typescript' +import * as sass from 'node-sass' async function confirm (question: string, positive: Function, negative: Function): Promise { @@ -169,7 +170,10 @@ async function buildJavaScript (sourceFolder: string, distFolder: string) { } async function buildStyles (sourceFolder: string, distFolder: string) { - fs.copySync(`${sourceFolder}/styles.css`, `${distFolder}/styles.css`) + const result = sass.renderSync({ + file: `${sourceFolder}/styles.scss`, + }) + fs.writeFileSync(`${distFolder}/styles.css`, result.css.toString('utf8')) } async function buildAssets (sourceFolder: string, distFolder: string) { diff --git a/sizes.json b/sizes.json index 291dcfe..f919970 100644 --- a/sizes.json +++ b/sizes.json @@ -15,13 +15,13 @@ "brotli": 300 }, "styles.css": { - "raw": 1798, - "gzip": 708, - "brotli": 569 + "raw": 1542, + "gzip": 651, + "brotli": 511 }, "total": { - "raw": 19705, - "gzip": 6810, - "brotli": 5504 + "raw": 19449, + "gzip": 6753, + "brotli": 5446 } } \ No newline at end of file diff --git a/src/_vars.scss b/src/_vars.scss new file mode 100644 index 0000000..2541573 --- /dev/null +++ b/src/_vars.scss @@ -0,0 +1,8 @@ +// Colors +$dark: #7c203a; +$accent: #f85959; +$light: #ff9f68; +$highlight: #feff89; + +// Fonts +$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" diff --git a/src/styles.css b/src/styles.css deleted file mode 100644 index 25ee185..0000000 --- a/src/styles.css +++ /dev/null @@ -1,121 +0,0 @@ -/** - * Dark: 7c203a - * Accent: f85959 - * Light: ff9f68 - * Highlighting: feff89 - */ - -html { - font-size: 150%; - line-height: 1.5; -} - -body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - color: rgba(0, 0, 0, .9); - background-color: rgba(0, 0, 0, .03); - padding-left: 3rem; - padding-right: 3rem; - margin-left: auto; - margin-right: auto; - max-width: 50rem; - padding-bottom: 33vh; -} - -p, pre { - font: inherit; - margin-bottom: 1.5em; - margin-top: 1.5em; -} - -b, strong { - color: #7c203a; -} - -p code { - font-size: 1.2em; -} - -a { - color: #f85959; -} - -a:hover { - color: #7c203a; -} - -a:focus { - color: #7c203a; - outline: 2px solid #f85959; -} - -::selection { - background: #feff89; - color: #7c203a; -} - -header { - display: flex; - align-items: center; - justify-content: center; - padding-top: 3rem; - padding-bottom: 3rem; -} - -header h1 { - font-weight: 300; - font-size: 4em; -} - -svg { - color: #f85959; -} - -aside { - margin-bottom: 6rem; -} - -aside p { - font-size: 1.2em; -} - -article > h3 { - margin-bottom: 0; - margin-top: 4em; -} - -article section { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 1rem; -} - -article section > div > div { - position: sticky; - top: 1.5em; - margin-bottom: 1.5em; -} - -article section > div:nth-child(1) { -} - -article section > div:nth-child(2) { - -} - -body.js [data-trigger] { - text-decoration-line: underline; - text-decoration-style: dotted; - text-decoration-color: #7c203a; - cursor: help; -} - -body.js [data-area] { - cursor: default; -} - -body.js [data-trigger].active, -body.js [data-area].active { - background-color: #feff89; - color: #7c203a; -} diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..2676c78 --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,120 @@ +@import 'vars'; + +html { + font-size: 150%; + line-height: 1.5; +} + +body { + font-family: $font-stack; + color: rgba(0, 0, 0, .86); + background-color: rgba(0, 0, 0, .02); + padding-left: 3rem; + padding-right: 3rem; + margin-left: auto; + margin-right: auto; + max-width: 50rem; + padding-bottom: 33vh; +} + +p, pre { + font: inherit; + margin-bottom: 1.5em; + margin-top: 1.5em; +} + +b, strong { + color: #7c203a; +} + +p { + + code { + font-size: 1.2em; + } +} + +a { + color: #f85959; + + &:hover { + color: #7c203a; + } + + &:focus { + color: #7c203a; + outline: 2px solid #f85959; + } +} + +::selection { + background: #feff89; + color: #7c203a; +} + +header { + display: flex; + align-items: center; + justify-content: center; + padding-top: 3rem; + padding-bottom: 3rem; + + h1 { + font-weight: 300; + font-size: 4em; + } +} + +svg { + color: #f85959; +} + +aside { + margin-bottom: 6rem; + + p { + font-size: 1.2em; + } +} + +article { + + > h3 { + margin-bottom: 0; + margin-top: 4em; + } + + section { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 1rem; + } + + > div > div { + position: sticky; + top: 1.5em; + margin-bottom: 1.5em; + } +} + +[data-area] { + cursor: default; +} + +// We want to show these styles only if we're aware +// that the browser has successfully executed the script. +body.js { + + [data-trigger] { + text-decoration-line: underline; + text-decoration-style: dotted; + text-decoration-color: #7c203a; + cursor: help; + } + + [data-trigger].active, + [data-area].active { + background-color: #feff89; + color: #7c203a; + } +}