my website at ewancroft.uk
improvements
+53
-44
+48
-29
src/lib/components/archive/ArchiveHeader.svelte
+48
-29
src/lib/components/archive/ArchiveHeader.svelte
···
23
23
$: wordLabel = totalWordCount === 1 ? "word" : "words";
24
24
</script>
25
25
26
-
<header
27
-
class="mb-2 pl-4"
28
-
>
29
-
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6 pb-4">
30
-
31
-
<!-- Left: Title & Subtitle -->
32
-
<div class="flex items-start gap-4">
33
-
<div class="flex items-center justify-center w-14 h-14 bg-button text-text rounded-2xl shadow-sm">
34
-
<DocumentIcon size="28" />
26
+
<header class="mb-2 px-4 sm:px-6">
27
+
<div class="max-w-7xl mx-auto">
28
+
<!-- Main content container with better responsive flow -->
29
+
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-1 sm:gap-4 lg:gap-8 pb-3 sm:pb-4 lg:pb-6">
30
+
31
+
<!-- Left: Title & Subtitle -->
32
+
<div class="flex items-center gap-4 sm:gap-5">
33
+
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 bg-card rounded-xl shadow-sm">
34
+
<DocumentIcon size="24"/>
35
+
</div>
36
+
<div class="min-w-0 flex-1">
37
+
<h1 class="text-2xl sm:text-3xl font-extrabold text-primary leading-tight tracking-tight">
38
+
Blog Archive
39
+
</h1>
40
+
<p class="text-xs sm:text-sm text-text/80 mt-1">Unapologetically me</p>
41
+
</div>
35
42
</div>
36
-
<div>
37
-
<h1 class="text-3xl font-extrabold text-primary leading-tight tracking-tight">Blog Archive</h1>
38
-
<p class="text-sm text-text/80 mt-1">Unapologetically me</p>
39
-
</div>
40
-
</div>
41
43
42
-
<!-- Right: Stats -->
43
-
<div class="flex items-center gap-8">
44
-
<div class="flex flex-col items-center">
45
-
<span class="text-2xl font-bold text-primary">{formatNumber(totalPosts)}</span>
46
-
<span class="text-xs text-text/70 uppercase tracking-wide">{postLabel}</span>
47
-
</div>
44
+
<!-- Right: Stats with improved responsive layout -->
45
+
<div class="flex items-center justify-center lg:justify-end">
46
+
<div class="flex items-center gap-6 sm:gap-8">
47
+
48
+
<!-- Posts stat -->
49
+
<div class="flex flex-col items-center">
50
+
<span class="text-xl sm:text-2xl font-bold text-primary tabular-nums">
51
+
{formatNumber(totalPosts)}
52
+
</span>
53
+
<span class="text-xs text-text/70 uppercase tracking-wide font-medium">
54
+
{postLabel}
55
+
</span>
56
+
</div>
48
57
49
-
<div class="w-px h-8 bg-text/20"></div>
58
+
<!-- Read time stat -->
59
+
<div class="flex flex-col items-center">
60
+
<span class="text-base sm:text-lg font-semibold text-text tabular-nums">
61
+
{totalReadTime}
62
+
</span>
63
+
<span class="text-xs text-text/70 uppercase tracking-wide font-medium">
64
+
Read Time
65
+
</span>
66
+
</div>
50
67
51
-
<div class="flex gap-6">
52
-
<div class="flex flex-col items-center">
53
-
<span class="text-lg font-semibold text-text">{totalReadTime}</span>
54
-
<span class="text-xs text-text/70 uppercase tracking-wide">Read Time</span>
55
-
</div>
56
-
<div class="flex flex-col items-center">
57
-
<span class="text-lg font-semibold text-text">{formatNumber(totalWordCount)}</span>
58
-
<span class="text-xs text-text/70 uppercase tracking-wide">{wordLabel}</span>
68
+
<!-- Word count stat -->
69
+
<div class="flex flex-col items-center">
70
+
<span class="text-base sm:text-lg font-semibold text-text tabular-nums">
71
+
{formatNumber(totalWordCount)}
72
+
</span>
73
+
<span class="text-xs text-text/70 uppercase tracking-wide font-medium">
74
+
{wordLabel}
75
+
</span>
76
+
</div>
77
+
59
78
</div>
60
79
</div>
61
80
</div>
+5
-15
src/lib/components/archive/YearTabs.svelte
+5
-15
src/lib/components/archive/YearTabs.svelte
···
12
12
</script>
13
13
14
14
<div
15
-
class="flex mb-6 pl-4 border-b border-button overflow-x-auto relative tabs-container"
15
+
class="flex mb-3 sm:mb-4 lg:mb-6 pl-4 overflow-x-auto relative tabs-container"
16
16
>
17
-
<div class="tab-indicator-container absolute bottom-0 left-0 h-0.5 w-full">
18
-
<div
19
-
class="tab-indicator bg-primary h-full absolute bottom-0 transition-all duration-300 ease-out"
20
-
style="left: {indicatorLeft}px; width: 100px;"
21
-
></div>
22
-
</div>
23
-
24
17
{#each groupedByYear as { year }, i}
25
18
<button
26
-
class="w-[100px] min-w-[100px] px-4 py-2 font-medium transition-all duration-300 relative z-10 text-center
27
-
{activeYear === year
28
-
? 'text-primary'
29
-
: 'text-text opacity-80 hover:text-primary-hover'}"
19
+
class="w-[100px] min-w-[100px] px-4 py-2 font-medium transition-all duration-300 relative z-10 flex items-center justify-center"
30
20
onclick={() => setActiveYear(year)}
31
21
>
32
22
<span
33
-
class="{activeYear === year
34
-
? 'transform transition-transform duration-300 scale-105'
35
-
: ''}"
23
+
class="px-3 py-1 rounded-full transition-all duration-300 {activeYear === year
24
+
? 'bg-primary text-[var(--background-color)] transform scale-105'
25
+
: 'text-text opacity-80 hover:text-primary hover:bg-primary/10'}"
36
26
>
37
27
{year}
38
28
</span>