From 5a79c0e1923da2e07dab3c8e1a12ed803d3969b8 Mon Sep 17 00:00:00 2001
From: Dave Gallant <davegallant@gmail.com>
Date: Tue, 23 Aug 2022 04:12:23 +0000
Subject: [PATCH] Update css

---
 src/App.vue   |   6 +-
 src/main.js   |   3 +-
 src/style.css |  17 -----
 src/theme.css | 182 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/xess.css  |  86 ------------------------
 5 files changed, 188 insertions(+), 106 deletions(-)
 delete mode 100644 src/style.css
 create mode 100644 src/theme.css
 delete mode 100644 src/xess.css
diff --git a/src/App.vue b/src/App.vue
index f697851..be03402 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <body>
     <input
-      class="form-control bg-dark text-light"
+      class="form-control bg-dark text-light mousetrap"
       type="text"
       placeholder="Search"
       v-model="filter"
@@ -69,12 +69,16 @@ export default {
     this.fetchDeals();
     Mousetrap.bind("/", this.focusSearch, "keyup");
     Mousetrap.bind("r", this.loadDeals);
+    Mousetrap.bind("escape", this.blurSearch);
     this.interval = setInterval(() => this.fetchDeals(), 10000);
   },
   methods: {
     focusSearch() {
       this.$refs.search.focus();
     },
+    blurSearch() {
+      this.$refs.search.blur();
+    },
     fetchDeals() {
       axios
         .get("api/v1/topics")
diff --git a/src/main.js b/src/main.js
index 944f101..fc2e1a2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,8 +7,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.min.js";
 import "mousetrap/mousetrap.min.js";
 
-import "./style.css";
-import "./xess.css";
+import "./theme.css";
 
 createApp(App)
   .use(VueGtag, {
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index 6cb917e..0000000
--- a/src/style.css
+++ /dev/null
@@ -1,17 +0,0 @@
-body {
-  background-color: black;
-}
-
-.thead {
-  position: sticky;
-  top: 0;
-}
-
-.form-control {
-  border-color: #404142;
-}
-
-.form-control:focus {
-  color: #ccc !important;
-  background-color: #404142 !important;
-}
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 0000000..1f22c5c
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,182 @@
+@import url(http://fonts.googleapis.com/css?family=Inconsolata);
+@import url(http://fonts.googleapis.com/css?family=PT+Sans);
+@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
+
+body {
+  background-color: black;
+}
+
+.thead {
+  position: sticky;
+  top: 0;
+}
+
+.form-control {
+  border-color: #404142;
+}
+
+.form-control:focus {
+  color: #ccc !important;
+  background-color: #404142 !important;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden] {
+  display: none;
+}
+html {
+  font-family: sans-serif;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+a:focus {
+  outline: thin dotted;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+h1 {
+  font-size: 2em;
+}
+b,
+strong {
+  font-weight: bold;
+}
+dfn {
+  font-style: italic;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+q {
+  quotes: "\201C""\201D""\2018""\2019";
+}
+sub,
+svg:not(:root) {
+  overflow: hidden;
+}
+legend {
+  border: 0;
+  padding: 0;
+}
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+}
+button,
+input {
+  line-height: normal;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+html {
+  font-family: "PT Sans", sans-serif;
+}
+pre,
+code {
+  font-family: "Inconsolata", sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "PT Sans Narrow", sans-serif;
+  font-weight: 700;
+}
+html {
+  background-color: #282828; /**/
+  color: #ebdbb2; /**/
+}
+body {
+  background-color: #3c3836; /**/
+  margin: 0 auto;
+}
+a {
+  color: #83a598; /**/
+}
+a:visited {
+  color: #d65d0e; /**/
+}
+a:hover {
+  color: #d65d03; /**/
+}
diff --git a/src/xess.css b/src/xess.css
deleted file mode 100644
index c2e8022..0000000
--- a/src/xess.css
+++ /dev/null
@@ -1,86 +0,0 @@
-main {
-  font-family: monospace, monospace;
-  max-width: 38rem;
-  padding: 2rem;
-  margin: auto;
-}
-
-@media only screen and (max-device-width: 736px) {
-  main {
-    padding: 0rem;
-  }
-}
-
-::selection {
-  background: #d3869b;
-}
-
-body {
-  background: #282828;
-  color: #ebdbb2;
-}
-
-pre {
-  background-color: #3c3836;
-  padding: 1em;
-  border: 0;
-}
-
-a,
-a:active,
-a:visited {
-  color: #b16286;
-  background-color: #1d2021;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin-bottom: 0.1rem;
-}
-
-blockquote {
-  border-left: 1px solid #bdae93;
-  margin: 0.5em 10px;
-  padding: 0.5em 10px;
-}
-
-footer {
-  align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  body {
-    background: #fbf1c7;
-    color: #3c3836;
-  }
-
-  pre {
-    background-color: #ebdbb2;
-    padding: 1em;
-    border: 0;
-  }
-
-  a,
-  a:active,
-  a:visited {
-    color: #b16286;
-    background-color: #f9f5d7;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    margin-bottom: 0.1rem;
-  }
-
-  blockquote {
-    border-left: 1px solid #655c54;
-    margin: 0.5em 10px;
-    padding: 0.5em 10px;
-  }
-}
