From 465a9cb069184805b13f99edf6db56e258c5052c Mon Sep 17 00:00:00 2001
From: Moritz Ruth <moritzruthcode@gmail.com>
Date: Fri, 16 Aug 2019 22:01:25 +0200
Subject: [PATCH] Improve touch experience

---
 assets/css/_colors.scss   |  2 +-
 components/SocialIcon.vue | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss
index 80818fb..ef918d6 100644
--- a/assets/css/_colors.scss
+++ b/assets/css/_colors.scss
@@ -1,4 +1,4 @@
-$c-background: #212121;
+$c-background: #191919;
 $c-background-darker: darken($c-background, 2);
 $c-text: white;
 $c-primary: #C64647;
diff --git a/components/SocialIcon.vue b/components/SocialIcon.vue
index 04797b8..0d46986 100644
--- a/components/SocialIcon.vue
+++ b/components/SocialIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank">
+  <a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank" @touchstart="onTouch">
     <div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
       <div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
       </div>
@@ -26,6 +26,14 @@
       return {
         simpleIcon: requireIcon(`./${this.name}.js`)
       }
+    },
+    methods: {
+      onTouch(e) {
+        if (document.activeElement !== this.$el) {
+          e.preventDefault();
+          this.$el.focus();
+        }
+      }
     }
   };
 </script>
@@ -41,10 +49,6 @@
     height: 50px;
     width: 50px;
 
-    &:focus {
-      outline: rgb(255, 169, 8) dashed 2px;
-    }
-
     @include desktop {
       height: 70px;
       width: 70px;