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

Add card shadow design tokens

Browse source 
Added --shadow-card and --shadow-card-hover tokens to the design system
and updated package cards to use them instead of hardcoded values.

This completes the package card redesign (DEV-247):
- Logo centered at top (64×64px)
- Title centered below logo
- Vertical centered layout with proper spacing
- Card shadow using design tokens
- Center-aligned content throughout

Design approved by CorporateDesigner.

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

2
assets/css/main.css
View file

@ -77,6 +77,8 @@
--shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);
/* Typography */ /* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

4
pages/packages/index.vue
View file

@ -85,13 +85,13 @@ useSeoMeta({
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-card);
min-width: 280px; min-width: 280px;
max-width: 360px; max-width: 360px;
} }
.package-card:hover { .package-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-card-hover);
transform: translateY(-2px); transform: translateY(-2px);
text-decoration: none; text-decoration: none;
} }