From 487ab06f2d590d8205778cef692243d83655cf98 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 17 Jan 2025 00:09:18 +0100 Subject: [PATCH] docs: improve website styling --- docs/app/globals.css | 152 +++++++++++++++++++++++++++++++++++++------ docs/app/layout.tsx | 17 ++++- docs/app/page.tsx | 15 +++-- docs/next-env.d.ts | 2 +- 4 files changed, 156 insertions(+), 30 deletions(-) diff --git a/docs/app/globals.css b/docs/app/globals.css index 113aa473..1da99f08 100644 --- 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; +} \ No newline at end of file diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx index 24f56e71..a1bef59f 100644 --- 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 ( - {children} + + {children} + ) } diff --git a/docs/app/page.tsx b/docs/app/page.tsx index 7e51ff7a..d973d32d 100644 --- a/docs/app/page.tsx +++ b/docs/app/page.tsx @@ -11,16 +11,17 @@ export default function Page() {

{`Build JS package with ease, package.json as configuration`}

Installation

- 
+      
         {`npm install --save-dev bunchee typescript`}
       

 
       
Configuration

       

-        Create entry files of your library and package.json.
+        Create entry files of your library and{' '}
+        package.json.
       

 
-      
+      
         
           {`$ cd ./coffee
 $ mkdir src && touch ./src/index.ts`}
@@ -28,10 +29,10 @@ $ mkdir src && touch ./src/index.ts`}
       

 
       

-        Add the exports in package.json.
+        Add the exports in package.json.
       

 
-      
+      
         
           {`{
   "name": "coffee",
@@ -45,12 +46,12 @@ $ mkdir src && touch ./src/index.ts`}
       

 
       
Build

-      
+      
         {`$ npm run build`}
       

 
       
Output

-      
+      
         
           {`$ Exports  File             Size
 $ .        dist/index.js    5.6 kB`}
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
index 40c3d680..1b3be084 100644
--- a/docs/next-env.d.ts
+++ b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// 
 
 // 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.