Darken blue color used especially with links

src/components/dashview/Dashboard.vue

@@ -35,7 +35,7 @@
                         query: {
                           id: record.trackingInfo.pid,
                         },
-                      }" class="search-item-link text-sky-600 hover:text-sky-900">
+                      }" class="search-item-link olahd-link-color">
                         <p>{{ record.trackingInfo.pid }}</p>
                       </router-link>
                     </td>

src/components/download-files/Download.vue

@@ -20,25 +20,26 @@
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
-    <div class="p-4">
-      <div class="flex">
-        <Tree v-model:expandedKeys="expandedKeys" v-model:selectionKeys="selectedKeys" :value="options" class="w-full md:w-30rem"
+    <div class="flex items-start p-4">
+        <Tree v-model:expandedKeys="expandedKeys" v-model:selectionKeys="selectedKeys" :value="options"
+          class="w-full md:w-30rem"
           selectionMode="checkbox">
           <template #default="slotProps">
             <b>{{ slotProps.node.label }} ({{ slotProps.node.children.length }})</b>
           </template>
           <template #leaf="slotProps">
             {{ slotProps.node.label }}
             <span v-if="!slotProps.node.isDisabled" >
-              - <a :href="buildUrl(pid, slotProps.node.key)" target="_blank" class="text-sky-500 hover:text-slate-700">View</a>
+              - <a :href="buildUrl(pid, slotProps.node.key)" target="_blank"
+                   class="olahd-link-color"
+                >View</a>
             </span>
           </template>
         </Tree>
         <button @click="download" :disabled="!isOpen"
-          class="detail-blue-button whitespace-nowrap max-h-9">
+          class="flex-none detail-blue-button">
           <i class="fas fa-download" /> {{ "Download" }}
         </button>
-      </div>
     </div>
   </section>
 </template>

src/components/search/Search.vue

@@ -26,7 +26,7 @@
             type="submit"
             class="p-1 focus:outline-none focus:shadow-outline"
           >
-            <i class="fas fa-search fa-lg text-sky-500"></i>
+            <i class="fas fa-search fa-lg olahd-link-color"></i>
           </button>
         </span>
       </div>

src/components/search/SearchResult.vue

@@ -7,9 +7,8 @@
           id: itemId,
         },
       }"
-      class="search-item-link text-sky-600 hover:text-sky-900"
     >
-      <h5>{{ title }}</h5>
+      <h5 class="search-item-link olahd-link-color">{{ title }}</h5>
     </router-link>
     <hr class="mt-3 mb-2" />
     <div class="space-y-2">

src/components/version/Versions.vue

@@ -11,7 +11,7 @@
         <template v-if="versionInfo.previousVersion">
           <li>
             Previous version:
-            <router-link class="text-sky-500 hover:text-slate-700 m-2"
+            <router-link class="olahd-link-color hover:text-slate-700 m-2"
               :to="{
                 name: 'search-detail',
                 query: { id: versionInfo.previousVersion.pid },
@@ -26,7 +26,7 @@
             Next version:
             <ul class="list-disc list-inside px-4 py-2">
               <li v-for="value in versionInfo.nextVersions" :key="value.onlineId">
-                <router-link class="text-sky-500 hover:text-slate-700"
+                <router-link class="olahd-link-color hover:text-slate-700"
                   :to="{
                     name: 'search-detail',
                     query: { id: value.pid },

src/index.css

@@ -2,29 +2,48 @@
 @tailwind components;
 @tailwind utilities;
 
+
+/* link-color us used to globally set the color of links. This is mainly text but also borders*/
+.olahd-link-color {
+  @apply text-custom-blue hover:text-blue-900 hover:underline
+}
+.olahd-border-color {
+  @apply border-custom-blue
+}
+.olahd-link-underline {
+  @apply underline decoration-custom-blue hover:decoration-blue-900 underline-offset-2
+  hover:bg-gray-300
+}
+
 .normal-blue-button {
-  @apply bg-sky-600 font-medium px-3 py-1 shadow-sm text-white rounded-md;
+  @apply bg-custom-blue font-medium px-3 py-1 shadow-sm text-white rounded-md;
 }
 .normal-blue-button:hover:enabled {
-  @apply hover:bg-sky-700
+  @apply hover:bg-blue-900
 }
 .normal-blue-button:disabled {
   @apply bg-sky-200 border-sky-200
 }
 
