Adding app frame

2018-02-10 17:00:01 -05:00 · 2018-02-10 17:00:01 -05:00 · 7ef40cba9c
commit 7ef40cba9c
parent f8aaeba7a9
2 changed files with 138 additions and 4 deletions
--- a/src/style.css
+++ b/src/style.css
@ -1,3 +1,98 @@
-body {
-  font-family: sans-serif;
+@import url('//fonts.googleapis.com/css?family=Bangers&text=Regxpr');
+
+:root {
+  --color-green: #bada55;
+  --color-brown: #6b6659;
+  --color-tan: #cbcbba;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-red: #b3151a;
+
+  --header-height: 6rem;
+  --content-margin: 2rem;
+  --spacing-margin: 1rem;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  margin: 0 var(--content-margin);
+  padding: 0;
+  font-family: sans-serif;
+  background: var(--color-brown);
+  font-size: 1.6rem;
+}
+
+#main {
+  background: var(--color-green) linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
+  box-shadow: 0 0 1rem var(--color-black);
+  padding: 0 var(--content-margin);
+  margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin));
+  position: relative;
+}
+
+#main h1 {
+  font-family: 'Bangers', 'cursive';
+  font-size: 4rem;
+  font-weight: normal;
+  display: inline-block;
+  margin: 0;
+  line-height: var(--header-height);
+}
+
+#main a {
+  text-decoration: none;
+  display: inline-block;
+}
+
+#main ul {
+  line-height: var(--header-height);
+  position: absolute;
+  top: 0;
+  right: var(--content-margin);
+}
+
+#main li a:hover,
+#main li a:active {
+  text-decoration: underline;
+}
+
+footer {
+  margin: var(--spacing-margin) 0;
+}
+
+footer img {
+  vertical-align: text-top;
+  width: 80px;
+  height: 15px;
+}
+
+a {
+  color: inherit;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+  display: inline-block;
+}
+
+.inline-list li {
+  white-space: nowrap;
+}
+
+.inline-list li:after {
+  content: '//';
+  padding: 0 0.5rem;
+}
+
+.inline-list li:last-child:after {
+  content: '';
 }
--- a/src/template.html
+++ b/src/template.html
@ -1,10 +1,49 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
  <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="Regular expression visualizer using railroad diagrams" />
+
+    <link rel="author" href="/humans.txt" />
+
    <title>Regexper</title>
  </head>
  <body>
+    <header id="main">
+      <h1>
+        <a href="/">Regexper</a>
+      </h1>
+
+      <ul>
+        <li><a href="https://github.com/javallone/regexper-static">
+          Source on GitHub
+        </a></li>
+      </ul>
+    </header>
+
+    <noscript>
+      <div class="message">
+        <h2><i icon="error"></i>JavaScript Required</h2>
+        <p>You need to enable JavaScript to use Regexper.</p>
+        <p>Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source by following the GitHub link in the header. There are two data collection tools integrated in the app: Google Analytics and Sentry.io. Google Analytics is used to track browser usage data and application performance. Sentry.io is a tool used to capture and report client-side JavaScript errors. Most popular ad blockers will prevent these tools from sending any tracking data, and doing so will <b>not</b> impact the performance of this app. Regexper is not supported by ad revenue or sales of any kind.</p>
+      </div>
+    </noscript>
+
    <div id="root"></div>
+
+    <footer>
+      <ul class="inline-list">
+        <li>
+          Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
+        </li>
+        <li>
+          Generated images licensed:
+            <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img
+              alt="Creative Commons CC-BY-3.0 License"
+              src="https://licensebuttons.net/l/by/3.0/80x15.png" /></a>
+        </li>
+      </ul>
+    </footer>
  </body>
 </html>