Fixed topbar

src/app/layout/topbar/topbar.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar class="topbar" (keydown)="onKeydown($event)">
+<mat-toolbar class="topbar" color="primary" (keydown)="onKeydown($event)">
   <a class="brand" routerLink="/">
     <img class="logo-dot" src="{{AssetsConstants.LOGO}}" alt="" aria-hidden="true" draggable="false"
       oncontextmenu="return false;">

src/app/layout/topbar/topbar.component.scss

@@ -1 +1,76 @@
+/* ---- Topbar Host & Base ---- */
+:host {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: block;
+}
 
+.topbar {
+    /* Erzeugt den Milchglas-Effekt */
+    backdrop-filter: saturate(1.1) blur(8px);
+    -webkit-backdrop-filter: saturate(1.1) blur(8px);
+    /* Safari Support */
+
+    /* Mischt die Variable mit Transparenz. !important überschreibt Material-Vorgaben */
+    background: color-mix(in oklab, var(--app-topbar-bg) 80%, transparent) !important;
+    border-bottom: 1px solid rgba(0, 0, 0, .08);
+
+    display: flex;
+    align-items: center;
+    padding: clamp(0.5rem, 1vw, 1rem);
+}
+
+/* ---- Branding ---- */
+.brand {
+    display: flex;
+    align-items: center;
+    gap: clamp(0.4rem, 1vw, 0.6rem);
+    color: inherit;
+    text-decoration: none;
+
+    .logo-dot {
+        width: clamp(36px, 10vw, 48px);
+        height: clamp(36px, 10vw, 48px);
+        border-radius: 50%;
+    }
+
+    .brand-text {
+        font-weight: 600;
+        letter-spacing: .2px;
+        font-size: clamp(1rem, 3vw, 1.2rem);
+    }
+}
+
+/* ---- Navigation ---- */
+.nav {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: clamp(0.25rem, 1vw, 0.5rem);
+    justify-content: center;
+}
+
+.nav-menu-btn {
+    display: none;
+}
+
+.spacer {
+    flex: 1;
+}
+
+/* ---- Mobile Responsiveness ---- */
+@media (max-width: 760px) {
+    .nav {
+        display: none;
+    }
+
+    .nav-menu-btn {
+        display: inline-flex;
+    }
+
+    .brand {
+        flex: unset;
+    }
+}

src/app/pages/about/about.component.html

@@ -1,13 +1,8 @@
 <section class="about">
   <mat-card class="hero">
     <div class="photo">
-      <img
-        [ngSrc]="AssetsConstants.ME"
-        width="421" height="512"
-        alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
-        draggable="false"
-        oncontextmenu="return false;"
-        priority />
+      <img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
+        draggable="false" oncontextmenu="return false;" priority />
     </div>
 
     <div class="intro">
@@ -72,12 +67,7 @@
       <div class="xp-item">
         <div class="xp-head-grid">
           <div class="logo-wrap">
-              <img
-                src="{{entry.logo}}"
-                alt=""
-                class="company-logo"
-                aria-hidden="true"
-              />
+            <img src="{{entry.logo}}" alt="" class="company-logo" aria-hidden="true" />
           </div>
           <div class="head-row">
             <strong>{{ (entry.key + '.ROLE') | translate }}</strong>
@@ -119,19 +109,14 @@
         </div>
         @if (entry.externalLink) {
         <div class="link-row">
-            <a class="link-with-icon"
-               href="{{entry.externalLink}}"
-               target="_blank"
-               rel="noopener noreferrer">
+          <a class="link-with-icon" href="{{entry.externalLink}}" target="_blank" rel="noopener noreferrer">
             <mat-icon>open_in_new</mat-icon>
             {{ (entry.key + '.LINK_EXTERNAL') | translate }}
           </a>
         </div>
         }
         <div class="link-row">
-          <a class="link-with-icon"
-             [routerLink]="['/projects']"
-             [queryParams]="{ project: entry.identifier }"
+          <a class="link-with-icon" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
             rel="noopener noreferrer">
             <mat-icon>link</mat-icon>
             {{ (entry.key + '.LINK_INTERNAL') | translate }}

src/styles.scss

@@ -21,11 +21,11 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 
 /* ---- Custom variables ---- */
 :root {
-  --app-topbar-bg: #{mat.get-theme-color($light-theme, surface)};
   --app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
   --app-fg: #{mat.get-theme-color($light-theme, on-surface)};
   --app-logo-bg: #313131;
   --app-card-background: #fafafa;
+  --app-topbar-bg: var(--app-card-background);
 
   --card-radius: 18px;
   --card-bg: var(--app-card-background);
@@ -37,11 +37,11 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 }
 
 .dark {
-  --app-topbar-bg: #{mat.get-theme-color($dark-theme, surface-container-highest)};
   --app-bg: #{mat.get-theme-color($dark-theme,surface-variant)};
   --app-fg: #{mat.get-theme-color($dark-theme, on-surface)};
   --app-card-background: #313131;
   --app-logo-bg: #313131;
+  --app-topbar-bg: var(--app-card-background);
 
   --card-bg: var(--app-card-background);
 
@@ -424,77 +424,6 @@ app-root {
   background: var(--app-bg);
 }
 
-/* ---- Topbar ---- */
-app-topbar {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  display: block;
-}
-
-.topbar {
-  backdrop-filter: saturate(1.1) blur(8px);
-  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
-  border-bottom: 1px solid rgba(0, 0, 0, .08);
-  display: flex;
-  align-items: center;
-  padding: clamp(0.5rem, 1vw, 1rem);
-  color: var(--app-fg);
-}
-
-.topbar .brand {
-  display: flex;
-  align-items: center;
-  gap: clamp(0.4rem, 1vw, 0.6rem);
-  color: inherit;
-  text-decoration: none;
-}
-
-.topbar .brand .logo-dot {
-  width: clamp(36px, 10vw, 48px);
-  height: clamp(36px, 10vw, 48px);
-  border-radius: 50%;
-}
-
-.topbar .brand .brand-text {
-  font-weight: 600;
-  letter-spacing: .2px;
-  font-size: clamp(1rem, 3vw, 1.2rem);
-}
-
-.topbar .nav {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: clamp(0.25rem, 1vw, 0.5rem);
-  justify-content: center;
-}
-
-.topbar .nav-menu-btn {
-  display: none;
-}
-
-.topbar .spacer {
-  flex: 1;
-}
-
-@media (max-width: 760px) {
-  .topbar .nav {
-    display: none;
-  }
-
-  .topbar .nav-menu-btn {
-    display: inline-flex;
-  }
-
-  .topbar .brand {
-    flex: unset;
-  }
-
-  /* Allow brand to sit properly if nav falls back to menu button */
-}
-
 /* ---- Menu Overrides ---- */
 .mat-mdc-menu-item .mdc-list-item__primary-text {
   display: flex;
@@ -556,7 +485,8 @@ app-topbar {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  flex: 0 0 clamp(300px, 100%, 425px);
+  flex: 0 1 425px;
+  max-width: 100%;
 }
 
 .hero .photo img {