Improve demo spacing, add contributors, scope npm package

- Add default letter-spacing to .segment classes and increase demo tracking
- Credit Mila Jovanovikj (digits) and Ilija Boshkov (demo/packaging)
- Rename package to @42mk/segment and update all references
- Wire npm publish into release workflow; add engines and repo metadata
- README: fix glyph count to 62, document digits and scoped install

Author: Ilija Boshkov

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "demo",
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["--yes", "http-server", ".", "-p", "8090", "-c-1"],
+      "port": 8090
+    }
+  ]
+}

.github/workflows/release.yml

@@ -6,6 +6,7 @@ on:
 
 permissions:
   contents: write
+  id-token: write
 
 jobs:
   release:
@@ -17,6 +18,7 @@ jobs:
         with:
           node-version: 20
           cache: npm
+          registry-url: "https://registry.npmjs.org"
 
       - run: npm ci
       - run: npm run build
@@ -41,3 +43,8 @@ jobs:
             segment-font-${{ github.ref_name }}.tar.gz
             dist/segment.woff2
             dist/segment.ttf
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -2,18 +2,18 @@
 
 A custom display font, packaged for web distribution.
 
-52 glyphs — uppercase `A`–`Z` (`U+0041`–`U+005A`) and lowercase `a`–`z`
-(`U+0061`–`U+007A`). Ships as `woff2`, `woff`, `ttf`, and `svg` with a
-ready-to-use CSS file.
+62 glyphs — uppercase `A`–`Z` (`U+0041`–`U+005A`), lowercase `a`–`z`
+(`U+0061`–`U+007A`), and digits `0`–`9` (`U+0030`–`U+0039`). Ships as
+`woff2`, `woff`, `ttf`, and `svg` with a ready-to-use CSS file.
 
 ## Quick start
 
 ```bash
-npm install segment-font
+npm install @42mk/segment
 ```
 
 ```css
-@import "segment-font/css";
+@import "@42mk/segment/css";
 
 .label {
   font-family: "Segment", sans-serif;
@@ -27,8 +27,8 @@ The imported CSS defines the `@font-face` and a `.segment` helper class.
 Clone the repo and run the demo page:
 
 ```bash
-git clone <repo-url> segment-font
-cd segment-font
+git clone https://github.com/42dotmk/Segment.git segment
+cd segment
 npm install
 npm run build
 npm run demo
@@ -37,7 +37,7 @@ npm run demo
 Then open <http://localhost:8080>.
 
 The demo (`demo/index.html`) shows a pangram, a live input tester, and the
-full A–Z / a–z glyph grid with codepoint labels. It loads fonts directly
+full A–Z / a–z / 0–9 glyph grid with codepoint labels. It loads fonts directly
 from `dist/`, so you must `npm run build` at least once before starting it.
 
 Any static server works — `npm run demo` just wraps `npx http-server demo`.
@@ -47,26 +47,26 @@ Any static server works — `npm run demo` just wraps `npx http-server demo`.
 ### As an npm package
 
 ```bash
-npm install segment-font
+npm install @42mk/segment
 ```
 
 Available subpath exports:
 
-| Import                         | File                      |
-| ------------------------------ | ------------------------- |
-| `segment-font` / `.../css`     | `dist/segment.css`        |
-| `segment-font/woff2`           | `dist/segment.woff2`      |
-| `segment-font/woff`            | `dist/segment.woff`       |
-| `segment-font/ttf`             | `dist/segment.ttf`        |
-| `segment-font/svg`             | `dist/segment.svg`        |
-| `segment-font/glyph-map`       | `dist/glyph-map.json`     |
+| Import                          | File                      |
+| ------------------------------- | ------------------------- |
+| `@42mk/segment` / `.../css`     | `dist/segment.css`        |
+| `@42mk/segment/woff2`           | `dist/segment.woff2`      |
+| `@42mk/segment/woff`            | `dist/segment.woff`       |
+| `@42mk/segment/ttf`             | `dist/segment.ttf`        |
+| `@42mk/segment/svg`             | `dist/segment.svg`        |
+| `@42mk/segment/glyph-map`       | `dist/glyph-map.json`     |
 
 ### Direct file reference
 
 ```html
-<link rel="preload" href="/segment-font/dist/segment.woff2"
+<link rel="preload" href="/@42mk/segment/dist/segment.woff2"
       as="font" type="font/woff2" crossorigin>
-<link rel="stylesheet" href="/segment-font/dist/segment.css">
+<link rel="stylesheet" href="/@42mk/segment/dist/segment.css">
 ```
 
 ## Build from source
@@ -109,8 +109,11 @@ Node.js 18+ (ESM build scripts).
 ## Credits
 
 - **Original design:** Pavlina Buchevska — designed the original SVG glyphs.
