@punkfairie/98.css 1.1.21

package/docs/vs.css

@@ -0,0 +1,67 @@
+/*
+
+Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>
+
+*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: black;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-variable {
+  color: #008000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-built_in,
+.hljs-name,
+.hljs-tag {
+  color: #00f;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-section,
+.hljs-attribute,
+.hljs-literal,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-addition {
+  color: #a31515;
+}
+
+.hljs-deletion,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-meta {
+  color: #2b91af;
+}
+
+.hljs-doctag {
+  color: #808080;
+}
+
+.hljs-attr {
+  color: #f00;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: #00b0e8;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

package/flake.nix

@@ -0,0 +1,60 @@
+{
+  description = "Wrap It Up";
+
+  inputs = {
+    devenv-root = {
+      url = "file+file:///dev/null";
+      flake = false;
+    };
+    nixpkgs.url = "github:cachix/devenv-nixpkgs/rolling";
+    flake-parts.url = "github:hercules-ci/flake-parts";
+    flake-parts.inputs.nixpkgs-lib.follows = "nixpkgs";
+    devenv.url = "github:cachix/devenv";
+    nix2container.url = "github:nlewo/nix2container";
+    nix2container.inputs.nixpkgs.follows = "nixpkgs";
+    mk-shell-bin.url = "github:rrbutani/nix-mk-shell-bin";
+  };
+
+  nixConfig = {
+    extra-trusted-public-keys = "devenv.cachix.org-1:w1cLUi8dv3hnoSPGAuibQv+f9TZLr6cv/Hm9XgU50cw=";
+    extra-substituters = "https://devenv.cachix.org";
+  };
+
+  outputs = inputs @ {
+    flake-parts,
+    # devenv-root,
+    ...
+  }:
+    flake-parts.lib.mkFlake {inherit inputs;} {
+      imports = [
+        inputs.devenv.flakeModule
+      ];
+      systems = [
+        "x86_64-linux"
+        "i686-linux"
+        "x86_64-darwin"
+        "aarch64-linux"
+        "aarch64-darwin"
+      ];
+
+      perSystem = _: {
+        devenv.shells.default = {
+          name = "98.css";
+
+          # packages = with pkgs; [
+          # ];
+
+          languages = {
+            javascript = {
+              enable = true;
+
+              npm = {
+                enable = true;
+                install.enable = true;
+              };
+            };
+          };
+        };
+      };
+    };
+}

package/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/).

package/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/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/).

package/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.

package/icon/button-down-active.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z" fill="#808080"/>
+<rect x="1" y="1" width="14" height="15" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z" fill="black"/>
+</svg>

package/icon/button-down.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z" fill="black"/>
+</svg>

package/icon/button-left.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z" fill="black"/>
+</svg>

package/icon/button-right.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z" fill="black"/>
+</svg>

package/icon/button-up.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z" fill="black"/>
+</svg>

package/icon/checkmark-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="#808080"/>
+</svg>

package/icon/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="black"/>
+</svg>

package/icon/close.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
+</svg>

package/icon/groupbox-border.svg

@@ -0,0 +1,4 @@
+<svg width="5" height="5" viewBox="0 0 5 5" fill="grey" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5V5H0V2H2V3H3V2H0" fill="white" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H4V4H0V1H1V3H3V1H0" fill="#808080" />
+</svg>

package/icon/help.svg

@@ -0,0 +1,8 @@
+<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="1" width="2" height="2" fill="black"/>
+<rect x="1" width="4" height="1" fill="black"/>
+<rect x="4" y="1" width="2" height="2" fill="black"/>
+<rect x="3" y="3" width="2" height="1" fill="black"/>
+<rect x="2" y="4" width="2" height="2" fill="black"/>
+<rect x="2" y="7" width="2" height="2" fill="black"/>
+</svg>

package/icon/indicator-horizontal.svg

@@ -0,0 +1,6 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z" fill="#C0C7C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V16H8V18H6V20H5V19H7V17H9Z" fill="#87888F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V16H9V18H7V20H5V21H6V19H8V17H10Z" fill="black"/>
+</svg>

package/icon/indicator-rectangle-horizontal.svg

@@ -0,0 +1,6 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z" fill="white"/>
+<rect x="1" y="1" width="8" height="18" fill="#C0C7C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V20H1V19H9Z" fill="#87888F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V21H0V20H10Z" fill="black"/>
+</svg>

package/icon/maximize-disabled.svg

@@ -0,0 +1,4 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1H1V3V9V10H2H9H10V9V3V1ZM9 3H2V9H9V3Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="#808080"/>
+</svg>

package/icon/maximize.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="black"/>
+</svg>

package/icon/minimize.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="6" height="2" fill="black"/>
+</svg>

package/icon/radio-border-disabled.svg

@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="#C0C0C0"/>
+</svg>

package/icon/radio-border.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="white"/>
+</svg>
+

package/icon/radio-dot-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="#808080"/>
+</svg>

package/icon/radio-dot.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="black"/>
+</svg>

package/icon/restore.svg

@@ -0,0 +1,10 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" width="6" height="2" fill="black"/>
+<rect x="7" y="2" width="1" height="4" fill="black"/>
+<rect x="2" y="2" width="1" height="1" fill="black"/>
+<rect x="6" y="5" width="1" height="1" fill="black"/>
+<rect y="3" width="6" height="2" fill="black"/>
+<rect x="5" y="5" width="1" height="4" fill="black"/>
+<rect y="5" width="1" height="4" fill="black"/>
+<rect x="1" y="8" width="4" height="1" fill="black"/>
+</svg>

package/icon/scrollbar-background.svg

@@ -0,0 +1,4 @@
+<svg width="2" height="2" viewBox="0 0 2 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H0V1H1V2H2V1H1V0Z" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H1V1H0V2H1V1H2V0Z" fill="white"/>
+</svg>

package/icon/sunken-panel-border.svg

@@ -0,0 +1,10 @@
+<svg width="5" height="5" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
+  <rect width="4" height="1" x="0" y="0" fill="#808080"/>
+  <rect width="1" height="4" x="0" y="0" fill="#808080"/>
+  <rect width="2" height="1" x="1" y="1" fill="#0a0a0a"/>
+  <rect width="1" height="2" x="1" y="1" fill="#0a0a0a"/>
+  <rect width="5" height="1" x="0" y="4" fill="#fff"/>
+  <rect width="1" height="5" x="4" y="0" fill="#fff"/>
+  <rect width="1" height="3" x="3" y="1" fill="#dfdfdf"/>
+  <rect width="3" height="1" x="1" y="3" fill="#dfdfdf"/>
+</svg>

package/now.json

@@ -0,0 +1,4 @@
+{
+  "version": 2,
+  "public": true
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@punkfairie/98.css",
+  "version": "1.1.21",
+  "description": "A design system for building faithful recreations of old UIs",
+  "main": "dist/98.css",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "deploy:docs": "npm run build && gh-pages -d dist",
+    "release": "npm run build && npm publish --access public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://codewith.babesonthe.net/punkfairie/98.css.git"
+  },
+  "keywords": [
+    "css",
+    "windows98"
+  ],
+  "author": "Marley Rae <marley@punkfairie.net> (https://punkfairie.net)",
+  "contributors": [
+    "Jordan Scales <scalesjordan@gmail.com>"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://codewith.babesonthe.net/punkfairie/98.css/issues"
+  },
+  "homepage": "https://codewith.babesonthe.net/punkfairie/98.css",
+  "devDependencies": {
+    "chokidar": "^3.3.1",
+    "cssnano": "^5.0.1",
+    "dedent": "^0.7.0",
+    "ejs": "^3.0.2",
+    "gh-pages": "^2.2.0",
+    "glob": "^7.1.6",
+    "highlight.js": "^10.4.1",
+    "live-server": "^1.2.1",
+    "mkdirp": "^1.0.4",
+    "postcss": "^8.2.12",
+    "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"
+  }
+}

package/server.js

@@ -0,0 +1,16 @@
+const chokidar = require("chokidar");
+const build = require("./build");
+
+chokidar
+  .watch(["style.css", "build.js", "docs", "fonts", "icon"], {
+    usePolling: true,
+  })
+  .on("change", (file) => {
+    console.log(
+      `[${new Date().toLocaleTimeString()}] ${file} changed -- rebuilding...`
+    );
+    build();
+  });
+
+var liveServer = require("live-server");
+liveServer.start({ port: 3000, root: "dist" });