my website at ewancroft.uk
feat: replace two-column grid with masonry-style layout on homepage
- Switched +page.svelte from a fixed grid to Tailwind’s column-based masonry layout.
- Wrapped each card in a break-inside-avoid container and added spacing for smoother flow.
- Improves responsiveness and visual rhythm across viewports.
+12
-3
+12
-3
src/routes/+page.svelte
+12
-3
src/routes/+page.svelte
···
25
25
</p>
26
26
</div>
27
27
28
-
<div class="grid gap-6 lg:grid-cols-2">
29
-
<div class="space-y-6">
28
+
<!-- Masonry-style grid using Tailwind's column utilities -->
29
+
<div class="columns-1 gap-6 lg:columns-2">
30
+
<div class="mb-6 break-inside-avoid">
30
31
<ProfileCard />
32
+
</div>
33
+
<div class="mb-6 break-inside-avoid">
31
34
<MusicStatusCard />
35
+
</div>
36
+
<div class="mb-6 break-inside-avoid">
32
37
<BlueskyPostCard />
33
38
</div>
34
-
<div class="space-y-6">
39
+
<div class="mb-6 break-inside-avoid">
35
40
<DynamicLinks />
41
+
</div>
42
+
<div class="mb-6 break-inside-avoid">
36
43
<PostCard />
44
+
</div>
45
+
<div class="mb-6 break-inside-avoid">
37
46
<TangledRepos />
38
47
</div>
39
48
</div>