docs: improve website styling

huozhi · Jan 16, 2025 · 487ab06 · 487ab06
1 parent 6c1f9ec
commit 487ab06
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 30 deletions.
diff --git a/docs/app/globals.css b/docs/app/globals.css
@@ -1,28 +1,132 @@
-* {
+/** CSS Reset from https://www.joshwcomeau.com/css/custom-css-reset <3 */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
-html {
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/** Styles */
+body {
+  font-family: var(--font-geist-sans), system-ui, -apple-system,
+    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+    Noto Color Emoji;
+  font-feature-settings: 'liga', 'clig', 'calt';
+  font-variant: common-ligatures contextual;
+  letter-spacing: -0.01em;
   font-size: 16px;
-  font-family: 'Inter', sans-serif;
+  color: #111;
+  background-color: #f9f9f9;
+  padding: 2rem;
   line-height: 1.5;
 }
 
+h1 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 1.15rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+p,
 pre {
-  background-color: #f5f5f5;
-  padding: 1rem;
-  border-radius: 5px;
-  overflow-x: auto;
-  line-height: 1.5;
+  margin-bottom: 0.75rem;
+  width: 600px;
+  max-width: 100%;
+}
+
+a {
+  color: #888;
+  text-decoration: underline solid currentColor;
+  text-underline-position: from-font;
+  text-decoration-thickness: from-font;
 }
 
-pre > code {
-  font-family: monospace;
-  font-size: 0.95rem;
+a:hover {
   color: #333;
-  display: block;
 }
 
+code {
+  font-family: var(--font-geist-mono), menlo, 'Courier New', Courier, monospace;
+  letter-spacing: 0;
+  padding: 0.2em 0.3em;
+  border-radius: 3px;
+  font-size: 0.95em;
+}
+
+pre {
+  display: inline-block;
+  background-color: #f4f4f4;
+  border-radius: 3px;
+  padding: 0.3em 0;
+  width: 600px;
+  max-width: 100%;
+  white-space: pre-wrap;
+}
+
+pre code {
+  padding: 0;
+  background: none;
+  border-radius: 0;
+}
+
+footer {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid #ddd;
+  width: 600px;
+  max-width: 100%;
+}
+
+ul {
+  padding-left: 1rem;
+}
+
+li {
+  list-style: '•  ';
+}
+
+/* Customized */
+
 .root {
   margin-left: auto;
   margin-right: auto;
@@ -37,15 +141,21 @@ pre > code {
   align-items: center;
 }
 
-.link {
-  text-decoration-line: underline;
-  color: #333;
+.code-block {
+  background-color: #f4f4f4;
+  padding: 16px 1rem;
 }
 
-a,
-a:visited {
-  color: #333;
-}
-a:hover {
-  color: #999;
+.code-block code {
+  border-radius: 5px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  width: 600px;
+  max-width: 100%;
+  overflow-x: auto;
+  color: #507a99;
 }
+
+.code--inline {
+  color: #507a99;
+}
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,10 +1,25 @@
+import { Geist, Geist_Mono } from 'next/font/google'
+import './globals.css'
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+})
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+})
+
 import React from 'react'
 import './globals.css'
 
 export default function Layout({ children }) {
   return (
     <html>
-      <body>{children}</body>
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
     </html>
   )
 }

diff --git a/docs/app/page.tsx b/docs/app/page.tsx
@@ -11,27 +11,28 @@ export default function Page() {
       </nav>
       <p>{`Build JS package with ease, package.json as configuration`}</p>
       <h3>Installation</h3>
-      <pre>
+      <pre className="code-block">
         <code>{`npm install --save-dev bunchee typescript`}</code>
       </pre>
 
       <h3>Configuration</h3>
       <p>
-        Create entry files of your library and <code>package.json</code>.
+        Create entry files of your library and{' '}
+        <code className="code--inline">package.json</code>.
       </p>
 
-      <pre>
+      <pre className="code-block">
         <code>
           {`$ cd ./coffee
 $ mkdir src && touch ./src/index.ts`}
         </code>
       </pre>
 
       <p>
-        Add the exports in <code>package.json</code>.
+        Add the exports in <code className="code--inline">package.json</code>.
       </p>
 
-      <pre>
+      <pre className="code-block">
         <code>
           {`{
   "name": "coffee",
@@ -45,12 +46,12 @@ $ mkdir src && touch ./src/index.ts`}
       </pre>
 
       <h4>Build</h4>
-      <pre>
+      <pre className="code-block">
         <code>{`$ npm run build`}</code>
       </pre>
 
       <h4>Output</h4>
-      <pre>
+      <pre className="code-block">
         <code>
           {`$ Exports  File             Size
 $ .        dist/index.js    5.6 kB`}

diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.