set header background to page color with blur
This commit is contained in:
+10
-17
@@ -481,26 +481,19 @@ button:active, .button-primary:active, .logo:active {
|
||||
/* Site header */
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding-top: max(1px, env(safe-area-inset-top));
|
||||
z-index: 100;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
|
||||
6%,
|
||||
light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%,
|
||||
44%,
|
||||
light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%,
|
||||
76%,
|
||||
light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
|
||||
);
|
||||
/* background: rgb(255 255 255 / 0.88); */
|
||||
/* backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px); */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-3);
|
||||
padding-top: max(1px, env(safe-area-inset-top));
|
||||
background:
|
||||
color-mix(in srgb, var(--color-background) 60%, transparent);
|
||||
-webkit-backdrop-filter: blur(6px) saturate(140%);
|
||||
backdrop-filter: blur(6px) saturate(140%);
|
||||
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-background) 10%, transparent);
|
||||
}
|
||||
|
||||
.menu-bar {
|
||||
|
||||
Reference in New Issue
Block a user