Some not-super cool basic styles

amacdougall · Jul 27, 2012 · ec9955f · ec9955f
1 parent a4b12b9
commit ec9955f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 11 deletions.
diff --git a/static/base.css b/static/base.css
@@ -1,5 +1,47 @@
 /* App styles */
+body {
+  font-family: Georgia;
+  padding: 0;
+  margin: 0;
+}
 .page-wrap {
   width: 80%;
   margin: 0 auto;
+}
+.header {
+  text-align: center;
+}
+.main h1 {
+  font-size: 140%;
+}
+.main h2 {
+  font-size: 120%;
+}
+#gogogo {
+  text-align: center;
+}
+input {
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  font-size: 100%;
+  display: block;
+  margin: 0 auto 10px;
+  width: 50%;
+}
+.field {
+  padding: 10px 5px;
+  border: 1px solid #ccc;
+}
+.go-btn {
+  padding: 10px 5px;
+  background: #ccc;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  background: #000;
+  color: #fff;
+  padding: 0 10px;
 }
diff --git a/templates/home.jinja2 b/templates/home.jinja2
@@ -11,7 +11,7 @@
   come and bring it to octo-port, and get a fancy CSV of the data.</p>
   <h2 id="gogogo">Let me at it!</h2>
 	<form>
-    <input type="text" placeholder="Paste your GitHub url here ...">
-    <input type="submit" value="Give me a CSV!">
+    <input class="field" type="text" placeholder="Paste your GitHub url here ...">
+    <input class="go-btn" type="submit" value="Give me a CSV!">
   </form>
 {% endblock %}
diff --git a/templates/layout.jinja2 b/templates/layout.jinja2
@@ -10,17 +10,17 @@
         <h1>Octo-Port</h1>
         <h2>Send your GitHub issue queries to CSV</h2>
       </div>
-      <div role="main">
+      <div class="main" role="main">
         {% block content %}{% endblock %}
       </div>
-      <div class="footer">
-        <h3>So why is this useful?</h3>
-        <p>
-          Many of the project managers and maintainers of the world wish there were more
-          robust ways to work with GitHub Issues, especially for large projects. Exporting
-          to CSV with all your filters helps you manage the data how you want.
-        </p>
-      </div>
+    </div>
+    <div class="footer">
+      <h3>So why is this useful?</h3>
+      <p>
+        Many of the project managers and maintainers of the world wish there were more
+        robust ways to work with GitHub Issues, especially for large projects. Exporting
+        to CSV with all your filters helps you manage the data how you want.
+      </p>
     </div>
   </body>
 </html>