finxol.io
Personal blog
finxol.io
blog
fix(ui): alignment & colour
+3
-3
+3
-3
app/pages/index.vue
+3
-3
app/pages/index.vue
···
60
60
</h2>
61
61
62
62
<section class="my-6 flex flex-row justify-between items-start gap-4">
63
-
<p class="text-sm text-gray-500 dark:text-gray-400 w-max text-nowrap">
63
+
<p class="text-sm text-gray-500 dark:text-gray-400 w-max text-nowrap mt-1">
64
64
Filter posts:
65
65
</p>
66
-
<div class="overflow-x-scroll flex flex-row items-start">
66
+
<div class="overflow-x-scroll flex flex-row items-center">
67
67
<button
68
68
v-for="tag in tags"
69
69
:key="tag"
70
70
:class="[
71
71
'flex px-2 py-1 mr-2 mb-2 w-max flex-row items-center gap-2',
72
-
`${tag === filter ? 'bg-gray-500 dark:bg-gray-500 text-gray-100 dark:text-gray-100' : 'bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200'}`,
72
+
`${tag === filter ? 'bg-stone-500 dark:bg-stone-500 text-stone-100 dark:text-stone-100' : 'bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-400'}`,
73
73
'rounded-full text-sm font-medium lowercase text-nowrap'
74
74
]"
75
75
@click="filter = filter === tag ? undefined : tag"