From d0925f3bf5d530d0dce52ea32e18a01903e8cfce Mon Sep 17 00:00:00 2001 From: renardeinside Date: Wed, 4 Dec 2024 14:39:21 +0100 Subject: [PATCH] fix fonts --- package.json | 4 ++-- src/components/Editor.tsx | 2 +- src/main.tsx | 8 ++++---- src/tailwind.css | 21 ++++++++++++++------- tailwind.config.js | 2 +- yarn.lock | 8 ++++---- 6 files changed, 26 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 2cd716f..3983bb7 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "test:e2e:ui": "playwright test --ui" }, "dependencies": { - "@fontsource-variable/fira-code": "^5.1.0", + "@fontsource-variable/jetbrains-mono": "^5.1.1", "@fontsource/space-mono": "^5.1.1", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", @@ -82,4 +82,4 @@ "vite-bundle-visualizer": "^1.2.1", "vite-plugin-static-copy": "^2.1.0" } -} \ No newline at end of file +} diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 3983dba..39401dc 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -25,7 +25,7 @@ const EditorView = ({ doc, firstLoad }: { doc: Y.Doc; firstLoad: boolean }) => { editorProps: { attributes: { class: - "!w-full prose !max-w-none dark:prose-invert prose-md leading-tight focus:outline-none min-h-[60vh]", + "!w-full prose !max-w-none dark:prose-invert prose-md leading-tight focus:outline-none min-h-[80vh]", }, }, }); diff --git a/src/main.tsx b/src/main.tsx index 326aaa3..b44c6e4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,11 +1,11 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.tsx' -import './tailwind.css' -// @ts-expect-error - for some reason this doesn't work in terms of importing the font -// however, it works in the browser -import '@fontsource-variable/fira-code'; +import '@fontsource-variable/jetbrains-mono/index.css'; + +import './tailwind.css'; + createRoot(document.getElementById('root')!).render( diff --git a/src/tailwind.css b/src/tailwind.css index 4e0858e..d9e9c3a 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -1,3 +1,8 @@ +:root { + /* Please note font is imported in ./main.tsx */ + --font-mono: 'JetBrains Mono Variable', monospace; +} + @tailwind base; @tailwind components; @tailwind utilities; @@ -25,6 +30,7 @@ --ring: 307 23.3% 14.3%; --radius: 0.5rem; } + .dark { --background: 307 40% 9%; --foreground: 307 5% 100%; @@ -59,15 +65,16 @@ } } -.prose p { - @apply my-4 leading-tight; /* Tailwind utilities */ +.ProseMirror p { + @apply my-4; + /* Tailwind utilities */ } /* Basic editor styles */ .tiptap { /* disable margin-bottom for paragraph elements under li */ - li > p { + li>p { margin-bottom: 0; } @@ -156,16 +163,16 @@ display: flex; margin-bottom: 0; - > label { + >label { flex: 0 0 auto; margin-right: 0.5rem; user-select: none; } - > div { + >div { flex: 1 1 auto; - > p { + >p { margin: 0; } } @@ -179,4 +186,4 @@ margin: 0; } } -} +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 5eae57a..4707843 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,7 +7,7 @@ export default { theme: { extend: { fontFamily: { - mono: ['"Fira Code"', 'monospace'], + mono: 'var(--font-mono)', }, borderRadius: { lg: 'var(--radius)', diff --git a/yarn.lock b/yarn.lock index 8489c53..fd537f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -368,10 +368,10 @@ resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz" integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig== -"@fontsource-variable/fira-code@^5.1.0": - version "5.1.0" - resolved "https://registry.npmjs.org/@fontsource-variable/fira-code/-/fira-code-5.1.0.tgz" - integrity sha512-fwJbJLvyZ2BhgBSPYCNsrQ6IFQTpRu9GWXY8N20wHTpbhV0Ro5QJihiZV060Ay3kVR6IVH/oSVe/cr7Ube28gg== +"@fontsource-variable/jetbrains-mono@^5.1.1": + version "5.1.1" + resolved "https://registry.yarnpkg.com/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.1.1.tgz#d45ecec375900a89b64b8c3e260b51ad848ef11c" + integrity sha512-V+1aRFRvuZ66PpO30s8l/2aADKzpV9VRsO3kSZE+rTMvi4vab3cUcPHMN2z+wAvjkYJO71Yf+g3/Y6pSMmQpVQ== "@fontsource/space-mono@^5.1.1": version "5.1.1"