|
10 | 10 | const { publishedArticles, members, projects }: Props = $props(); |
11 | 11 | </script> |
12 | 12 |
|
13 | | -<header class="animate-fade-slide-in gradient-dark relative overflow-hidden rounded-2xl p-8"> |
| 13 | +<header class="animate-fade-slide-in gradient-dark relative overflow-hidden rounded-2xl p-4 sm:p-6 lg:p-8"> |
14 | 14 | <!-- Decorative elements --> |
15 | 15 | <div class="absolute -top-10 -right-10 h-40 w-40 rounded-full bg-primary/30 blur-3xl"></div> |
16 | 16 | <div class="absolute -bottom-10 left-1/4 h-32 w-32 rounded-full bg-info/20 blur-3xl"></div> |
17 | 17 |
|
18 | | - <div class="relative flex items-start justify-between"> |
| 18 | + <div class="relative flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"> |
19 | 19 | <div> |
20 | 20 | <div class="mb-2 flex items-center gap-2"> |
21 | 21 | <div |
22 | | - class="gradient-primary glow-primary flex h-10 w-10 items-center justify-center rounded-xl" |
| 22 | + class="gradient-primary glow-primary flex h-8 w-8 items-center justify-center rounded-xl sm:h-10 sm:w-10" |
23 | 23 | > |
24 | | - <LayoutGrid class="h-5 w-5 text-white" /> |
| 24 | + <LayoutGrid class="h-4 w-4 text-white sm:h-5 sm:w-5" /> |
25 | 25 | </div> |
26 | 26 | <span class="font-mono text-xs font-semibold tracking-wider text-primary uppercase"> |
27 | 27 | Dashboard |
28 | 28 | </span> |
29 | 29 | </div> |
30 | | - <h1 class="text-3xl font-bold text-white">Welcome back</h1> |
31 | | - <p class="mt-1 text-white/60">Here's what's happening with your content</p> |
| 30 | + <h1 class="text-xl font-bold text-white sm:text-2xl lg:text-3xl">Welcome back</h1> |
| 31 | + <p class="mt-1 text-xs text-white/60 sm:text-sm lg:text-base">Here's what's happening with your content</p> |
32 | 32 | </div> |
33 | 33 | <a |
34 | 34 | href="/" |
35 | 35 | target="_blank" |
36 | | - class="btn gap-2 border-white/20 bg-white/10 text-white btn-sm hover:bg-white/20" |
| 36 | + class="btn gap-2 border-white/20 bg-white/10 text-white btn-sm hover:bg-white/20 sm:btn-md" |
37 | 37 | > |
38 | | - <ExternalLink class="h-4 w-4" /> |
39 | | - View Site |
| 38 | + <ExternalLink class="h-3 w-3 sm:h-4 sm:w-4" /> |
| 39 | + <span class="hidden sm:inline">View Site</span> |
| 40 | + <span class="sm:hidden">Site</span> |
40 | 41 | </a> |
41 | 42 | </div> |
42 | 43 |
|
43 | 44 | <!-- Quick stats row --> |
44 | | - <div class="relative mt-6 flex items-center gap-6"> |
45 | | - <div class="flex items-center gap-2 text-white/80"> |
46 | | - <TrendingUp class="h-4 w-4 text-primary" /> |
47 | | - <span class="text-sm font-medium">{publishedArticles} published</span> |
| 45 | + <div class="relative mt-4 flex flex-wrap items-center gap-2 sm:mt-6 sm:gap-3 lg:gap-6"> |
| 46 | + <div class="flex items-center gap-1.5 text-white/80 sm:gap-2"> |
| 47 | + <TrendingUp class="h-3.5 w-3.5 text-primary sm:h-4 sm:w-4" /> |
| 48 | + <span class="text-xs font-medium sm:text-sm">{publishedArticles} published</span> |
48 | 49 | </div> |
49 | | - <div class="h-4 w-px bg-white/20"></div> |
50 | | - <div class="flex items-center gap-2 text-white/80"> |
51 | | - <Users class="h-4 w-4 text-info" /> |
52 | | - <span class="text-sm font-medium">{members} members</span> |
| 50 | + <div class="hidden h-4 w-px bg-white/20 sm:block"></div> |
| 51 | + <div class="flex items-center gap-1.5 text-white/80 sm:gap-2"> |
| 52 | + <Users class="h-3.5 w-3.5 text-info sm:h-4 sm:w-4" /> |
| 53 | + <span class="text-xs font-medium sm:text-sm">{members} members</span> |
53 | 54 | </div> |
54 | | - <div class="h-4 w-px bg-white/20"></div> |
55 | | - <div class="flex items-center gap-2 text-white/80"> |
56 | | - <Folder class="h-4 w-4 text-secondary-content" /> |
57 | | - <span class="text-sm font-medium">{projects} projects</span> |
| 55 | + <div class="hidden h-4 w-px bg-white/20 sm:block"></div> |
| 56 | + <div class="flex items-center gap-1.5 text-white/80 sm:gap-2"> |
| 57 | + <Folder class="h-3.5 w-3.5 text-secondary-content sm:h-4 sm:w-4" /> |
| 58 | + <span class="text-xs font-medium sm:text-sm">{projects} projects</span> |
58 | 59 | </div> |
59 | 60 | </div> |
60 | 61 | </header> |
0 commit comments