+/* So far this "detail"-button is only used in search details*/
 .detail-blue-button {
-    @apply rounded border mr-4 px-3 py-1 border-sky-500 bg-sky-500 text-white
+  @apply rounded border text-base/5 mr-4 px-3 py-1 border-custom-blue bg-custom-blue text-white
+}
+
+.detail-blue-button:hover:enabled {
+  @apply hover:bg-blue-900
 }
 
 .detail-blue-button:disabled {
-    @apply bg-sky-200 border-sky-200
+  @apply bg-blue-200 border-blue-200
 }
 
 .gray-div-header {
-    @apply text-gray-700 flex items-center justify-between px-4 py-2 rounded-t border-b
-        bg-gray-100
+  @apply text-gray-700 flex items-center justify-between px-4 py-2 rounded-t border-b
+  bg-gray-100
 }
-/* custom classes with breakpoints (responsive classes dependend on width) don't work in component-scoped-styles */
+/* custom classes with breakpoints (responsive classes dependend on width) don't work in
+component-scoped-styles*/
 @layer utilities {
   .home-img {
     background-image: url("@/assets/archive.jpg");

src/layout/footer/index.vue

@@ -8,14 +8,14 @@
     <div class="border-t border-gray-500 m-1 pt-1">
       <div class="container mx-auto flex flex-wrap text-sm justify-center">
           <router-link class="px-2" as="nav" active-class="active" to="/contact">
-            <span class="nav-link text-white hover:text-sky-700">Contact</span>
+            <span class="nav-link text-white hover:text-blue-300">Contact</span>
           </router-link>
           <p class="px-2 text-gray-500">-</p>
           <a href="https://ocr-d.de/de/impressum" target="_blank"
-            class="px-2 nav-link text-white hover:text-sky-700">Imprint</a>
+            class="px-2 nav-link text-white hover:text-blue-300">Imprint</a>
           <p class="px-2 text-gray-500">-</p>
           <router-link class="px-2" as="nav" active-class="active" to="/data_protection">
-            <span class="nav-link text-white hover:text-sky-700">Privacy notice</span>
+            <span class="nav-link text-white hover:text-blue-300">Privacy notice</span>
           </router-link>
       </div>
     </div>

src/layout/main/index.vue

@@ -3,7 +3,7 @@
     id="search-header"
     class="h-96 bg-cover bg-gray-400 bg-center p-12 xl:home-img home-img-bright"
   >
-    <h1 class="text-center m-5 text-4xl font-bold text-blue-600">
+    <h1 class="text-center m-5 text-4xl font-bold text-custom-blue">
       OLA-HD
     </h1>
     <h2 class="text-center m-5 text-2xl" >OCR Long-Term Archive</h2>
@@ -14,7 +14,7 @@
             <input
               class="
                 w-full
-                border-3 border-sky-500
+                border-3 olahd-border-color
                 drop-shadow-md
                 rounded-full
                 py-2
@@ -28,7 +28,7 @@
             />
             <span class="absolute inset-y-0 right-0 flex items-center">
               <button class="btn btn-link mr-4" type="submit">
-                <i class="fas fa-search fa-lg text-sky-500"></i>
+                <i class="fas fa-search fa-lg olahd-link-color"></i>
               </button>
             </span>
           </label>

src/layout/navigation-menu/index.vue

@@ -7,8 +7,8 @@
         <!-- dummy to leave left column empty -->
         <div class="basis-1/3 flex-none"></div>
         <div class="basis-1/3 flex-none flex flex-1 items-center">
-          <router-link v-if="isSearchBarVisible" as="nav" class="flex-1 px-2 flex" active-class="active" to="/" exact>
-            <span class="flex-1 text-sky-500 hover:text-slate-700 text-center">{{
+          <router-link v-if="isSearchBarVisible" as="nav" class="flex-1 px-2 flex justify-center" active-class="active" to="/" exact>
+            <span class="olahd-link-color">{{
               "OLA-HD"
             }}</span>
           </router-link>

src/pages/data_protection/index.vue

@@ -11,7 +11,7 @@
       Pflichten, insbesondere aus der EU-Datenschutzgrundverordnung (EU-DSGVO)
       nachkommen.</p>
     <p>(2) Verantwortlicher gem. Art. 4 Nr. 7 EU-DSGVO ist die Herzog August
-      Bibliothek Wolfenbüttel (siehe <a href="https://ocr-d.de/de/impressum">Impressum der Domain ocr-d.de</a>).</p>
+      Bibliothek Wolfenbüttel (siehe <a class="olahd-link-color olahd-link-underline" href="https://ocr-d.de/de/impressum">Impressum der Domain ocr-d.de</a>).</p>
     <p>(3) Bei Ihrer Kontaktaufnahme mit uns per E-Mail oder über ein
       Kontaktformular werden die von Ihnen mitgeteilten Daten (Ihre
       E-Mail-Adresse, ggf. Ihr Name und Ihre Telefonnummer) von uns
@@ -95,9 +95,6 @@
   p {
     @apply mb-4
   }
-  a {
-    @apply text-sky-500 hover:text-sky-700
-  }
   ul {
     @apply list-disc ml-10 mb-4
   }

src/pages/home/index.vue

@@ -4,15 +4,15 @@
       <h3 class="text-3xl mb-6">Welcome</h3>
       <p class="mb-12">
         OLA-HD provides a service for the long-term archiving of historical prints in the context of
-        <a class="text-sky-500 hover:text-sky-700" href="https://ocr-d.de/en"
+        <a class="olahd-link-color olahd-link-underline" href="https://ocr-d.de/en"
           >OCR-D</a
         >.
         Archive objects can be found, viewed and downloaded. We welcome feedback on the beta version
         of the service.
       </p>
       <p>
         OLA-HD is funded by the DFG initiative
-        <a class="text-sky-500 hover:text-sky-700" href="https://ocr-d.de/en"
+        <a class="olahd-link-color olahd-link-underline" href="https://ocr-d.de/en"
           >OCR-D</a
         >.
         The main objective of OCR-D is the conceptual and technical preparation of the full-text

src/pages/ocrd-identifier/index.vue

@@ -2,7 +2,7 @@
   <span class="ml-4" v-if="showErrorMsg">
     Ocrd-Identifier: <strong>{{ id }}</strong> not found
   </span>
-  <router-link class="text-sky-500 hover:text-slate-700 m-4" :to="{ name: 'home' }">
+  <router-link class="max-w-fit olahd-link-color m-4" :to="{ name: 'home' }">
     Go back to main page
   </router-link>
 </template>

src/pages/search-detail/index.vue

@@ -35,7 +35,7 @@
         <div class="col">
           <button
             type="button"
-            class="btn btn-link text-sky-500 hover:text-slate-700"
+            class="btn btn-link olahd-link-color"
             @click="$router.go(-1)"
           >
             &laquo; Back
@@ -86,11 +86,11 @@
       </section>
 
       <div class="grid grid-cols-1 gap-2 content-start my-5">
-        <button v-show="showExportRequestButton" class="text-sky-500 hover:text-sky-700 w-fit"
+        <button v-show="showExportRequestButton" class="olahd-link-color w-fit"
           @click="moveArchive" >
             Move archive from tape to disk
           </button>
-          <a target="_blank" class="text-sky-500 hover:text-sky-700" :href=linkToDfgviewer v-if="isOpen">
+          <a target="_blank" class="olahd-link-color inline w-fit" :href=linkToDfgviewer v-if="isOpen">
             Open in DFG viewer
         </a>
       </div>

src/pages/search/index.vue

@@ -27,7 +27,7 @@
       </div>
     </div>
     <button @click="showExtraFilters = !showExtraFilters"
-      class="text-sm text-sky-600 hover:text-sky90"
+      class="text-sm olahd-link-color hover:text-sky90"
     >
       Advanced Search
     </button>

tailwind.config.js

@@ -4,7 +4,11 @@ module.exports = {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'custom-blue':'#0577bb'
+      }
+    },
     container: {
       center: true,
     },