Add desktop app link

package-lock.json

@@ -9,6 +9,8 @@
       "version": "2.1.2",
       "license": "MIT",
       "dependencies": {
+        "@fontsource/inter": "^4.5.12",
+        "@fontsource/roboto": "^4.5.8",
         "@khanacademy/simple-markdown": "^0.8.3",
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
         "@tippyjs/react": "^4.2.6",
@@ -1829,6 +1831,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "4.5.12",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.12.tgz",
+      "integrity": "sha512-bGKk4/8tube/nCk8hav0ZDBVbzJzc7m0Vt4xF5p15IN4YImwGdtKG38Oq5bU8xHNS+VfvbFFCepgQNj7Pr/Lvg=="
+    },
+    "node_modules/@fontsource/roboto": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
+      "integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -3013,6 +3025,8 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
       "integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -3028,7 +3042,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
@@ -14814,6 +14830,16 @@
         }
       }
     },
+    "@fontsource/inter": {
+      "version": "4.5.12",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.12.tgz",
+      "integrity": "sha512-bGKk4/8tube/nCk8hav0ZDBVbzJzc7m0Vt4xF5p15IN4YImwGdtKG38Oq5bU8xHNS+VfvbFFCepgQNj7Pr/Lvg=="
+    },
+    "@fontsource/roboto": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
+      "integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -15797,15 +15823,14 @@
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
-      "requires": {
-        "ajv": "^8.0.0"
-      },
+      "requires": {},
       "dependencies": {
         "ajv": {
-          "version": "8.9.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
+          "version": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
           "integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -15817,7 +15842,9 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
           "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },

package.json

@@ -15,6 +15,8 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
+    "@fontsource/inter": "^4.5.12",
+    "@fontsource/roboto": "^4.5.8",
     "@khanacademy/simple-markdown": "^0.8.3",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
     "@tippyjs/react": "^4.2.6",

public/font/supreme/README.md

@@ -1,41 +0,0 @@
-# Installing Webfonts
-Follow these simple Steps.
-
-## 1.
-Put `supreme/` Folder into a Folder called `fonts/`.
-
-## 2.
-Put `supreme.css` into your `css/` Folder.
-
-## 3. (Optional)
-You may adapt the `url('path')` in `supreme.css` depends on your Website Filesystem.
-
-## 4.
-Import `supreme.css` at the top of you main Stylesheet.
-
-```
-@import url('supreme.css');
-```
-
-## 5.
-
-
-```
-font-family: 'Supreme-Variable';
-font-family: 'Supreme-VariableItalic';
-font-family: 'Supreme-Thin';
-font-family: 'Supreme-ThinItalic';
-font-family: 'Supreme-Extralight';
-font-family: 'Supreme-ExtralightItalic';
-font-family: 'Supreme-Light';
-font-family: 'Supreme-LightItalic';
-font-family: 'Supreme-Regular';
-font-family: 'Supreme-Italic';
-font-family: 'Supreme-Medium';
-font-family: 'Supreme-MediumItalic';
-font-family: 'Supreme-Bold';
-font-family: 'Supreme-BoldItalic';
-font-family: 'Supreme-Extrabold';
-font-family: 'Supreme-ExtraboldItalic';
-```
-

public/font/supreme/css/supreme.css

@@ -1,175 +0,0 @@
-@font-face {
-  font-family: 'Supreme-Variable';
-  src: url('../fonts/Supreme-Variable.woff2') format('woff2'),
-       url('../fonts/Supreme-Variable.woff') format('woff'),
-       url('../fonts/Supreme-Variable.ttf') format('truetype');
-       font-weight: 100 800;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-VariableItalic';
-  src: url('../fonts/Supreme-VariableItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-VariableItalic.woff') format('woff'),
-       url('../fonts/Supreme-VariableItalic.ttf') format('truetype');
-       font-weight: 100 800;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Thin';
-  src: url('../fonts/Supreme-Thin.woff2') format('woff2'),
-       url('../fonts/Supreme-Thin.woff') format('woff'),
-       url('../fonts/Supreme-Thin.ttf') format('truetype');
-       font-weight: 100;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-ThinItalic';
-  src: url('../fonts/Supreme-ThinItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-ThinItalic.woff') format('woff'),
-       url('../fonts/Supreme-ThinItalic.ttf') format('truetype');
-       font-weight: 100;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Extralight';
-  src: url('../fonts/Supreme-Extralight.woff2') format('woff2'),
-       url('../fonts/Supreme-Extralight.woff') format('woff'),
-       url('../fonts/Supreme-Extralight.ttf') format('truetype');
-       font-weight: 200;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-ExtralightItalic';
-  src: url('../fonts/Supreme-ExtralightItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-ExtralightItalic.woff') format('woff'),
-       url('../fonts/Supreme-ExtralightItalic.ttf') format('truetype');
-       font-weight: 200;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Light';
-  src: url('../fonts/Supreme-Light.woff2') format('woff2'),
-       url('../fonts/Supreme-Light.woff') format('woff'),
-       url('../fonts/Supreme-Light.ttf') format('truetype');
-       font-weight: 300;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-LightItalic';
-  src: url('../fonts/Supreme-LightItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-LightItalic.woff') format('woff'),
-       url('../fonts/Supreme-LightItalic.ttf') format('truetype');
-       font-weight: 300;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Regular';
-  src: url('../fonts/Supreme-Regular.woff2') format('woff2'),
-       url('../fonts/Supreme-Regular.woff') format('woff'),
-       url('../fonts/Supreme-Regular.ttf') format('truetype');
-       font-weight: 400;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Italic';
-  src: url('../fonts/Supreme-Italic.woff2') format('woff2'),
-       url('../fonts/Supreme-Italic.woff') format('woff'),
-       url('../fonts/Supreme-Italic.ttf') format('truetype');
-       font-weight: 400;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Medium';
-  src: url('../fonts/Supreme-Medium.woff2') format('woff2'),
-       url('../fonts/Supreme-Medium.woff') format('woff'),
-       url('../fonts/Supreme-Medium.ttf') format('truetype');
-       font-weight: 500;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-MediumItalic';
-  src: url('../fonts/Supreme-MediumItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-MediumItalic.woff') format('woff'),
-       url('../fonts/Supreme-MediumItalic.ttf') format('truetype');
-       font-weight: 500;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Bold';
-  src: url('../fonts/Supreme-Bold.woff2') format('woff2'),
-       url('../fonts/Supreme-Bold.woff') format('woff'),
-       url('../fonts/Supreme-Bold.ttf') format('truetype');
-       font-weight: 700;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-BoldItalic';
-  src: url('../fonts/Supreme-BoldItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-BoldItalic.woff') format('woff'),
-       url('../fonts/Supreme-BoldItalic.ttf') format('truetype');
-       font-weight: 700;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Extrabold';
-  src: url('../fonts/Supreme-Extrabold.woff2') format('woff2'),
-       url('../fonts/Supreme-Extrabold.woff') format('woff'),
-       url('../fonts/Supreme-Extrabold.ttf') format('truetype');
-       font-weight: 800;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-ExtraboldItalic';
-  src: url('../fonts/Supreme-ExtraboldItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-ExtraboldItalic.woff') format('woff'),
-       url('../fonts/Supreme-ExtraboldItalic.ttf') format('truetype');
-       font-weight: 800;
-       font-display: swap;
-       font-style: italic;
-}
-

src/font.js

@@ -0,0 +1,5 @@
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/inter/variable.css';

src/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDom from 'react-dom';
+import './font';
 import './index.scss';
 
 import settings from './client/state/settings';

src/index.scss

@@ -1,5 +1,4 @@
 @use './app/partials/screen';
-@import '../public/font/supreme/css/supreme.css';
 
 :root {
 
@@ -144,21 +143,21 @@
   --lh-s1: 24px;
 
   --fs-b1: 16px;
-  --ls-b1: 0;
+  --ls-b1: 0.1px;
   --lh-b1: 24px;
 
   --fs-b2: 14px;
-  --ls-b2: 0;
+  --ls-b2: 0.2px;
   --lh-b2: 20px;
 
   --fs-b3: 12px;
-  --ls-b3: 0;
+  --ls-b3: 0px;
   --lh-b3: 16px;
 
   /* font-weight */
   --fw-light: 300;
-  --fw-normal: 440;
-  --fw-medium: 600;
+  --fw-normal: 400;
+  --fw-medium: 500;
   --fw-bold: 700;
 
 
@@ -192,10 +191,9 @@
   --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
   --fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
   --fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
-
-  --supreme-font: 'Supreme-Variable', 'Supreme-VariableItalic', 'Supreme-Thin', 'Supreme-ThinItalic', 'Supreme-Extralight', 'Supreme-ExtralightItalic', 'Supreme-Light', 'Supreme-LightItalic', 'Supreme-Regular', 'Supreme-Italic', 'Supreme-Medium', 'Supreme-MediumItalic', 'Supreme-Bold', 'Supreme-BoldItalic', 'Supreme-Extrabold', 'Supreme-ExtraboldItalic';
-  --font-primary: var(--supreme-font), Arial, sans-serif;
-  --font-secondary: var(--font-primary);
+  
+  --font-primary: 'Roboto', sans-serif;
+  --font-secondary: 'Roboto', sans-serif;
 }
 
 
@@ -276,9 +274,25 @@
 
   --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
   --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
+  
+  /* font styles: font-size, letter-spacing, line-hight */
+  --fs-h1: 35.6px;
+
+  --fs-h2: 23.6px;
+
+  --fs-s1: 17.6px;
+
+  --fs-b1: 14.6px;
+  --ls-b1: 0.14px;
+
+  --fs-b2: 13.2px;
+
+  --fs-b3: 11.2px;
 
   /* override normal font weight for dark mode */
-  --fw-normal: 340;
+  --fw-normal: 350;
+
+  --font-secondary: 'InterVariable', 'Roboto', sans-serif;
 }
 
 .dark-theme,
@@ -321,10 +335,34 @@
   font-family: var(--font-primary);
 
   /* override font styles for primary font */
-  --fw-light: 400;
-  --fw-normal: 500;
-  --fw-medium: 600;
-  --fw-bold: 700;
+  --fs-h1: 36px;
+  --ls-h1: -1.5px;
+  --lh-h1: 38px;
+
+  --fs-h2: 24px;
+  --ls-h2: -0.5px;
+  --lh-h2: 30px;
+
+  --fs-s1: 18px;
+  --ls-s1: -0.2px;
+  --lh-s1: 24px;
+
+  --fs-b1: 16px;
+  --ls-b1: 0.1px;
+  --lh-b1: 24px;
+
+  --fs-b2: 14px;
+  --ls-b2: 0.2px;
+  --lh-b2: 20px;
+
+  --fs-b3: 12px;
+  --ls-b3: 0px;
+  --lh-b3: 16px;
+
+  --fw-light: 300;
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
 }
 
 html {
@@ -342,7 +380,7 @@ body {
   background-color: var(--bg-surface-low);
 
   /*Why font-variant-ligatures => https://github.com/rsms/inter/issues/222 */
-  font-variant-ligatures: no-common-ligatures;
+  font-variant-ligatures: no-contextual;
 }
 #root {
   width: 100%;