nercone-dev/website
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Activity

--

Browse Source
This commit is contained in:
nercone
2026-04-26 01:37:15 +09:00
parent a4e31d1641
commit 4d5468e497
2 changed files with 7 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style-extra.css
+7 -41
View File
@@ -1,3 +1,10 @@
header {
view-transition-name: header-content;
will-change: transform;
background-color: transparent;
background-image: linear-gradient(to bottom, var(--color-dark-grey), oklch(from var(--color-dark-grey) l c h / 0));
backdrop-filter: blur(16px);
}
main {
view-transition-name: main-content;
padding-top: 60px;
@@ -9,47 +16,6 @@ footer {
view-transition-name: footer-content;
}
/* Progressive Blur */
header {
view-transition-name: header-content;
will-change: transform;
background-color: transparent;
overflow: hidden;
isolation: isolate;
}
header::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, transparent, var(--color-dark-grey));
pointer-events: none;
}
.header-blur {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
}
.header-blur > div {
position: absolute;
inset: 0;
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
-webkit-mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
}
.header-blur > div:nth-child(1) { --blur: 1.1px; --from: 0%; --to: 10%; }
.header-blur > div:nth-child(2) { --blur: 1.5px; --from: 10%; --to: 20%; }
.header-blur > div:nth-child(3) { --blur: 2px; --from: 20%; --to: 30%; }
.header-blur > div:nth-child(4) { --blur: 2.6px; --from: 30%; --to: 40%; }
.header-blur > div:nth-child(5) { --blur: 3.5px; --from: 40%; --to: 50%; }
.header-blur > div:nth-child(6) { --blur: 4.6px; --from: 50%; --to: 60%; }
.header-blur > div:nth-child(7) { --blur: 6px; --from: 60%; --to: 70%; }
.header-blur > div:nth-child(8) { --blur: 8px; --from: 70%; --to: 80%; }
.header-blur > div:nth-child(9) { --blur: 10.5px; --from: 80%; --to: 90%; }
.header-blur > div:nth-child(10) { --blur: 14px; --from: 90%; --to: 100%; }
/* Fonts */
@font-face {
font-family: "MesloLGS Nerd Font";