fix(website): better font styling, default dark

Author: marcj

README.md

@@ -2,16 +2,11 @@
 <br/>
 <br/>
 
-> Formerly Deepkit — renamed after European Union “no genuine use” ruling. Trademarks don't like open-source.
-
-<br/>
-<br/>
-
 <a href="https://discord.gg/U24mryk7Wq"><img alt="Discord" src="https://img.shields.io/discord/759513055117180999?style=square&label=Discord" /></a>
 <a href="https://www.npmjs.com/package/@deepkit/type"><img alt="npm" src="https://img.shields.io/npm/v/@deepkit/type.svg?style=square" /></a>
 [![CI](https://github.com/marcj/untitled-code/actions/workflows/main.yml/badge.svg)](https://github.com/marcj/untitled-code/actions/workflows/main.yml)
 
-This is a new modular TypeScript framework for backend applications based on runtime types.
+A modern, high-performance, and modular TypeScript framework for backend applications based on runtime types.
 
 ## Docs
 

website/src/app/components/content-text.component.ts

@@ -4,9 +4,9 @@ import { injectLocalStorageNumber, injectLocalStorageString } from '@app/app/uti
 
 @Injectable({ providedIn: 'root' })
 export class ContentTextService {
-    fontFamily = injectLocalStorageString('style/font-family', { defaultValue: '' });
-    fontSize = injectLocalStorageNumber('style/font-size', { defaultValue: 0 });
-    theme = injectLocalStorageString('style/theme', { defaultValue: '' });
+    fontFamily = injectLocalStorageString('style/font-family2', { defaultValue: 'sans-serif' });
+    fontSize = injectLocalStorageNumber('style/font-size2', { defaultValue: 0 });
+    theme = injectLocalStorageString('style/theme2', { defaultValue: 'dark' });
     darkMode = computed(() => this.theme() === 'dark');
 
     toc = injectLocalStorageString('style/toc', { defaultValue: '' });
@@ -66,6 +66,7 @@ export class ContentTextService {
       :host {
         display: block;
         margin: auto;
+        line-height: 1.75;
       }
 
       .style {
@@ -76,23 +77,23 @@ export class ContentTextService {
       }
 
       :host.font-size-very-small {
-        font-size: 0.8em;
+        font-size: 10px;
       }
 
       :host.font-size-small {
-        font-size: 0.9em;
+        font-size: 12px;
       }
 
       :host.font-size-normal {
-        font-size: 1em;
+        font-size: 14px;
       }
 
       :host.font-size-large {
-        font-size: 1.1em;
+        font-size: 16px;
       }
 
       :host.font-size-very-large {
-        font-size: 1.2em;
+        font-size: 18px;
       }
     `,
 })

website/src/styles.css

@@ -531,14 +531,14 @@ pre.console {
 
 html body .normalize-text.dark {
   --color-header: white;
-  --color-text: #ccc;
+  --color-text: #dddddd;
   --color-text-selection-bg: #0062b6;
   --color-text-selection: white;
   --context-text-color: #ccc;
 }
 
 html body .normalize-text {
-  max-width: 64ch;
+  max-width: 78ch;
   --color-header: var(--context-text-color);
   --color-text: var(--context-text-color);
   color: var(--color-text);