Fixed footer location

Fixed colour scheme to light, instead
Fixed header mixins

src/app/app.component.html

@@ -1,13 +1,13 @@
-<header class="mb-2">
-  <app-site-header></app-site-header>
-</header>
-
 <div class="relative min-h-screen">
-  <main class="pb-80">
+  <header class="mb-2">
+    <app-site-header></app-site-header>
+  </header>
+
+  <main class="p-5 pb-96">
     <router-outlet />
   </main>
 
-  <footer class="absolute bottom-0 my-2 w-full">
+  <footer class="absolute bottom-0 w-full">
     <app-site-footer></app-site-footer>
   </footer>
 </div>

src/app/portal/features/site-footer/site-footer.component.html

@@ -1,5 +1,5 @@
 <nav class="mt-2" color="primary">
-  <div class="pt-px-5 flex justify-around pb-2 no-underline">
+  <div class="pt-px-5 flex justify-around pb-5 no-underline">
     <a routerLink="/" class="mx-12 content-center text-center"
       ><img src="assets/images/GHGA_logo.png" alt="GHGA Logo" class="h-24" /></a
     ><a href="https://ghga.de" class="mx-12 grow content-center text-center"
@@ -38,7 +38,7 @@
     ><mat-icon inline="true">email</mat-icon></a
   >
 </div>
-<div class="text-sm">
+<div class="pb-4 text-sm">
   <p class="text-center">©{{ year }} GHGA. All Rights Reserved.</p>
   <p class="text-center">
     <a href="https://www.ghga.de/imprint" class="underline">Imprint</a> |

src/app/portal/features/site-footer/site-footer.component.scss

@@ -1,11 +1,11 @@
 nav {
-  background: var(--mat-sys-on-primary);
-  color: var(--mat-sys-on-primary-container);
+  background: var(--mat-sys-primary);
+  color: var(--mat-sys-on-primary);
 }
 
 div.icons-div a {
   margin: 0 7px;
-  color: var(--mat-sys-outline-variant);
+  color: var(--mat-sys-outline);
 }
 
 nav div a span {

src/app/portal/features/site-header/site-header.component.scss

@@ -1,22 +1,27 @@
 @use '@angular/material' as mat;
 
 mat-toolbar {
-  background: var(--mat-sys-on-primary);
+  @include mat.toolbar-overrides(
+    (
+      container-background-color: var(--mat-sys-primary),
+      container-text-color: var(--mat-sys-on-primary),
+    )
+  );
 }
 
-a[mat-flat-button] {
+a {
   @include mat.button-overrides(
     (
-      filled-container-color: var(--mat-sys-on-primary),
-      text-label-text-color: var(--mat-sys-secondary),
+      filled-container-color: var(--mat-sys-primary),
+    )
+  );
+  @include mat.icon-button-overrides(
+    (
+      icon-color: var(--mat-sys-on-primary),
     )
   );
-}
-
-.mat-mdc-button:not(:disabled) {
-  color: #fff;
 }
 
 a#activePage {
-  background-color: var(--mat-sys-secondary-container);
+  background-color: var(--mat-sys-secondary);
 }

src/styles.scss

@@ -27,7 +27,7 @@
   @include mat.theme(
     (
       color: (
-        theme-type: dark,
+        theme-type: light,
         primary: ghga_colors.$primary-palette,
         tertiary: ghga_colors.$tertiary-palette,
       ),