diff --git a/src/app/layout/topbar/topbar.component.html b/src/app/layout/topbar/topbar.component.html index 3ef7b06..19c1a4e 100644 --- a/src/app/layout/topbar/topbar.component.html +++ b/src/app/layout/topbar/topbar.component.html @@ -1,4 +1,4 @@ - + diff --git a/src/app/layout/topbar/topbar.component.scss b/src/app/layout/topbar/topbar.component.scss index 8b13789..6055d18 100644 --- a/src/app/layout/topbar/topbar.component.scss +++ b/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; + } +} \ No newline at end of file diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html index 86ff8c6..eef4191 100644 --- a/src/app/pages/about/about.component.html +++ b/src/app/pages/about/about.component.html @@ -1,13 +1,8 @@
- {{ 'ABOUT.ALT.PROFILE' | translate }} + {{ 'ABOUT.ALT.PROFILE' | translate }}
@@ -26,10 +21,10 @@ {{ 'ABOUT.LOCATION' | translate }}
- - - {{ 'ABOUT.CONTACT_ME' | translate }} - + + + {{ 'ABOUT.CONTACT_ME' | translate }} +
@@ -49,7 +44,7 @@

{{ 'ABOUT.SECTION.PRIMARY' | translate }}

@for (s of primarySkills; track s) { - {{ s | translate }} + {{ s | translate }} }
@@ -57,8 +52,8 @@

{{ 'ABOUT.SECTION.TOOLSET' | translate }}

- @for (t of toolset; track t) { - {{ t | translate }} + @for (t of toolset; track t) { + {{ t | translate }} }
@@ -69,39 +64,34 @@

{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}

@for (entry of xpKeys; track entry.key) { -
-
-
- -
-
- {{ (entry.key + '.ROLE') | translate }} - {{ (entry.key + '.TIME') | translate }} -
- -
- {{ (entry.key + '.COMPANY') | translate }} -
- +
+
+
+
-
-
    -
  • {{ entry.key + '.HIGHLIGHTS.P1' | translate }}
    • -
  • {{ entry.key + '.HIGHLIGHTS.P2' | translate }}
    • -
  • {{ entry.key + '.HIGHLIGHTS.P3' | translate }}
    • -
+
+ {{ (entry.key + '.ROLE') | translate }} + {{ (entry.key + '.TIME') | translate }}
+ +
+ {{ (entry.key + '.COMPANY') | translate }} +
+
+
+
    +
  • {{ entry.key + '.HIGHLIGHTS.P1' | translate }}
    • +
  • {{ entry.key + '.HIGHLIGHTS.P2' | translate }}
    • +
  • {{ entry.key + '.HIGHLIGHTS.P3' | translate }}
    • +
+
+
- @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key) - { - - } + @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key) + { + + } }
@@ -118,21 +108,16 @@ {{ (entry.key + '.DESCRIPTION') | translate }}
@if (entry.externalLink) { -
- - open_in_new - {{ (entry.key + '.LINK_EXTERNAL') | translate }} - -
+
+ + open_in_new + {{ (entry.key + '.LINK_EXTERNAL') | translate }} + +
}
- + link {{ (entry.key + '.LINK_INTERNAL') | translate }} @@ -148,9 +133,9 @@ @if(entry.key !== projectKeys.at(projectKeys.length-1)?.key) { - + + } } - }
@@ -160,20 +145,20 @@
@for (entry of educationKeys; track entry.key) { -
- {{ (entry.key + '.WHERE') | translate }} - {{ (entry.key + '.WHEN') | translate }} -
-
- {{ (entry.key + '.WHAT') | translate }} -
+
+ {{ (entry.key + '.WHERE') | translate }} + {{ (entry.key + '.WHEN') | translate }} +
+
+ {{ (entry.key + '.WHAT') | translate }} +
- @if(entry.key !== educationKeys.at(educationKeys.length-1)?.key) - { - - } + @if(entry.key !== educationKeys.at(educationKeys.length-1)?.key) + { + + } }
-
+ \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 0e0fcef..cec365c 100644 --- a/src/styles.scss +++ b/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 {