+- **Number glyphs:** Mila Jovanovikj — designed the digit glyphs `0`–`9`.
 - **Font conversion & packaging:** [Darko Bozhinovski](https://darko.io) —
   converted the original SVG design into a distributable web font.
+- **Demo page & packaging fixes:** Ilija Boshkov — built the demo/landing
+  page and tidied up the npm packaging.
 
 ## License
 

demo/index.html

@@ -316,7 +316,7 @@
       font-size: clamp(4rem, 14vw, 11rem);
       font-weight: 1;
       line-height: 1;
-      letter-spacing: 0.04em;
+      letter-spacing: 0.08em;
       margin-bottom: 1.5rem;
       word-break: break-all;
     }
@@ -484,6 +484,7 @@
       width: 100%;
       font-family: "Segment", sans-serif;
       font-size: clamp(2rem, 6vw, 4.5rem);
+      letter-spacing: 0.06em;
       padding: 1rem 1.25rem;
       background: var(--dark-700);
       border: 1px solid var(--border);
@@ -560,7 +561,7 @@
       font-family: "Segment", sans-serif;
       font-size: 5rem;
       line-height: 1.15;
-      letter-spacing: 0.03em;
+      letter-spacing: 0.06em;
       word-break: break-word;
       padding: 2rem;
       background: var(--dark-800);
