Add base styles

8 years ago · 615db19728
2 changed files with 70 additions and 9 deletions
--- a/assets/style.css
+++ b/assets/style.css
@ -0,0 +1,56 @@
+body {
+  width: calc(100% - 4em);
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background: #ff512f;
+  background: linear-gradient(to left, #ff512f , #f09819);
+  color: #222;
+}
+
+a {
+  color: #f09819;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+a:hover {
+  color: #ff512f;
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+body > * {
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  box-shadow: 0px 3px #ddd;
+  margin: 2em 0;
+  padding: 1em;
+}
+
+h1,
+h2 {
+  margin-top: 0;
+}
+
+h2,
+h3 {
+  color: #111;
+}
+
+h1 {
+  margin: 0;
+  float: left;
+}
+
+.search {
+  float: right;
+}
+
+table {
+  width: 100%;
+}
--- a/views/index.html
+++ b/views/index.html
@ -3,25 +3,30 @@
  <head>
    <meta charset="utf-8">
    <title>Tor Explorer</title>
+    <link rel="stylesheet" href="/assets/style.css">
  </head>
  <body>

    <header>
-      <a href="/"><h1>Tor Explorer</h1></a>
-      <form action="/">
-        <label>
-          Search
-          <input type="search" name="s" value="{{ req.query.s }}">
-        </label>
-      </form>
+      <div class="wrapper clearfix">
+        <a href="/"><h1>Tor Explorer</h1></a>
+        <form class="search" action="/">
+          <label>
+            Search
+            <input type="search" name="s" value="{{ req.query.s }}">
+          </label>
+        </form>
+      </div>
    </header>

-    <main>
+    <main class="wrapper">
      {% block main %}{% endblock %}
    </main>

    <footer>
-      <a target="_blank" href="https://github.com/lukechilds/tor-explorer">Source code</a> - <a target="_blank" href="https://github.com/lukechilds/tor-explorer/issues">Report a bug</a>
+      <div class="wrapper">
+        <a target="_blank" href="https://github.com/lukechilds/tor-explorer">Source code</a> - <a target="_blank" href="https://github.com/lukechilds/tor-explorer/issues">Report a bug</a>
+      </div>
    </footer>

  </body>