From 97f44837d67336b30c009c7f80a1b1cc34746775 Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 10:17:30 +0000
Subject: [PATCH 01/10] Complete removal of styled components from home /
 landing page

---
 .../src/features/common/featureButton.js      | 32 ++------
 .../src/features/common/primaryButton.js      |  7 ++
 .../src/features/onboarding/guidance.js       |  7 ++
 .../src/features/onboarding/home.js           | 80 ++++---------------
 .../src/features/onboarding/speechBubble.js   |  7 ++
 packages/corewar-ui/src/styles/index.css      |  5 ++
 packages/corewar-ui/src/styles/tailwind.css   | 66 +++++++++++++++
 packages/corewar-ui/tailwind.config.js        |  5 ++
 8 files changed, 118 insertions(+), 91 deletions(-)
 create mode 100644 packages/corewar-ui/src/features/common/primaryButton.js
 create mode 100644 packages/corewar-ui/src/features/onboarding/guidance.js
 create mode 100644 packages/corewar-ui/src/features/onboarding/speechBubble.js

diff --git a/packages/corewar-ui/src/features/common/featureButton.js b/packages/corewar-ui/src/features/common/featureButton.js
index b0328853..71f50b15 100644
--- a/packages/corewar-ui/src/features/common/featureButton.js
+++ b/packages/corewar-ui/src/features/common/featureButton.js
@@ -1,27 +1,7 @@
-import styled from 'styled-components'
+import React from 'react'
 
-import { colour, space } from '../common/theme'
-
-const FeatureButton = styled.a`
-  border: 2px solid ${colour.white};
-  border-radius: 5px;
-  margin: ${space.m};
-  padding: ${space.m};
-  background: none;
-  display: inline-block;
-  min-width: 200px;
-  color: ${colour.lightgrey};
-  font-weight: 300;
-  text-align: center;
-  text-decoration: none;
-  transition: 0.2s;
-
-  :hover {
-    background-color: ${colour.lightbg};
-    color: ${colour.white};
-    cursor: pointer;
-    transition: 0.2s;
-  }
-`
-
-export default FeatureButton
+export default ({ children }) => (
+  <button className="min-w-200 rounded-md m-4 p-4 text-lightgrey font-light text-center border-2 border-white hover:bg-lightbg hover:text-white cursor-pointer">
+    {children}
+  </button>
+)
diff --git a/packages/corewar-ui/src/features/common/primaryButton.js b/packages/corewar-ui/src/features/common/primaryButton.js
new file mode 100644
index 00000000..d5aa6307
--- /dev/null
+++ b/packages/corewar-ui/src/features/common/primaryButton.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => (
+  <button className="min-w-200 rounded-md m-4 p-4 text-darkbg font-bold text-center border-2 border-white bg-white hover:bg-lightbg hover:text-white">
+    {children}
+  </button>
+)
diff --git a/packages/corewar-ui/src/features/onboarding/guidance.js b/packages/corewar-ui/src/features/onboarding/guidance.js
new file mode 100644
index 00000000..b4644558
--- /dev/null
+++ b/packages/corewar-ui/src/features/onboarding/guidance.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => (
+  <div className="flex flex-col items-center flex-1 min-h-200 mt-8 cursor-pointer guidance">
+    {children}
+  </div>
+)
diff --git a/packages/corewar-ui/src/features/onboarding/home.js b/packages/corewar-ui/src/features/onboarding/home.js
index 2eb59880..6f3dd009 100644
--- a/packages/corewar-ui/src/features/onboarding/home.js
+++ b/packages/corewar-ui/src/features/onboarding/home.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import styled from 'styled-components'
 import Octicon from 'react-octicon'
 
-import { colour, font, space } from '../common/theme'
-import { media } from '../common/mediaQuery'
-
 import SiteNav from '../common/siteNav'
 import HeroLogo from '../common/heroLogo'
 import FeatureButton from '../common/featureButton'
+import PrimaryButton from '../common/primaryButton'
 import RoadmapItem from './roadmapItem'
+import SpeechBubble from './speechBubble'
+import Guidance from './guidance'
 
 import SimulatorImage from '../../img/corewarx200.gif'
 import ParserImage from '../../img/redcode.gif'
@@ -63,60 +62,11 @@ const roadMapItems = [
   }
 ]
 
