From 1a429ac9b45604888ff5e28004208c8f976b331e Mon Sep 17 00:00:00 2001
From: "Henrik.Askjer" <henrik.askjer@uib.no>
Date: Tue, 14 Sep 2021 10:19:31 +0200
Subject: [PATCH] Improve hyperlink visibility

---
 src/App.vue                       | 15 +++++++++++----
 src/components/Article.vue        | 26 ++++++++++++++++++++++++--
 src/components/ArticleFooter.vue  |  1 +
 src/components/DictionaryView.vue | 13 +++++++++++--
 src/plugins/vuetify.js            |  2 +-
 5 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b90afa25..c3967eaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,9 +66,6 @@ body {
 
 }
 
-a {
-  text-decoration: none;
-}
 
 h1 {
   font-family: Inria Serif;
@@ -83,6 +80,7 @@ h1 > a.xs, h1 > a.sm {
 
 header > h1 > a {
   color: var(--v-primary-base) !important;
+  text-decoration: none;
   font-size: 48px;
   margin: 0px;
 }
@@ -111,7 +109,7 @@ header > p {
   text-decoration: none;
   border-bottom: solid var(--v-primary-base) 2px;
   font-size: 12px;
-  color: var(--v-primary-base);
+  color: var(--v-primary-base) !important;
 }
 
 header {
@@ -131,6 +129,10 @@ footer  a {
   color: #ffffff !important;
 }
 
+a {
+  text-decoration: none;
+}
+
 header {
   padding-top: 20px;
   background-color: var(--v-tertiary-base);
@@ -140,6 +142,11 @@ header {
   font-size: 18px;
   margin: 0px;
   margin-bottom: 0px !important;
+  
+}
+
+.sub-title a {
+  color: var(--v-primary-base) !important;
 }
 
 footer {
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 0bd81f0a..c951ba41 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -27,8 +27,8 @@
         </ul>
       </section>
       <div class="fade">
-        <router-link :to="link_to_self.ref" @click.native="details_click(link_to_self)">
-          Velg <img class="nav_arrow" src="../assets/arrow_right.svg">
+        <router-link class="choose" :to="link_to_self.ref" @click.native="details_click(link_to_self)">
+          Velg <v-icon large class="nav_arrow">arrow_right</v-icon>
         </router-link>
       </div>
     </div>
@@ -216,4 +216,26 @@ ul li.definition {
   vertical-align: sub;
 }
 
+
+
+@media (hover: none) {
+  article a:not(.choose):not(.return_to_results a) {
+     text-decoration: underline;
+  } 
+}
+
+@media (hover: hover) {
+  article  a {
+     text-decoration: none;
+  } 
+  article a:hover:not(.choose):not(.return_to_results a) {
+  text-decoration: underline;
+  }
+}
+
+.choose {
+  color: var(--v-primary-base) !important;
+}
+
+
 </style>
diff --git a/src/components/ArticleFooter.vue b/src/components/ArticleFooter.vue
index 5bf75404..6d5beb55 100644
--- a/src/components/ArticleFooter.vue
+++ b/src/components/ArticleFooter.vue
@@ -82,6 +82,7 @@ export default {
   font-size: 14px;
 }
 
+
 .article_footer {
   color: var(--v-primary-base);
   padding-top: 24px;
diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue
index 03783034..d4e73abd 100644
--- a/src/components/DictionaryView.vue
+++ b/src/components/DictionaryView.vue
@@ -44,7 +44,7 @@
     <div id="single_article_container" v-if="article">
         <div class="return_to_results" v-if="search_results && search_results.length">
           <router-link :to="article.source" @click.native="return_to_results()">
-            <img class="nav_arrow" src="../assets/arrow_left.svg">Tilbake til {{article.dictionary == 'bob' ? 'søkeresultater' : 'søkjeresultat'}}
+            <v-icon class="nav_arrow">arrow_left</v-icon>Tilbake til {{article.dictionary == 'bob' ? 'søkeresultater' : 'søkjeresultat'}}
           </router-link>
         </div>
       <Article :key="article_key" :article="article" @article-click="article_link_click" />
@@ -457,8 +457,17 @@ li.suggestion {
   display: table-cell;
 }
 
+.return_to_results a {
+  color: var(--v-primary-base) !important;
+}
+
 .nav_arrow {
-  vertical-align: middle;
+  vertical-align: top !important;
+  color: var(--v-primary-base) !important;
+}
+
+.choose > .nav_arrow {
+  vertical-align: -30% !important;
 }
 
 </style>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 9a38c469..b492c4ee 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -56,7 +56,7 @@ export default new Vuetify({
         primary: '#560027',
         secondary: '#BC477B',
         tertiary: '#FDF4F5',
-        anchor: '#560027',
+        anchor: '#880E4F',
         error: '#FDF4F5',
         border: '#9E9E9E',
         text: '#2c3e50'
-- 
GitLab