ZaguanAI/zblade.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(showcase): refine screenshot component spacing and effects

Browse Source
This commit is contained in:
Stig-Ørjan Smelror
2026-02-14 23:15:06 +01:00
parent 891becc6bf
commit 2e6f6e5303
2 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/global.css
+37 -18
View File
@@ -474,8 +474,9 @@ section {
} }
.showcase-grid { .showcase-grid {
max-width: 1100px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 0 var(--space-lg);
} }
.showcase-item { .showcase-item {
@@ -486,8 +487,9 @@ section {
position: relative; position: relative;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
background: var(--color-bg-elevated); background: var(--color-bg-elevated);
padding: var(--space-md); padding: var(--space-sm);
transition: all 0.4s ease; transition: all 0.4s ease;
overflow: hidden;
} }
.showcase-image-wrapper::before { .showcase-image-wrapper::before {
@@ -500,9 +502,10 @@ section {
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
transparent 0%, transparent 0%,
transparent 70%, transparent 60%,
rgba(15, 15, 15, 0.4) 85%, rgba(15, 15, 15, 0.3) 75%,
rgba(15, 15, 15, 0.8) 100% rgba(15, 15, 15, 0.7) 90%,
rgba(15, 15, 15, 0.9) 100%
); );
pointer-events: none; pointer-events: none;
opacity: 1; opacity: 1;
@@ -512,12 +515,12 @@ section {
.showcase-image-wrapper:hover { .showcase-image-wrapper:hover {
border-color: var(--color-accent); border-color: var(--color-accent);
box-shadow: 0 8px 32px rgba(0, 221, 119, 0.15); box-shadow: 0 12px 40px rgba(0, 221, 119, 0.2), 0 0 60px rgba(0, 221, 119, 0.1);
transform: translateY(-4px); transform: translateY(-6px);
} }
.showcase-image-wrapper:hover::before { .showcase-image-wrapper:hover::before {
opacity: 0.6; opacity: 0.5;
} }
.showcase-image { .showcase-image {
@@ -529,29 +532,45 @@ section {
transition: all 0.4s ease; transition: all 0.4s ease;
} }
.showcase-image-wrapper:hover .showcase-image {
transform: scale(1.01);
}
.showcase-caption { .showcase-caption {
position: absolute; position: absolute;
bottom: var(--space-lg); bottom: var(--space-md);
left: var(--space-lg); left: var(--space-md);
right: var(--space-lg); right: var(--space-md);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.85rem; font-size: 0.8rem;
color: var(--color-text); color: var(--color-text);
line-height: 1.5; line-height: 1.5;
z-index: 2; z-index: 2;
opacity: 0.9; opacity: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
@media (max-width: 1024px) {
.showcase-grid {
max-width: 800px;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.showcase-grid {
max-width: 100%;
padding: 0 var(--space-md);
}
.showcase-image-wrapper { .showcase-image-wrapper {
padding: var(--space-sm); padding: var(--space-xs);
} }
.showcase-caption { .showcase-caption {
font-size: 0.75rem; font-size: 0.7rem;
bottom: var(--space-md); bottom: var(--space-sm);
left: var(--space-md); left: var(--space-sm);
right: var(--space-md); right: var(--space-sm);
} }
} }
src/pages/index.astro
+6 -6
View File
@@ -54,12 +54,12 @@ const version = pkg.version ?? "";
Real interface. Real performance. Real development workflow. Real interface. Real performance. Real development workflow.
</p> </p>
</div> </div>
<div class="showcase-grid"> </div>
<div class="showcase-item"> <div class="showcase-grid">
<div class="showcase-image-wrapper"> <div class="showcase-item">
<img src="/screenshot-1.png" alt="Zaguán Blade editor interface showing AI-assisted coding" class="showcase-image" /> <div class="showcase-image-wrapper">
<div class="showcase-caption">The editor with AI chat integrated, displaying code generation with diff view</div> <img src="/screenshot-1.png" alt="Zaguán Blade editor interface showing AI-assisted coding" class="showcase-image" />
</div> <div class="showcase-caption">The editor with AI chat integrated, displaying code generation with diff view</div>
</div> </div>
</div> </div>
</div> </div>