From b83550f70f791302e681ae68a633d6e07f932960 Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jonathan@jdbernard.com>
Date: Wed, 10 Apr 2019 10:54:01 -0500
Subject: [PATCH] web: cleanup common styles.

---
 web/src/App.vue               |  2 +-
 web/src/app.scss              | 11 ++++++-----
 web/src/styles/ui-common.scss | 29 ++++++++++++++++++++++++++---
 web/src/styles/vars.scss      |  3 +++
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index f36ee9f..0da33e5 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <NavBar></NavBar>
-    <router-view/>
+    <router-view class=main />
   </div>
 </template>
 <script lang="ts" src="./app.ts"></script>
diff --git a/web/src/app.scss b/web/src/app.scss
index 6fd8e1c..f45999b 100644
--- a/web/src/app.scss
+++ b/web/src/app.scss
@@ -8,23 +8,24 @@ body {
   color: $fg-primary;
 }
 
-h1, h2, h3 { font-family: 'Exo 2'; }
+h1, h2, h3 { font-family: $header-font; }
 
 h1 { font-size: 2rem; }
 h2 { font-size: 1.5rem; }
 h3 { font-size: 1.2rem; }
 
 #app {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  align-items: stretch;
   border: 0;
   display: flex;
-  align-items: stretch;
-  font-family: 'Lato', 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: $body-font;
   margin: 0;
 
   min-height: 100vh;
 
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 
   & > * { padding: 1rem 2rem; }
 }
diff --git a/web/src/styles/ui-common.scss b/web/src/styles/ui-common.scss
index 2ae12a6..ed8e4d0 100644
--- a/web/src/styles/ui-common.scss
+++ b/web/src/styles/ui-common.scss
@@ -1,9 +1,15 @@
+@import '~@/styles/vars';
+
 .btn,
 .btn-action {
   border: 0;
   border-radius: .25em;
   cursor: pointer;
+  font-family: $body-font;
+  font-weight: bold;
   padding: .5em 1em;
+
+  a { text-decoration: none; }
 }
 
 .btn-action {
@@ -14,14 +20,31 @@
   &:hover {
     background-color: darken($color2, 5%);
   }
+
+}
+
+a.btn,
+a.btn-action { text-decoration: none; }
+
+.header,
+.header-action {
+  align-items: baseline;
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
 }
 
 .header-action {
-  align-items: baseline;
   display: flex;
-  font-size: 1.2rem;
   justify-content: space-between;
 
   & > * { display: inline-block; }
-  & > button { font-size: inherit; }
+  & > .btn, & > .btn-action { font-size: inherit; }
+}
+
+.main { flex-grow: 1; }
+
+input,
+select {
+  font-size: inherit;
+  padding: .35em .5em;
 }
diff --git a/web/src/styles/vars.scss b/web/src/styles/vars.scss
index 92f3d3a..1654a41 100644
--- a/web/src/styles/vars.scss
+++ b/web/src/styles/vars.scss
@@ -40,6 +40,9 @@ $screen-small: 640px;
 $screen-wide: 1200px;
 $screen-ultrawide: 1600px;
 
+$body-font: 'Lato', 'Avenir', Helvetica, Arial, sans-serif;
+$header-font: 'Exo 2';
+
 /** ### forSize
   * This mixin allows us to apply some rules selectively based on the screen
   * size. There are three primary sizes: `small`, `medium`, and `large`, which