From 3083b99898f8bc991d1a8d77dfb6607c14b9cfcd Mon Sep 17 00:00:00 2001
From: Robert Janus <hallo@robertjanus.de>
Date: Sun, 11 May 2025 21:43:04 +0200
Subject: [PATCH] fix: sticky-header-border-effect

---
 app/assets/styles/general.css |  1 +
 app/assets/styles/header.css  | 20 ++++++++++++++++++++
 app/assets/styles/page.css    |  2 --
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css
index 99b3170..bb83564 100755
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@@ -2,6 +2,7 @@
   --padding-default: 1rem;
   --padding-small: 0.5rem;
   --radius-default: 3px;
+  --radius-border: 15px;
   --transition-default: 150ms;
 
   --color-success: #328104;
diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css
index da5d3a5..919e104 100755
--- a/app/assets/styles/header.css
+++ b/app/assets/styles/header.css
@@ -63,4 +63,24 @@
             }
         }
     }
+
+    &:after, &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: calc(-1 * var(--radius-border));
+        background: var(--color-blue-darkest);
+        width: var(--radius-border);
+        height: var(--radius-border);
+    }
+
+    &:after {
+        right: 0;
+        mask: radial-gradient(var(--radius-border) at 0 100%,#0000 98%,#000);
+    }
+
+    &:before {
+        left: 0;
+        mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000);
+    }
 }
\ No newline at end of file
diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css
index 24ab7a9..278ffa5 100644
--- a/app/assets/styles/page.css
+++ b/app/assets/styles/page.css
@@ -46,8 +46,6 @@
 }
 
 .content {
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
     overflow: hidden;
     background: var(--color-lightest);
     height: 100%;