add about section, adjust typography

Author: mlc

README.md

@@ -14,8 +14,13 @@ Go to https://tpg.makeinstallnotwar.org/
 - Technologies used: [react][], [redux][], [typescript][], [turf.js][], [GeoJSON][], etc.
 - Contact mlc if you have any questions
 
+## Typography
+
+[Inter][]
+
 [react]: https://react.dev/
 [redux]: https://redux-toolkit.js.org/
 [typescript]: https://www.typescriptlang.org/
 [turf.js]: https://turfjs.org/
 [GeoJSON]: https://geojson.org/
+[Inter]: https://rsms.me/inter/

build.mjs

@@ -8,13 +8,11 @@ import {
 } from '@aws-sdk/client-cloudfront';
 import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3';
 import htmlPlugin from '@chialab/esbuild-plugin-html';
-import postCssPlugin from '@deanc/esbuild-plugin-postcss';
 import * as esbuild from 'esbuild';
 import { randomBytes } from 'node:crypto';
 import { readFile, readdir, unlink } from 'node:fs/promises';
 import { extname, join as joinPath } from 'node:path';
 import * as process from 'node:process';
-import postcssPresetEnv from 'postcss-preset-env';
 
 const dev = process.argv[2] === 'serve';
 const deploy = process.argv[2] === 'deploy';
@@ -42,14 +40,15 @@ const ctx = await esbuild.context({
   platform: 'browser',
   plugins: [
     htmlPlugin({ minifyOptions: { minifySvg: false } }),
-    postCssPlugin({ plugins: [postcssPresetEnv()] }),
+    //postCssPlugin({ plugins: [postcssPresetEnv()] }),
   ],
   charset: 'utf8',
   define: {
     DEBUG: JSON.stringify(dev),
     'process.env.NODE_ENV': dev ? '"development"' : '"production"',
   },
   target: ['chrome125', 'firefox118', 'edge133', 'ios15', 'safari17'],
+  loader: { '.woff2': 'file' },
 });
 
 if (dev) {
@@ -65,6 +64,7 @@ const mimeTypes = {
   '.map': 'application/json',
   '.txt': 'text/plain;charset=utf-8',
   '.html': 'text/html;charset=utf-8',
+  '.woff2': 'font/woff2',
 };
 
 if (deploy) {

src/About.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+const About: React.FC = () => (
+  <>
+    <h2>About</h2>
+    <p className="hint">
+      This is a utility for finding your closest photo for several different
+      game modes. All computations are performed on your computer and no data is
+      transmitted anywhere. If you want to see or modify the source code, feel
+      free to{' '}
+      <a href="https://github.com/mlc/tpg-solver">have a look on GitHub</a>. For
+      any other questions, contact mlc.
+    </p>
+  </>
+);
+
+export default About;

src/InterVariable.woff2

@@ -38,7 +38,7 @@ const stringify = (p: unknown, hint: string) => {
   if (typeof p === 'string') {
     return p;
   } else if (typeof p === 'number') {
-    return hint === 'distance' ? p.toFixed(3) : p.toString();
+    return hint === 'distance' ? `${p.toFixed(3)}\u2009km` : p.toString();
   } else {
     return '';
   }

src/Results.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
+import About from './About';
 import Data from './Data';
 import Game from './Game';
 import Providers from './Providers';
@@ -12,6 +13,7 @@ const App = () => (
     <Game />
     <Data />
     <Results />
+    <About />
   </Providers>
 );
 

src/index.tsx

@@ -1,18 +1,76 @@
-@import url('https://fonts.googleapis.com/css2?family=Cabin:wdth,[email protected],400..700&display=swap');
-
 :root {
   --main-bg-color: #222;
   --main-text-color: #ffe;
   --error-color: #e77;
 }
 
-body {
-  font-family: 'Cabin', sans-serif;
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(InterVariable.woff2) format('woff2');
+}
+
+@font-feature-values Inter {
+  @character-variant {
+    cv01: 1;
+    cv02: 2;
+    cv03: 3;
+    cv04: 4;
+    cv05: 5;
+    cv06: 6;
+    cv07: 7;
+    cv08: 8;
+    cv09: 9;
+    cv10: 10;
+    cv11: 11;
+    cv12: 12;
+    cv13: 13;
+    alt-1: 1; /* Alternate one */
+    alt-3: 9; /* Flat-top three */
+    open-4: 2; /* Open four */
+    open-6: 3; /* Open six */
+    open-9: 4; /* Open nine */
+    lc-l-with-tail: 5; /* Lower-case L with tail */
+    simplified-u: 6; /* Simplified u */
+    alt-double-s: 7; /* Alternate German double s */
+    uc-i-with-serif: 8; /* Upper-case i with serif */
+    uc-g-with-spur: 10; /* Capital G with spur */
+    single-story-a: 11; /* Single-story a */
+    compact-lc-f: 12; /* Compact f */
+    compact-lc-t: 13; /* Compact t */
+  }
+  @styleset {
+    ss01: 1;
+    ss02: 2;
+    ss03: 3;
+    ss04: 4;
+    ss05: 5;
+    ss06: 6;
+    ss07: 7;
+    ss08: 8;
+    open-digits: 1; /* Open digits */
+    disambiguation: 2; /* Disambiguation (with zero) */
+    disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+    round-quotes-and-commas: 3; /* Round quotes & commas */
+    square-punctuation: 7; /* Square punctuation */
+    square-quotes: 8; /* Square quotes */
+    circled-characters: 5; /* Circled characters */
+    squared-characters: 6; /* Squared characters */
+  }
+}
+
+:root {
+  font-family: 'Inter', sans-serif;
   font-optical-sizing: auto;
-  font-weight: 400;
+  font-weight: 300;
   font-style: normal;
-  font-variation-settings: 'wdth' 87.5;
   font-variant-numeric: tabular-nums;
+  font-variant-alternates: character-variant(open-6, open-9);
+}
+
+body {
   font-size: 18px;
   background-color: var(--main-bg-color);
   color: var(--main-text-color);
@@ -30,16 +88,22 @@ body {
 h1 {
   font: inherit;
   font-size: 2rem;
-  font-weight: 700;
+  font-weight: 550;
 }
 h2 {
   font: inherit;
   font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: 425;
   border-top: 1px solid var(--main-text-color);
   padding-top: 8px;
 }
 
+th,
+strong,
+b {
+  font-weight: 550;
+}
+
 #mode-selector {
   display: flex;
   flex-direction: row;