Add basic styles

6 years ago · deb8c6441c
4 changed files with 61 additions and 11 deletions
--- a/website/index.html
+++ b/website/index.html
@ -3,25 +3,31 @@
    <title>Doge Seed</title>
    <link rel="shortcut icon" href="favicon.png">
    <meta name="description" content="Dank mnemonic seed phrases."/>
+    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
-    <header>
-      <h1>Doge Seed</h1>
-      <h2>very entropy, such secure</h2>
-      <img src="doge.svg" width="256" alt="Shiba Inu"/>
-      <h3>Dank mnemonic seed phrases.</h3>
+    <header class="header">
+      <div class="wrapper">
+        <h1>Doge Seed</h1>
+        <h2>Dank mnemonic seed phrases</h2>
+        <img src="doge.svg" width="256" alt="Shiba Inu"/>
+      </div>
    </header>

    <section class="generator">
-      <div class="seed-text"></div>
-      <input class="bits" type="range" min="128" max="256" step="32" value="256" />
-      <button class="generate-seed" type="button">Generate Seed</button>
+      <div class="wrapper">
+        <div class="seed-text"></div>
+        <input class="bits" type="range" min="128" max="256" step="32" value="256" />
+        <button class="generate-seed" type="button">Generate Seed</button>
+      </div>
    </section>

    <section class="description">
-      <h4>Wut?</h4>
-      <p><strong>Cryptographically secure</strong> mnemonic seed phrases with added dankness. The first four words will be a randomly generated Doge-like sentence.</p>
-      <p>The seed phrases are <strong>fully valid checksummed BIP39 seeds</strong>. They can be used with any cryptocurrency and can be imported into any BIP39 compliant wallet.</p>
+      <div class="wrapper">
+        <h3>Very entropy, such secure.</h3>
+        <p>Doge seeds are <strong>cryptographically secure</strong> mnemonic seed phrases with added dankness. The first four words will be a randomly generated Doge-like sentence.</p>
+        <p>The seed phrases are <strong>fully valid checksummed BIP39 seeds</strong>. They can be used with any cryptocurrency and can be imported into any BIP39 compliant wallet.</p>
+      </div>
    </section>

    <script async src="./index.js"></script>
--- a/website/package.json
+++ b/website/package.json
@ -16,6 +16,7 @@
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
+    "modern-normalize": "^0.5.0",
    "when-dom-ready": "^1.2.12"
  }
 }
--- a/website/style.css
+++ b/website/style.css
@ -0,0 +1,38 @@
+@import 'modern-normalize';
+
+body {
+  background: #f2ede0;
+}
+
+.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 0 2em;
+  box-sizing: content-box;
+}
+
+.header {
+  padding: 1em 0;
+  text-align: center;
+  background: #fdebbe;
+}
+
+.generator {
+  padding: 1em 0;
+  background: #fdebbe;
+}
+
+.generator .seed-text {
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 1em;
+  text-align: center;
+  font-size: 1.4em;
+  font-family: "Comic Sans MS", cursive, sans-serif;
+}
+
+.description {
+  padding: 1em 0;
+}
--- a/website/yarn.lock
+++ b/website/yarn.lock
@ -2957,6 +2957,11 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
  dependencies:
    minimist "0.0.8"

+modern-normalize@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-0.5.0.tgz#7f75bb7319c6ae708d716658dc8d9c9760274887"
+  integrity sha512-U1geaHG9Grp3a60djDV2JvSVKiDFhuZrhUHoQHusfjtGqbgGunI3HHw7hHtQ2ls2y0et3+Lpcf2hOSS1W8JUdg==
+
 ms@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"