Merge pull request 'fix: sticky-header-border-effect' (#4) from sticky-header-fix into main

Reviewed-on: #4

app/assets/styles/general.css

@@ -3,6 +3,7 @@
   --padding-small: 0.5rem;
   --padding-large: 2rem;
   --radius-default: 3px;
+  --radius-border: 15px;
   --transition-default: 150ms;
 
   --color-success: #328104;

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);
+    }
 }

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%;