Add link styles

components/Footer.js

@@ -4,12 +4,12 @@ import { PALETTE } from '../lib/constants'
 
 const Footer = (props) => (
   <div className="mt3">
-    <div className="mt2">
+    <div className="mt3">
-      <Link href="/about"><a>about</a></Link>
+      <Link href="/about"><a className="link">about</a></Link>
-      <a href="mailto:hi@dawnlabs.io?subject=Carbon%20Feedback&anp;body=">send feedback</a>
+      <a className="link" href="mailto:hi@dawnlabs.io?subject=Carbon%20Feedback&anp;body=">send feedback</a>
-      <a href="https://github.com/dawnlabs/carbon">source</a>
+      <a className="link" href="https://github.com/dawnlabs/carbon">source</a>
     </div>
-    <div className="mt2">a project by <a href="https://twitter.com/dawn_labs">@dawn_labs</a> ¬</div>
+    <div className="mt3 mb2">a project by <a className="dawn-link" href="https://twitter.com/dawn_labs">@dawn_labs</a> ¬</div>
     <style jsx>{`
       div > div {
         text-align: center;
@@ -19,16 +19,19 @@ const Footer = (props) => (
 
       a {
         margin-right: 16px;
-        color: #fff;
-        text-decoration: none;
       }
 
       a:last-child {
         margin-right: 0;
       }
 
-      a:hover {
+      .dawn-link {
-        border-bottom: 1px solid #fff;
+        color: ${PALETTE.PRIMARY};
+        text-decoration: none;
+      }
+
+      .dawn-link:hover {
+        color: #fff;
       }
     `}</style>
   </div>

components/Header.js

@@ -5,11 +5,11 @@ const Header = ({ enableHeroText }) => (
   <div className="header mb4">
     <div className="header-content">
       <a href="/"><Logo /></a>
-      { enableHeroText ? (<h2 className="mt3">The easiest way to create images from source code.<br/> Start typing, or drag a file into the text area to get started.</h2>) : null }
+      { enableHeroText ? (<h2 className="mt3">Create and share beautiful images of your source code.<br/> Start typing, or drag a file into the text area to get started.</h2>) : null }
     </div>
     <style jsx>{`
       .header {
-        width: 632px;
+        width: 656px;
       }
 
       .header-content {

components/Meta.js

@@ -42,6 +42,21 @@ export default () => (
         text-rendering: optimizeLegibility;
       }
 
+      .link {
+        color: #fff;
+        text-decoration: none;
+        padding-bottom: 2px;
+        background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
+        background-size: 1px 1px;
+        background-position: 0 100%;
+        background-repeat: repeat-x;
+      }
+
+      .link:hover {
+        color: ${PALETTE.PRIMARY};
+        background: none;
+      }
+
       ::selection {
         background: rgba(255,255,255,.99);
         color: #121212;

lib/constants.js

@@ -231,8 +231,9 @@ export const LANGUAGES = [
 
 export const PALETTE = {
   EDITOR_BG: '#121212',
+  PRIMARY: '#F8E81C',
   SECONDARY: '#fff',
-  GRAY: '#646464'
+  GRAY: 'rgba(255, 255, 255, 0.6)'
 }
 
 export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

pages/about.js

@@ -17,7 +17,7 @@ export default () => (
         <p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
         <ul className="mt0 mb3">
           <li>Drag a file into the editor</li>
-          <li>Append a GitHub gist id to the url (<a href="#">example</a>)</li>
+          <li>Append a GitHub gist id to the url (<a className="link" href="#">example</a>)</li>
           <li>Paste your code directly</li>
         </ul>
         <h4 className="mb0">Customization</h4>
@@ -28,12 +28,12 @@ export default () => (
       <div className="mb4">
         <h2>I want to make this better.</h2>
         <p>
-          <a href="https://github.com/dawnlabs/carbon">Please do.</a>
+          <a className="link" href="https://github.com/dawnlabs/carbon">Please do.</a>
         </p>
       </div>
     </div>
     <style jsx>{`
-      h4 {
+      p, li {
         color: ${PALETTE.GRAY};
       }
 
@@ -44,12 +44,6 @@ export default () => (
       .about {
         max-width: 632px;
       }
-
-      a {
-        color: #fff;
-        text-decoration: none;
-        border-bottom: 1px solid #fff;
-      }
     `}</style>
   </Page>
 )