Add static assets.

diff --git a/app.yaml b/app.yaml
index b9e9d44..cfcd6a2 100644 (file)
--- a/app.yaml
+++ b/app.yaml
@@ -5,5 +5,9 @@ automatic_scaling:
   max_idle_instances: 1
 
 handlers:
+- url: /static
+  static_dir: static
+
 - url: /.*
   script: _go_app
+

diff --git a/static/fitbit.png b/static/fitbit.png
new file mode 100644 (file)
index 0000000..b4a01a6
Binary files /dev/null and b/static/fitbit.png differ

diff --git a/static/gfit.png b/static/gfit.png
new file mode 100644 (file)
index 0000000..a395bba
Binary files /dev/null and b/static/gfit.png differ

diff --git a/static/style.css b/static/style.css
new file mode 100644 (file)
index 0000000..8c07e7a
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,155 @@
+body {
+  background-color: white;
+  margin: 0;
+  font-family: Roboto, sans-serif;
+}
+
+a {
+  color: #546e7a;
+  text-decoration: none;
+}
+
+.main {
+  height: 50ex;
+  background-color: lightgray;
+  color: black;
+  padding: 1ex;
+}
+
+.navbar, .main {
+  max-width: 80ex;
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.navbar {
+  background-color: white;
+  color: #546e7a;
+  height: 39px;
+  position: relative;
+}
+
+.navbar.heading {
+  background-color: #29434e;
+}
+
+.navbar .right {
+  top: 0px;
+  text-align: right;
+  float: right;
+}
+
+.navbar .left {
+  float: left;
+}
+
+.navbar .clear {
+  clear: both;
+}
+
+h1 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 2rem;
+  margin-bottom: 1ex;
+  text-align: center;
+}
+
+div.slogan {
+  font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  line-height: 1.75rem;
+  text-align: center;
+}
+
+hr {
+  width: 68%;
+}
+
+.button {
+  background-color: white;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  display: inline-block;
+  font-size: 16px;
+  min-width: 64px;
+  padding: 9px 16px;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-align: center;
+}
+
+.button.flat {
+  background-color: transparent;
+  color: #546e7a;
+}
+
+.navbar .button.flat {
+  color: white;
+}
+
+a.button.flat:hover {
+  background-color: rgba(221, 221, 221, 0.4);
+}
+
+a.button.raised {
+  background-color: #29434e;
+  color: white;
+  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
+}
+
+a.button.raised:hover {
+  background-color: #546e7a;
+}
+
+div.button.raised {
+  border-bottom: 3px solid #76ff03;
+}
+
+table.connections {
+  width: 95%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+table.connections .icon {
+  vertical-align: text-bottom;
+  margin-right: .5ex;
+}
+
+table.connections .unauthorized .icon {
+  opacity: .2;
+}
+
+table.connections .action {
+  text-align: right;
+}
+
+table.connections .name {
+  font-weight: 700;
+}
+
+table.connections .status {
+  font-weight: 100;
+  margin-left: .5ex;
+}
+
+table.connections .authorized .status {
+  color: #3eac5c;
+}
+
+table.connections .unauthorized .status {
+  color: #ca0e0e;
+}
+
+ul.connections {
+  text-align: center;
+}
+
+
+ul.connections li {
+  list-style-type: none;
+  display: inline-block;
+}