-const Feature = styled.div`
-  ${media.tablet`border-right: none;`};
-  ${media.tablet`border-bottom: 1px solid ${colour.lightbg}; padding-bottom: ${space.l};`};
-
-  :hover {
-    cursor: pointer;
-    .guidance {
-      opacity: 1;
-      transition: 0.5s;
-    }
-  }
-`
-
-const Guidance = styled.div.attrs({
-  className: 'guidance'
-})`
-  opacity: 0;
-  ${media.tablet`opacity: 1;`}
-  transition: 0.5s;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  margin: ${space.l};
-  ${media.phone`margin: ${space.m};`}
-`
-
-const SpeechBubble = styled.div`
-  border-radius: 10px;
-  background-color: ${colour.defaultbg};
-  min-height: 200px;
-  margin-right: ${space.l};
-  padding: ${space.m};
-  line-height: 1.5em;
-  text-align: center;
-  color: ${colour.white};
-  font-family: ${font.code};
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`
-
-const PrimaryButton = FeatureButton.extend`
-  background: ${colour.white};
-  color: ${colour.darkbg};
-  transition: 0.2s;
-  font-weight: bold;
-`
-
 const Home = () => (
   <main className="grid grid-rows-home-grid text-white bg-darkbg">
     <SiteNav />
     <HeroLogo />
-    <div className="flex flex-row flex-wrap justify-center items-center content-center mb-16 min-h-cta">
+    <div className="flex flex-row flex-wrap justify-center items-center content-center mb-16 min-h-150">
       <PrimaryButton href="/app/editor/src">Play Now</PrimaryButton>
       <FeatureButton href="/learn">Learn more</FeatureButton>
     </div>
@@ -156,35 +106,35 @@ const Home = () => (
     </section>
 
     <section className="flex flex-wrap justify-center m-4 md:mx-16 md:mt-4 md:mb-8">
-      <div className="flex flex-col items-center flex-1 min-h-200 mt-8">
+      <Guidance>
         <Octicon className="text-5xl" name="mortar-board" />
         <h3 className="m-2 md:m-4 text-xl font-light text-lightgrey">Experienced player</h3>
         <p className="text-blue font-code text-base p-4 text-center mx-8">
           I’ve played corewar before and understand the instructions and concepts
         </p>
         <PrimaryButton href="/app/editor/src">Play Now</PrimaryButton>
-        <Guidance>
+        <section className="md:opacity-0 flex flex-row items-center justify-start m-4 md:m-8">
           <Octicon className="text-4xl p-8" name="hubot" />
           <SpeechBubble>
-            You should head over to the app and follow the interactive guide to explore the features
+            Head over to the app and follow the interactive guide to explore the features
           </SpeechBubble>
-        </Guidance>
-      </div>
-      <div className="flex flex-col items-center flex-1 min-h-200 mt-8">
+        </section>
+      </Guidance>
+      <Guidance>
         <Octicon className="text-5xl" name="law" />
         <h3 className="m-2 md:m-4 text-xl font-light text-lightgrey">New to the game</h3>
         <p className="text-blue font-code text-base p-4 text-center mx-8">
           I’ve done some coding before but never played corewar
         </p>
         <FeatureButton href="/learn">View Tutorial</FeatureButton>
-        <Guidance>
+        <section className="md:opacity-0 flex flex-row items-center justify-start m-4 md:m-8">
           <Octicon className="text-4xl p-8" name="hubot" />
           <SpeechBubble>
-            You should run through the tutorial to understand the basics of corewar first, then head
-            over the app to test what you've learned.
+            Run through the tutorial to understand the basics of corewar first, then head over the
+            app to test what you've learned.
           </SpeechBubble>
-        </Guidance>
-      </div>
+        </section>
+      </Guidance>
     </section>
 
     <section
diff --git a/packages/corewar-ui/src/features/onboarding/speechBubble.js b/packages/corewar-ui/src/features/onboarding/speechBubble.js
new file mode 100644
index 00000000..8a1112ed
--- /dev/null
+++ b/packages/corewar-ui/src/features/onboarding/speechBubble.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => (
+  <div className="flex flex-col justify-center font-code text-center p-4 mr-8 bg-defaultbg text-white min-h-200 rounded-lg">
+    {children}
+  </div>
+)
diff --git a/packages/corewar-ui/src/styles/index.css b/packages/corewar-ui/src/styles/index.css
index 7f393742..1d8a2f31 100644
--- a/packages/corewar-ui/src/styles/index.css
+++ b/packages/corewar-ui/src/styles/index.css
@@ -3,3 +3,8 @@
 @tailwind components;
 
 @tailwind utilities;
+
+.guidance:hover > section {
+  opacity: 1;
+  transition: 0.5s;
+}
diff --git a/packages/corewar-ui/src/styles/tailwind.css b/packages/corewar-ui/src/styles/tailwind.css
index cfc4fa96..fd398a0d 100644
--- a/packages/corewar-ui/src/styles/tailwind.css
+++ b/packages/corewar-ui/src/styles/tailwind.css
@@ -5331,6 +5331,18 @@ video {
   min-width: 0;
 }
 
+.min-w-150 {
+  min-width: 150px;
+}
+
+.min-w-200 {
+  min-width: 200px;
+}
+
+.min-w-300 {
+  min-width: 300px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -12728,6 +12740,12 @@ video {
           transition-duration: 1000ms;
 }
 
+.guidance:hover > section {
+  opacity: 1;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
 @media (min-width: 640px) {
   .sm\:sr-only {
     position: absolute;
@@ -17445,6 +17463,18 @@ video {
     min-width: 0;
   }
 
+  .sm\:min-w-150 {
+    min-width: 150px;
+  }
+
+  .sm\:min-w-200 {
+    min-width: 200px;
+  }
+
+  .sm\:min-w-300 {
+    min-width: 300px;
+  }
+
   .sm\:min-w-full {
     min-width: 100%;
   }
@@ -29560,6 +29590,18 @@ video {
     min-width: 0;
   }
 
+  .md\:min-w-150 {
+    min-width: 150px;
+  }
+
+  .md\:min-w-200 {
+    min-width: 200px;
+  }
+
+  .md\:min-w-300 {
+    min-width: 300px;
+  }
+
   .md\:min-w-full {
     min-width: 100%;
   }
@@ -41675,6 +41717,18 @@ video {
     min-width: 0;
   }
 
+  .lg\:min-w-150 {
+    min-width: 150px;
+  }
+
+  .lg\:min-w-200 {
+    min-width: 200px;
+  }
+
+  .lg\:min-w-300 {
+    min-width: 300px;
+  }
+
   .lg\:min-w-full {
     min-width: 100%;
   }
@@ -53790,6 +53844,18 @@ video {
     min-width: 0;
   }
 
+  .xl\:min-w-150 {
+    min-width: 150px;
+  }
+
+  .xl\:min-w-200 {
+    min-width: 200px;
+  }
+
+  .xl\:min-w-300 {
+    min-width: 300px;
+  }
+
   .xl\:min-w-full {
     min-width: 100%;
   }
diff --git a/packages/corewar-ui/tailwind.config.js b/packages/corewar-ui/tailwind.config.js
index f6a590fb..d47600ef 100644
--- a/packages/corewar-ui/tailwind.config.js
+++ b/packages/corewar-ui/tailwind.config.js
@@ -33,6 +33,11 @@ module.exports = {
         '200': '200px',
         '300': '300px'
       },
+      minWidth: {
+        '150': '150px',
+        '200': '200px',
+        '300': '300px'
+      },
       maxWidth: {
         '350': '350px'
       },

From 9f96a83a2cf445a110521da6c1de278cb32f1e94 Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 10:29:58 +0000
Subject: [PATCH 02/10] debatable margin tweaks

---
 .../src/features/common/heroLogo.js           |  2 +-
 .../src/features/onboarding/home.js           | 12 +++++------
 packages/corewar-ui/src/styles/tailwind.css   | 20 +++++++++++++++++++
 packages/corewar-ui/tailwind.config.js        |  1 +
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/corewar-ui/src/features/common/heroLogo.js b/packages/corewar-ui/src/features/common/heroLogo.js
index 29ba3241..12022d3a 100644
--- a/packages/corewar-ui/src/features/common/heroLogo.js
+++ b/packages/corewar-ui/src/features/common/heroLogo.js
@@ -26,7 +26,7 @@ const HeroLogo = () => (
     </div>
     <section className="hidden md:flex flex-wrap justify-center ml-16">
       {features.map(feature => (
-        <Feature>
+        <Feature key={feature.heading}>
           <Octicon name={feature.icon} className="text-2xl text-blue fill-current" />
           <h3 className="m-4 font-light text-lightgrey text-center">{feature.heading}</h3>
         </Feature>
diff --git a/packages/corewar-ui/src/features/onboarding/home.js b/packages/corewar-ui/src/features/onboarding/home.js
index 6f3dd009..d9697f75 100644
--- a/packages/corewar-ui/src/features/onboarding/home.js
+++ b/packages/corewar-ui/src/features/onboarding/home.js
@@ -63,7 +63,7 @@ const roadMapItems = [
 ]
 
 const Home = () => (
-  <main className="grid grid-rows-home-grid text-white bg-darkbg">
+  <main className="grid grid-rows-mobile-home-grid md:grid-rows-home-grid text-white bg-darkbg">
     <SiteNav />
     <HeroLogo />
     <div className="flex flex-row flex-wrap justify-center items-center content-center mb-16 min-h-150">
@@ -71,14 +71,14 @@ const Home = () => (
       <FeatureButton href="/learn">Learn more</FeatureButton>
     </div>
     <section className="flex items-center justify-center bg-defaultbg min-h-cta" id={`features`}>
-      <h2 className="w-2/3 md:w-3/4 lg:w-1/2 font-light text-2xl text-blue leading-10 m-4 text-center my-16">
+      <h2 className="w-3/4 lg:w-1/2 font-light text-xl md:text-2xl text-blue leading-10 m-4 md:m-16 my-16">
         This is Corewar where players test their coding skills against each other, writing warriors
         which battle for control of the core. Do you have what it takes to become the King of the
         Hill?
       </h2>
     </section>
     <section className="flex flex-row flex-wrap items-center justify-center p-8 my-4 md:my-16 mx-0">
-      <div className="text-2xl leading-10 m-16 font-light md:flex-feature">
+      <div className="text-xl md:text-2xl leading-10 m-4 md:m-16 font-light md:flex-feature">
         Our interactive Corewar Simulator provides the battle ground for your warriors. Play the
         game, inspect the core and debug your code from your web browser!
       </div>
@@ -98,7 +98,7 @@ const Home = () => (
           alt={`Animated parser usage example`}
         />
       </div>
-      <div className="text-2xl leading-10 m-16 font-light md:flex-feature">
+      <div className="text-xl md:text-2xl leading-10 m-4 md:m-16 font-light md:flex-feature">
         Our powerful Redcode editor makes it easy to write warriors and through real-time code
         analysis improve the quality of your programs. The perfect canvas on which to craft your
         masterpiece.
@@ -148,7 +148,7 @@ const Home = () => (
       {roadMapItems
         .filter(x => x.complete)
         .map(item => (
-          <RoadmapItem item={item} />
+          <RoadmapItem key={item.leftText} item={item} />
         ))}
 
       <div className="w-1/2 my-8 mx-auto border-b-2 border-lightbg text-lg p-4 text-center">
@@ -158,7 +158,7 @@ const Home = () => (
       {roadMapItems
         .filter(x => x.complete === false)
         .map(item => (
-          <RoadmapItem item={item} />
+          <RoadmapItem key={item.leftText} item={item} />
         ))}
     </section>
     <section className="flex flex-col justify-center items-center min-h-cta text-xl bg-defaultbg">
diff --git a/packages/corewar-ui/src/styles/tailwind.css b/packages/corewar-ui/src/styles/tailwind.css
index fd398a0d..85d3c321 100644
--- a/packages/corewar-ui/src/styles/tailwind.css
+++ b/packages/corewar-ui/src/styles/tailwind.css
@@ -10853,6 +10853,10 @@ video {
   grid-template-rows: none;
 }
 
+.grid-rows-mobile-home-grid {
+  grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+}
+
 .grid-rows-home-grid {
   grid-template-rows: 48px 50vh repeat(8, auto) 100px;
 }
@@ -22985,6 +22989,10 @@ video {
     grid-template-rows: none;
   }
 
+  .sm\:grid-rows-mobile-home-grid {
+    grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+  }
+
   .sm\:grid-rows-home-grid {
     grid-template-rows: 48px 50vh repeat(8, auto) 100px;
   }
@@ -35112,6 +35120,10 @@ video {
     grid-template-rows: none;
   }
 
+  .md\:grid-rows-mobile-home-grid {
+    grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+  }
+
   .md\:grid-rows-home-grid {
     grid-template-rows: 48px 50vh repeat(8, auto) 100px;
   }
@@ -47239,6 +47251,10 @@ video {
     grid-template-rows: none;
   }
 
+  .lg\:grid-rows-mobile-home-grid {
+    grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+  }
+
   .lg\:grid-rows-home-grid {
     grid-template-rows: 48px 50vh repeat(8, auto) 100px;
   }
@@ -59366,6 +59382,10 @@ video {
     grid-template-rows: none;
   }
 
+  .xl\:grid-rows-mobile-home-grid {
+    grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+  }
+
   .xl\:grid-rows-home-grid {
     grid-template-rows: 48px 50vh repeat(8, auto) 100px;
   }
diff --git a/packages/corewar-ui/tailwind.config.js b/packages/corewar-ui/tailwind.config.js
index d47600ef..ca205947 100644
--- a/packages/corewar-ui/tailwind.config.js
+++ b/packages/corewar-ui/tailwind.config.js
@@ -22,6 +22,7 @@ module.exports = {
         success: '#6FCF97'
       },
       gridTemplateRows: {
+        'mobile-home-grid': '48px 25vh repeat(8, auto) 100px',
         'home-grid': '48px 50vh repeat(8, auto) 100px',
         roadmap: '80px 1fr'
       },

From b43ad7da985ec27a7212f20c2f285ac042cf514d Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 10:42:33 +0000
Subject: [PATCH 03/10] Bit of component extraction

---
 .../src/features/onboarding/feature.js        |  9 +++++
 .../features/onboarding/featureDescription.js |  7 ++++
 .../src/features/onboarding/guidanceText.js   | 11 +++++
 .../src/features/onboarding/home.js           | 40 +++++++++----------
 packages/corewar-ui/src/styles/index.css      |  4 +-
 5 files changed, 47 insertions(+), 24 deletions(-)
 create mode 100644 packages/corewar-ui/src/features/onboarding/feature.js
 create mode 100644 packages/corewar-ui/src/features/onboarding/featureDescription.js
 create mode 100644 packages/corewar-ui/src/features/onboarding/guidanceText.js

diff --git a/packages/corewar-ui/src/features/onboarding/feature.js b/packages/corewar-ui/src/features/onboarding/feature.js
new file mode 100644
index 00000000..abe28b1c
--- /dev/null
+++ b/packages/corewar-ui/src/features/onboarding/feature.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default ({ children, className }) => (
+  <section
+    className={`flex flex-row flex-wrap items-center justify-center p-8 my-4 md:my-16 mx-0 ${className}`}
+  >
+    {children}
+  </section>
+)
diff --git a/packages/corewar-ui/src/features/onboarding/featureDescription.js b/packages/corewar-ui/src/features/onboarding/featureDescription.js
new file mode 100644
index 00000000..4077d6d4
--- /dev/null
+++ b/packages/corewar-ui/src/features/onboarding/featureDescription.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => (
+  <p className="text-xl md:text-2xl leading-10 m-4 md:m-16 font-light md:flex-feature">
+    {children}
+  </p>
+)
diff --git a/packages/corewar-ui/src/features/onboarding/guidanceText.js b/packages/corewar-ui/src/features/onboarding/guidanceText.js
new file mode 100644
index 00000000..b23cdd83
--- /dev/null
+++ b/packages/corewar-ui/src/features/onboarding/guidanceText.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import Octicon from 'react-octicon'
+
+import SpeechBubble from './speechBubble'
+
+export default ({ children }) => (
+  <section className="md:opacity-0 flex flex-row items-center justify-start m-4 md:m-8">
+    <Octicon className="text-4xl p-8" name="hubot" />
+    <SpeechBubble>{children}</SpeechBubble>
+  </section>
+)
diff --git a/packages/corewar-ui/src/features/onboarding/home.js b/packages/corewar-ui/src/features/onboarding/home.js
index d9697f75..3d3da9bd 100644
--- a/packages/corewar-ui/src/features/onboarding/home.js
+++ b/packages/corewar-ui/src/features/onboarding/home.js
@@ -6,8 +6,10 @@ import HeroLogo from '../common/heroLogo'
 import FeatureButton from '../common/featureButton'
 import PrimaryButton from '../common/primaryButton'
 import RoadmapItem from './roadmapItem'
-import SpeechBubble from './speechBubble'
 import Guidance from './guidance'
+import GuidanceText from './guidanceText'
+import Feature from './feature'
+import FeatureDescription from './featureDescription'
 
 import SimulatorImage from '../../img/corewarx200.gif'
 import ParserImage from '../../img/redcode.gif'
@@ -77,11 +79,11 @@ const Home = () => (
         Hill?
       </h2>
     </section>
-    <section className="flex flex-row flex-wrap items-center justify-center p-8 my-4 md:my-16 mx-0">
-      <div className="text-xl md:text-2xl leading-10 m-4 md:m-16 font-light md:flex-feature">
+    <Feature>
+      <FeatureDescription>
         Our interactive Corewar Simulator provides the battle ground for your warriors. Play the
         game, inspect the core and debug your code from your web browser!
-      </div>
+      </FeatureDescription>
       <div className="flex flex-1 md:flex-feature justify-center">
         <img
           className="w-screen md:w-full"
@@ -89,8 +91,8 @@ const Home = () => (
           alt={`Animated core simulator example`}
         />
       </div>
-    </section>
-    <section className="flex flex-wrap justify-center items-center p-8 my-4 md:my-16 mx-0 bg-defaultbg">
+    </Feature>
+    <Feature className="bg-defaultbg">
       <div className="flex flex-1 md:flex-feature justify-center">
         <img
           className="w-screen md:w-full"
@@ -98,12 +100,12 @@ const Home = () => (
           alt={`Animated parser usage example`}
         />
       </div>
-      <div className="text-xl md:text-2xl leading-10 m-4 md:m-16 font-light md:flex-feature">
+      <FeatureDescription>
         Our powerful Redcode editor makes it easy to write warriors and through real-time code
         analysis improve the quality of your programs. The perfect canvas on which to craft your
         masterpiece.
-      </div>
-    </section>
+      </FeatureDescription>
+    </Feature>
 
     <section className="flex flex-wrap justify-center m-4 md:mx-16 md:mt-4 md:mb-8">
       <Guidance>
@@ -113,12 +115,9 @@ const Home = () => (
           I’ve played corewar before and understand the instructions and concepts
         </p>
         <PrimaryButton href="/app/editor/src">Play Now</PrimaryButton>
-        <section className="md:opacity-0 flex flex-row items-center justify-start m-4 md:m-8">
-          <Octicon className="text-4xl p-8" name="hubot" />
-          <SpeechBubble>
-            Head over to the app and follow the interactive guide to explore the features
-          </SpeechBubble>
-        </section>
+        <GuidanceText>
+          Head over to the app and follow the interactive guide to explore the features
+        </GuidanceText>
       </Guidance>
       <Guidance>
         <Octicon className="text-5xl" name="law" />
@@ -127,13 +126,10 @@ const Home = () => (
           I’ve done some coding before but never played corewar
         </p>
         <FeatureButton href="/learn">View Tutorial</FeatureButton>
-        <section className="md:opacity-0 flex flex-row items-center justify-start m-4 md:m-8">
-          <Octicon className="text-4xl p-8" name="hubot" />
-          <SpeechBubble>
-            Run through the tutorial to understand the basics of corewar first, then head over the
-            app to test what you've learned.
-          </SpeechBubble>
-        </section>
+        <GuidanceText>
+          Run through the tutorial to understand the basics of corewar first, then head over the app
+          to test what you've learned.
+        </GuidanceText>
       </Guidance>
     </section>
 
diff --git a/packages/corewar-ui/src/styles/index.css b/packages/corewar-ui/src/styles/index.css
index 1d8a2f31..dd304dd2 100644
--- a/packages/corewar-ui/src/styles/index.css
+++ b/packages/corewar-ui/src/styles/index.css
@@ -2,9 +2,9 @@
 
 @tailwind components;
 
-@tailwind utilities;
-
 .guidance:hover > section {
   opacity: 1;
   transition: 0.5s;
 }
+
+@tailwind utilities;

From 4ed34a01e1fa1dc6ce1d62587da6f367cdadda5b Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 11:07:09 +0000
Subject: [PATCH 04/10] rework with a proper mobile nav

---
 .../corewar-ui/src/features/common/siteNav.js | 109 ++++++++++--------
 .../corewar-ui/src/features/topbar/logo.js    |   6 +-
 .../src/features/topbar/siteHeader.js         |   2 +-
 packages/corewar-ui/src/styles/tailwind.css   |  32 ++---
 packages/corewar-ui/tailwind.config.js        |   4 +-
 5 files changed, 82 insertions(+), 71 deletions(-)

diff --git a/packages/corewar-ui/src/features/common/siteNav.js b/packages/corewar-ui/src/features/common/siteNav.js
index 9d3fb957..681cf7dd 100644
--- a/packages/corewar-ui/src/features/common/siteNav.js
+++ b/packages/corewar-ui/src/features/common/siteNav.js
@@ -1,56 +1,67 @@
-import React from 'react'
-import styled from 'styled-components'
+import React, { useState } from 'react'
 
-import { colour, space } from '../common/theme'
-import { media } from '../common/mediaQuery'
+import Logo from '../topbar/logo'
 
-const Header = styled.header`
-  display: flex;
-  flex-direction: row-reverse;
-  margin: 0 ${space.xl};
-  ${media.phone`margin: 0;`}
-
-  a {
-    color: ${colour.grey};
-    padding-bottom: ${space.s};
-    margin: 0 ${space.s};
-    ${media.phone`margin: 0;`}
-    display: inline-block;
-    min-width: 80px;
-    text-decoration: none;
-    font-weight: 400;
-    text-align: center;
-    border-bottom: 2px solid transparent;
-    transition: 0.5s;
-  }
+const Link = ({ route, children }) => (
+  <a
+    className="text-white font-display mr-2 ml-2 lg:ml-10 lg:mr-10 leading-loose border-b-2 border-transparent hover:border-blue hover:no-underline cursor-pointer"
+    href={route}
+  >
+    {children}
+  </a>
+)
 
-  a:hover {
-    border-bottom: 2px solid ${colour.blue};
-    colour: ${colour.white};
-    transition: 0.5s;
-  }
-`
+const MobileLink = ({ route, children }) => (
+  <a
+    className="block md:inline-block mt-4 md:mt-0 md:ml-6 no-underline text-white font-display hover:no-underline cursor-pointer"
+    href={route}
+  >
+    {children}
+  </a>
+)
 
-const Nav = styled.nav`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  ${media.phone`justify-content: center;`}
-  align-items: center;
-  width: 100%;
-`
+const links = [
+  { route: `/app/editor/src`, text: `play` },
+  { route: `/learn`, text: `learn` },
+  { route: `/#features`, text: `features` },
+  { route: `/sign-up`, text: `sign up` },
+  { route: `/contact-us`, text: `contact us` },
+  { route: `https://github.com/corewar/corewar.io`, text: `code` }
+]
 
-const SiteNav = () => (
-  <Header>
-    <Nav>
-      <a href={`/app/editor/src`}>play</a>
-      <a href={`/learn`}>learn</a>
-      <a href={`/#features`}>features</a>
-      <a href={`/sign-up`}>sign up</a>
-      <a href={`/contact-us`}>contact us</a>
-      <a href={`https://github.com/corewar/corewar`}>code</a>
-    </Nav>
-  </Header>
-)
+const SiteNav = () => {
+  const [isExpanded, toggleExpansion] = useState(false)
+  return (
+    <header className="bg-secondary font-display flex">
+      <div className="w-4/5 md:w-2/3 mx-auto py-4 flex flex-wrap items-center justify-between">
+        <Logo siteName="corewar" siteDomain=".io" />
+        <nav className="hidden md:block">
+          {links.map(link => (
+            <Link key={link.route} route={link.route}>
+              {link.text}
+            </Link>
+          ))}
+        </nav>
+        <button
+          className="md:hidden text-white border-white border-2 rounded p-2"
+          onClick={() => toggleExpansion(!isExpanded)}
+        >
+          Menu
+        </button>
+        <nav
+          className={`${
+            isExpanded ? `block` : `hidden`
+          } md:hidden md:flex md:items-center mt-4 w-full md:w-auto border-t-2 border-white`}
+        >
+          {links.map(link => (
+            <MobileLink key={link.text} route={link.route}>
+              {link.text}
+            </MobileLink>
+          ))}
+        </nav>
+      </div>
+    </header>
+  )
+}
 
 export default SiteNav
diff --git a/packages/corewar-ui/src/features/topbar/logo.js b/packages/corewar-ui/src/features/topbar/logo.js
index 955d0ec3..93b1960e 100644
--- a/packages/corewar-ui/src/features/topbar/logo.js
+++ b/packages/corewar-ui/src/features/topbar/logo.js
@@ -6,7 +6,7 @@ import { colour, font, space } from '../common/theme'
 
 import CorewarLogo from '../../img/corewar-logo.png'
 
-const Wrapper = styled.section`
+const Wrapper = styled.a`
   display: grid;
   grid-template-columns: ${space.header} 1fr;
 `
@@ -38,8 +38,8 @@ const SiteDomain = styled.span`
   color: ${colour.white};
 `
 
-const Logo = ({ siteName, siteDomain, history }) => (
-  <Wrapper onClick={() => history.push(`/`)}>
+const Logo = ({ siteName, siteDomain }) => (
+  <Wrapper href={`/`}>
     <LogoImage src={CorewarLogo} />
     <SiteName>
       {siteName}
diff --git a/packages/corewar-ui/src/features/topbar/siteHeader.js b/packages/corewar-ui/src/features/topbar/siteHeader.js
index 9ac53df3..06d5846e 100644
--- a/packages/corewar-ui/src/features/topbar/siteHeader.js
+++ b/packages/corewar-ui/src/features/topbar/siteHeader.js
@@ -20,7 +20,7 @@ const Header = styled.header`
 
 const SiteHeader = ({ isAuthenticated, history }) => (
   <Header>
-    <Logo siteName="corewar" siteDomain=".io" history={history} />
+    <Logo siteName="corewar" siteDomain=".io" />
     {isAuthenticated ? <UserInfo /> : <Login />}
   </Header>
 )
diff --git a/packages/corewar-ui/src/styles/tailwind.css b/packages/corewar-ui/src/styles/tailwind.css
index 85d3c321..7f111643 100644
--- a/packages/corewar-ui/src/styles/tailwind.css
+++ b/packages/corewar-ui/src/styles/tailwind.css
@@ -615,6 +615,12 @@ video {
   }
 }
 
+.guidance:hover > section {
+  opacity: 1;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -10854,11 +10860,11 @@ video {
 }
 
 .grid-rows-mobile-home-grid {
-  grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+  grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
 }
 
 .grid-rows-home-grid {
-  grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+  grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
 }
 
 .grid-rows-roadmap {
@@ -12744,12 +12750,6 @@ video {
           transition-duration: 1000ms;
 }
 
-.guidance:hover > section {
-  opacity: 1;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-}
-
 @media (min-width: 640px) {
   .sm\:sr-only {
     position: absolute;
@@ -22990,11 +22990,11 @@ video {
   }
 
   .sm\:grid-rows-mobile-home-grid {
-    grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+    grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
   }
 
   .sm\:grid-rows-home-grid {
-    grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+    grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
   }
 
   .sm\:grid-rows-roadmap {
@@ -35121,11 +35121,11 @@ video {
   }
 
   .md\:grid-rows-mobile-home-grid {
-    grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+    grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
   }
 
   .md\:grid-rows-home-grid {
-    grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+    grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
   }
 
   .md\:grid-rows-roadmap {
@@ -47252,11 +47252,11 @@ video {
   }
 
   .lg\:grid-rows-mobile-home-grid {
-    grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+    grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
   }
 
   .lg\:grid-rows-home-grid {
-    grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+    grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
   }
 
   .lg\:grid-rows-roadmap {
@@ -59383,11 +59383,11 @@ video {
   }
 
   .xl\:grid-rows-mobile-home-grid {
-    grid-template-rows: 48px 25vh repeat(8, auto) 100px;
+    grid-template-rows: minmax(48px, 1fr) 25vh repeat(8, auto) 100px;
   }
 
   .xl\:grid-rows-home-grid {
-    grid-template-rows: 48px 50vh repeat(8, auto) 100px;
+    grid-template-rows: minmax(48px, 1fr) 50vh repeat(8, auto) 100px;
   }
 
   .xl\:grid-rows-roadmap {
diff --git a/packages/corewar-ui/tailwind.config.js b/packages/corewar-ui/tailwind.config.js
index ca205947..15fa3457 100644
--- a/packages/corewar-ui/tailwind.config.js
+++ b/packages/corewar-ui/tailwind.config.js
@@ -22,8 +22,8 @@ module.exports = {
         success: '#6FCF97'
       },
       gridTemplateRows: {
-        'mobile-home-grid': '48px 25vh repeat(8, auto) 100px',
-        'home-grid': '48px 50vh repeat(8, auto) 100px',
+        'mobile-home-grid': 'minmax(48px, 1fr) 25vh repeat(8, auto) 100px',
+        'home-grid': 'minmax(48px, 1fr) 50vh repeat(8, auto) 100px',
         roadmap: '80px 1fr'
       },
       gridTemplateColumns: {

From 23a7af251e356ab2f37632436c33c61d15b7eaaa Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 12:31:26 +0000
Subject: [PATCH 05/10] Extract links into components

---
 .../corewar-ui/src/features/common/link.js    | 10 ++++++++++
 .../src/features/common/mobileLink.js         | 10 ++++++++++
 .../corewar-ui/src/features/common/siteNav.js | 20 ++-----------------
 3 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 packages/corewar-ui/src/features/common/link.js
 create mode 100644 packages/corewar-ui/src/features/common/mobileLink.js

diff --git a/packages/corewar-ui/src/features/common/link.js b/packages/corewar-ui/src/features/common/link.js
new file mode 100644
index 00000000..a26a42b7
--- /dev/null
+++ b/packages/corewar-ui/src/features/common/link.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default () => ({ route, children }) => (
+  <a
+    className="text-white font-display mr-2 ml-2 lg:ml-10 lg:mr-10 leading-loose border-b-2 border-transparent hover:border-blue hover:no-underline cursor-pointer"
+    href={route}
+  >
+    {children}
+  </a>
+)
diff --git a/packages/corewar-ui/src/features/common/mobileLink.js b/packages/corewar-ui/src/features/common/mobileLink.js
new file mode 100644
index 00000000..f85427cf
--- /dev/null
+++ b/packages/corewar-ui/src/features/common/mobileLink.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default () => ({ route, children }) => (
+  <a
+    className="block md:inline-block mt-4 md:mt-0 md:ml-6 no-underline text-white font-display hover:no-underline cursor-pointer"
+    href={route}
+  >
+    {children}
+  </a>
+)
diff --git a/packages/corewar-ui/src/features/common/siteNav.js b/packages/corewar-ui/src/features/common/siteNav.js
index 681cf7dd..612feb7c 100644
--- a/packages/corewar-ui/src/features/common/siteNav.js
+++ b/packages/corewar-ui/src/features/common/siteNav.js
@@ -1,24 +1,8 @@
 import React, { useState } from 'react'
 
 import Logo from '../topbar/logo'
-
-const Link = ({ route, children }) => (
-  <a
-    className="text-white font-display mr-2 ml-2 lg:ml-10 lg:mr-10 leading-loose border-b-2 border-transparent hover:border-blue hover:no-underline cursor-pointer"
-    href={route}
-  >
-    {children}
-  </a>
-)
-
-const MobileLink = ({ route, children }) => (
-  <a
-    className="block md:inline-block mt-4 md:mt-0 md:ml-6 no-underline text-white font-display hover:no-underline cursor-pointer"
-    href={route}
-  >
-    {children}
-  </a>
-)
+import Link from './link'
+import MobileLink from './mobileLink'
 
 const links = [
   { route: `/app/editor/src`, text: `play` },

From 191e26aea33e25c218b01fa467b4de8e0fc9840a Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 12:39:53 +0000
Subject: [PATCH 06/10] fix alignment of roadmap items

---
 packages/corewar-ui/src/features/onboarding/roadmapItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/corewar-ui/src/features/onboarding/roadmapItem.js b/packages/corewar-ui/src/features/onboarding/roadmapItem.js
index 20bb1733..b9e1ec6a 100644
--- a/packages/corewar-ui/src/features/onboarding/roadmapItem.js
+++ b/packages/corewar-ui/src/features/onboarding/roadmapItem.js
@@ -3,13 +3,13 @@ import Octicon from 'react-octicon'
 
 export default ({ item }) => (
   <div className="grid justify-center grid-cols-roadmap grid-rows-roadmap font-light min-h-200">
-    <div className="row-start-1 row-end-3 leading-10 text-white pt-4 pl-4 text-right max-w-350">
+    <div className="row-start-1 row-end-3 leading-10 text-white pt-4 pl-4 text-right w-full">
       {item.leftText}
     </div>
     <div className="col-start-2 row-start-1 self-center mx-auto text-blue">
       <Octicon className="text-2xl" name={`${item.icon}`} />
     </div>
-    <div className="row-span-3 leading-10 self-start text-white pt-4 pr-4 max-w-350">
+    <div className="row-span-3 leading-10 self-start text-white pt-4 pr-4 max-w-350 w-full">
       {item.rightText}
     </div>
     <div className="bg-white rounded-sm w-1 h-full col-start-2 border-box mx-auto box-border " />

From d16e1a9eef86fc1baf3aed7588defd4bab89595d Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 13:49:54 +0000
Subject: [PATCH 07/10] Fix stupidity

---
 .../corewar-ui/src/features/common/link.js    |  2 +-
 .../src/features/common/mobileLink.js         |  2 +-
 .../corewar-ui/src/features/common/siteNav.js |  4 +-
 .../corewar-ui/src/features/navbar/navbar.js  |  2 +-
 .../features/{common => navbar}/tabLink.js    |  0
 .../corewar-ui/src/features/topbar/logo.js    | 38 +++----------------
 .../src/features/topbar/siteHeader.js         |  2 +-
 7 files changed, 12 insertions(+), 38 deletions(-)
 rename packages/corewar-ui/src/features/{common => navbar}/tabLink.js (100%)

diff --git a/packages/corewar-ui/src/features/common/link.js b/packages/corewar-ui/src/features/common/link.js
index a26a42b7..7053aedd 100644
--- a/packages/corewar-ui/src/features/common/link.js
+++ b/packages/corewar-ui/src/features/common/link.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default () => ({ route, children }) => (
+export default ({ route, children }) => (
   <a
     className="text-white font-display mr-2 ml-2 lg:ml-10 lg:mr-10 leading-loose border-b-2 border-transparent hover:border-blue hover:no-underline cursor-pointer"
     href={route}
diff --git a/packages/corewar-ui/src/features/common/mobileLink.js b/packages/corewar-ui/src/features/common/mobileLink.js
index f85427cf..4c7879e6 100644
--- a/packages/corewar-ui/src/features/common/mobileLink.js
+++ b/packages/corewar-ui/src/features/common/mobileLink.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default () => ({ route, children }) => (
+export default ({ route, children }) => (
   <a
     className="block md:inline-block mt-4 md:mt-0 md:ml-6 no-underline text-white font-display hover:no-underline cursor-pointer"
     href={route}
diff --git a/packages/corewar-ui/src/features/common/siteNav.js b/packages/corewar-ui/src/features/common/siteNav.js
index 612feb7c..2188ac59 100644
--- a/packages/corewar-ui/src/features/common/siteNav.js
+++ b/packages/corewar-ui/src/features/common/siteNav.js
@@ -17,8 +17,8 @@ const SiteNav = () => {
   const [isExpanded, toggleExpansion] = useState(false)
   return (
     <header className="bg-secondary font-display flex">
-      <div className="w-4/5 md:w-2/3 mx-auto py-4 flex flex-wrap items-center justify-between">
-        <Logo siteName="corewar" siteDomain=".io" />
+      <div className="w-4/5 mx-auto py-4 flex flex-wrap items-center justify-between">
+        <Logo />
         <nav className="hidden md:block">
           {links.map(link => (
             <Link key={link.route} route={link.route}>
diff --git a/packages/corewar-ui/src/features/navbar/navbar.js b/packages/corewar-ui/src/features/navbar/navbar.js
index 9f23b490..832c35f2 100644
--- a/packages/corewar-ui/src/features/navbar/navbar.js
+++ b/packages/corewar-ui/src/features/navbar/navbar.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { space } from '../common/theme'
-import TabLink from '../common/tabLink'
+import TabLink from './tabLink'
 
 const NavBarGrid = styled.div`
   grid-row-start: 2;
diff --git a/packages/corewar-ui/src/features/common/tabLink.js b/packages/corewar-ui/src/features/navbar/tabLink.js
similarity index 100%
rename from packages/corewar-ui/src/features/common/tabLink.js
rename to packages/corewar-ui/src/features/navbar/tabLink.js
diff --git a/packages/corewar-ui/src/features/topbar/logo.js b/packages/corewar-ui/src/features/topbar/logo.js
index 93b1960e..bd193327 100644
--- a/packages/corewar-ui/src/features/topbar/logo.js
+++ b/packages/corewar-ui/src/features/topbar/logo.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import { colour, font, space } from '../common/theme'
+import { space } from '../common/theme'
 
 import CorewarLogo from '../../img/corewar-logo.png'
 
@@ -17,45 +17,19 @@ const LogoImage = styled.img`
   height: calc(${space.header} - ${space.s} - ${space.s});
 `
 
-const SiteName = styled.div`
-  font-family: ${font.default};
-  font-size: ${font.large};
-  color: ${colour.blue};
-  font-weight: 300;
-  line-height: 1.2em;
-  padding-left: ${space.m};
-  padding-top: ${space.s};
-
-  :hover {
-    cursor: pointer;
-  }
-`
-
-SiteName.displayName = 'SiteName'
-
-const SiteDomain = styled.span`
-  font-weight: 500;
-  color: ${colour.white};
-`
-
 const Logo = ({ siteName, siteDomain }) => (
   <Wrapper href={`/`}>
     <LogoImage src={CorewarLogo} />
-    <SiteName>
+    <div className="font-body text-xl text-blue font-light leading-5 pl-4 pt-2 cursor-pointer">
       {siteName}
-      <SiteDomain>{siteDomain}</SiteDomain>
-    </SiteName>
+      <span className="font-medium text-white">{siteDomain}</span>
+    </div>
   </Wrapper>
 )
 
 Logo.propTypes = {
-  siteName: PropTypes.string.isRequired,
-  siteDomain: PropTypes.string.isRequired
-}
-
-Logo.defaultProps = {
-  siteName: 'corewar',
-  siteDomain: '.io'
+  siteName: PropTypes.string,
+  siteDomain: PropTypes.string
 }
 
 export default Logo
diff --git a/packages/corewar-ui/src/features/topbar/siteHeader.js b/packages/corewar-ui/src/features/topbar/siteHeader.js
index 06d5846e..0493022d 100644
--- a/packages/corewar-ui/src/features/topbar/siteHeader.js
+++ b/packages/corewar-ui/src/features/topbar/siteHeader.js
@@ -18,7 +18,7 @@ const Header = styled.header`
   `}
 `
 
-const SiteHeader = ({ isAuthenticated, history }) => (
+const SiteHeader = ({ isAuthenticated }) => (
   <Header>
     <Logo siteName="corewar" siteDomain=".io" />
     {isAuthenticated ? <UserInfo /> : <Login />}

From 119a911f35c482767f3b9bb0bf449c5ee535d86e Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 13:55:28 +0000
Subject: [PATCH 08/10] clean up logo component

---
 .../corewar-ui/src/features/common/link.js    |  2 +-
 .../corewar-ui/src/features/topbar/logo.js    | 20 +++----------------
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/packages/corewar-ui/src/features/common/link.js b/packages/corewar-ui/src/features/common/link.js
index 7053aedd..945e0ccb 100644
--- a/packages/corewar-ui/src/features/common/link.js
+++ b/packages/corewar-ui/src/features/common/link.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 export default ({ route, children }) => (
   <a
-    className="text-white font-display mr-2 ml-2 lg:ml-10 lg:mr-10 leading-loose border-b-2 border-transparent hover:border-blue hover:no-underline cursor-pointer"
+    className="text-white font-display mr-2 ml-2 lg:ml-6 lg:mr-6 leading-loose border-b-2 border-transparent hover:border-blue hover:no-underline cursor-pointer"
     href={route}
   >
     {children}
diff --git a/packages/corewar-ui/src/features/topbar/logo.js b/packages/corewar-ui/src/features/topbar/logo.js
index bd193327..398d9e57 100644
--- a/packages/corewar-ui/src/features/topbar/logo.js
+++ b/packages/corewar-ui/src/features/topbar/logo.js
@@ -1,30 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
-import { space } from '../common/theme'
 
 import CorewarLogo from '../../img/corewar-logo.png'
 
-const Wrapper = styled.a`
-  display: grid;
-  grid-template-columns: ${space.header} 1fr;
-`
-
-const LogoImage = styled.img`
-  margin: ${space.s};
-  width: calc(${space.header} - ${space.ss} - ${space.s});
-  height: calc(${space.header} - ${space.s} - ${space.s});
-`
-
 const Logo = ({ siteName, siteDomain }) => (
-  <Wrapper href={`/`}>
-    <LogoImage src={CorewarLogo} />
+  <a className="flex" href={`/`}>
+    <img className="m-4 w-12" src={CorewarLogo} />
     <div className="font-body text-xl text-blue font-light leading-5 pl-4 pt-2 cursor-pointer">
       {siteName}
       <span className="font-medium text-white">{siteDomain}</span>
     </div>
-  </Wrapper>
+  </a>
 )
 
 Logo.propTypes = {

From 1f1348d7a457085552c29dcfd77ce9efe74b74e9 Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 13:57:53 +0000
Subject: [PATCH 09/10] mo nav tweaks, logo will need rework in app mode

---
 packages/corewar-ui/src/features/navbar/navbar.js | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/corewar-ui/src/features/navbar/navbar.js b/packages/corewar-ui/src/features/navbar/navbar.js
index 832c35f2..3766eced 100644
--- a/packages/corewar-ui/src/features/navbar/navbar.js
+++ b/packages/corewar-ui/src/features/navbar/navbar.js
@@ -1,15 +1,6 @@
 import React from 'react'
-import styled from 'styled-components'
-import { space } from '../common/theme'
 import TabLink from './tabLink'
 
-const NavBarGrid = styled.div`
-  grid-row-start: 2;
-  margin-left: ${space.sidebar};
-  display: flex;
-  text-align: center;
-`
-
 const navigationData = {
   EDITOR: [
     { url: '/app/editor/src', text: 'source' },
@@ -24,15 +15,13 @@ const navigationData = {
 }
 
 const NavBar = ({ interfaceMode }) => (
-  <NavBarGrid>
+  <div className="flex row-start-2 text-center ml-12">
     {navigationData[interfaceMode].map(link => (
       <TabLink key={link.url} to={link.url}>
         {link.text}
       </TabLink>
     ))}
-  </NavBarGrid>
+  </div>
 )
 
-NavBarGrid.displayName = 'NavBarGrid'
-
 export default NavBar

From 56e00926c6420c8b30c51fdd800b79df8b5d5a97 Mon Sep 17 00:00:00 2001
From: Doug McDonald <dougajmcdonald@gmail.com>
Date: Sun, 15 Mar 2020 14:00:52 +0000
Subject: [PATCH 10/10] ally

---
 packages/corewar-ui/src/features/topbar/logo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/corewar-ui/src/features/topbar/logo.js b/packages/corewar-ui/src/features/topbar/logo.js
index 398d9e57..1208412a 100644
--- a/packages/corewar-ui/src/features/topbar/logo.js
+++ b/packages/corewar-ui/src/features/topbar/logo.js
@@ -5,7 +5,7 @@ import CorewarLogo from '../../img/corewar-logo.png'
 
 const Logo = ({ siteName, siteDomain }) => (
   <a className="flex" href={`/`}>
-    <img className="m-4 w-12" src={CorewarLogo} />
+    <img className="m-4 w-12" src={CorewarLogo} alt="corewar-logo" />
     <div className="font-body text-xl text-blue font-light leading-5 pl-4 pt-2 cursor-pointer">
       {siteName}
       <span className="font-medium text-white">{siteDomain}</span>