Add era-appropriate system fonts

mihaip · mihaip · commit 0398c8d7bf30 · 2024-04-11T22:24:36.000-07:00
Uses Chicago and Charcoal for the Classic and Platinum appearances. Fixes #211
diff --git a/index.html b/index.html
@@ -20,6 +20,18 @@
             crossorigin="anonymous"
             href="/src/Fonts/AppleGaramond.woff2"
         />
+        <link
+            rel="preload"
+            as="font"
+            crossorigin="anonymous"
+            href="/src/Fonts/ChicagoFLF.woff2"
+        />
+        <link
+            rel="preload"
+            as="font"
+            crossorigin="anonymous"
+            href="/src/Fonts/Charcoal.woff2"
+        />
         <title>Infinite Mac</title>
     </head>
     <body>
diff --git a/src/About.tsx b/src/About.tsx
@@ -2,6 +2,7 @@ import {useEffect, useRef, useState} from "react";
 import {Dialog} from "./controls/Dialog";
 import {Donate} from "./Donate";
 import * as varz from "./varz";
+import {appearanceSystemFont} from "./controls/Appearance";
 
 export function About({onDone}: {onDone: () => void}) {
     const email = [
@@ -18,14 +19,21 @@ export function About({onDone}: {onDone: () => void}) {
     const aboutContainerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
+        const aboutContainerDom = aboutContainerRef.current;
+        console.log(aboutContainerDom);
+        if (!aboutContainerDom) {
+            return;
+        }
+        for (const headings of aboutContainerDom.querySelectorAll("h2")) {
+            headings.classList.add(appearanceSystemFont("Classic"));
+        }
+
         const emailLink =
-            aboutContainerRef.current?.querySelector<HTMLAnchorElement>(
-                ".email"
-            );
+            aboutContainerDom.querySelector<HTMLAnchorElement>(".email");
         if (emailLink) {
             emailLink.href = `mailto:${email}`;
         }
-        const donateLink = aboutContainerRef.current?.querySelector(".donate");
+        const donateLink = aboutContainerDom.querySelector(".donate");
         if (donateLink) {
             const showDonate = () => setDonateVisible(true);
             donateLink.addEventListener("click", showDonate);
diff --git a/src/Browser.css b/src/Browser.css
@@ -141,12 +141,12 @@
 }
 
 .DiskContents .Row {
-    margin-bottom: 1em;
+    margin-bottom: 18px;
 }
 
 @media (max-width: 440px) {
     .DiskContents .Row {
-        margin-bottom: 0.5em;
+        margin-bottom: 12px;
     }
 }
 
diff --git a/src/Fonts/Charcoal.woff2 b/src/Fonts/Charcoal.woff2
diff --git a/src/Fonts/ChicagoFLF.woff2 b/src/Fonts/ChicagoFLF.woff2
diff --git a/src/controls/Appearance.css b/src/controls/Appearance.css
@@ -0,0 +1,32 @@
+/* ChicagoFLF is a TrueType version of Chicago, downloaded from
+https://tinkerdifferent.com/resources/collection-of-classic-apple-fonts-for-your-modern-computer.130/ */
+@font-face {
+    font-family: "ChicagoFLF";
+    src: url(../Fonts/ChicagoFLF.woff2);
+    font-display: swap;
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* Charcoal downloaded from https://os9.ca/ */
+@font-face {
+    font-family: "Charcoal";
+    src: url(../Fonts/Charcoal.woff2);
+    font-display: swap;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.AppearanceSystemFont-Classic {
+    font-family: "ChicagoFLF", "Helvetica", "Arial", sans-serif;
+    font-weight: normal !important;
+}
+
+.AppearanceSystemFont-Platinum {
+    font-family: "Charcoal", "Helvetica", "Arial", sans-serif;
+    font-weight: normal !important;
+}
+
+.AppearanceSystemFont-NeXT {
+    font-family: "Helvetica", "Arial", sans-serif;
+}
diff --git a/src/controls/Appearance.ts b/src/controls/Appearance.ts
@@ -1 +1,7 @@
+import "./Appearance.css";
+
 export type Appearance = "Classic" | "Platinum" | "NeXT";
+
+export function appearanceSystemFont(appearance: Appearance) {
+    return `AppearanceSystemFont-${appearance}`;
+}
diff --git a/src/controls/Button.css b/src/controls/Button.css
@@ -7,7 +7,6 @@
     padding: 1px 8px;
     font-size: 13px;
     color: #000;
-    font-family: "Helvetica", "Arial", sans-serif;
     font-weight: bold;
     user-select: none;
     white-space: nowrap;
@@ -33,6 +32,7 @@
 
 .Button.Button-Classic {
     border-image-source: url(../Images/ClassicButton.png);
+    line-height: 13px;
 }
 
 .Button.Button-Classic:active {
@@ -41,6 +41,7 @@
 
 .Button.Button-Platinum {
     border-image-source: url(../Images/PlatinumButton.png);
+    line-height: 13px;
 }
 
 .Button.Button-Platinum:active {
diff --git a/src/controls/Button.tsx b/src/controls/Button.tsx
@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import "./Button.css";
-import {type Appearance} from "./Appearance";
+import {appearanceSystemFont, type Appearance} from "./Appearance";
 
 export function Button({
     appearance,
@@ -13,6 +13,7 @@ export function Button({
     const buttonClassName = classNames(
         "Button",
         `Button-${appearance}`,
+        appearanceSystemFont(appearance),
         className
     );
     return (
diff --git a/src/controls/Dialog.tsx b/src/controls/Dialog.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import {Button} from "./Button";
 import "./Dialog.css";
 import classNames from "classnames";
-import {type Appearance} from "./Appearance";
+import {appearanceSystemFont, type Appearance} from "./Appearance";
 
 export function Dialog({
     title,
@@ -36,7 +36,7 @@ export function Dialog({
                     `Dialog-${appearance}`,
                     className
                 )}>
-                <h1>{title}</h1>
+                <h1 className={appearanceSystemFont(appearance)}>{title}</h1>
 
                 <div className="Dialog-Content">{children}</div>
 
diff --git a/src/controls/Select.css b/src/controls/Select.css
@@ -11,8 +11,8 @@
     font-size: 12px;
     line-height: 12px;
     color: #000;
-    font-family: "Helvetica", "Arial", sans-serif;
     user-select: none;
+    -moz-appearance: none;
 }
 
 .Select:active {
@@ -35,6 +35,8 @@
 
 .Select.Select-Classic {
     border-image-source: url(../Images/ClassicSelect.png);
+    border-top-width: 2px;
+    border-bottom-width: 2px;
 }
 
 .Select.Select-Classic:active {
@@ -43,6 +45,8 @@
 
 .Select.Select-Platinum {
     border-image-source: url(../Images/PlatinumSelect.png);
+    border-top-width: 2px;
+    border-bottom-width: 2px;
 }
 
 .Select.Select-Platinum:active {
diff --git a/src/controls/Select.tsx b/src/controls/Select.tsx
@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import "./Select.css";
-import {type Appearance} from "./Appearance";
+import {appearanceSystemFont, type Appearance} from "./Appearance";
 
 export function Select({
     appearance,
@@ -13,6 +13,7 @@ export function Select({
     const selectClassName = classNames(
         "Select",
         `Select-${appearance}`,
+        appearanceSystemFont(appearance),
         className
     );
     return (

Original file line number	Diff line number	Diff line change
`@@ -141,12 +141,12 @@`
`141`	`141`	`}`
`142`	`142`
`143`	`143`	`.DiskContents .Row {`
`144`		`- margin-bottom: 1em;`
	`144`	`+ margin-bottom: 18px;`
`145`	`145`	`}`
`146`	`146`
`147`	`147`	`@media (max-width: 440px) {`
`148`	`148`	`.DiskContents .Row {`
`149`		`- margin-bottom: 0.5em;`
	`149`	`+ margin-bottom: 12px;`
`150`	`150`	`}`
`151`	`151`	`}`
`152`	`152`