style: update code font

2022-05-18 22:55:20 +08:00 · 2022-05-18 22:55:20 +08:00 · c2d18a49b6
parent bba560b1de
commit c2d18a49b6
5 changed files with 45 additions and 22 deletions
--- a/src/css/code.css
+++ b/src/css/code.css
@ -1,22 +1,9 @@
-.code {
-  @apply my-5;
-  @apply relative;
-  color: var(--code-fg);
-}
-
 .code pre {
-  @apply p-5;
-  @apply rounded-lg;
-  @apply whitespace-pre;
-  @apply font-mono;
+  @apply -mx-[2rem];
+  @apply rounded-xl;
+  @apply my-8;
+  padding: 2rem;
  background-color: var(--code-bg);
-}
-
-.code:before {
-  content: attr(data-lang);
-  color: var(--lang-color);
-  @apply absolute;
-  @apply right-3;
-  @apply top-2;
-  @apply text-xs;
+  color: var(--code-fg);
+  max-height: 800px;
 }
--- a/src/css/prism-dark.css
+++ b/src/css/prism-dark.css
@ -2,8 +2,8 @@

 .code {
  --lang-color: #8d8c8c;
-  --code-bg: #2d2d2d;
-  --code-fg: #ccc;
+  --code-bg: rgb(18, 18, 38);
+  --code-fg: #fff;
 }

 .token.comment,
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@ -0,0 +1,24 @@
+import { Html, Head, Main, NextScript } from "next/document"
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin=""
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
--- a/src/pages/dashboard/[subdomain]/editor.tsx
+++ b/src/pages/dashboard/[subdomain]/editor.tsx
@ -129,13 +129,17 @@ export default function SubdomainEditor() {
    [uploadFile]
  )

-  const { editorRef } = useEditor({
+  const { editorRef, view } = useEditor({
    value: values.content,
    onChange: handleEditorContentChange,
    onDropFile: handleDropFile,
    placeholder: "Start writing here..",
  })

+  const focusEditor = () => {
+    view?.focus()
+  }
+
  return (
    <DashboardLayout>
      <DashboardMain fullWidth>
@ -220,6 +224,11 @@ export default function SubdomainEditor() {
                  type="text"
                  name="title"
                  value={values.title}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      focusEditor()
+                    }
+                  }}
                  onChange={(e) => updateValue("title", e.target.value)}
                  className="h-12 ml-1 inline-flex items-center border-none text-3xl font-bold w-full focus:outline-none"
                  placeholder="Title goes here.."
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -15,6 +15,9 @@ module.exports = {
      spacing: {
        sidebar: `240px`,
      },
+      fontFamily: {
+        mono: `IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace`,
+      },
    },
  },
  variants: {},