initial styles

src/App.module.css

@@ -0,0 +1,3 @@
+.App {
+  isolation: isolate;
+}

src/components/Character/Character.module.css

@@ -1,4 +1,8 @@
 .character {
   /* Fill the available container height */
   height: 100%;
+  min-height: 500px;
+  position: fixed;
+  top: 150px;
+  right: -30px;
 }

src/components/CharacterEditor/CharacterEditor.js

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  defaultSkinColor,
-  defaultClothesColor,
-} from '../../constants';
+import { defaultSkinColor, defaultClothesColor } from '../../constants';
 import Character from '../Character';
 import MaxWidthWrapper from '../MaxWidthWrapper';
 import ControlPane from '../ControlPane';
@@ -24,70 +21,71 @@ function App() {
   const [face, setFace] = React.useState(0);
   const [accessory, setAccessory] = React.useState(0);
   const [skinColor, setSkinColor] = React.useState(defaultSkinColor);
-  const [clothesColor, setClothesColor] = React.useState(
-    defaultClothesColor
-  );
+  const [clothesColor, setClothesColor] = React.useState(defaultClothesColor);
 
   return (
     <main className={styles.characterEditor}>
+      <div class={styles.perspective}></div>
       <MaxWidthWrapper className={styles.maxWidthWrapper}>
         <header className={styles.header}>
           <h1 className={styles.title}>Create your Character</h1>
           <p className={styles.description}>
-            Customize your character's look and style using the
-            controls below. What sort of adventure will you embark on?{' '}
+            Customize your character's look and style using the controls below.
+            What sort of adventure will you embark on?{' '}
           </p>
         </header>
-        <div className={styles.controlColumn}>
-          <ControlPane
-            title="Bodies"
-            options={bodyOptions}
-            currentOption={body}
-            handleSelectOption={setBody}
-          />
-          <ControlPane
-            title="Heads"
-            options={headOptions}
-            currentOption={head}
-            handleSelectOption={setHead}
-          />
-          <ControlPane
-            title="Faces"
-            options={faceOptions}
-            currentOption={face}
-            handleSelectOption={setFace}
-          />
-          <ControlPane
-            title="Accessories"
-            options={accessoryOptions}
-            currentOption={accessory}
-            handleSelectOption={setAccessory}
-          />
-          <ControlPane
-            title="Skin Color"
-            options={skinColorOptions}
-            currentOption={skinColor}
-            handleSelectOption={setSkinColor}
-          />
-          <ControlPane
-            title="Clothing Color"
-            options={clothesColorOptions}
-            currentOption={clothesColor}
-            handleSelectOption={setClothesColor}
-          />
+        <div>
+          <div className={styles.controlColumn}>
+            <ControlPane
+              title="Bodies"
+              options={bodyOptions}
+              currentOption={body}
+              handleSelectOption={setBody}
+            />
+            <ControlPane
+              title="Heads"
+              options={headOptions}
+              currentOption={head}
+              handleSelectOption={setHead}
+            />
+            <ControlPane
+              title="Faces"
+              options={faceOptions}
+              currentOption={face}
+              handleSelectOption={setFace}
+            />
+            <ControlPane
+              title="Accessories"
+              options={accessoryOptions}
+              currentOption={accessory}
+              handleSelectOption={setAccessory}
+            />
+            <ControlPane
+              title="Skin Color"
+              options={skinColorOptions}
+              currentOption={skinColor}
+              handleSelectOption={setSkinColor}
+            />
+            <ControlPane
+              title="Clothing Color"
+              options={clothesColorOptions}
+              currentOption={clothesColor}
+              handleSelectOption={setClothesColor}
+            />
+          </div>
+
+          <div className={styles.characterWrapper}>
+            <Character
+              body={body}
+              head={head}
+              face={face}
+              accessory={accessory}
+              skinColor={skinColor}
+              clothesColor={clothesColor}
+            />
+          </div>
         </div>
       </MaxWidthWrapper>
-
-      <div className={styles.characterWrapper}>
-        <Character
-          body={body}
-          head={head}
-          face={face}
-          accessory={accessory}
-          skinColor={skinColor}
-          clothesColor={clothesColor}
-        />
-      </div>
     </main>
   );
 }

src/components/CharacterEditor/CharacterEditor.module.css

@@ -1,13 +1,19 @@
 .characterEditor {
+  position: relative;
   padding-top: 128px;
   padding-bottom: 64px;
+  height: 100vh;
+  overflow: auto;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .maxWidthWrapper {
 }
 
 .header {
   padding-bottom: 64px;
+  width: 65%;
 }
 
 .title {
@@ -24,7 +30,21 @@
 }
 
 .characterWrapper {
+  display: inline-block;
+  width: 50%;
 }
 
 .controlColumn {
+  display: inline-block;
+  width: 50%;
+}
+
+/*This gives some perspective look behind the 
+control panel and the character */
+.perspective {
+  position: fixed;
+  background-color: hsl(195deg, 20%, 86%);
+  height: 43%;
+  width: 100%;
+  bottom: 0;
 }

src/components/ControlPane/ControlPane.module.css

@@ -10,6 +10,9 @@
     to deal with it yet!
   */
   margin-bottom: 32px;
+  overflow-y: auto;
+  white-space: nowrap;
+  position: relative;
 }
 
 .title {

src/components/Footer/Footer.module.css

@@ -6,3 +6,6 @@
   text-align: center;
 }
 
+.footer > a {
+  color: white;
+}