dangrubbb/dangrubb.net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: use isolated pack splatter with logo overlay

Browse Source
This commit is contained in:
dangrubbb
2026-05-30 14:31:27 -04:00
parent 0ce09fc35e
commit 55032bf6b3
2 changed files with 13 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/src/img/pack-splatter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 561 KiB

After

Width:  |  Height:  |  Size: 610 KiB

45
src/pages/index.astro
View File

@ -14,10 +14,8 @@ import CrushBase from '../layouts/CrushBase.astro';
<main class="logo-section">
<div class="logo-wrapper">
<img src="/src/img/pack-splatter.png" alt="" class="splatter-img">
<div class="circle-frame">
<div class="circle-inner">
<img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
</div>
<div class="logo-overlay">
<img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
</div>
</div>
</main>
@ -84,46 +82,30 @@ import CrushBase from '../layouts/CrushBase.astro';
.logo-wrapper {
position: relative;
width: 380px;
height: 380px;
width: 450px;
height: 450px;
}
.splatter-img {
position: absolute;
inset: -100px;
width: calc(100% + 200px);
height: calc(100% + 200px);
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.circle-frame {
.logo-overlay {
position: absolute;
inset: 30px;
border-radius: 50%;
border: 7px solid var(--crush-teal);
background: radial-gradient(circle, white 60%, #e8f5f5 100%);
box-shadow:
0 0 0 3px rgba(0, 139, 139, 0.15),
0 12px 40px rgba(0, 139, 139, 0.3),
inset 0 4px 20px rgba(0, 139, 139, 0.08);
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.circle-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
}
.logo-img {
width: 65%;
height: 65%;
width: 38%;
height: 38%;
object-fit: contain;
filter: drop-shadow(0 3px 8px rgba(0, 102, 102, 0.3));
}
@ -166,14 +148,13 @@ import CrushBase from '../layouts/CrushBase.astro';
@media (max-width: 768px) {
.top-banner { padding: 30px 15px 15px; }
.logo-section { padding: 50px 15px; }
.logo-wrapper { width: 280px; height: 280px; }
.circle-frame { inset: 20px; }
.logo-wrapper { width: 320px; height: 320px; }
.nav-item { font-size: 15px; padding: 6px 12px; }
}
@media (max-width: 480px) {
.brand { font-size: 2.5rem; }
.logo-wrapper { width: 220px; height: 220px; }
.logo-wrapper { width: 240px; height: 240px; }
.bottom-nav { flex-direction: column; gap: 4px; }
.nav-dot { display: none; }
}