Add CI, npm release and Renovate

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+	"$schema": "https://unpkg.com/@changesets/config@3.1.0/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": []
+}

.editorconfig

@@ -4,15 +4,6 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 2
-indent_style = space
+indent_style = tab
 insert_final_newline = true
-max_line_length = 80
 trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = 0
-trim_trailing_whitespace = false
-
-[COMMIT_EDITMSG]
-max_line_length = 0

.github/workflows/ci.yaml

@@ -0,0 +1,12 @@
+name: CI
+
+on:
+    pull_request:
+        branches: ["main"]
+    workflow_call:
+
+jobs:
+    pipes:
+        uses: dragunovartem99/pipes/.github/workflows/ci-node.yaml@v1.0.1
+        with:
+            checks: '["build"]'

.github/workflows/deploy.yaml

@@ -0,0 +1,22 @@
+name: Deploy
+
+on:
+    push:
+        branches: ["main"]
+    workflow_dispatch:
+
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+jobs:
+    ci:
+        uses: ./.github/workflows/ci.yaml
+
+    pipes:
+        needs: ci
+        uses: dragunovartem99/pipes/.github/workflows/deploy-github.yaml@v1.0.1
+        with:
+            build-command: build
+            dist-folder: ./dist

.github/workflows/release.yaml

@@ -0,0 +1,18 @@
+name: Release
+
+on:
+    push:
+        branches: ["main"]
+
+permissions:
+    contents: write
+    pull-requests: write
+    id-token: write
+
+jobs:
+    ci:
+        uses: ./.github/workflows/ci.yaml
+
+    pipes:
+        needs: ci
+        uses: dragunovartem99/pipes/.github/workflows/release-npm.yaml@v1.0.1

.gitignore

@@ -1,2 +1,4 @@
-node_modules/
-dist/
+node_modules
+dist
+*.log
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+24

README.md

@@ -1,76 +1,61 @@
-## 98.css
+# 99.css
 
-<a href="https://npm.im/98.css"><img height="29" alt="npm" src="https://98badges.now.sh/api/version" /></a>
-<a href="https://unpkg.com/98.css"><img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" /></a>
+[98.css](https://github.com/jdan/98.css), rebuilt to be modular and scalable.
 
-A design system for building faithful recreations of old UIs.
+- **Modular**: each component is its own CSS file, import only what you use.
+- **Scalable**: every size derives from `--scale`, bevel lines snap to whole pixels.
+- **No build step**: plain CSS with relative `url()`s, works with any bundler or a `<link>`.
 
-<img alt="a screenshot of a window with the title 'My First VB4 Program' and two buttons OK and Cancel, styled like a Windows 98 dialog" src="https://github.com/jdan/98.css/blob/main/docs/window.png?raw=true" height="133"> <img alt="a magnified view showing pixel-perfect borders on a scrollbar and button element" src="https://github.com/jdan/98.css/blob/main/docs/zoom.png?raw=true?raw=true" height="133">
+Docs: https://dragunovartem99.github.io/99.css/
 
-98.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.
+## Install
 
-Be sure to check out [XP.css](https://botoxparty.github.io/XP.css/) and [7.css](https://khang-nd.github.io/7.css/) as well.
-
-### Installation / Usage
-
-The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/).
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <title>98.css example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://unpkg.com/98.css" />
-</head>
-
-<body>
-  <div class="window" style="margin: 32px; width: 250px">
-    <div class="title-bar">
-      <div class="title-bar-text">
-        My First VB4 Program
-      </div>
-    </div>
-    <div class="window-body">
-      <p>Hello, world!</p>
-    </div>
-  </div>
-</body>
-</html>
+```sh
+npm install 99.css
 ```
 
-Alternatively, you can grab 98.css for [the releases page](https://github.com/jdan/98.css/releases) or [npm](https://www.npmjs.com/package/98.css).
-
-```
-npm install 98.css
+```js
+import "99.css";
 ```
 
-Here is an example of [98.css being used with React](https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js), and [an example with vanilla JavaScript](https://codesandbox.io/s/late-sound-miqho?file=/index.html).
-
-Refer to the [documentation page](https://jdan.github.io/98.css/) for specific instructions on this library's components.
+## Modules
 
-### Developing
+Core (always needed): `tokens.css`, `fonts.css`, `base.css`.
 
-First, run `npm install`.
+Components: `button.css`, `checkbox.css`, `radio.css`, `group-box.css`, `field-row.css`,
+`text-box.css`, `slider.css`, `dropdown.css`, `window.css`, `tree-view.css`, `tabs.css`,
+`table-view.css`, `progress.css`, `field-border.css`, `scrollbar.css`.
 
-[`style.css`](https://github.com/jdan/98.css/blob/main/style.css) is where everything happens.
-
-You can use `npm start` to start a development environment that will watch for file changes and rebuild 98.css, reloading your browser in the process.
+```js
+import "99.css/tokens.css";
+import "99.css/fonts.css";
+import "99.css/base.css";
+import "99.css/window.css";
+```
 
-You can run a build manually with `npm run build`. This will write to the `dist/` directory.
+## Scaling
 
-### Issues, Contributing, etc.
+```css
+:root {
+	--scale: 1.5;
+}
+```
 
-Refer to [the GitHub issues page](https://github.com/jdan/98.css/issues) to see bugs in my CSS or report new ones. I'd really like to see your pull requests (especially those new to open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like to make it a fun place to build your open-source muscle.
+Size tokens resolve where they are declared, so to scale only a subtree, mark it with `data-scale`:
 
-Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe reading my posts on [Bluesky](https://bsky.app/profile/jdan.me). 👋
+```html
+<div data-scale style="--scale: 2">...</div>
+```
 
-### Publishing
+Use `--px` (one scaled pixel) and `--border-width` (one crisp bevel line) in your own styles.
 
-Building the docs site: `npm run deploy:docs`
+## Development
 
-Publishing to npm: `npm run release`
+```sh
+npm run dev    # docs with live reload
+npm run build  # static docs into dist/
+```
 
-### License
+Pull requests build the docs. Merging to `main` deploys them to GitHub Pages and, with a pending
+changeset (`npx changeset`), opens a release PR that publishes to npm once merged
 
-[MIT](https://github.com/jdan/98.css/blob/main/LICENSE)

docs/docs.css

@@ -6,12 +6,12 @@ body {
 
 main {
   width: 65rem;
-  margin-left: 240px;
+  margin-left: calc(240 * var(--px));
   margin-bottom: 60px;
 }
 
 aside {
-  width: 200px;
+  width: calc(200 * var(--px));
   position: fixed;
   top: 0;
   bottom: 0;