style: full redesign — Zinc/Emerald palette, Outfit font, bento dashboard
Dashboard rebuilt from scratch to match React mockup: - Asymmetric bento grid (2fr/1fr, 1fr/1fr, 7fr/3fr) - Big hero numbers on bento cards - Task pill trigger with breathing dot animation - Inline fitness card with animated progress bar - Emerald accent replaces indigo across all pages - Outfit font replaces DM Sans - Zinc-tinted shadows - 16px card radius - Staggered card reveal animations All pages verified working: tasks, fitness, budget, inventory, settings, trips. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/state';
|
||||
import DashboardActionCard from '$lib/components/dashboard/DashboardActionCard.svelte';
|
||||
import BudgetModule from '$lib/components/dashboard/BudgetModule.svelte';
|
||||
import FitnessModule from '$lib/components/dashboard/FitnessModule.svelte';
|
||||
import IssuesModule from '$lib/components/dashboard/IssuesModule.svelte';
|
||||
@@ -27,8 +26,13 @@
|
||||
let budgetIncome = $state('');
|
||||
let fitnessCalRemaining = $state(0);
|
||||
let fitnessCalLogged = $state(0);
|
||||
let fitnessCalGoal = $state(2000);
|
||||
let fitnessProtein = $state(0);
|
||||
let fitnessCarbs = $state(0);
|
||||
let fitnessProteinGoal = $state(150);
|
||||
let fitnessCarbsGoal = $state(200);
|
||||
let fitnessFat = $state(0);
|
||||
let fitnessFatGoal = $state(65);
|
||||
let headerTasks = $state<QuickTask[]>([]);
|
||||
let headerOverdue = $state(0);
|
||||
let headerTotalCount = $state(0);
|
||||
@@ -60,6 +64,8 @@
|
||||
} catch { return ''; }
|
||||
}
|
||||
|
||||
const fitPercent = $derived(fitnessCalGoal > 0 ? Math.min(100, Math.round((fitnessCalLogged / fitnessCalGoal) * 100)) : 0);
|
||||
|
||||
async function loadTasks() {
|
||||
try {
|
||||
const res = await fetch('/api/tasks/today', { credentials: 'include' });
|
||||
@@ -69,7 +75,6 @@
|
||||
const today = t.today || [];
|
||||
const overdue = t.overdue || [];
|
||||
headerTotalCount = today.length + overdue.length;
|
||||
// First task for preview
|
||||
headerTasks = [...overdue, ...today].slice(0, 1);
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
@@ -106,10 +111,15 @@
|
||||
fitnessCalLogged = Math.round(t.total_calories || 0);
|
||||
fitnessProtein = Math.round(t.total_protein || 0);
|
||||
fitnessCarbs = Math.round(t.total_carbs || 0);
|
||||
fitnessFat = Math.round(t.total_fat || 0);
|
||||
}
|
||||
if (fitGoalsRes.ok) {
|
||||
const g = await fitGoalsRes.json();
|
||||
fitnessCalRemaining = Math.max(0, (g.calories || 2000) - fitnessCalLogged);
|
||||
fitnessCalGoal = g.calories || 2000;
|
||||
fitnessProteinGoal = g.protein || 150;
|
||||
fitnessCarbsGoal = g.carbs || 200;
|
||||
fitnessFatGoal = g.fat || 65;
|
||||
fitnessCalRemaining = Math.max(0, fitnessCalGoal - fitnessCalLogged);
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
|
||||
@@ -118,217 +128,295 @@
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<div class="app-surface">
|
||||
<!-- Dashboard header with task trigger -->
|
||||
<div class="dash-header">
|
||||
<div class="dash-left">
|
||||
<div class="dash-date">{getDateString()}</div>
|
||||
<h1 class="dash-greeting">{getGreeting()}, <strong>{userName}</strong></h1>
|
||||
<div class="db-surface">
|
||||
|
||||
<!-- ═══ HEADER ═══ -->
|
||||
<div class="db-header">
|
||||
<div>
|
||||
<div class="db-date">{getDateString()}</div>
|
||||
<h1 class="db-greeting">{getGreeting()}, <strong>{userName}</strong></h1>
|
||||
</div>
|
||||
<button class="task-trigger" onclick={() => taskPanelOpen = true}>
|
||||
<div class="task-trigger-icon" class:has-overdue={headerOverdue > 0}>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
||||
<rect x="2" y="2" width="14" height="14" rx="3"/>
|
||||
<path d="M6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
{#if headerOverdue > 0}
|
||||
<span class="task-trigger-dot"></span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="task-trigger-text">
|
||||
<span class="task-trigger-count">
|
||||
{headerTotalCount} task{headerTotalCount !== 1 ? 's' : ''}
|
||||
{#if headerOverdue > 0}
|
||||
<span class="task-trigger-overdue">· {headerOverdue} overdue</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if headerTasks[0]}
|
||||
<span class="task-trigger-next">
|
||||
Next: {headerTasks[0].title}
|
||||
{#if formatTaskTime(headerTasks[0])} · {formatTaskTime(headerTasks[0])}{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="task-trigger-next">All clear for today</span>
|
||||
{/if}
|
||||
</div>
|
||||
<svg class="task-trigger-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M6 4l4 4-4 4"/></svg>
|
||||
<button class="task-pill" onclick={() => taskPanelOpen = true}>
|
||||
<span class="tp-dot" class:tp-overdue={headerOverdue > 0}></span>
|
||||
<span class="tp-text"><b>{headerTotalCount} task{headerTotalCount !== 1 ? 's' : ''}</b>
|
||||
{#if headerTasks[0]} · Next: {headerTasks[0].title}{/if}
|
||||
</span>
|
||||
<svg class="tp-arrow" width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 3l3.5 3.5L5 10"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
|
||||
|
||||
<!-- Bento row 1: Budget (wide) + Inventory (narrow) -->
|
||||
<div class="bento-row stagger">
|
||||
<DashboardActionCard
|
||||
title="{budgetUncatCount} uncategorized transactions"
|
||||
description="{budgetSpending} spent · {budgetIncome} income"
|
||||
action="Review"
|
||||
variant="budget"
|
||||
size="primary"
|
||||
href="/budget"
|
||||
/>
|
||||
<DashboardActionCard
|
||||
title="{inventoryIssueCount} issue{inventoryIssueCount !== 1 ? 's' : ''} · {inventoryReviewCount} needs review"
|
||||
description="{inventoryIssueCount + inventoryReviewCount} items need attention"
|
||||
action="View"
|
||||
variant="inventory"
|
||||
href="/inventory"
|
||||
/>
|
||||
<!-- ═══ BENTO ROW 1: Budget (2fr) + Inventory (1fr) ═══ -->
|
||||
<div class="bento stagger">
|
||||
<a href="/budget" class="bc bc-emerald">
|
||||
<div class="bc-top">
|
||||
<span class="bc-label">Budget</span>
|
||||
<div class="bc-icon emerald">
|
||||
<svg width="14" height="14" 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bc-value">{budgetUncatCount}</div>
|
||||
<div class="bc-desc">uncategorized transactions<br><strong>{budgetSpending} spent</strong> · {budgetIncome} income</div>
|
||||
<div class="bc-action">Review <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>
|
||||
</a>
|
||||
|
||||
<a href="/inventory" class="bc bc-rose">
|
||||
<div class="bc-top">
|
||||
<span class="bc-label">Inventory</span>
|
||||
<div class="bc-icon rose">
|
||||
<svg width="14" height="14" 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bc-value-sm">{inventoryIssueCount} issues</div>
|
||||
<div class="bc-desc">{inventoryReviewCount} needs review<br>{inventoryIssueCount + inventoryReviewCount} items need attention</div>
|
||||
<div class="bc-action">View <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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Bento row 2: Calories + Fitness detail -->
|
||||
<div class="bento-row-2 stagger">
|
||||
<DashboardActionCard
|
||||
title="{fitnessCalRemaining.toLocaleString()} calories remaining today"
|
||||
description="{fitnessCalLogged.toLocaleString()} cal logged · {fitnessProtein}g protein · {fitnessCarbs}g carbs"
|
||||
action="Log food"
|
||||
variant="fitness"
|
||||
href="/fitness"
|
||||
/>
|
||||
<FitnessModule />
|
||||
<!-- ═══ BENTO ROW 2: Calories (1fr) + Fitness detail (1fr) ═══ -->
|
||||
<div class="bento-row2 stagger">
|
||||
<a href="/fitness" class="bc bc-emerald">
|
||||
<div class="bc-top">
|
||||
<span class="bc-label">Calories</span>
|
||||
<div class="bc-icon emerald">
|
||||
<svg width="14" height="14" 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bc-value">{fitnessCalRemaining.toLocaleString()}</div>
|
||||
<div class="bc-desc">remaining today<br><strong>{fitnessCalLogged.toLocaleString()} logged</strong> · {fitnessProtein}g protein · {fitnessCarbs}g carbs</div>
|
||||
<div class="bc-action">Log food <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>
|
||||
</a>
|
||||
|
||||
<div class="bc">
|
||||
<div class="fit-header">
|
||||
<div class="fit-av">Y</div>
|
||||
<div>
|
||||
<div class="fit-name">{userName}</div>
|
||||
<div class="fit-sub">{fitnessCalLogged.toLocaleString()} cal · {fitnessCalRemaining.toLocaleString()} left</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fit-bar"><div class="fit-fill" style="width: {fitPercent}%"></div></div>
|
||||
<div class="fit-macros">
|
||||
<div><span class="fm-v">{fitnessProtein}<span class="fm-u">/{fitnessProteinGoal}g</span></span><div class="fm-l">protein</div></div>
|
||||
<div><span class="fm-v">{fitnessCarbs}<span class="fm-u">/{fitnessCarbsGoal}g</span></span><div class="fm-l">carbs</div></div>
|
||||
<div><span class="fm-v">{fitnessFat}<span class="fm-u">/{fitnessFatGoal}g</span></span><div class="fm-l">fat</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modules: Budget detail (wide) + Issues (narrow) -->
|
||||
<div class="modules-grid">
|
||||
<!-- ═══ MODULES: Budget detail (7fr) + Issues (3fr) ═══ -->
|
||||
<div class="db-modules">
|
||||
<BudgetModule />
|
||||
<IssuesModule />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ── Dashboard header ── */
|
||||
.dash-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-6);
|
||||
margin-bottom: var(--section-gap);
|
||||
/* ═══ Dashboard — matches React mockup exactly ═══ */
|
||||
|
||||
.db-surface {
|
||||
max-width: 1280px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.dash-date {
|
||||
/* ── Header ── */
|
||||
.db-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.db-date {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: var(--sp-1);
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dash-greeting {
|
||||
font-size: var(--text-2xl);
|
||||
.db-greeting {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.1;
|
||||
color: var(--text-1);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
}
|
||||
.dash-greeting strong { font-weight: 700; }
|
||||
.db-greeting strong { font-weight: 800; }
|
||||
|
||||
/* ── Task trigger button ── */
|
||||
.task-trigger {
|
||||
/* ── Task pill ── */
|
||||
.task-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-radius: var(--radius);
|
||||
gap: 10px;
|
||||
padding: 8px 14px 8px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
max-width: 320px;
|
||||
}
|
||||
.task-trigger:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
.task-trigger:active { transform: scale(0.98); }
|
||||
|
||||
.task-trigger-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.task-trigger-icon.has-overdue {
|
||||
background: var(--error-dim);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.task-trigger-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--error);
|
||||
border: 2px solid var(--card);
|
||||
}
|
||||
|
||||
.task-trigger-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-trigger-count {
|
||||
display: block;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
.task-trigger-overdue {
|
||||
color: var(--error);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task-trigger-next {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-3);
|
||||
margin-top: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
|
||||
font-family: var(--font);
|
||||
}
|
||||
.task-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
|
||||
.task-pill:active { transform: scale(0.97); }
|
||||
|
||||
.tp-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
flex-shrink: 0;
|
||||
animation: breathe 2.5s ease-in-out infinite;
|
||||
}
|
||||
.tp-dot.tp-overdue { background: var(--error); }
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.85); }
|
||||
}
|
||||
|
||||
.task-trigger-arrow {
|
||||
color: var(--text-4);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.task-trigger:hover .task-trigger-arrow {
|
||||
transform: translateX(2px);
|
||||
color: var(--accent);
|
||||
}
|
||||
.tp-text { font-size: 12px; font-weight: 500; color: var(--text-3); }
|
||||
.tp-text b { color: var(--text-1); font-weight: 600; }
|
||||
|
||||
.tp-arrow { color: var(--text-4); transition: all 0.2s; }
|
||||
.task-pill:hover .tp-arrow { color: var(--accent); transform: translateX(2px); }
|
||||
|
||||
/* ── Bento grids ── */
|
||||
.bento-row {
|
||||
.bento {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bento-row-2 {
|
||||
.bento-row2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ── Modules grid ── */
|
||||
.modules-grid {
|
||||
/* ── Bento card ── */
|
||||
.bc {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 22px 24px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 2px solid transparent;
|
||||
transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
|
||||
}
|
||||
.bc:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.bc:active { transform: scale(0.985); }
|
||||
.bc.bc-emerald:hover { border-top-color: var(--accent); }
|
||||
.bc.bc-rose:hover { border-top-color: var(--error); }
|
||||
|
||||
.bc-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.bc-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--text-4);
|
||||
}
|
||||
.bc-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bc-icon.emerald { background: var(--accent-dim); color: var(--accent); }
|
||||
.bc-icon.rose { background: var(--error-dim); color: var(--error); }
|
||||
|
||||
.bc-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
font-family: var(--mono);
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
color: var(--text-1);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.bc-value-sm {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-family: var(--mono);
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text-1);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.bc-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-3);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.bc-desc :global(strong) { color: var(--text-2); font-weight: 500; }
|
||||
|
||||
.bc-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
margin-top: 10px;
|
||||
letter-spacing: 0.02em;
|
||||
transition: gap 0.2s;
|
||||
}
|
||||
.bc:hover .bc-action { gap: 7px; }
|
||||
|
||||
/* ── Fitness card (inline) ── */
|
||||
.fit-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||||
.fit-av {
|
||||
width: 34px; height: 34px; border-radius: 50%;
|
||||
background: var(--accent-dim); color: var(--accent);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700;
|
||||
}
|
||||
.fit-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
|
||||
.fit-sub { font-size: 11px; color: var(--text-4); margin-top: 1px; }
|
||||
.fit-bar {
|
||||
height: 4px; background: var(--card-hover); border-radius: 2px;
|
||||
margin-bottom: 14px; overflow: hidden;
|
||||
}
|
||||
.fit-fill {
|
||||
height: 100%; border-radius: 2px; background: var(--accent);
|
||||
transition: width 1s cubic-bezier(0.16,1,0.3,1);
|
||||
}
|
||||
.fit-macros { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
|
||||
.fm-v { font-size: 14px; font-weight: 600; font-family: var(--mono); color: var(--text-1); }
|
||||
.fm-u { font-size: 10px; color: var(--text-4); }
|
||||
.fm-l { font-size: 10px; color: var(--text-4); margin-top: 1px; }
|
||||
|
||||
/* ── Modules ── */
|
||||
.db-modules {
|
||||
display: grid;
|
||||
grid-template-columns: 7fr 3fr;
|
||||
gap: 10px;
|
||||
@@ -337,30 +425,15 @@
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 900px) {
|
||||
.dash-header {
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
.dash-greeting {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
.task-trigger {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
.db-header { flex-direction: column; align-items: flex-start; gap: 12px; }
|
||||
.db-greeting { font-size: 22px; }
|
||||
.task-pill { width: 100%; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bento-row,
|
||||
.bento-row-2,
|
||||
.modules-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.bento-row > :global(*),
|
||||
.bento-row-2 > :global(*),
|
||||
.modules-grid > :global(*) {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.db-surface { padding: 0 16px; }
|
||||
.bento, .bento-row2, .db-modules { grid-template-columns: 1fr; }
|
||||
.bento > *, .bento-row2 > *, .db-modules > :global(*) { min-width: 0; max-width: 100%; }
|
||||
.bc-value { font-size: 24px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user