Simplify styles for clarity

Author: artfuldev

src/app.ts

@@ -11,8 +11,8 @@ setupPage('#app');
 cssRaw(`
   #app {
     font-family: medium-content-sans-serif-font,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Arial,sans-serif;
-    background: #9c27b0;
-    color: white;
+    background: white;
+    color: #333;
     display: flex;
   }
 

src/components/Header/NavMenu.ts

@@ -13,16 +13,16 @@ interface Sinks {
   history: Stream<string>;
 }
 
-const whiteColor = { color: 'white' };
-const noTextDecoration = { textDecoration: 'none' };
-const cursorPointer = { cursor: 'pointer' };
 const navLink = {
-  ...whiteColor,
-  ...noTextDecoration
+  color: '#333',
+  fontSize: rem(1),
+  fontWeight: 700,
+  marginRight: rem(1),
+  textDecoration: 'none',
 };
 const navLinkHover = {
   ...navLink,
-  ...cursorPointer
+  cursor: 'pointer'
 };
 
 const className = style({
@@ -31,16 +31,12 @@ const className = style({
   $nest: {
     '& > a': {
       ...navLink,
-      marginRight: rem(1),
+      textTransform: 'uppercase',
       $nest: {
         '&:first-child': {
           marginLeft: 'auto'
         },
-        '&:link': navLink,
-        '&&:visited': navLink,
-        '&&&:hover': navLinkHover,
-        '&&&&:active': navLink,
-        '&&&&&:focus': navLink
+        '&&:hover': navLinkHover,
       }
     }
   }

src/components/Header/index.ts

@@ -18,7 +18,9 @@ const className = style({
   $nest: {
     '& h1': {
       marginBottom: 0,
+      marginTop: 0,
       flex: '1 0 60%',
+      lineHeight: 1
     },
     '& em': {
       fontSize: rem(1)

src/routes/About/index.ts

@@ -1,10 +1,10 @@
 import { RouteComponent } from 'routes';
 import { Stream } from 'xstream';
-import { div } from '@cycle/dom';
+import { h2 } from '@cycle/dom';
 
 const xs = Stream;
 
 export const About: RouteComponent = sources => ({
-  dom: xs.of(div(['About'])),
+  dom: xs.of(h2(['About'])),
   history: xs.empty()
 });

src/routes/Home/index.ts

@@ -1,10 +1,10 @@
 import { RouteComponent } from 'routes';
 import { Stream } from 'xstream';
-import { div } from '@cycle/dom';
+import { h2 } from '@cycle/dom';
 
 const xs = Stream;
 
 export const Home: RouteComponent = sources => ({
-  dom: xs.of(div(['Home'])),
+  dom: xs.of(h2(['Home'])),
   history: xs.empty()
 });