Add logo, index page styles

7 years ago · 5a4a1ea33c
parent a9a91aa641
commit 5a4a1ea33c
3 changed files with 64 additions and 5 deletions
--- a/components/meta.js
+++ b/components/meta.js
@ -1,23 +1,35 @@
 import Head from 'next/head'

 export default () => (
-  <div>
+  <div className="meta">
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />
      <link rel="shortcut icon" href="/static/favicon.ico" />
      <link rel="stylesheet" href="//cdn.jsdelivr.net/font-hack/2.020/css/hack-extended.min.css" />
    </Head>
+    <style jsx>{`
+      .meta {
+        display: none;
+      }
+    `}</style>
    <style jsx global>{`
      body {
        font-family: Hack, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
        background: #000;
      }

-      * {
+      *, *:after, *:before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
+      }
+
+      ::selection {
+          background-color: rgba(256, 256, 256, 0.165);
      }

      #toolbar > div {
--- a/components/svg/logo.js
+++ b/components/svg/logo.js
@ -0,0 +1,14 @@
+import React from 'react'
+
+export default () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 280 280">
+    <g fill="#F8E81C" fillRule="evenodd">
+      <path fillRule="nonzero" d="M140,280 C62.680135,280 0,217.319865 0,140 C0,62.680135 62.680135,0 140,0 C217.319865,0 280,62.680135 280,140 C280,217.319865 217.319865,280 140,280 Z M140,272 C212.901587,272 272,212.901587 272,140 C272,67.098413 212.901587,8 140,8 C67.098413,8 8,67.098413 8,140 C8,212.901587 67.098413,272 140,272 Z M140.501845,259.926199 C74.5455954,259.926199 21.0774908,206.458095 21.0774908,140.501845 C21.0774908,74.5455954 74.5455954,21.0774908 140.501845,21.0774908 C206.458095,21.0774908 259.926199,74.5455954 259.926199,140.501845 C259.926199,206.458095 206.458095,259.926199 140.501845,259.926199 Z M140.501845,251.926199 C202.039817,251.926199 251.926199,202.039817 251.926199,140.501845 C251.926199,78.9638734 202.039817,29.0774908 140.501845,29.0774908 C78.9638734,29.0774908 29.0774908,78.9638734 29.0774908,140.501845 C29.0774908,202.039817 78.9638734,251.926199 140.501845,251.926199 Z"/>
+      <g transform="translate(49 118)">
+        <path d="M154.300003 44L154.300003 11.375 162.300003 11.375 162.300003 16.09375C163.279175 14.3437412 164.555204 12.9895881 166.128128 12.03125 167.701053 11.0729119 169.643741 10.59375 171.956253 10.59375 175.622938 10.59375 178.320828 11.6614477 180.050003 13.796875 181.779178 15.9323023 182.643753 18.8749813 182.643753 22.625L182.643753 44 174.643753 44 174.643753 23.1875C174.643753 21.2708238 174.237507 19.7812553 173.425003 18.71875 172.612499 17.6562447 171.247929 17.125 169.331253 17.125 167.122909 17.125 165.398968 17.8593677 164.159378 19.328125 162.919789 20.7968823 162.300003 22.7291547 162.300003 25.125L162.300003 44 154.300003 44zM121.151666 27.6875C121.151666 25.1249872 121.495413 22.7968855 122.182916 20.703125 122.87042 18.6093645 123.865202 16.8072992 125.167291 15.296875 126.469381 13.7864508 128.068324 12.6250041 129.964166 11.8125 131.860009 10.9999959 134.026654 10.59375 136.464166 10.59375 138.901679 10.59375 141.068324 10.9999959 142.964166 11.8125 144.860009 12.6250041 146.458952 13.7864508 147.761041 15.296875 149.063131 16.8072992 150.052705 18.6093645 150.729791 20.703125 151.406878 22.7968855 151.745416 25.1249872 151.745416 27.6875 151.745416 30.2500128 151.406878 32.5729063 150.729791 34.65625 150.052705 36.7395937 149.063131 38.5416591 147.761041 40.0625 146.458952 41.5833409 144.860009 42.7499959 142.964166 43.5625 141.068324 44.3750041 138.901679 44.78125 136.464166 44.78125 134.026654 44.78125 131.860009 44.3750041 129.964166 43.5625 128.068324 42.7499959 126.469381 41.5833409 125.167291 40.0625 123.865202 38.5416591 122.87042 36.7395937 122.182916 34.65625 121.495413 32.5729063 121.151666 30.2500128 121.151666 27.6875zM129.495416 32.40625C129.495416 34.3645931 130.156868 35.880203 131.479791 36.953125 132.802715 38.026047 134.464156 38.5625 136.464166 38.5625 138.464176 38.5625 140.125618 38.0416719 141.448541 37 142.771465 35.9583281 143.432916 34.4270934 143.432916 32.40625L143.432916 22.9375C143.432916 20.93749 142.771465 19.4166719 141.448541 18.375 140.125618 17.3333281 138.464176 16.8125 136.464166 16.8125 134.464156 16.8125 132.802715 17.3437447 131.479791 18.40625 130.156868 19.4687553 129.495416 20.9791569 129.495416 22.9375L129.495416 32.40625zM88.1875 44L88.1875.46875 96.1875.46875 96.1875 15.78125C97.2083384 14.1562419 98.5052005 12.8854213 100.078125 11.96875 101.65105 11.0520787 103.531239 10.59375 105.71875 10.59375 107.885427 10.59375 109.781242 11.0416622 111.40625 11.9375 113.031258 12.8333378 114.374995 14.0468673 115.4375 15.578125 116.500005 17.1093827 117.286456 18.9218645 117.796875 21.015625 118.307294 23.1093855 118.5625 25.3333216 118.5625 27.6875 118.5625 30.0833453 118.307294 32.3124897 117.796875 34.375 117.286456 36.4375103 116.500005 38.2395756 115.4375 39.78125 114.374995 41.3229244 113.031258 42.5416622 111.40625 43.4375 109.781242 44.3333378 107.885427 44.78125 105.71875 44.78125 103.552073 44.78125 101.677091 44.3229213 100.09375 43.40625 98.5104088 42.4895787 97.2083384 41.2187581 96.1875 39.59375L96.1875 44 88.1875 44zM96.1875 30.125C96.1875 32.6875128 96.7708275 34.7343673 97.9375 36.265625 99.1041725 37.7968827 100.968737 38.5625 103.53125 38.5625 105.614594 38.5625 107.255202 37.9947973 108.453125 36.859375 109.651048 35.7239527 110.25 34.1979262 110.25 32.28125L110.25 23.0625C110.25 21.1458238 109.656256 19.6250056 108.46875 18.5 107.281244 17.3749944 105.635427 16.8125 103.53125 16.8125 100.968737 16.8125 99.1041725 17.5781173 97.9375 19.109375 96.7708275 20.6406327 96.1875 22.6874872 96.1875 25.25L96.1875 30.125z"/>
+        <polygon points="67.411 44 67.411 11.375 85.63 11.375 85.63 17.625 75.411 17.625 75.411 44"/>
+        <path d="M31.7279172 34.71875C31.7279172 32.0729034 32.6445747 29.7916762 34.4779172 27.875 36.3112597 25.9583238 38.9570666 24.8437516 42.4154172 24.53125L51.4466672 23.78125 51.4466672 21.65625C51.4466672 19.9479081 50.9883384 18.7135455 50.0716672 17.953125 49.1549959 17.1927045 47.9050084 16.8125 46.3216672 16.8125 44.6966591 16.8125 43.3737556 17.2031211 42.3529172 17.984375 41.3320788 18.7656289 40.8216672 19.9062425 40.8216672 21.40625L32.8216672 21.40625C32.8633341 19.6145744 33.2487469 18.0468817 33.9779172 16.703125 34.7070875 15.3593683 35.6758278 14.2395878 36.8841672 13.34375 38.0925066 12.4479122 39.5299922 11.7656273 41.1966672 11.296875 42.8633422 10.8281227 44.6758241 10.59375 46.6341672 10.59375 50.5508534 10.59375 53.6445725 11.5416572 55.9154172 13.4375 58.1862619 15.3333428 59.3216672 18.114565 59.3216672 21.78125L59.3216672 37.78125 64.8216672 37.78125 64.8216672 44 52.2279172 44 52.1654172 38.9375 51.8841672 38.9375C50.9466625 40.7291756 49.7018833 42.1510364 48.1497922 43.203125 46.5977011 44.2552136 44.5612631 44.78125 42.0404172 44.78125 40.5404097 44.78125 39.1706317 44.5312525 37.9310422 44.03125 36.6914527 43.5312475 35.6029219 42.8333378 34.6654172 41.9375 33.7279125 41.0416622 33.0039614 39.9895894 32.4935422 38.78125 31.983123 37.5729106 31.7279172 36.2187575 31.7279172 34.71875zM40.0404172 35.625C40.0404172 36.6041716 40.4883294 37.3385392 41.3841672 37.828125 42.280005 38.3177108 43.4362434 38.5625 44.8529172 38.5625 46.8945941 38.5625 48.503953 37.8385489 49.6810422 36.390625 50.8581314 34.9427011 51.4466672 33.1875103 51.4466672 31.125L51.4466672 29.84375 41.8529172 30.6875C40.6654113 30.8125006 40.0612506 31.5208269 40.0404172 32.8125L40.0404172 35.625zM.599998474 27.875C.599998474 25.1874866.943745037 22.7760523 1.63124847 20.640625 2.31875191 18.5051977 3.30311707 16.6927158 4.58437347 15.203125 5.86562988 13.7135342 7.40207285 12.5729206 9.19374847 11.78125 10.9854241 10.9895794 13.0062372 10.59375 15.2562485 10.59375 16.9645903 10.59375 18.5999907 10.8177061 20.1624985 11.265625 21.7250063 11.7135439 23.1364505 12.4166619 24.3968735 13.375 25.6572964 14.3333381 26.6781196 15.5572842 27.4593735 17.046875 28.2406274 18.5364658 28.7249975 20.3124897 28.9124985 22.375L20.9124985 22.375C20.7041641 20.2916563 20.0635455 18.8437541 18.9906235 18.03125 17.9177014 17.2187459 16.5687566 16.8125 14.9437485 16.8125 13.3187403 16.8125 11.9125044 17.3333281 10.7249985 18.375 9.53749254 19.4166719 8.94374847 21.0208225 8.94374847 23.1875L8.94374847 32.15625C8.94374847 34.15626 9.50624285 35.7239527 10.6312485 36.859375 11.7562541 37.9947973 13.2145728 38.5625 15.0062485 38.5625 16.7979241 38.5625 18.2093683 38.1354209 19.2406235 37.28125 20.2718786 36.4270791 20.9124972 34.9166775 21.1624985 32.75L29.1624985 32.75C28.9541641 34.7916769 28.4645857 36.5572842 27.6937485 38.046875 26.9229113 39.5364658 25.917713 40.781245 24.6781235 41.78125 23.4385339 42.781255 22.032298 43.5312475 20.4593735 44.03125 18.8864489 44.5312525 17.2041741 44.78125 15.4124985 44.78125 12.9749863 44.78125 10.839591 44.3645875 9.00624847 43.53125 7.17290597 42.6979125 5.62604644 41.5416741 4.36562347 40.0625 3.10520051 38.5833259 2.1625016 36.8125103 1.53749847 34.75.912495349 32.6874897.599998474 30.3958459.599998474 27.875z"/>
+      </g>
+    </g>
+  </svg>
+)
--- a/pages/index.js
+++ b/pages/index.js
@ -4,7 +4,7 @@ import { DragDropContext } from 'react-dnd'
 import Axios from 'axios'
 import domtoimage from 'dom-to-image'

-
+import Logo from '../components/svg/logo'
 import Meta from '../components/meta'
 import Toolbar from '../components/toolbar'
 import CodeImage from '../components/codeImage'
@ -52,7 +52,10 @@ class Index extends React.Component {
    return (
        <div className="main">
          <Meta />
-          <h1>Welcome to Code Image</h1>
+          <div className="header">
+            <Logo />
+            <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
+          </div>
          <div id="editor">
            <Toolbar
              save={this.save}
@ -64,8 +67,29 @@ class Index extends React.Component {
              {this.props.content}
            </CodeImage>
          </div>
+          <div className="footer">
+            <span>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs ¬</a></span>
+          </div>
          <style jsx>{`
+            .main {
+              display: flex;
+              justify-content: space-between;
+              padding: 64px;
+              height: 100vh;
+            }
+
+            .header {
+              margin-top: 56px;
+              width: 776px;
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+            }
+
            h1 {
+              max-width: 570px;
+              font-size: 24px;
+              line-height: 1.5;
              color: #fff;
            }

@ -81,6 +105,15 @@ class Index extends React.Component {
              background: #151515;
              padding: 16px;
            }
+
+            .footer {
+              color: #506874;
+            }
+
+            .footer a {
+              color: #C694E8;
+              text-decoration: none;
+            }
          `}
          </style>
        </div>