Some additional improvements.

Added GHGA logos, added swoosh, fixed footer placement

angular.json

@@ -27,7 +27,8 @@
               {
                 "glob": "**/*",
                 "input": "public"
-              }
+              },
+              "src/assets"
             ],
             "styles": ["src/styles.scss"],
             "scripts": []

src/app/app.component.html

@@ -2,10 +2,12 @@
   <app-site-header></app-site-header>
 </header>
 
-<main>
-  <router-outlet />
-</main>
+<div class="relative min-h-screen">
+  <main class="pb-80">
+    <router-outlet />
+  </main>
 
-<footer class="absolute bottom-0 mt-2 w-full">
-  <app-site-footer></app-site-footer>
-</footer>
+  <footer class="absolute bottom-0 my-2 w-full">
+    <app-site-footer></app-site-footer>
+  </footer>
+</div>

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

@@ -1,20 +1,24 @@
-<nav class="mb-5 mt-2 flex justify-between p-5 no-underline" color="primary">
-  <a routerLink="/" class="content-center text-center">Data Portal Logo</a
-  ><a href="https://ghga.de" class="content-center text-center"
-    ><span><mat-icon inline="true">globe</mat-icon></span
-    >GHGA Website</a
-  ><a routerLink="/browse" class="content-center text-center"
-    ><span><mat-icon inline="true">database</mat-icon></span
-    >Browse Data</a
-  ><a href="https://docs.ghga.de/faq/" class="content-center text-center"
-    ><span><mat-icon inline="true">help</mat-icon></span
-    >FAQ</a
-  ><a href="https://docs.ghga.de/" class="content-center text-center"
-    ><span><mat-icon inline="true">docs</mat-icon></span
-    >GHGA User Documentaton</a
-  >
+<nav class="mt-2" color="primary">
+  <div class="pt-px-5 flex justify-around pb-2 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"
+      ><span><mat-icon inline="true">globe</mat-icon></span
+      >GHGA Website</a
+    ><a routerLink="/browse" class="mx-12 grow content-center 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"
+      ><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"
+      ><span><mat-icon inline="true">docs</mat-icon></span
+      >GHGA User<br />Documentaton</a
+    >
+  </div>
+  <div class="swirl"></div>
 </nav>
-<div class="mb-2 flex justify-center text-center text-4xl no-underline">
+<div class="icons-div mb-2 flex justify-center text-center text-4xl no-underline">
   <a href="https://genomic.social/@ghga"
     ><mat-icon inline="true" fontSet="fab" fontIcon="fa-mastodon"></mat-icon
   ></a>

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

@@ -3,13 +3,21 @@ nav {
   color: var(--mat-sys-on-primary-container);
 }
 
-div > a {
+div.icons-div a {
   margin: 0 7px;
   color: var(--mat-sys-outline-variant);
 }
 
-nav > a > span {
+nav div a span {
   font-size: 95px;
   line-height: 95px;
   display: block;
 }
+
+nav div.swirl {
+  height: 70px;
+  background: var(--svg-encoded);
+  background-size: 100% 100%;
+  background-repeat: no-repeat no-repeat;
+  background-position: center bottom;
+}

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
@@ -14,4 +14,9 @@ import { RouterLink } from '@angular/router';
 })
 export class SiteFooterComponent {
   year = new Date().getFullYear();
+  svg =
+    '<svg width="1440" height="120" preserveAspectRatio="none" viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1482 66.8182H1119.93C854.272 66.8182 592.376 0 364.5 0C136.624 0 -8 66.8182 -8 66.8182V120H1482V66.8182Z" fill="#fff"/></svg>';
+
+  @HostBinding('style.--svg-encoded') background: string =
+    'url(data:image/svg+xml;base64,' + btoa(this.svg) + ')';
 }

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

@@ -1,20 +1,28 @@
-<mat-toolbar class="flex justify-between">
-  <a routerLink="/">GHGA Logo</a>
+<mat-toolbar class="py-2">
+  <mat-toolbar-row class="align-center flex justify-between">
+    <div class="h-3/4 basis-1/4">
+      <a routerLink="/"
+        ><img src="assets/images/GHGA_logo_clean.png" class="h-full" alt="GHGA Logo"
+      /></a>
+    </div>
 
-  <mat-nav-list>
-    <a
-      [id]="route === '/' ? 'activePage' : ''"
-      mat-button
-      routerLink="/"
-      class="homeLink mx-1"
-      >Home</a
-    ><a
-      [id]="route === '/browse' ? 'activePage' : ''"
-      mat-button
-      routerLink="/browse"
-      class="mx-1"
-      >Browse</a
-    ></mat-nav-list
+    <mat-nav-list class="basis-1/2 text-center">
+      <a
+        [id]="route === '/' ? 'activePage' : ''"
+        mat-button
+        routerLink="/"
+        class="homeLink mx-1"
+        >Home</a
+      ><a
+        [id]="route === '/browse' ? 'activePage' : ''"
+        mat-button
+        routerLink="/browse"
+        class="mx-1"
+        >Browse</a
+      ></mat-nav-list
+    >
+    <div class="basis-1/4 text-right">
+      <a mat-icon-button routerLink="/"> <mat-icon>login</mat-icon></a>
+    </div></mat-toolbar-row
   >
-  <a mat-icon-button routerLink="/"> <mat-icon>login</mat-icon></a>
 </mat-toolbar>