tracks lexicons and how many times they appeared on the jetstream
feat: work a bit better on phones
+7
-5
+7
-5
src/routes/+page.svelte
+7
-5
src/routes/+page.svelte
···
46
46
<meta name="description" content="tracks bluesky events by collection" />
47
47
</svelte:head>
48
48
49
-
<div class="max-w-[60vw] mx-auto p-2">
49
+
<div class="md:max-w-[60vw] mx-auto p-2">
50
50
<header class="text-center mb-8">
51
51
<h1 class="text-4xl font-bold mb-2 text-gray-900">
52
52
bluesky event tracker
···
58
58
59
59
<div class="mx-auto w-fit grid grid-cols-1 md:grid-cols-2 mb-8">
60
60
<div
61
-
class="bg-gradient-to-r from-blue-50 to-blue-100 p-6 rounded-lg border border-blue-200"
61
+
class="bg-gradient-to-r from-blue-50 to-blue-100 p-3 md:p-6 rounded-lg border border-blue-200"
62
62
>
63
63
<h3 class="text-base font-medium text-blue-700 mb-2">
64
64
total events
···
68
68
</p>
69
69
</div>
70
70
<div
71
-
class="bg-gradient-to-r from-green-50 to-green-100 p-6 rounded-lg border border-green-200"
71
+
class="bg-gradient-to-r from-green-50 to-green-100 p-3 md:p-6 rounded-lg border border-green-200"
72
72
>
73
73
<h3 class="text-base font-medium text-green-700 mb-2">
74
74
unique collections
···
101
101
<h2 class="text-2xl font-bold mb-6 text-gray-900">
102
102
events by collection
103
103
</h2>
104
-
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
104
+
<div
105
+
class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
106
+
>
105
107
{#each events as event, index (event.nsid)}
106
108
<div
107
-
class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow duration-200 hover:-translate-y-1 transform"
109
+
class="mx-auto md:mx-0 w-fit bg-white border border-gray-200 rounded-lg md:p-6 hover:shadow-lg transition-shadow duration-200 hover:-translate-y-1 transform"
108
110
>
109
111
<div class="flex justify-between items-start mb-3">
110
112
<div