fix: style

2026-04-24 19:04:55 +02:00
parent 59ae95b874
commit 500329d88a
4 changed files with 55 additions and 33 deletions
@@ -6,7 +6,7 @@

 ## 👂 Languages/Framework/Packages:

- Angular v19
+- Angular v21
 - TypeScript
 - SCSS

@@ -390,12 +390,17 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
      portfolioEyebrow === null
        ? Number.POSITIVE_INFINITY
        : portfolioEyebrow.getBoundingClientRect().top + window.scrollY;
-
-    const triggerDistance: number = Math.max(portfolioTriggerY, 1);
+    const isMobileViewport: boolean = window.innerWidth <= 700;
+    const mobileRevealDistance: number = Math.max(window.innerHeight * 0.38, 180);
+    const triggerDistance: number = isMobileViewport
+      ? mobileRevealDistance
+      : Math.max(portfolioTriggerY, 1);
    const rawProgress: number = Math.min(window.scrollY / triggerDistance, 1);
-    const acceleratedProgress: number = Math.pow(rawProgress, 0.66);
+    const acceleratedProgress: number = Math.pow(rawProgress, isMobileViewport ? 0.62 : 0.66);
    const progress: number =
-      window.scrollY > 0 ? Math.max(acceleratedProgress, 0.05) : acceleratedProgress;
+      window.scrollY > 0
+        ? Math.max(acceleratedProgress, isMobileViewport ? 0.06 : 0.05)
+        : acceleratedProgress;

    root.style.setProperty('--name-pride-progress', progress.toFixed(4));
  }
@@ -10,5 +10,15 @@
  </head>
  <body>
    <app-root></app-root>
+
+    <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
+    <script>
+      kofiWidgetOverlay.draw('fraujulian', {
+        type: 'floating-chat',
+        'floating-chat.donateButton.text': 'Tip me',
+        'floating-chat.donateButton.background-color': '#ff5f5f',
+        'floating-chat.donateButton.text-color': '#fff',
+      });
+    </script>
  </body>
 </html>
@@ -151,20 +151,21 @@ hr {
  color: transparent;
  background-size: 100% 100%;
  background: linear-gradient(
-    to right,
-    #e40303 0%,
-    #e40303 16.66%,
-    #ff8c00 16.66%,
-    #ff8c00 33.33%,
-    #ffed00 33.33%,
-    #ffed00 50%,
-    #008026 50%,
-    #008026 66.66%,
-    #004dff 66.66%,
-    #004dff 83.33%,
-    #750787 83.33%,
-    #750787 100%
-  ) no-repeat 0 50%;
+      to right,
+      #e40303 0%,
+      #e40303 16.66%,
+      #ff8c00 16.66%,
+      #ff8c00 33.33%,
+      #ffed00 33.33%,
+      #ffed00 50%,
+      #008026 50%,
+      #008026 66.66%,
+      #004dff 66.66%,
+      #004dff 83.33%,
+      #750787 83.33%,
+      #750787 100%
+    )
+    no-repeat 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
@@ -296,20 +297,21 @@ hr {
  filter: blur(1.6px) saturate(0.88);
  background-size: 100% 100%;
  background: linear-gradient(
-    to right,
-    #e40303 0%,
-    #e40303 16.66%,
-    #ff8c00 16.66%,
-    #ff8c00 33.33%,
-    #ffed00 33.33%,
-    #ffed00 50%,
-    #008026 50%,
-    #008026 66.66%,
-    #004dff 66.66%,
-    #004dff 83.33%,
-    #750787 83.33%,
-    #750787 100%
-  ) 0 50%;
+      to right,
+      #e40303 0%,
+      #e40303 16.66%,
+      #ff8c00 16.66%,
+      #ff8c00 33.33%,
+      #ffed00 33.33%,
+      #ffed00 50%,
+      #008026 50%,
+      #008026 66.66%,
+      #004dff 66.66%,
+      #004dff 83.33%,
+      #750787 83.33%,
+      #750787 100%
+    )
+    0 50%;
  transform: translate(2px, 2px);
 }

@@ -972,6 +974,11 @@ hr {
    max-width: none;
  }

+  .hero-copy h1 {
+    font-size: clamp(3.35rem, 13vw, 4.75rem);
+    line-height: 0.96;
+  }
+
  .hero-copy {
    display: contents;
  }