@@ -832,6 +833,7 @@
     .marquee-item {
       font-family: "Segment", sans-serif;
       font-size: clamp(2rem, 4vw, 3.5rem);
+      letter-spacing: 0.08em;
       white-space: nowrap;
       color: var(--text-muted);
       transition: color 0.3s;
@@ -960,7 +962,7 @@ <h1 class="hero__title"><span class="hero__title-cyan">Seg</span><span class="he
             </svg>
             View on GitHub
           </a>
-          <a href="https://www.npmjs.com/package/segment-font" class="btn btn--outline">
+          <a href="https://www.npmjs.com/package/@42mk/segment" class="btn btn--outline">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
               <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0h-2.666V8.667h2.666v5.331zm12 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM11.333 8.667h2.666v4h-2.666v-4z"/>
             </svg>
@@ -1111,23 +1113,23 @@ <h2 class="section-header__title">Quick Start</h2>
           <div class="code-block__header">
             <span>npm</span>
             <button type="button" class="code-block__copy"
-              onclick="copyCode(this, 'npm install segment-font')">Copy</button>
+              onclick="copyCode(this, 'npm install @42mk/segment')">Copy</button>
           </div>
           <div class="code-block__body">
             <pre><span class="cmt"># Install the package</span>
-<span class="kw">npm install</span> segment-font</pre>
+<span class="kw">npm install</span> @42mk/segment</pre>
           </div>
         </div>
 
         <div class="code-block reveal" style="transition-delay:0.1s;">
           <div class="code-block__header">
             <span>css</span>
             <button type="button" class="code-block__copy"
-              onclick="copyCode(this, '@import &quot;segment-font/css&quot;;')">Copy</button>
+              onclick="copyCode(this, '@import &quot;@42mk/segment/css&quot;;')">Copy</button>
           </div>
           <div class="code-block__body">
             <pre><span class="cmt">/* Import the font */</span>
-<span class="kw">@import</span> <span class="str">"segment-font/css"</span>;
+<span class="kw">@import</span> <span class="str">"@42mk/segment/css"</span>;
 
 <span class="prop">.headline</span> {
   <span class="kw">font-family</span>: <span class="str">"Segment"</span>, sans-serif;
@@ -1139,16 +1141,16 @@ <h2 class="section-header__title">Quick Start</h2>
           <div class="code-block__header">
             <span>html</span>
             <button type="button" class="code-block__copy"
-              onclick="copyCode(this, '&lt;link rel=&quot;stylesheet&quot; href=&quot;segment-font/dist/segment.css&quot;&gt;')">Copy</button>
+              onclick="copyCode(this, '&lt;link rel=&quot;stylesheet&quot; href=&quot;@42mk/segment/dist/segment.css&quot;&gt;')">Copy</button>
           </div>
           <div class="code-block__body">
             <pre><span class="cmt">&lt;!-- Direct file reference --&gt;</span>
 <span class="kw">&lt;link</span> <span class="prop">rel</span>=<span class="str">"preload"</span>
-      <span class="prop">href</span>=<span class="str">"segment-font/dist/segment.woff2"</span>
+      <span class="prop">href</span>=<span class="str">"@42mk/segment/dist/segment.woff2"</span>
       <span class="prop">as</span>=<span class="str">"font"</span> <span class="prop">type</span>=<span class="str">"font/woff2"</span>
       <span class="prop">crossorigin</span><span class="kw">&gt;</span>
 <span class="kw">&lt;link</span> <span class="prop">rel</span>=<span class="str">"stylesheet"</span>
-      <span class="prop">href</span>=<span class="str">"segment-font/dist/segment.css"</span><span class="kw">&gt;</span></pre>
+      <span class="prop">href</span>=<span class="str">"@42mk/segment/dist/segment.css"</span><span class="kw">&gt;</span></pre>
           </div>
         </div>
 
@@ -1158,12 +1160,12 @@ <h2 class="section-header__title">Quick Start</h2>
           </div>
           <div class="code-block__body">
             <pre><span class="cmt">// Available subpath exports</span>
-<span class="kw">import</span> <span class="str">"segment-font"</span>         <span class="cmt">// CSS</span>
-<span class="kw">import</span> <span class="str">"segment-font/css"</span>     <span class="cmt">// CSS</span>
-<span class="kw">import</span> <span class="str">"segment-font/woff2"</span>   <span class="cmt">// .woff2</span>
-<span class="kw">import</span> <span class="str">"segment-font/woff"</span>    <span class="cmt">// .woff</span>
-<span class="kw">import</span> <span class="str">"segment-font/ttf"</span>     <span class="cmt">// .ttf</span>
-<span class="kw">import</span> <span class="str">"segment-font/svg"</span>     <span class="cmt">// .svg</span></pre>
+<span class="kw">import</span> <span class="str">"@42mk/segment"</span>         <span class="cmt">// CSS</span>
+<span class="kw">import</span> <span class="str">"@42mk/segment/css"</span>     <span class="cmt">// CSS</span>
+<span class="kw">import</span> <span class="str">"@42mk/segment/woff2"</span>   <span class="cmt">// .woff2</span>
+<span class="kw">import</span> <span class="str">"@42mk/segment/woff"</span>    <span class="cmt">// .woff</span>
+<span class="kw">import</span> <span class="str">"@42mk/segment/ttf"</span>     <span class="cmt">// .ttf</span>
+<span class="kw">import</span> <span class="str">"@42mk/segment/svg"</span>     <span class="cmt">// .svg</span></pre>
           </div>
         </div>
       </div>
@@ -1189,11 +1191,23 @@ <h3 class="credit-card__name">Pavlina Buchevska Boshkova</h3>
             typeface.</p>
         </div>
         <div class="credit-card reveal" style="transition-delay:0.1s;">
+          <div class="credit-card__role">Number Glyphs</div>
+          <h3 class="credit-card__name">Mila Jovanovikj</h3>
+          <p class="credit-card__desc">Designed the digit glyphs 0&ndash;9, extending the typeface with a matching set of
+            numerals.</p>
+        </div>
+        <div class="credit-card reveal" style="transition-delay:0.2s;">
           <div class="credit-card__role">Font Packaging</div>
           <h3 class="credit-card__name">Darko Bozhinovski</h3>
           <p class="credit-card__desc">Converted the original SVG design into a distributable multi-format web font
             package.</p>
         </div>
+        <div class="credit-card reveal" style="transition-delay:0.3s;">
+          <div class="credit-card__role">Demo &amp; Packaging</div>
+          <h3 class="credit-card__name">Ilija Boshkov</h3>
+          <p class="credit-card__desc">Put this page together and handled the finishing touches around npm
+            packaging.</p>
+        </div>
       </div>
 
       <div class="credits__license reveal" style="transition-delay:0.2s;">
@@ -1231,7 +1245,7 @@ <h3 class="credits__license-title">SIL Open Font License 1.1</h3>
             </svg>
             Releases
           </a>
-          <a href="https://www.npmjs.com/package/segment-font" class="footer__link">
+          <a href="https://www.npmjs.com/package/@42mk/segment" class="footer__link">
             <svg viewBox="0 0 24 24" aria-hidden="true">
               <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0h-2.666V8.667h2.666v5.331zm12 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM11.333 8.667h2.666v4h-2.666v-4z"
                 fill="currentColor" stroke="none" />

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "segment-font",
+  "name": "@42mk/segment",
   "version": "1.0.0",
   "description": "Segment — a custom display/icon font.",
   "type": "module",
@@ -36,11 +36,26 @@
     "webfont",
     "display-font"
   ],
-  "author": "",
+  "author": "Pavlina Buchevska Boshkova",
+  "contributors": [
+    "Mila Jovanovikj (digit glyphs)",
+    "Darko Bozhinovski (font packaging)"
+  ],
   "license": "OFL-1.1",
+  "homepage": "https://42dotmk.github.io/Segment/demo/",
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "git+https://github.com/42dotmk/Segment.git"
+  },
+  "bugs": {
+    "url": "https://github.com/42dotmk/Segment/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "engines": {
+    "node": ">=18"
   },
   "devDependencies": {
     "globby": "^14.0.2",

package.json

@@ -134,6 +134,7 @@ const css = `@font-face {
   font-variant: normal;
   text-transform: none;
   line-height: 1;
+  letter-spacing: 0.06em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }