Consolidate and modernize SCSS into global styles

Move component-level styles into src/styles.scss and remove duplicated rules from several component SCSS files (app, topbar, about, algorithms, sorting, imprint, project dialog, projects, babylon-canvas). The global stylesheet now centralizes layout and typography (clamp-based sizing), sorting visualization & canvas rules, topbar/menu overrides, project/swiper styles, and shared utilities. This reduces duplication, improves responsiveness, and simplifies stylesheet management.
2026-02-22 11:48:21 +01:00
parent 5ebd1d19ea
commit cb2ffa2d80
10 changed files with 164 additions and 578 deletions
--- a/src/app/pages/about/about.component.scss
+++ b/src/app/pages/about/about.component.scss
@@ -1,183 +0,0 @@
-.about {
-  display: grid;
-  gap: 1rem;
-}
-
-/* Hero block: Photo + Intro */
-.hero {
-  display: grid;
-  grid-template-columns: 425px 1fr;
-  gap: 1.25rem;
-  border-radius: 16px;
-  background: var(--app-card-background);
-
-  .photo {
-    align-items:flex-start; justify-content:center;
-    img {
-      display:block;
-      width: 100%; height: auto;
-      max-width: 425px;
-      border-radius: 12px;
-      box-shadow: 0 6px 24px rgba(0,0,0,.25);
-      object-fit: cover;
-    }
-  }
-
-  .intro {
-    display:flex; flex-direction:column; gap:.5rem;
-    h1 { margin-top: .25rem }
-    .lead { opacity:.9; margin: .25rem 0 0.5rem; }
-
-    .meta {
-      display:flex; flex-direction:column; gap:.25rem; margin-bottom: 0.5rem;
-      .row {
-        display:flex; align-items:center; gap:.4rem;
-        a { color: inherit; }
-      }
-    }
-
-    .actions {
-      display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;
-      .mat-icon { margin-right:.25rem; }
-
-    }
-  }
-}
-
-/* Skills block */
-.skills {
-  padding: 5px;
-  h2 { margin-top: .25rem; margin-left: .25rem; }
-  .chip-groups {
-    margin-left: .25rem;
-    display:grid; gap:1rem;
-    grid-template-columns: 1fr 1fr;
-    margin-bottom: .5rem;
-    h3 { margin: .2rem 0 .4rem; font-size: .95rem; opacity:.85; }
-    mat-chip-set {
-      display:flex; flex-wrap:wrap; gap:.4rem;
-    }
-  }
-}
-
-/* Experience block */
-.experience {
-  padding: 5px;
-  h2 { margin-top: .25rem; margin-left: .25rem; }
-  .xp-item {
-    .xp-head {
-      display:flex; align-items:baseline; gap:.5rem;
-      .time { opacity:.75; font-size:.9rem; }
-    }
-    .xp-sub { opacity:.9; margin-bottom:.25rem; }
-    ul { margin: .25rem 0 .5rem 1.15rem; }
-  }
-}
-
-/* Experience block */
-.projects {
-  padding: 5px;
-  h2 { margin-top: .25rem;margin-left: .25rem; }
-  .xp-list {
-    margin-left: .25rem;
-    display: grid; gap: .75rem;
-  }
-  .xp-item {
-    .xp-head {
-      display:flex; align-items:baseline; gap:.5rem;
-      .time { opacity:.75; font-size:.9rem; }
-    }
-    .xp-sub { opacity:.9; margin-bottom:.25rem; }
-    ul { margin: .25rem 0 .5rem 1.15rem; }
-  }
-}
-
-/* Experience block */
-.education {
-  padding: 5px;
-  h2 { margin-top: .25rem;margin-left: .25rem; }
-  .xp-list {
-    margin-left: .25rem;
-    display: grid; gap: .75rem;
-  }
-  .xp-item {
-    .xp-head {
-      display:flex; align-items:baseline; gap:.5rem;
-      .time { opacity:.75; font-size:.9rem; }
-    }
-    .xp-sub { opacity:.9; margin-bottom:.25rem; }
-    ul { margin: .25rem 0 .5rem 1.15rem; }
-  }
-}
-
-/* Responsive */
-@media (max-width: 900px) {
-  .hero { grid-template-columns: 1fr; }
-  .hero .photo { justify-content: flex-start; }
-  .skills .chip-groups { grid-template-columns: 1fr; }
-}
-
-.xp-head-grid {
-  display: grid;
-  grid-template-columns: calc(48px + .75rem) 1fr; /* 1: Logo, 2: Text */
-  grid-template-rows: auto auto;   /* 1: Role/Time, 2: Company */
-  column-gap: .75rem;
-}
-
-.logo-wrap {
-  grid-row: 1 / span 2;
-  grid-column: 1;
-  display: flex;
-  align-items: center;
-}
-
-.company-logo {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
-  opacity: .9;
-  border-radius: 10%;
-  background-color: var(--app-logo-bg);
-}
-
-
-.head-row {
-  grid-row: 1;
-  grid-column: 2;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: .5rem 1rem;
-
-  strong {
-    font-size: 1rem;
-  }
-  .time  {
-    opacity: .75; font-size: .9rem;
-  }
-}
-
-.company-row {
-  grid-row: 2;
-  grid-column: 2;
-  margin-top: .1rem;
-  opacity: .85;
-}
-
-.highlights {
-  margin-top: .4rem;
-  margin-left: .75rem;
-  padding-left: 1.2rem;
-
-  li {
-    margin: .2rem 0;
-  }
-}
-
-.highlights-noMargin {
-  margin-top: .4rem;
-
-  li {
-    margin: .2rem 0;
-  }
-}