web: cleanup common styles.

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>

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: $body-font;
-  font-family: 'Lato', 'Avenir', Helvetica, Arial, sans-serif;
   margin: 0;
 
   min-height: 100vh;
 
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 
   & > * { padding: 1rem 2rem; }
 }

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;
 }

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