-BootstrapVue -VueAwesome

- All non-modals no longer reference Bootstrap or Font Awesome (#20)
- Removed "full request" button from journal page (#16)
- Added role attributes in many places

src/app/src/App.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-#app
+#app(role='application')
   navigation
-  #content.container
+  #content
     router-view
     vue-progress-bar
     toast(ref='toast')
-  footer
-    p.text-right.text-muted
+  footer.mpj-text-right.mpj-muted-text
+    p
       | myPrayerJournal v{{ version }}
       br
       em: small.
@@ -45,9 +45,27 @@ export default {
 <style>
 html, body {
   background-color: whitesmoke;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-size: 1rem;
 }
 body {
-  padding-top: 60px;
+  padding-top: 50px;
+  margin: 0;
+}
+p {
+  margin-bottom: 0;
+}
+button,
+a[role="button"] {
+  border: solid 1px #050;
+  border-radius: .5rem;
+  background-color: whitesmoke;
+}
+button:hover,
+a[role="button"]:hover {
+  background-color: #050;
+  color: white;
+  text-decoration: none;
 }
 footer {
   border-top: solid 1px lightgray;
@@ -59,14 +77,59 @@ footer p {
 }
 a:link, a:visited {
   color: #050;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+.mpj-main-content {
+  max-width: 60rem;
+  margin: auto;
+}
+.mpj-main-content-wide {
+  margin: .5rem;
+}
+@media screen and (max-width: 21rem) {
+  .mpj-main-content-wide {
+    margin: 0;
+  }
 }
 .mpj-request-text {
   white-space: pre-line;
 }
-.bg-mpj {
+.mpj-request-log {
+  width: 100%;
+}
+.mpj-request-log thead th {
+  border-top: solid 1px lightgray;
+  border-bottom: solid 2px lightgray;
+  text-align: left;
+}
+.mpj-request-log tbody td {
+  border-bottom: dotted 1px lightgray;
+  vertical-align: top;
+}
+.mpj-bg {
   background-image: -webkit-gradient(linear, left top, left bottom, from(#050), to(whitesmoke));
   background-image: -webkit-linear-gradient(top, #050, whitesmoke);
   background-image: -moz-linear-gradient(top, #050, whitesmoke);
   background-image: linear-gradient(to bottom, #050, whitesmoke);
 }
+.mpj-text-center {
+  text-align: center;
+}
+.mpj-text-nowrap {
+  white-space: nowrap;
+}
+.mpj-text-right {
+  text-align: right;
+  color: rgba(0, 0, 0, .60);
+}
+.mpj-muted-text {
+  color: rgba(0, 0, 0, .60);
+}
+.mpj-margin {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
 </style>