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

--

Browse Source
This commit is contained in:
nercone
2026-04-25 18:43:33 +09:00
parent 5e354c3935
commit ebb6171d5a
2 changed files with 51 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style-extra.css
+50 -10
View File
@@ -39,16 +39,56 @@ header::after {
-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: 0.5px; --from: 0%; --to: 10%; }
.header-blur > div:nth-child(2) { --blur: 1px; --from: 10%; --to: 20%; }
.header-blur > div:nth-child(3) { --blur: 1.5px; --from: 20%; --to: 30%; }
.header-blur > div:nth-child(4) { --blur: 2px; --from: 30%; --to: 40%; }
.header-blur > div:nth-child(5) { --blur: 3px; --from: 40%; --to: 50%; }
.header-blur > div:nth-child(6) { --blur: 4px; --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: 12px; --from: 80%; --to: 90%; }
.header-blur > div:nth-child(10) { --blur: 16px; --from: 90%; --to: 100%; }
.header-blur > div:nth-child(1) { --blur: 0.0px; --from: 0%; --to: 2%; }
.header-blur > div:nth-child(2) { --blur: 0.01px; --from: 2%; --to: 4%; }
.header-blur > div:nth-child(3) { --blur: 0.03px; --from: 4%; --to: 6%; }
.header-blur > div:nth-child(4) { --blur: 0.06px; --from: 6%; --to: 8%; }
.header-blur > div:nth-child(5) { --blur: 0.11px; --from: 8%; --to: 10%; }
.header-blur > div:nth-child(6) { --blur: 0.17px; --from: 10%; --to: 12%; }
.header-blur > div:nth-child(7) { --blur: 0.24px; --from: 12%; --to: 14%; }
.header-blur > div:nth-child(8) { --blur: 0.33px; --from: 14%; --to: 16%; }
.header-blur > div:nth-child(9) { --blur: 0.43px; --from: 16%; --to: 18%; }
.header-blur > div:nth-child(10) { --blur: 0.54px; --from: 18%; --to: 20%; }
.header-blur > div:nth-child(11) { --blur: 0.67px; --from: 20%; --to: 22%; }
.header-blur > div:nth-child(12) { --blur: 0.81px; --from: 22%; --to: 24%; }
.header-blur > div:nth-child(13) { --blur: 0.96px; --from: 24%; --to: 26%; }
.header-blur > div:nth-child(14) { --blur: 1.13px; --from: 26%; --to: 28%; }
.header-blur > div:nth-child(15) { --blur: 1.31px; --from: 28%; --to: 30%; }
.header-blur > div:nth-child(16) { --blur: 1.5px; --from: 30%; --to: 32%; }
.header-blur > div:nth-child(17) { --blur: 1.71px; --from: 32%; --to: 34%; }
.header-blur > div:nth-child(18) { --blur: 1.93px; --from: 34%; --to: 36%; }
.header-blur > div:nth-child(19) { --blur: 2.16px; --from: 36%; --to: 38%; }
.header-blur > div:nth-child(20) { --blur: 2.41px; --from: 38%; --to: 40%; }
.header-blur > div:nth-child(21) { --blur: 2.67px; --from: 40%; --to: 42%; }
.header-blur > div:nth-child(22) { --blur: 2.94px; --from: 42%; --to: 44%; }
.header-blur > div:nth-child(23) { --blur: 3.23px; --from: 44%; --to: 46%; }
.header-blur > div:nth-child(24) { --blur: 3.53px; --from: 46%; --to: 48%; }
.header-blur > div:nth-child(25) { --blur: 3.84px; --from: 48%; --to: 50%; }
.header-blur > div:nth-child(26) { --blur: 4.16px; --from: 50%; --to: 52%; }
.header-blur > div:nth-child(27) { --blur: 4.5px; --from: 52%; --to: 54%; }
.header-blur > div:nth-child(28) { --blur: 4.86px; --from: 54%; --to: 56%; }
.header-blur > div:nth-child(29) { --blur: 5.22px; --from: 56%; --to: 58%; }
.header-blur > div:nth-child(30) { --blur: 5.6px; --from: 58%; --to: 60%; }
.header-blur > div:nth-child(31) { --blur: 6.0px; --from: 60%; --to: 62%; }
.header-blur > div:nth-child(32) { --blur: 6.4px; --from: 62%; --to: 64%; }
.header-blur > div:nth-child(33) { --blur: 6.82px; --from: 64%; --to: 66%; }
.header-blur > div:nth-child(34) { --blur: 7.26px; --from: 66%; --to: 68%; }
.header-blur > div:nth-child(35) { --blur: 7.7px; --from: 68%; --to: 70%; }
.header-blur > div:nth-child(36) { --blur: 8.16px; --from: 70%; --to: 72%; }
.header-blur > div:nth-child(37) { --blur: 8.64px; --from: 72%; --to: 74%; }
.header-blur > div:nth-child(38) { --blur: 9.12px; --from: 74%; --to: 76%; }
.header-blur > div:nth-child(39) { --blur: 9.62px; --from: 76%; --to: 78%; }
.header-blur > div:nth-child(40) { --blur: 10.14px; --from: 78%; --to: 80%; }
.header-blur > div:nth-child(41) { --blur: 10.66px; --from: 80%; --to: 82%; }
.header-blur > div:nth-child(42) { --blur: 11.2px; --from: 82%; --to: 84%; }
.header-blur > div:nth-child(43) { --blur: 11.76px; --from: 84%; --to: 86%; }
.header-blur > div:nth-child(44) { --blur: 12.32px; --from: 86%; --to: 88%; }
.header-blur > div:nth-child(45) { --blur: 12.9px; --from: 88%; --to: 90%; }
.header-blur > div:nth-child(46) { --blur: 13.49px; --from: 90%; --to: 92%; }
.header-blur > div:nth-child(47) { --blur: 14.1px; --from: 92%; --to: 94%; }
.header-blur > div:nth-child(48) { --blur: 14.72px; --from: 94%; --to: 96%; }
.header-blur > div:nth-child(49) { --blur: 15.35px; --from: 96%; --to: 98%; }
.header-blur > div:nth-child(50) { --blur: 16.0px; --from: 98%; --to: 100%; }
/* Fonts */
@font-face {
public/assets/js/script-extra.js
+1 -1
View File
@@ -6,7 +6,7 @@ function initProgressiveHeaderBlur() {
const container = document.createElement('div');
container.className = 'header-blur';
container.setAttribute('aria-hidden', 'true');
for (let i = 0; i < 10; i++) container.appendChild(document.createElement('div'));
for (let i = 0; i < 50; i++) container.appendChild(document.createElement('div'));
header.prepend(container);
}
initProgressiveHeaderBlur();