Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

feature/scss-cleanup #26

Merged
lobo merged 12 commits from feature/scss-cleanup into main 2026-02-23 09:46:12 +01:00
Conversation 0 Commits 12 Files Changed 33 +135 -145
4 changed files with 135 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6330d45b4e - Show all commits

2
src/app/layout/topbar/topbar.component.html
View File

@@ -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;">

75
src/app/layout/topbar/topbar.component.scss
View File

@@ -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;
}
}

125
src/app/pages/about/about.component.html
View File

@@ -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">
@@ -26,10 +21,10 @@
<span>{{ 'ABOUT.LOCATION' | translate }}</span>
</div>
<div class="row">
<mat-icon aria-hidden="true">email</mat-icon>
<a href="" (click)="SharedFunctions.openMail($event)">
{{ 'ABOUT.CONTACT_ME' | translate }}
</a>
<mat-icon aria-hidden="true">email</mat-icon>
<a href="" (click)="SharedFunctions.openMail($event)">
{{ 'ABOUT.CONTACT_ME' | translate }}
</a>
</div>
<div class="row">
<mat-icon svgIcon="github"></mat-icon>
@@ -49,7 +44,7 @@
<h3>{{ 'ABOUT.SECTION.PRIMARY' | translate }}</h3>
<mat-chip-set aria-label="Primary skills">
@for (s of primarySkills; track s) {
<mat-chip >{{ s | translate }}</mat-chip>
<mat-chip>{{ s | translate }}</mat-chip>
}
</mat-chip-set>
</div>
@@ -57,8 +52,8 @@
<div>
<h3>{{ 'ABOUT.SECTION.TOOLSET' | translate }}</h3>
<mat-chip-set aria-label="Toolset">
@for (t of toolset; track t) {
<mat-chip>{{ t | translate }}</mat-chip>
@for (t of toolset; track t) {
<mat-chip>{{ t | translate }}</mat-chip>
}
</mat-chip-set>
</div>
@@ -69,39 +64,34 @@
<h2 style="margin-left: 0.5rem;">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
<div class="xp-list">
@for (entry of xpKeys; track entry.key) {
<div class="xp-item">
<div class="xp-head-grid">
<div class="logo-wrap">
<img
src="{{entry.logo}}"
alt=""
class="company-logo"
aria-hidden="true"
/>
</div>
<div class="head-row">
<strong>{{ (entry.key + '.ROLE') | translate }}</strong>
<span class="time">{{ (entry.key + '.TIME') | translate }}</span>
</div>
<div class="company-row">
{{ (entry.key + '.COMPANY') | translate }}
</div>
<div class="xp-item">
<div class="xp-head-grid">
<div class="logo-wrap">
<img src="{{entry.logo}}" alt="" class="company-logo" aria-hidden="true" />
</div>
<div class="highlights">
<ul>
<li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
<li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
<li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
</ul>
<div class="head-row">
<strong>{{ (entry.key + '.ROLE') | translate }}</strong>
<span class="time">{{ (entry.key + '.TIME') | translate }}</span>
</div>
<div class="company-row">
{{ (entry.key + '.COMPANY') | translate }}
</div>
</div>
<div class="highlights">
<ul>
<li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
<li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
<li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
</ul>
</div>
</div>
@if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
{
<mat-divider></mat-divider>
}
@if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
{
<mat-divider></mat-divider>
}
}
</div>
</mat-card>
@@ -118,21 +108,16 @@
{{ (entry.key + '.DESCRIPTION') | translate }}
</div>
@if (entry.externalLink) {
<div class="link-row">
<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" 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 }"
rel="noopener noreferrer">
<a class="link-with-icon" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
rel="noopener noreferrer">
<mat-icon>link</mat-icon>
{{ (entry.key + '.LINK_INTERNAL') | translate }}
</a>
@@ -148,9 +133,9 @@
@if(entry.key !== projectKeys.at(projectKeys.length-1)?.key)
{
<mat-divider></mat-divider>
<mat-divider></mat-divider>
}
}
}
</div>
</mat-card>
@@ -160,20 +145,20 @@
<div class="xp-list">
<div class="xp-item">
@for (entry of educationKeys; track entry.key) {
<div class="head-row">
<strong>{{ (entry.key + '.WHERE') | translate }}</strong>
<span class="time">{{ (entry.key + '.WHEN') | translate }}</span>
</div>
<div class="company-row">
{{ (entry.key + '.WHAT') | translate }}
</div>
<div class="head-row">
<strong>{{ (entry.key + '.WHERE') | translate }}</strong>
<span class="time">{{ (entry.key + '.WHEN') | translate }}</span>
</div>
<div class="company-row">
{{ (entry.key + '.WHAT') | translate }}
</div>
@if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
{
<mat-divider style="margin-top: .5rem; margin-bottom: .5rem"></mat-divider>
}
@if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
{
<mat-divider style="margin-top: .5rem; margin-bottom: .5rem"></mat-divider>
}
}
</div>
</div>
</mat-card>
</section>
</section>

78
src/styles.scss
View File

@@ -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 {