website: update style.

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://github.com/uiwjs/react-markdown-editor">
-    <img alt="react-markdown-editor logo" src="./website/logo.svg?sanitize=true">
+    <img alt="React Markdown Editor logo" src="./website/logo.svg?sanitize=true">
   </a>
 </p>
 
@@ -23,7 +23,7 @@
 </p>
 
 
-[Migrate from @uiw/react-markdown-editor 4.x to 5.x.](https://github.com/uiwjs/react-markdown-editor/releases/tag/v5.0.0)
+> Migrate from @uiw/react-markdown-editor [4.x to 5.x.](https://github.com/uiwjs/react-markdown-editor/releases/tag/v5.0.0)
 
 ## Install
 

website/App.module.less

@@ -1,11 +1,11 @@
 .editor {
-  width: 980px;
+  max-width: 980px;
   padding: 0 10px;
   margin: 0 auto 0 auto;
 }
 
 .doc {
-  width: 960px;
+  max-width: 980px;
   padding: 20px 10px 25px 10px;
   border-radius: 5px;
   margin: 30px auto 0 auto;
@@ -14,7 +14,8 @@
 .logo {
   svg {
     width: auto;
-    height: 256px;
+    width: -webkit-fill-available;
+    max-height: 256px;
     margin: 0 auto;
     display: block;
     fill: var(--color-theme-text);

website/App.tsx

@@ -23,7 +23,7 @@ export default function App() {
       </div>
       <div className={styles.editor}>
         <MarkdownEditor visible={visible} height="500px" value={mdstr} />
-        <div style={{ marginTop: 10 }}>
+        <div style={{ marginTop: 10, display: 'flex', gap: '10px' }}>
           <button
             onClick={() => {
               count += 1;
@@ -33,6 +33,7 @@ export default function App() {
             Modify Markdown
           </button>
           <button onClick={() => setVisible(!visible)}>{visible ? 'Show' : 'Hide'}</button>
+          <span>v{VERSION}</span>
         </div>
       </div>
       <MarkdownPreview source={DocumentStrSource} className={styles.doc} />

website/react-app-env.d.ts

@@ -9,3 +9,5 @@ declare module '*.md' {
   const src: any;
   export default src;
 }
+
+declare var VERSION: string;