Make links appear white in blue background

_layouts/frontpage.html

@@ -32,21 +32,29 @@
             <section>
                 <div class="info-col">
                     <div class="info-box">
-                        <h3><i class="fas fa-user-plus" aria-hidden="true"></i>&nbsp; You & HIFIS</h3>
+                        <a href="{% link index.md %}" class="btn btn-outline-light">
+                            <h3><i class="fas fa-user-plus" aria-hidden="true"></i>&nbsp; You & HIFIS</h3>
+                        </a>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                             labore et dolore magna aliqua.</p>
                     </div>
                     <div class="info-box">
-                        <a href="{{ 'mission/' | relative_url }}" class="btn btn-outline-secondary"><h3><i class="fas fa-atom" aria-hidden="true"></i>&nbsp; HIFIS Mission</h3></a>
+                        <a href="{% link mission/index.md %}" class="btn btn-outline-light">
+                            <h3><i class="fas fa-atom" aria-hidden="true"></i>&nbsp; HIFIS Mission</h3>
+                        </a>
                         <p>Strengthening and developing the ICT competences of the whole Helmholtz Association.</p>
                     </div>
                     <div class="info-box">
-                        <h3><i class="fas fa-globe-europe" aria-hidden="true"></i>&nbsp; HIFIS International</h3>
+                        <a href="{% link index.md %}" class="btn btn-outline-light">
+                            <h3><i class="fas fa-globe-europe" aria-hidden="true"></i>&nbsp; HIFIS International</h3>
+                        </a>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                             labore et dolore magna aliqua.</p>
                     </div>
                     <div class="info-box">
-                        <h3><i class="fas fa-road" aria-hidden="true"></i>&nbsp; Now & tomorrow - The HIFIS Roadmap</h3>
+                        <a href="{% link index.md %}" class="btn btn-outline-light">
+                            <h3><i class="fas fa-road" aria-hidden="true"></i>&nbsp; Now & tomorrow - The HIFIS Roadmap</h3>
+                        </a>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                             labore et dolore magna aliqua.</p>
                     </div>

assets/css/frontpage.scss

@@ -33,6 +33,15 @@
     .info-box {
         padding: 1rem;
     }
+
+    .btn-outline-light {
+        border: none;
+
+        &:focus,
+        &:hover {
+            color: $color-helmholtz-dark-blue;
+        }
+    }
 }
 
 .frontpage-card {