website: Fix reponstive style.

huacnlee · Nov 10, 2023 · 90670a3 · 90670a3
1 parent 179f1b4
commit 90670a3
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 40 deletions.
diff --git a/autocorrect-website/index.html b/autocorrect-website/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <title>AutoCorrect</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="manifest" href="/manifest.webmanifest">
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF">
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#030712">

diff --git a/autocorrect-website/package.json b/autocorrect-website/package.json
@@ -23,7 +23,7 @@
   "dependencies": {
     "@huacnlee/autocorrect": "^2.6.3",
     "@monaco-editor/react": "^4.5.2",
-    "@tailwindcss/typography": "^0.5.10",
+    "github-markdown-css": "^5.4.0",
     "highlight.js": "^11.9.0",
     "marked": "^9.1.5",
     "marked-gfm-heading-id": "^3.1.0",

diff --git a/autocorrect-website/src/app.tsx b/autocorrect-website/src/app.tsx
@@ -63,19 +63,28 @@ const Layout = () => {
                 className="h-8"
               />
 
-              <div className="text-lg font-semibold">AutoCorrect</div>
+              <div className="hidden text-lg font-semibold md:block">
+                AutoCorrect
+              </div>
             </Link>
           </div>
-          <nav className="ml-5 space-x-4">
+          <nav className="flex items-center ml-5 space-x-4">
             <NavbarItem href="/autocorrect/">Intro</NavbarItem>
             <NavbarItem href="/autocorrect/usage">Usage</NavbarItem>
             <NavbarItem href="/autocorrect/editor">Playground</NavbarItem>
             <NavbarItem
               href="https://github.com/huacnlee/autocorrect"
               target="_blank"
+              className="p-0"
             >
-              <span>GitHub</span>
-              <ExternalIcon />
+              <svg
+                className="w-5 h-5 fill-gray-600 dark:fill-gray-400 hover:opacity-60"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
+              </svg>
             </NavbarItem>
           </nav>
         </div>

diff --git a/autocorrect-website/src/markdown.scss b/autocorrect-website/src/markdown.scss
@@ -1,6 +1,6 @@
 .markdown-toc {
   max-height: calc(100vh - 160px);
-  @apply hidden md:block ml-10 top-12 md:top-40 w-56 self-start sticky overflow-auto;
+  @apply hidden lg:block ml-10 top-12 md:top-40 w-56 self-start sticky overflow-auto;
   @apply text-gray-600 dark:text-gray-400;
 
   ul {
@@ -14,35 +14,8 @@
   }
 }
 
-.prose {
-  @apply max-w-3xl;
-
-  --tw-prose-pre-bg: rgb(229 231 235 / 55%);
-
-  img {
-    max-width: 100%;
-  }
-
-  code {
-    color: var(--tw-prose-pre-code);
-    @apply bg-gray-100 text-stone-800 dark:text-gray-300 dark:bg-stone-900 py-0.5 px-1 font-normal font-mono;
-    font-size: 13px;
-
-    &::before,
-    &::after {
-      @apply hidden;
-    }
-  }
-
-  pre > code {
-    background: transparent;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .dark\:prose-invert {
-    --tw-prose-pre-bg: rgb(109 120 151 / 17%);
-  }
+.markdown-body {
+  background: transparent !important;
 }
 
 .hljs {

diff --git a/autocorrect-website/src/markdown.tsx b/autocorrect-website/src/markdown.tsx
@@ -13,6 +13,7 @@ import ruby from 'highlight.js/lib/languages/ruby';
 import rust from 'highlight.js/lib/languages/rust';
 import shell from 'highlight.js/lib/languages/shell';
 
+import 'github-markdown-css/github-markdown.css';
 import './markdown.scss';
 
 hljs.registerLanguage('javascript', javascript);
@@ -50,9 +51,9 @@ const markdown = (source: string) => {
 export const MarkdownContent = ({ content }: { content: string }) => {
   const html = markdown(content);
   return (
-    <div className="relative flex">
+    <div className="relative block md:flex">
       <article
-        className="mx-auto prose dark:prose-invert"
+        className="markdown-body"
         dangerouslySetInnerHTML={{ __html: html }}
       ></article>
       <TableOfContents className="sticky" />

diff --git a/autocorrect-website/src/style.scss b/autocorrect-website/src/style.scss
@@ -21,7 +21,7 @@ body {
   }
 
   .navbar-item {
-    @apply inline-flex items-center px-4 py-2 h-8 space-x-1 text-sm rounded font-medium text-gray-900;
+    @apply inline-flex items-center px-2 md:px-4 py-2 h-8 space-x-1 text-sm rounded font-medium text-gray-900;
     @apply dark:text-gray-200;
 
     &-active {
@@ -39,7 +39,7 @@ body {
   @apply text-base text-left;
 
   p {
-    @apply mb-5 text-justify;
+    @apply mb-4;
   }
 }
 

diff --git a/bun.lockb b/bun.lockb