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}`"
class="package-card card"
>
<div class="package-header">
<img
v-if="pkg.logo"
:src="getAssetUrl(pkg.logo)"
:alt="pkg.name + ' logo'"
class="package-logo"
/>
<div v-else class="package-logo-placeholder">{{ pkg.name[0] }}</div>
<div class="package-info">
<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>
<img
v-if="pkg.logo"
:src="getAssetUrl(pkg.logo)"
:alt="pkg.name + ' logo'"
class="package-logo"
/>
<div v-else class="package-logo-placeholder">{{ pkg.name[0] }}</div>
<h2 class="package-name">{{ pkg.name }}</h2>
<p class="package-desc">{{ pkg.short_description }}</p>
<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.documentation_url" class="link-badge">Docs</span>
@ -92,63 +83,59 @@ useSeoMeta({
transition: box-shadow 0.2s, transform 0.2s;
display: flex;
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 {
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);
text-decoration: none;
}
.package-header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.package-logo {
width: 56px;
height: 56px;
width: 64px;
height: 64px;
object-fit: contain;
flex-shrink: 0;
margin-bottom: var(--space-md);
}
.package-logo-placeholder {
width: 56px;
height: 56px;
width: 64px;
height: 64px;
border-radius: var(--radius-md);
background: var(--color-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
margin-bottom: var(--space-md);
}
.package-name {
font-size: 1.125rem;
margin: 0 0 var(--space-xs);
}
.package-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
font-size: var(--text-xl);
font-weight: 600;
margin: 0 0 var(--space-sm);
color: var(--color-text-primary);
}
.package-desc {
color: var(--color-text-muted);
font-size: 0.9375rem;
margin: 0;
color: var(--color-text-secondary);
font-size: var(--text-sm);
line-height: 1.5;
margin: 0 0 20px;
flex: 1;
}
.package-links {
display: flex;
gap: var(--space-sm);
justify-content: center;
}
.link-badge {