kaffa/anvil-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mesh gradient background for visual depth

Browse Source 
- Add mesh-bg class with layered gradients (blue/purple tones)
- Apply to body element for site-wide effect
- CSS-only implementation for minimal performance impact

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-21 01:11:09 +09:00
parent 55e22c91c3
commit 0b63590406
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -43,6 +43,16 @@
body{background:#0a0f1a;color:#e2e8f0;margin:0} body{background:#0a0f1a;color:#e2e8f0;margin:0}
.font-sans{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif} .font-sans{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif}
nav{position:fixed;width:100%;z-index:50;background:rgba(10,15,26,.8);backdrop-filter:blur(12px)} nav{position:fixed;width:100%;z-index:50;background:rgba(10,15,26,.8);backdrop-filter:blur(12px)}
/* Mesh Gradient Background */
.mesh-bg{
background:
linear-gradient(135deg,transparent 0%,transparent 45%,rgba(56,189,248,0.08) 50%,transparent 55%,transparent 100%),
linear-gradient(45deg,transparent 0%,transparent 45%,rgba(168,85,247,0.06) 50%,transparent 55%,transparent 100%),
radial-gradient(ellipse at 20% 30%,rgba(56,189,248,0.12) 0%,transparent 50%),
radial-gradient(ellipse at 80% 70%,rgba(168,85,247,0.08) 0%,transparent 50%),
linear-gradient(180deg,#0a0f1a 0%,#0f172a 50%,#0a0f1a 100%);
background-size:300px 300px,300px 300px,100% 100%,100% 100%,100% 100%;
}
</style> </style>
<!-- App JavaScript (must load before Alpine.js) --> <!-- App JavaScript (must load before Alpine.js) -->
@@ -51,7 +61,7 @@
<!-- Alpine.js (pinned version with SRI) --> <!-- Alpine.js (pinned version with SRI) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js" integrity="sha384-iZD2X8o1Zdq0HR5H/7oa8W30WS4No+zWCKUPD7fHRay9I1Gf+C4F8sVmw7zec1wW" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js" integrity="sha384-iZD2X8o1Zdq0HR5H/7oa8W30WS4No+zWCKUPD7fHRay9I1Gf+C4F8sVmw7zec1wW" crossorigin="anonymous"></script>
</head> </head>
<body x-data="anvilApp()" @keydown.window="handleKeydown($event)" class="font-sans antialiased selection:bg-brand-500/30"> <body x-data="anvilApp()" @keydown.window="handleKeydown($event)" class="font-sans antialiased selection:bg-brand-500/30 mesh-bg">
<!-- Skip Link for Keyboard Users --> <!-- Skip Link for Keyboard Users -->
<a href="#main-content" class="skip-link">메인 콘텐츠로 건너뛰기</a> <a href="#main-content" class="skip-link">메인 콘텐츠로 건너뛰기</a>