Use burntorange for labels; increase contrast with card headers; use larger font size for card headers

Author: XanderVertegaal

frontend/src/app/data/browse/browse.component.html

@@ -4,7 +4,7 @@
 
 <lc-breadcrumb [breadcrumbs]="breadcrumbs" />
 
-<div class="d-flex flex-column bg-light">
+<div class="d-flex flex-column bg-light-subtle">
     <div class="search-section d-flex align-items-center justify-content-center bg-white shadow-sm p-4">
         <div class="container">
             <form

frontend/src/app/data/browse/search-item/browse-list-item.component.html

@@ -1,11 +1,11 @@
 @let item = listItem();
-<div class="card mb-4">
-    <div class="card-header position-relative">
-        <a class="icon-link stretched-link mb-1" [routerLink]="[item.link]">
+<section class="card mb-4">
+    <h3 class="card-header position-relative h5 py-3">
+        <a class="icon-link stretched-link text-decoration-none" [routerLink]="[item.link]">
             <lc-icon [icon]="item.icon" />
             {{ item.name }}
         </a>
-    </div>
+    </h3>
     <div class="card-body">
         <p class="block">
             @if (item.description) {
@@ -19,7 +19,7 @@
         <ul class="block inline-list no-delimiter">
             @for (label of item.labels; track label) {
             <li class="inline-list-item">
-                <span class="badge rounded-pill text-bg-secondary">
+                <span class="badge rounded-pill text-bg-burntorange">
                     {{ label }}
                 </span>
             </li>
@@ -142,4 +142,4 @@
         </small>
     </div>
     }
-</div>
+</section>