Slightly adjust colours

documentation/index.md

@@ -97,7 +97,7 @@ oma install fend
 
 ### PKGX
 
-fend is available on [pkgx]([https://pkgx.sh](https://pkgx.dev/pkgs/printfn.github.io/fend/)):
+fend is available on [pkgx](https://pkgx.dev/pkgs/printfn.github.io/fend/):
 
 ```bash
 pkgx fend

web/src/App.tsx

@@ -32,6 +32,14 @@ const exampleContent = (
 	</p>
 );
 
+function NewTabLink({ children, href }: { children: ReactNode; href: string }) {
+	return (
+		<a rel="noreferrer noopener" target="_blank" href={`https://${href}`}>
+			{children}
+		</a>
+	);
+}
+
 export default function App({ widget = false }: { widget?: boolean }) {
 	const [currentInput, setCurrentInput] = useState('');
 	const [output, setOutput] = useState<ReactNode>(widget ? <></> : exampleContent);
@@ -142,10 +150,8 @@ export default function App({ widget = false }: { widget?: boolean }) {
 		<main>
 			{!widget && (
 				<h1 id="about">
-					<a rel="noreferrer noopener" target="_blank" href="https://printfn.github.io/fend/documentation/">
-						fend
-					</a>{' '}
-					is an arbitrary-precision unit-aware calculator.
+					<NewTabLink href="printfn.github.io/fend/documentation/">fend</NewTabLink> is an arbitrary-precision
+					unit-aware calculator.
 				</h1>
 			)}
 			<div id="output">{output}</div>

web/src/index.css

@@ -10,7 +10,7 @@
 }
 
 body {
-	background: hsl(30, 15%, 90%);
+	background: hsl(30, 25%, 90%);
 	font: 16px/150% monospace;
 	color: hsl(30, 25%, 10%);
 	margin: 0;
@@ -21,7 +21,7 @@ a {
 }
 
 b {
-	color: hsl(30, 25%, 40%);
+	color: hsl(30, 85%, 40%);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -30,11 +30,11 @@ b {
 	}
 
 	b {
-		color: hsl(30, 25%, 70%);
+		color: hsl(30, 85%, 70%);
 	}
 
 	body {
-		background: hsl(30, 25%, 10%);
+		background: hsl(30, 35%, 10%);
 		color: hsl(30, 15%, 90%);
 	}
 }