adamlamers/zep
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

favicon

Browse Source
This commit is contained in:
Adam Lamers
2026-04-05 19:00:58 -04:00
parent 139a158efc
commit 63fe3a3c04
3 changed files with 64 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/vite.svg
-15
View File
@@ -1,15 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<defs>
<linearGradient id="zepGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#c77dff" />
<stop offset="100%" stop-color="#7b2cbf" />
</linearGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<rect width="256" height="256" rx="64" fill="#0a0714" />
<path d="M60 70 L196 70 L110 186 L196 186" fill="none" stroke="url(#zepGrad)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)" />
<path d="M60 70 L196 70 L110 186 L196 186" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 853 B

public/zep.svg
+24
View File
@@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="blimpGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3b82f6" />
<stop offset="100%" stop-color="#2563eb" />
</linearGradient>
</defs>
<!-- Background Shape -->
<rect width="100" height="100" rx="24" fill="#1e1f22" />
<g transform="translate(0, 2)">
<!-- Fins -->
<path d="M20 40 L10 30 L10 70 L20 60" fill="#ffffff" opacity="0.2" />
<!-- The Sandwich Layers -->
<path d="M20 50 Q20 30 55 30 Q90 30 90 50" fill="none" stroke="#dbdee1" stroke-width="6" stroke-linecap="round" />
<path d="M22 50 H88" fill="none" stroke="url(#blimpGrad)" stroke-width="8" stroke-linecap="round" />
<path d="M20 50 Q20 70 55 70 Q90 70 90 50" fill="none" stroke="#dbdee1" stroke-width="6" stroke-linecap="round" />
<!-- Gondola -->
<rect x="45" y="72" width="20" height="6" rx="3" fill="#dbdee1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 984 B

src/auth/AuthGate.svelte
+40 -35
View File
@@ -90,9 +90,24 @@
<div class="hero-header">
<div class="logo-container">
<svg viewBox="0 0 100 100" class="logo-svg">
<circle cx="50" cy="50" r="45" class="logo-ring" />
<path d="M35 25 L65 25 L55 45 L70 45 L35 80 L45 55 L30 55 Z" class="logo-bolt" />
<path d="M30 20 Q70 20 70 50 Q70 80 30 80" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" class="logo-d" />
<defs>
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="var(--brand)" />
<stop offset="100%" stop-color="var(--brand-hover)" />
</linearGradient>
</defs>
<g class="zep-blimp">
<!-- Fins -->
<path d="M20 40 L10 30 L10 70 L20 60" fill="currentColor" opacity="0.4" />
<!-- The Sandwich Layers -->
<path d="M20 50 Q20 30 55 30 Q90 30 90 50" class="blimp-top" />
<path d="M22 50 H88" class="blimp-filling" />
<path d="M20 50 Q20 70 55 70 Q90 70 90 50" class="blimp-bottom" />
<!-- Gondola -->
<rect x="45" y="72" width="20" height="6" rx="3" fill="currentColor" />
</g>
</svg>
</div>
<h1>Zep</h1>
@@ -261,28 +276,26 @@
color: var(--brand);
}
.logo-ring {
.zep-blimp {
animation: float 4s infinite ease-in-out;
transform-origin: center;
}
.blimp-top, .blimp-bottom {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-dasharray: 283;
stroke-dashoffset: 283;
animation: ring-draw 1.5s ease-out forwards;
stroke-width: 6;
stroke-linecap: round;
opacity: 0.8;
}
.logo-bolt {
fill: currentColor;
opacity: 0;
transform: scale(0.5) translateY(-20px);
transform-origin: center;
animation: bolt-appear 0.8s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.logo-d {
opacity: 0;
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: d-draw 1s 0.2s ease-out forwards;
.blimp-filling {
fill: none;
stroke: url(#logoGrad);
stroke-width: 8;
stroke-linecap: round;
filter: drop-shadow(0 0 8px var(--brand));
animation: energy-pulse 2s infinite ease-in-out;
}
.tagline {
@@ -294,21 +307,13 @@
font-weight: 700;
}
@keyframes ring-draw {
to { stroke-dashoffset: 0; }
@keyframes float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-10px) rotate(2deg); }
}
@keyframes d-draw {
to {
stroke-dashoffset: 0;
opacity: 0.3;
}
}
@keyframes bolt-appear {
to {
opacity: 1;
transform: scale(1) translateY(0);
}
@keyframes energy-pulse {
0%, 100% { opacity: 0.6; stroke-width: 8; }
50% { opacity: 1; stroke-width: 10; filter: drop-shadow(0 0 12px var(--brand)); }
}
</style>