basicstack/basicstack.org
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change package card design to vertical centered layout

Browse source 
Implemented design specification from DEV-247:
- Changed card layout from horizontal to vertical centered
- Logo centered at top (64×64px, increased from 56px)
- Title centered below logo with 16px gap
- Description centered below title with 12px gap
- Added card elevation shadow by default
- Links centered at bottom with 20px top gap
- All content centered with text-align: center
- Typography: title 20px/600, description 14px
- Colors: text-primary for title, text-secondary for description

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
CTO (Paperclip Agent) 2026-07-11 15:50:03 +00:00
parent a7bd527793
commit 2de5485690
1 changed files with 33 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
pages/packages/index.vue
View file

@ -15,27 +15,18 @@
:to="`/packages/${pkg.slug}`" :to="`/packages/${pkg.slug}`"
class="package-card card" class="package-card card"
> >
<div class="package-header"> <img
<img v-if="pkg.logo"
v-if="pkg.logo" :src="getAssetUrl(pkg.logo)"
:src="getAssetUrl(pkg.logo)" :alt="pkg.name + ' logo'"
:alt="pkg.name + ' logo'" class="package-logo"
class="package-logo" />
/> <div v-else class="package-logo-placeholder">{{ pkg.name[0] }}</div>
<div v-else class="package-logo-placeholder">{{ pkg.name[0] }}</div>
<div class="package-info"> <h2 class="package-name">{{ pkg.name }}</h2>
<h2 class="package-name">{{ pkg.name }}</h2>
<div class="package-meta">
<span v-if="pkg.screenshots && pkg.screenshots.length > 0" class="badge badge-primary">
{{ pkg.screenshots.length }} screenshot{{ pkg.screenshots.length !== 1 ? 's' : '' }}
</span>
<span v-if="pkg.deployment_details && pkg.deployment_details.length > 0" class="badge badge-primary">
Deploy docs
</span>
</div>
</div>
</div>
<p class="package-desc">{{ pkg.short_description }}</p> <p class="package-desc">{{ pkg.short_description }}</p>
<div class="package-links" v-if="pkg.website_url || pkg.documentation_url"> <div class="package-links" v-if="pkg.website_url || pkg.documentation_url">
<span v-if="pkg.website_url" class="link-badge">Website</span> <span v-if="pkg.website_url" class="link-badge">Website</span>
<span v-if="pkg.documentation_url" class="link-badge">Docs</span> <span v-if="pkg.documentation_url" class="link-badge">Docs</span>
@ -92,63 +83,59 @@ useSeoMeta({
transition: box-shadow 0.2s, transform 0.2s; transition: box-shadow 0.2s, transform 0.2s;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-md); align-items: center;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
min-width: 280px;
max-width: 360px;
} }
.package-card:hover { .package-card:hover {
box-shadow: var(--shadow-lg); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);
transform: translateY(-2px); transform: translateY(-2px);
text-decoration: none; text-decoration: none;
} }
.package-header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.package-logo { .package-logo {
width: 56px; width: 64px;
height: 56px; height: 64px;
object-fit: contain; object-fit: contain;
flex-shrink: 0; margin-bottom: var(--space-md);
} }
.package-logo-placeholder { .package-logo-placeholder {
width: 56px; width: 64px;
height: 56px; height: 64px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-primary); background: var(--color-primary);
color: white; color: white;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.25rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
flex-shrink: 0; margin-bottom: var(--space-md);
} }
.package-name { .package-name {
font-size: 1.125rem; font-size: var(--text-xl);
margin: 0 0 var(--space-xs); font-weight: 600;
} margin: 0 0 var(--space-sm);
color: var(--color-text-primary);
.package-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
} }
.package-desc { .package-desc {
color: var(--color-text-muted); color: var(--color-text-secondary);
font-size: 0.9375rem; font-size: var(--text-sm);
margin: 0; line-height: 1.5;
margin: 0 0 20px;
flex: 1; flex: 1;
} }
.package-links { .package-links {
display: flex; display: flex;
gap: var(--space-sm); gap: var(--space-sm);
justify-content: center;
} }
.link-badge { .link-badge {