Fix link text color

src/assets/base.css

@@ -33,6 +33,10 @@
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
 
+  /* Anchor colors for better distinction */
+  --color-link: #3b82f6;
+  --color-link-hover: #1d4ed8;
+
   /* SVG/Icon colors */
   --color-svg-fill: #000000;
   --color-svg-stroke: #000000;
@@ -52,6 +56,10 @@ html.dark {
   --color-heading: var(--vt-c-text-dark-1);
   --color-text: var(--vt-c-text-dark-2);
 
+  /* Anchor colors for dark theme */
+  --color-link: #60a5fa;
+  --color-link-hover: #93c5fd;
+
   /* SVG/Icon colors for dark theme */
   --color-svg-fill: #ffffff;
   --color-svg-stroke: #ffffff;
@@ -69,6 +77,10 @@ html.light {
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
 
+  /* Anchor colors for light theme */
+  --color-link: #3b82f6;
+  --color-link-hover: #1d4ed8;
+
   /* SVG/Icon colors for light theme */
   --color-svg-fill: #000000;
   --color-svg-stroke: #000000;
@@ -87,6 +99,10 @@ html.light {
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
 
+    /* Anchor colors for dark theme */
+    --color-link: #60a5fa;
+    --color-link-hover: #93c5fd;
+
     /* SVG/Icon colors for dark theme */
     --color-svg-fill: #ffffff;
     --color-svg-stroke: #ffffff;

src/assets/main.css

@@ -7,17 +7,17 @@
   font-weight: normal;
 }
 
-a,
+a {
-.green {
   text-decoration: none;
-  color: rgb(60, 60, 60);
+  color: var(--color-link);
   transition: 0.4s;
   padding: 3px;
 }
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(0, 0%, 17%, 0.2);
+    color: var(--color-link-hover);
+    background-color: var(--color-background-soft);
   }
 }
 

src/components/WelcomeText.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      Tervetuloa Livonsaaren Tietokonepajan verkkosivuille! Tarjoamme kattavia IT-palveluita,
-      laitehuoltoja, kotisivuratkaisuja ja Linux-tukea. Tutustu palveluihimme ja ota yhteyttä!
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

src/views/ContactView.vue

@@ -4,8 +4,10 @@
       <div class="details">
         <h3>Yhteystietomme</h3>
         <p>
-          Voit ottaa meihin yhteyttä sähköpostitse osoitteeseen
+          Voit ottaa meihin yhteyttä sähköpostitse osoitteeseen<a
-          <a href="mailto:info@tietokonepaja.fi">info@tietokonepaja.fi</a>.
+            href="mailto:info@tietokonepaja.fi"
+            >info@tietokonepaja.fi</a
+          >.
         </p>
       </div>
     </div>