chore: update demo

Author: runjuu

demo/index.tsx

@@ -13,7 +13,8 @@ import {
 } from './sections';
 
 ReactDOM.render(
-  <React.Fragment>
+  <main>
+    <h1>Default Behavior</h1>
     <Simple />
     <DefaultSize />
     <ResponsiveSize />
@@ -23,6 +24,6 @@ ReactDOM.render(
     <h1>Custom Behavior</h1>
     <CollapsibleSection />
     <InteractiveSection />
-  </React.Fragment>,
+  </main>,
   document.getElementById('app'),
 );

demo/sections/collapsible-section.tsx

@@ -15,7 +15,7 @@ export class CollapsibleSection extends React.PureComponent {
 
   render() {
     return (
-      <div>
+      <section>
         <h2>Collapsible section demo</h2>
         <Container
           className="container"
@@ -26,7 +26,7 @@ export class CollapsibleSection extends React.PureComponent {
           <Bar size={10} className="bar" onClick={this.onBarClick} />
           <Section className="section" />
         </Container>
-      </div>
+      </section>
     );
   }
 

demo/sections/default-size.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import * as Resizer from '../../src';
 
 export const DefaultSize = () => (
-  <div>
+  <section>
     <h2>default size demo</h2>
     <Resizer.Container className="container">
       <Resizer.Section className="section" defaultSize={400}>
@@ -12,5 +12,5 @@ export const DefaultSize = () => (
       <Resizer.Bar size={10} className="bar" />
       <Resizer.Section className="section" />
     </Resizer.Container>
-  </div>
+  </section>
 );

demo/sections/fixed-size.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import * as Resizer from '../../src';
 
 export const FixedSize = () => (
-  <div>
+  <section>
     <h2>Fixed size demo</h2>
     <Resizer.Container className="container">
       <Resizer.Section className="section" size={500}>
@@ -33,5 +33,5 @@ export const FixedSize = () => (
         max size is 500px.
       </Resizer.Section>
     </Resizer.Container>
-  </div>
+  </section>
 );

demo/sections/interactive-section.tsx

@@ -18,7 +18,7 @@ function onResizing(resizer: Resizer): void {
 }
 
 export const InteractiveSection = () => (
-  <div>
+  <section>
     <h2>Interactive section demo</h2>
     <Container className="container" beforeApplyResizer={onResizing}>
       <Section className="section" />
@@ -27,5 +27,5 @@ export const InteractiveSection = () => (
       <Bar size={10} className="bar" />
       <Section className="section" />
     </Container>
-  </div>
+  </section>
 );

demo/sections/max-min-size.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import * as Resizer from '../../src';
 
 export const MaxMinSize = () => (
-  <div>
+  <section>
     <h2>Max/Min size demo</h2>
     <Resizer.Container className="container">
       <Resizer.Section className="section" minSize={150}>
@@ -14,5 +14,5 @@ export const MaxMinSize = () => (
         600px max size.
       </Resizer.Section>
     </Resizer.Container>
-  </div>
+  </section>
 );

demo/sections/nesting.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import * as Resizer from '../../src';
 
 export const NestingDemo = () => (
-  <div>
+  <section>
     <h2>Nesting demo</h2>
     <Resizer.Container className="container">
       <Resizer.Section className="section">
@@ -22,5 +22,5 @@ export const NestingDemo = () => (
         </Resizer.Container>
       </Resizer.Section>
     </Resizer.Container>
-  </div>
+  </section>
 );

demo/sections/responsive-size.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import * as Resizer from '../../src';
 
 export const ResponsiveSize = () => (
-  <div>
+  <section>
     <h2>responsive size demo</h2>
     <Resizer.Container className="container">
       <Resizer.Section className="section" defaultSize={400}>
@@ -18,5 +18,5 @@ export const ResponsiveSize = () => (
       <Resizer.Bar size={10} className="bar" />
       <Resizer.Section className="section" />
     </Resizer.Container>
-  </div>
+  </section>
 );

demo/sections/simple.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import * as Resizer from '../../src';
 
 export const Simple = () => (
-  <div>
+  <section>
     <h2>Simple demo</h2>
     <Resizer.Container className="container">
       <Resizer.Section className="section" minSize={100} />
@@ -14,5 +14,5 @@ export const Simple = () => (
       <Resizer.Bar size={10} className="bar" />
       <Resizer.Section className="section" minSize={100} />
     </Resizer.Container>
-  </div>
+  </section>
 );

demo/style.less

@@ -1,10 +1,13 @@
-h2 {
-  text-align: center;
+main {
+  margin: 0 10vw;
+}
+
+section {
+  margin: 50px 0;
 }
 
 .container {
   height: 50vh;
-  margin-bottom: 50px;
   user-select: none;
   font-size: 16px;
   font-family: sans-serif;