Merge pull request #27 from kaytwo/master

Pixelated MS Sans Serif

build.js

@@ -5,6 +5,8 @@ const fs = require("fs");
 const hljs = require("highlight.js");
 const mkdirp = require("mkdirp");
 const postcss = require("postcss");
+const glob = require("glob");
+const path = require("path");
 
 let id = 0;
 function getNewId() {
@@ -33,7 +35,13 @@ function example(code) {
 function buildDocs() {
   const template = fs.readFileSync("docs/index.html.ejs", "utf-8");
 
-  fs.copyFileSync("build/98.css", "docs/98.css");
+  glob("build/*", (err, files) => {
+    if (!err) {
+      files.forEach((srcFile) =>
+        fs.copyFileSync(srcFile, path.join("docs", path.basename(srcFile)))
+      );
+    } else throw "error globbing build directory.";
+  });
   fs.writeFileSync(
     "docs/index.html",
     ejs.render(template, { getNewId, getCurrentId, example })
@@ -45,6 +53,7 @@ function buildCSS() {
     .use(require("postcss-inline-svg"))
     .use(require("postcss-css-variables")({ preserve: "computed" }))
     .use(require("postcss-calc"))
+    .use(require("postcss-copy")({ dest: "build", template: "[name].[ext]" }))
     .process(fs.readFileSync("style.css"), {
       from: "style.css",
       to: "build/98.css",

build/98.css

@@ -56,13 +56,43 @@
     inset 2px 2px #0a0a0a;
 }
 
-* {
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url("ms_sans_serif.woff") format("woff");
+  src: url("ms_sans_serif.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url("ms_sans_serif_bold.woff") format("woff");
+  src: url("ms_sans_serif_bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+
+body {
   font-family: Arial;
   font-size: 12px;
   -webkit-font-smoothing: none;
   color: #222222;
 }
 
+button,
+.window,
+.title-bar {
+  font-family: "Pixelated MS Sans Serif", Arial;
+}
+
+.pixelated {
+  font-family: "Pixelated MS Sans Serif", Arial;
+}
+
+.vectorized {
+  font-family: Arial;
+}
+
 h1 {
   font-size: 5rem;
 }

docs/98.css

@@ -56,13 +56,43 @@
     inset 2px 2px #0a0a0a;
 }
 
-* {
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url("ms_sans_serif.woff") format("woff");
+  src: url("ms_sans_serif.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url("ms_sans_serif_bold.woff") format("woff");
+  src: url("ms_sans_serif_bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+
+body {
   font-family: Arial;
   font-size: 12px;
   -webkit-font-smoothing: none;
   color: #222222;
 }
 
+button,
+.window,
+.title-bar {
+  font-family: "Pixelated MS Sans Serif", Arial;
+}
+
+.pixelated {
+  font-family: "Pixelated MS Sans Serif", Arial;
+}
+
+.vectorized {
+  font-family: Arial;
+}
+
 h1 {
   font-size: 5rem;
 }

fonts/src/ms-sans-serif-bold/license.txt

@@ -0,0 +1,4 @@
+The FontStruction “MS Sans Serif Bold”
+(https://fontstruct.com/fontstructions/show/1384862) by “lou” is licensed
+under a Creative Commons Attribution Share Alike license
+(http://creativecommons.org/licenses/by-sa/3.0/).

fonts/src/ms-sans-serif-bold/readme.txt

@@ -0,0 +1,26 @@
+The font file in this archive was created using Fontstruct the free, online
+font-building tool.
+This font was created by “lou”.
+This font has a homepage where this archive and other versions may be found:
+https://fontstruct.com/fontstructions/show/1384862
+
+Try Fontstruct at http://fontstruct.com
+It’s easy and it’s fun.
+
+NOTE FOR FLASH USERS: Fontstruct fonts (fontstructions) are optimized for Flash.
+If the font in this archive is a pixel font, it is best displayed at a font-size
+of 11.
+
+Fontstruct is sponsored by FontShop.
+Visit them at https://fontshop.com
+FontShop is the original independent font retailer. We’ve been around since
+the dawn of digital type. Whether you need the right font or need to create the
+right font from scratch, let our 26 years of experience work for you.
+
+Fontstruct is copyright ©2017 Rob Meek
+
+LEGAL NOTICE:
+In using this font you must comply with the licensing terms described in the
+file “license.txt” included with this archive.
+If you redistribute the font file in this archive, it must be accompanied by all
+the other files from this archive, including this one.

fonts/src/ms-sans-serif/license.txt

@@ -0,0 +1,4 @@
+The FontStruction “MS Sans Serif”
+(https://fontstruct.com/fontstructions/show/1384746) by “lou” is licensed
+under a Creative Commons Attribution Share Alike license
+(http://creativecommons.org/licenses/by-sa/3.0/).

fonts/src/ms-sans-serif/readme.txt

@@ -0,0 +1,26 @@
+The font file in this archive was created using Fontstruct the free, online
+font-building tool.
+This font was created by “lou”.
+This font has a homepage where this archive and other versions may be found:
+https://fontstruct.com/fontstructions/show/1384746
+
+Try Fontstruct at http://fontstruct.com
+It’s easy and it’s fun.
+
+NOTE FOR FLASH USERS: Fontstruct fonts (fontstructions) are optimized for Flash.
+If the font in this archive is a pixel font, it is best displayed at a font-size
+of 11.
+
+Fontstruct is sponsored by FontShop.
+Visit them at https://fontshop.com
+FontShop is the original independent font retailer. We’ve been around since
+the dawn of digital type. Whether you need the right font or need to create the
+right font from scratch, let our 26 years of experience work for you.
+
+Fontstruct is copyright ©2017 Rob Meek
+
+LEGAL NOTICE:
+In using this font you must comply with the licensing terms described in the
+file “license.txt” included with this archive.
+If you redistribute the font file in this archive, it must be accompanied by all
+the other files from this archive, including this one.

package.json

@@ -27,9 +27,11 @@
   "devDependencies": {
     "dedent": "^0.7.0",
     "ejs": "^3.0.2",
+    "glob": "^7.1.6",
     "highlight.js": "^9.18.1",
     "mkdirp": "^1.0.4",
     "postcss-calc": "^7.0.2",
+    "postcss-copy": "^7.1.0",
     "postcss-css-variables": "^0.14.0",
     "postcss-inline": "^1.2.0",
     "postcss-inline-svg": "^4.1.0"

style.css

@@ -60,13 +60,43 @@
     inset 2px 2px var(--window-frame);
 }
 
-* {
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url("fonts/converted/ms_sans_serif.woff") format("woff");
+  src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
+  src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+
+body {
   font-family: Arial;
   font-size: 12px;
   -webkit-font-smoothing: none;
   color: #222222;
 }
 
+button,
+.window,
+.title-bar {
+  font-family: "Pixelated MS Sans Serif", Arial;
+}
+
+.pixelated {
+  font-family: "Pixelated MS Sans Serif", Arial;
+}
+
+.vectorized {
+  font-family: Arial;
+}
+
 h1 {
   font-size: 5rem;
 }