Added hover and focus colour change to nav links

Prettification all around
ghga-de · Dec 2, 2024 · af31bc6 · af31bc6
1 parent 8615581
commit af31bc6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/src/app/portal/features/site-footer/site-footer.component.html b/src/app/portal/features/site-footer/site-footer.component.html
@@ -1,20 +1,20 @@
 <nav class="mt-2 w-full" color="primary">
-  <div class="pt-px-5 flex flex-wrap justify-around pb-5 no-underline">
-    <a routerLink="/" class="mx-12 content-center"
+  <div class="flex flex-wrap justify-around divide-x pb-5 pt-2 no-underline">
+    <a routerLink="/" class="content-center px-24"
       ><div class="flex w-full justify-center">
         <img src="assets/images/GHGA_logo.png" alt="GHGA Logo" class="max-h-12" />
       </div>
       <div class="mt-3 border-t pt-2 text-4xl uppercase">Data Portal</div></a
-    ><a href="https://ghga.de" class="mx-12 grow content-center text-center"
+    ><a href="https://ghga.de" class="grow content-start py-4 text-center"
       ><span><mat-icon inline="true">globe</mat-icon></span
       >GHGA Website</a
-    ><a routerLink="/browse" class="mx-12 grow content-center text-center"
+    ><a routerLink="/browse" class="grow content-start py-4 text-center"
       ><span><mat-icon inline="true">database</mat-icon></span
       >Browse Data</a
-    ><a href="https://docs.ghga.de/faq/" class="mx-12 grow content-center text-center"
+    ><a href="https://docs.ghga.de/faq/" class="grow content-start py-4 text-center"
       ><span><mat-icon inline="true">help</mat-icon></span
       >FAQ</a
-    ><a href="https://docs.ghga.de/" class="mx-12 grow content-center text-center"
+    ><a href="https://docs.ghga.de/" class="grow content-start py-4 text-center"
       ><span><mat-icon inline="true">docs</mat-icon></span
       >GHGA User<br />Documentation</a
     >

diff --git a/src/app/portal/features/site-footer/site-footer.component.scss b/src/app/portal/features/site-footer/site-footer.component.scss
@@ -9,8 +9,8 @@ div.icons-div a {
 }
 
 nav div a span {
-  font-size: 95px;
-  line-height: 95px;
+  font-size: 85px;
+  line-height: 85px;
   display: block;
 }
 
@@ -26,3 +26,12 @@ nav div.swirl {
   background-repeat: no-repeat no-repeat;
   background-position: center bottom;
 }
+
+nav a:hover,
+nav a:active {
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 100%, #fff 8%);
+}
+
+nav a:focus {
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 100%, #fff 12%);
+}
diff --git a/src/app/portal/features/site-header/site-header.component.html b/src/app/portal/features/site-header/site-header.component.html
@@ -1,7 +1,7 @@
 <mat-toolbar class="py-2">
   <mat-toolbar-row class="align-center flex justify-between">
-    <div class="flex h-3/4 basis-1/4">
-      <a routerLink="/" class="flex w-full flex-nowrap items-center"
+    <div class="flex h-full basis-1/4">
+      <a routerLink="/" class="flex h-full flex-nowrap items-center p-3"
         ><img
           src="assets/images/GHGA_logo_clean.png"
           class="max-h-12"
@@ -18,13 +18,13 @@
     <mat-nav-list class="basis-1/2 text-center">
       <a
         [id]="route === '/' ? 'activePage' : ''"
-        mat-button
+        mat-flat-button
         routerLink="/"
         class="homeLink mx-1"
         >Home</a
       ><a
         [id]="route === '/browse' ? 'activePage' : ''"
-        mat-button
+        mat-flat-button
         routerLink="/browse"
         class="mx-1"
         >Browse</a

diff --git a/src/app/portal/features/site-header/site-header.component.scss b/src/app/portal/features/site-header/site-header.component.scss
@@ -14,22 +14,24 @@ mat-toolbar-row div div {
   border-color: var(--mat-sys-inverse-primary);
 }
 
-a {
-  @include mat.button-overrides(
-    (
-      filled-container-color: var(--mat-sys-primary),
-    )
-  );
-}
-
 a#activePage {
   background-color: var(--mat-sys-secondary);
 }
 
 button {
+  --mat-sys-on-surface-variant: #fff;
   @include mat.icon-button-overrides(
     (
       icon-color: var(--mat-sys-on-primary),
     )
   );
 }
+
+mat-toolbar-row div a:hover,
+mat-toolbar-row div a:active {
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 100%, #fff 8%);
+}
+
+mat-toolbar-row div a:focus {
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 100%, #fff 12%);
+}