wip: bento card layout + zinc/emerald tokens (in progress)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
@@ -16,7 +16,7 @@
|
|||||||
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
|
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
|
||||||
:root {
|
:root {
|
||||||
/* ── Fonts ── */
|
/* ── Fonts ── */
|
||||||
--font: 'DM Sans', -apple-system, system-ui, sans-serif;
|
--font: 'Outfit', -apple-system, system-ui, sans-serif;
|
||||||
--mono: 'JetBrains Mono', ui-monospace, monospace;
|
--mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||||
--transition: 150ms ease;
|
--transition: 150ms ease;
|
||||||
|
|
||||||
@@ -56,8 +56,8 @@
|
|||||||
--radius-xs: 4px;
|
--radius-xs: 4px;
|
||||||
--radius-sm: 6px;
|
--radius-sm: 6px;
|
||||||
--radius-md: 8px;
|
--radius-md: 8px;
|
||||||
--radius: 12px;
|
--radius: 16px;
|
||||||
--radius-lg: 16px;
|
--radius-lg: 20px;
|
||||||
--radius-full: 9999px;
|
--radius-full: 9999px;
|
||||||
|
|
||||||
/* ── Elevation scale ──
|
/* ── Elevation scale ──
|
||||||
@@ -67,11 +67,12 @@
|
|||||||
* lg: elevated (dropdowns, popovers, hero cards)
|
* lg: elevated (dropdowns, popovers, hero cards)
|
||||||
* xl: overlay (modals, slide-out panels)
|
* xl: overlay (modals, slide-out panels)
|
||||||
*/
|
*/
|
||||||
--shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
|
/* Zinc-tinted shadows */
|
||||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
|
--shadow-xs: 0 1px 2px rgba(24,24,27,0.04);
|
||||||
--shadow-md: 0 2px 6px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
|
--shadow-sm: 0 1px 2px rgba(24,24,27,0.04), 0 4px 8px rgba(24,24,27,0.02);
|
||||||
--shadow-lg: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.1);
|
--shadow-md: 0 2px 8px rgba(24,24,27,0.05), 0 12px 24px rgba(24,24,27,0.04);
|
||||||
--shadow-xl: 0 8px 24px rgba(0,0,0,0.08), 0 24px 60px rgba(0,0,0,0.15);
|
--shadow-lg: 0 4px 16px rgba(24,24,27,0.06), 0 24px 48px rgba(24,24,27,0.06);
|
||||||
|
--shadow-xl: 0 8px 24px rgba(24,24,27,0.08), 0 32px 64px rgba(24,24,27,0.1);
|
||||||
/* Legacy aliases */
|
/* Legacy aliases */
|
||||||
--card-shadow: var(--shadow-md);
|
--card-shadow: var(--shadow-md);
|
||||||
--card-shadow-sm: var(--shadow-sm);
|
--card-shadow-sm: var(--shadow-sm);
|
||||||
@@ -103,75 +104,68 @@
|
|||||||
--leading-loose: 1.8;
|
--leading-loose: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── LIGHT MODE ── */
|
/* ── LIGHT MODE — Zinc + Emerald ── */
|
||||||
:root {
|
:root {
|
||||||
/* Surface hierarchy: canvas (page bg) → surface (sidebars, panels) → card (content containers) */
|
--canvas: #FAFAFA;
|
||||||
--canvas: #F3F4F6;
|
|
||||||
--surface: #FFFFFF;
|
--surface: #FFFFFF;
|
||||||
--surface-secondary: #F7F8FA;
|
--surface-secondary: #F4F4F5;
|
||||||
--card: #FFFFFF;
|
--card: #FFFFFF;
|
||||||
--card-secondary: #F7F8FA;
|
--card-secondary: #F4F4F5;
|
||||||
--card-hover: #EDEEF2;
|
--card-hover: #F0F0F2;
|
||||||
|
|
||||||
/* Borders */
|
|
||||||
--border: rgba(0,0,0,0.06);
|
--border: rgba(0,0,0,0.06);
|
||||||
--border-strong: rgba(0,0,0,0.10);
|
--border-strong: rgba(0,0,0,0.10);
|
||||||
|
|
||||||
/* Text hierarchy: 1 (headings/names) → 2 (body) → 3 (labels/meta) → 4 (placeholder/disabled) */
|
--text-1: #18181B;
|
||||||
--text-1: #111118;
|
--text-2: #3F3F46;
|
||||||
--text-2: #3d3d4a;
|
--text-3: #71717A;
|
||||||
--text-3: #6b6b78;
|
--text-4: #A1A1AA;
|
||||||
--text-4: #a8a8b3;
|
|
||||||
|
|
||||||
/* Accent — deep indigo */
|
/* Accent — Emerald (single, desaturated) */
|
||||||
--accent: #4338CA;
|
--accent: #059669;
|
||||||
--accent-bg: #EEF2FF;
|
--accent-bg: #ECFDF5;
|
||||||
--accent-dim: rgba(67,56,202,0.06);
|
--accent-dim: rgba(5,150,105,0.07);
|
||||||
--accent-border: rgba(67,56,202,0.12);
|
--accent-border: rgba(5,150,105,0.14);
|
||||||
--accent-focus: rgba(67,56,202,0.14);
|
--accent-focus: rgba(5,150,105,0.16);
|
||||||
|
|
||||||
/* Semantic: success */
|
|
||||||
--success: #059669;
|
--success: #059669;
|
||||||
--success-bg: #ECFDF5;
|
--success-bg: #ECFDF5;
|
||||||
--success-dim: rgba(5,150,105,0.07);
|
--success-dim: rgba(5,150,105,0.07);
|
||||||
|
|
||||||
/* Semantic: error */
|
|
||||||
--error: #DC2626;
|
--error: #DC2626;
|
||||||
--error-bg: #FEF2F2;
|
--error-bg: #FEF2F2;
|
||||||
--error-dim: rgba(220,38,38,0.06);
|
--error-dim: rgba(220,38,38,0.06);
|
||||||
|
|
||||||
/* Semantic: warning */
|
|
||||||
--warning: #D97706;
|
--warning: #D97706;
|
||||||
--warning-bg: rgba(217,119,6,0.07);
|
--warning-bg: rgba(217,119,6,0.07);
|
||||||
|
|
||||||
/* Overlay */
|
--overlay: rgba(0,0,0,0.2);
|
||||||
--overlay: rgba(0,0,0,0.25);
|
--overlay-strong: rgba(0,0,0,0.4);
|
||||||
--overlay-strong: rgba(0,0,0,0.45);
|
--nav-bg: rgba(250,250,250,0.8);
|
||||||
--nav-bg: rgba(255,255,255,0.92);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── DARK MODE ── */
|
/* ── DARK MODE — Zinc + Emerald ── */
|
||||||
.dark {
|
.dark {
|
||||||
--canvas: #0a0a0c;
|
--canvas: #09090B;
|
||||||
--surface: #111114;
|
--surface: #111113;
|
||||||
--surface-secondary: #141417;
|
--surface-secondary: #18181B;
|
||||||
--card: #18181c;
|
--card: #1C1C1F;
|
||||||
--card-secondary: #141417;
|
--card-secondary: #18181B;
|
||||||
--card-hover: #1f1f24;
|
--card-hover: #232326;
|
||||||
|
|
||||||
--border: rgba(255,255,255,0.07);
|
--border: rgba(255,255,255,0.07);
|
||||||
--border-strong: rgba(255,255,255,0.12);
|
--border-strong: rgba(255,255,255,0.12);
|
||||||
|
|
||||||
--text-1: #f4f4f5;
|
--text-1: #FAFAFA;
|
||||||
--text-2: #a1a1aa;
|
--text-2: #A1A1AA;
|
||||||
--text-3: #71717a;
|
--text-3: #71717A;
|
||||||
--text-4: #3f3f46;
|
--text-4: #3F3F46;
|
||||||
|
|
||||||
--accent: #6366F1;
|
--accent: #34D399;
|
||||||
--accent-bg: rgba(99,102,241,0.1);
|
--accent-bg: rgba(52,211,153,0.1);
|
||||||
--accent-dim: rgba(99,102,241,0.08);
|
--accent-dim: rgba(52,211,153,0.08);
|
||||||
--accent-border: rgba(99,102,241,0.14);
|
--accent-border: rgba(52,211,153,0.14);
|
||||||
--accent-focus: rgba(99,102,241,0.16);
|
--accent-focus: rgba(52,211,153,0.16);
|
||||||
|
|
||||||
--success: #22c55e;
|
--success: #22c55e;
|
||||||
--success-bg: rgba(34,197,94,0.1);
|
--success-bg: rgba(34,197,94,0.1);
|
||||||
@@ -487,7 +481,7 @@
|
|||||||
|
|
||||||
/* ── App surface (centered container) ── */
|
/* ── App surface (centered container) ── */
|
||||||
.app-surface {
|
.app-surface {
|
||||||
max-width: 1200px;
|
max-width: 1280px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 var(--sp-6);
|
padding: 0 var(--sp-6);
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
|||||||
@@ -61,17 +61,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.budget-amount {
|
.budget-amount {
|
||||||
font-size: var(--text-3xl);
|
font-size: 36px;
|
||||||
font-weight: 500;
|
font-weight: 800;
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
|
letter-spacing: -0.04em;
|
||||||
color: var(--text-1);
|
color: var(--text-1);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.budget-label {
|
.budget-label {
|
||||||
font-size: var(--text-base);
|
font-size: 12px;
|
||||||
color: var(--text-3);
|
color: var(--text-4);
|
||||||
margin-top: var(--sp-1.5);
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.budget-rows {
|
.budget-rows {
|
||||||
@@ -92,18 +93,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.budget-row-name {
|
.budget-row-name {
|
||||||
font-size: var(--text-base);
|
font-size: 13px;
|
||||||
color: var(--text-2);
|
color: var(--text-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.budget-row-amount {
|
.budget-row-amount {
|
||||||
font-size: var(--text-base);
|
font-size: 12px;
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
color: var(--text-1);
|
font-weight: 500;
|
||||||
|
color: var(--text-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.budget-row-amount.income {
|
.budget-row-amount.income {
|
||||||
color: var(--success);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|||||||
@@ -14,147 +14,139 @@
|
|||||||
size?: 'primary' | 'secondary';
|
size?: 'primary' | 'secondary';
|
||||||
href: string;
|
href: string;
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
|
// Extract the number from title (e.g. "78 uncategorized..." → "78")
|
||||||
|
function extractNumber(t: string): { num: string; rest: string } {
|
||||||
|
const match = t.match(/^([\d,\.]+)\s+(.*)$/);
|
||||||
|
if (match) return { num: match[1], rest: match[2] };
|
||||||
|
return { num: '', rest: t };
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = $derived(extractNumber(title));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a {href} class="action-card {size} {variant}">
|
<a {href} class="bento {variant}">
|
||||||
<div class="action-card-left">
|
<div class="bento-top">
|
||||||
<div class="action-card-icon {variant}">
|
<span class="bento-label">
|
||||||
|
{#if variant === 'budget'}Budget{:else if variant === 'inventory'}Inventory{:else}Calories{/if}
|
||||||
|
</span>
|
||||||
|
<div class="bento-icon {variant}">
|
||||||
{#if variant === 'budget'}
|
{#if variant === 'budget'}
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||||
{:else if variant === 'inventory'}
|
{:else if variant === 'inventory'}
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 9.4l-9-5.19"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
||||||
{:else if variant === 'fitness'}
|
{:else}
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="action-card-text">
|
|
||||||
<div class="action-card-title">{title}</div>
|
|
||||||
<div class="action-card-desc">{description}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="action-card-right">
|
{#if parsed.num}
|
||||||
|
<div class="bento-value">{parsed.num}</div>
|
||||||
|
<div class="bento-desc">{parsed.rest}<br>{description}</div>
|
||||||
|
{:else}
|
||||||
|
<div class="bento-desc-only">{title}<br>{description}</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="bento-action">
|
||||||
{action}
|
{action}
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.action-card {
|
.bento {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
padding: 22px 24px;
|
||||||
padding: var(--sp-4) var(--sp-5);
|
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
background: var(--card);
|
background: var(--card);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-left: 3px solid var(--border);
|
border-top: 2px solid transparent;
|
||||||
box-shadow: var(--shadow-xs);
|
box-shadow: var(--shadow-sm);
|
||||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
.action-card.budget { border-left-color: var(--accent); }
|
|
||||||
.action-card.inventory { border-left-color: var(--error); }
|
|
||||||
.action-card.fitness { border-left-color: var(--success); }
|
|
||||||
|
|
||||||
.action-card:hover {
|
.bento:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-3px);
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
}
|
}
|
||||||
.action-card.budget:hover { box-shadow: 0 4px 16px var(--accent-dim), var(--shadow-sm); }
|
.bento.budget:hover { border-top-color: var(--accent); }
|
||||||
.action-card.inventory:hover { box-shadow: 0 4px 16px var(--error-dim), var(--shadow-sm); }
|
.bento.inventory:hover { border-top-color: var(--error); }
|
||||||
.action-card.fitness:hover { box-shadow: 0 4px 16px var(--success-dim), var(--shadow-sm); }
|
.bento.fitness:hover { border-top-color: var(--success); }
|
||||||
|
|
||||||
.action-card:active { transform: scale(0.985); }
|
.bento:active { transform: scale(0.985); }
|
||||||
|
|
||||||
.action-card.primary {
|
.bento-top {
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-card-left {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--inner-gap);
|
justify-content: space-between;
|
||||||
flex: 1;
|
margin-bottom: 14px;
|
||||||
min-width: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card-icon {
|
.bento-label {
|
||||||
width: 36px;
|
font-size: 10px;
|
||||||
height: 36px;
|
font-weight: 700;
|
||||||
border-radius: var(--radius-md);
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--text-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
|
.bento-icon.budget { background: var(--accent-dim); color: var(--accent); }
|
||||||
|
.bento-icon.inventory { background: var(--error-dim); color: var(--error); }
|
||||||
|
.bento-icon.fitness { background: var(--success-dim); color: var(--success); }
|
||||||
|
.bento-icon :global(svg) { width: 14px; height: 14px; }
|
||||||
|
|
||||||
/* Icon variants — using semantic tokens for both themes */
|
.bento-value {
|
||||||
.action-card-icon.budget { background: var(--accent-bg); color: var(--accent); }
|
font-size: 32px;
|
||||||
.action-card-icon.inventory { background: var(--error-bg); color: var(--error); }
|
font-weight: 700;
|
||||||
.action-card-icon.fitness { background: var(--success-bg); color: var(--success); }
|
font-family: var(--mono);
|
||||||
|
letter-spacing: -0.04em;
|
||||||
.action-card-icon :global(svg) {
|
line-height: 1;
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-card-text {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-card-title {
|
|
||||||
font-size: var(--text-md);
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-1);
|
color: var(--text-1);
|
||||||
line-height: var(--leading-snug);
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card-desc {
|
.bento-desc {
|
||||||
font-size: var(--text-sm);
|
font-size: 13px;
|
||||||
color: var(--text-3);
|
color: var(--text-3);
|
||||||
margin-top: var(--sp-0.5);
|
line-height: 1.5;
|
||||||
line-height: 1.4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card-right {
|
.bento-desc-only {
|
||||||
font-size: var(--text-sm);
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--text-3);
|
color: var(--text-2);
|
||||||
display: flex;
|
line-height: 1.5;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-action {
|
||||||
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1px;
|
gap: 4px;
|
||||||
flex-shrink: 0;
|
font-size: 11px;
|
||||||
padding: var(--sp-1) var(--sp-2);
|
font-weight: 600;
|
||||||
border-radius: var(--radius-md);
|
|
||||||
transition: all var(--transition);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-card:hover .action-card-right {
|
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
background: var(--accent-dim);
|
margin-top: 12px;
|
||||||
}
|
letter-spacing: 0.02em;
|
||||||
|
transition: gap 0.2s;
|
||||||
.action-card-right :global(svg) {
|
|
||||||
width: var(--sp-4);
|
|
||||||
height: var(--sp-4);
|
|
||||||
transition: transform var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-card:hover .action-card-right :global(svg) {
|
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
}
|
||||||
|
.bento:hover .bento-action { gap: 7px; }
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.action-card {
|
.bento { padding: 18px 20px; }
|
||||||
padding: var(--sp-4);
|
.bento-value { font-size: 24px; }
|
||||||
gap: var(--sp-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-card-left {
|
|
||||||
gap: var(--sp-3);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -97,25 +97,25 @@
|
|||||||
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||||
}
|
}
|
||||||
.navbar-inner {
|
.navbar-inner {
|
||||||
max-width: 1400px;
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 52px;
|
height: 48px;
|
||||||
padding: 0 var(--sp-6);
|
padding: 0 var(--sp-6);
|
||||||
gap: var(--sp-5);
|
gap: var(--sp-6);
|
||||||
}
|
}
|
||||||
.navbar-logo {
|
.navbar-logo {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: var(--text-md);
|
font-size: 14px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--sp-2);
|
gap: 7px;
|
||||||
color: var(--text-1);
|
color: var(--text-1);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.04em;
|
||||||
}
|
}
|
||||||
.navbar-logo svg { width: 18px; height: 18px; color: var(--accent); }
|
.navbar-logo svg { width: 16px; height: 16px; color: var(--accent); }
|
||||||
|
|
||||||
.navbar-links {
|
.navbar-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -124,19 +124,18 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.navbar-link {
|
.navbar-link {
|
||||||
padding: 5px var(--sp-3);
|
padding: 4px 12px;
|
||||||
border-radius: var(--radius-md);
|
border-radius: 6px;
|
||||||
font-size: var(--text-sm);
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--text-3);
|
color: var(--text-4);
|
||||||
transition: all 0.15s ease;
|
transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
letter-spacing: 0.01em;
|
|
||||||
}
|
}
|
||||||
.navbar-link:hover { color: var(--text-1); background: var(--card-hover); }
|
.navbar-link:hover { color: var(--text-2); background: rgba(0,0,0,0.03); }
|
||||||
.navbar-link.active {
|
.navbar-link.active {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
background: var(--accent-dim);
|
background: var(--accent-dim);
|
||||||
|
|||||||
@@ -157,8 +157,8 @@
|
|||||||
|
|
||||||
<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
|
<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
|
||||||
|
|
||||||
<!-- Action cards -->
|
<!-- Bento row 1: Budget (wide) + Inventory (narrow) -->
|
||||||
<div class="action-cards stagger">
|
<div class="bento-row stagger">
|
||||||
<DashboardActionCard
|
<DashboardActionCard
|
||||||
title="{budgetUncatCount} uncategorized transactions"
|
title="{budgetUncatCount} uncategorized transactions"
|
||||||
description="{budgetSpending} spent · {budgetIncome} income"
|
description="{budgetSpending} spent · {budgetIncome} income"
|
||||||
@@ -168,12 +168,16 @@
|
|||||||
href="/budget"
|
href="/budget"
|
||||||
/>
|
/>
|
||||||
<DashboardActionCard
|
<DashboardActionCard
|
||||||
title="{inventoryIssueCount} issue{inventoryIssueCount !== 1 ? 's' : ''} · {inventoryReviewCount} needs review"
|
title="{inventoryIssueCount} issue{inventoryIssueCount !== 1 ? 's' : ''} · {inventoryReviewCount} needs review"
|
||||||
description="{inventoryIssueCount + inventoryReviewCount} items need attention"
|
description="{inventoryIssueCount + inventoryReviewCount} items need attention"
|
||||||
action="View"
|
action="View"
|
||||||
variant="inventory"
|
variant="inventory"
|
||||||
href="/inventory"
|
href="/inventory"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bento row 2: Calories + Fitness detail -->
|
||||||
|
<div class="bento-row-2 stagger">
|
||||||
<DashboardActionCard
|
<DashboardActionCard
|
||||||
title="{fitnessCalRemaining.toLocaleString()} calories remaining today"
|
title="{fitnessCalRemaining.toLocaleString()} calories remaining today"
|
||||||
description="{fitnessCalLogged.toLocaleString()} cal logged · {fitnessProtein}g protein · {fitnessCarbs}g carbs"
|
description="{fitnessCalLogged.toLocaleString()} cal logged · {fitnessProtein}g protein · {fitnessCarbs}g carbs"
|
||||||
@@ -181,18 +185,16 @@
|
|||||||
variant="fitness"
|
variant="fitness"
|
||||||
href="/fitness"
|
href="/fitness"
|
||||||
/>
|
/>
|
||||||
|
<FitnessModule />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modules -->
|
<!-- Modules: Budget detail (wide) + Issues (narrow) -->
|
||||||
<div class="modules-grid">
|
<div class="modules-grid">
|
||||||
<BudgetModule />
|
<BudgetModule />
|
||||||
<div class="right-stack">
|
|
||||||
<FitnessModule />
|
|
||||||
<IssuesModule />
|
<IssuesModule />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* ── Dashboard header ── */
|
/* ── Dashboard header ── */
|
||||||
@@ -310,28 +312,29 @@
|
|||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Action cards ── */
|
/* ── Bento grids ── */
|
||||||
.action-cards {
|
.bento-row {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
grid-template-columns: 2fr 1fr;
|
||||||
gap: var(--sp-2);
|
gap: 10px;
|
||||||
margin-bottom: var(--section-gap);
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-row-2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Modules grid ── */
|
/* ── Modules grid ── */
|
||||||
.modules-grid {
|
.modules-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1.3fr 0.7fr;
|
grid-template-columns: 7fr 3fr;
|
||||||
gap: var(--module-gap);
|
gap: 10px;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-stack {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--module-gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Mobile ── */
|
/* ── Mobile ── */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.dash-header {
|
.dash-header {
|
||||||
@@ -348,9 +351,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
.bento-row,
|
||||||
|
.bento-row-2,
|
||||||
.modules-grid {
|
.modules-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
.bento-row > :global(*),
|
||||||
|
.bento-row-2 > :global(*),
|
||||||
.modules-grid > :global(*) {
|
.modules-grid > :global(*) {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|||||||
Reference in New Issue
Block a user