Opens links on Enter, in a new tab and a couple other final things

src/components/FilterTile.vue

@@ -86,7 +86,6 @@ export default {
       background: #607d8b33;
       box-shadow: 1px 1px 2px #232323;
       color: #1CA8DD;
-      font-family: 'Comfortaa', cursive;
       &:focus {
         background: #607d8b4a;
       }

src/components/Item.vue

@@ -1,6 +1,7 @@
 <template>
     <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <div :class="`item ${!icon && !svg? 'short': ''}`" tabindex="0">
+        <a :href="url"  :class="`item ${!icon && !svg? 'short': ''}`"
+            tabindex="0" target="_blank" rel="noopener noreferrer">
             <div class="tile-title" :id="`tile-${id}`">
                 <span class="text">{{ title }}</span>
                 <div class="overflow-dots">...</div>
@@ -15,8 +16,8 @@
                 :src="`/img/tile-svgs/${svg}.svg`"
                 class="tile-svg"
             />
-        </div>
-  </el-tooltip>
+        </a>
+    </el-tooltip>
 </template>
 
 <script>
@@ -141,6 +142,21 @@ export default {
     width: 60px;
 }
 
+.item:hover {
+    .tile-svg {
+        filter:
+            invert(70%)
+            sepia(52%)
+            saturate(5390%)
+            hue-rotate(198deg)
+            brightness(101%)
+            contrast(88%);
+    }
+    .tile-icon {
+        filter: hue-rotate(45deg);
+    }
+}
+
 .tile-svg {
     width: 56px;
      filter:

src/components/ItemGroup.vue

@@ -8,6 +8,7 @@
         v-for="item in items"
         :key="`${groupId}-${item.id}`"
         :id="`${groupId}-${item.id}`"
+        :url="item.url"
         :title="item.title"
         :description="item.description"
         :icon="item.icon"

src/components/Nav.vue

@@ -27,7 +27,6 @@ nav {
         -webkit-box-shadow: 1px 1px 2px #232323;
         box-shadow: 1px 1px 2px #232323;
         color: #1CA8DD;
-        font-family: "Comfortaa", cursive;
         text-decoration: none;
         &:hover {
             background: #607d8b1c;

src/components/PageTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-titles">
-    <h1>Pannel</h1>
-    <span class="subtitle">Awesome subtitle</span>
+    <h1>Alicia App</h1>
+    <span class="subtitle">Dashboard of all the things</span>
   </div>
 </template>
 

src/global-styles.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Comfortaa|Righteous&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
 
 
 html {
@@ -10,13 +10,13 @@ body {
     margin: 0;
     padding: 0;
     background: #282a32;
-    font-family: 'Comfortaa', cursive;
+    font-family: 'Montserrat', sans-serif;
 }
 
 h1, h2, h3, h4, h5 {
-    font-family: 'Righteous', cursive;
+    font-family: 'Montserrat', sans-serif;
 }
 
-p, a, span, div {
-    font-family: 'Comfortaa', cursive;
+p, a, span, div, input {
+    font-family: 'Montserrat', sans-serif;
 }