finxol.io
Personal blog
finxol.io
blog
fix: improve print and mobile styles
+13
-3
+13
-3
app/components/content/Bookmark.vue
+13
-3
app/components/content/Bookmark.vue
···
9
9
:to="url"
10
10
:class="[
11
11
'flex flex-row items-center justify-start gap-4',
12
-
'px-2 py-4 md:px-4 md:py-6 not-prose',
12
+
'px-4 py-4 md:px-6 md:py-6 not-prose',
13
13
'border border-gray-300 dark:border-gray-700 border-solid border-2 rounded-lg',
14
14
'bg-stone-200/25 hover:bg-stone-200/50 dark:bg-stone-700/25 dark:hover:bg-stone-700/50',
15
-
'transition-colors duration-200'
15
+
'transition-colors duration-200',
16
+
'bookmark-link'
16
17
]"
17
18
>
18
19
<Icon name="ri:bookmark-fill" size="1.5rem" class="text-yellow-700" />
19
-
<div class="flex flex-col items-start justify-start">
20
+
<div class="bookmark-content flex flex-col items-start justify-start font-bold">
20
21
<slot />
21
22
<span class="text-xs text-gray-400 dark:text-gray-600">
22
23
{{props.url}}
···
24
25
</div>
25
26
</NuxtLink>
26
27
</template>
28
+
29
+
<style scope>
30
+
@media print {
31
+
a.bookmark-link::after {
32
+
content: "";
33
+
display: none;
34
+
}
35
+
}
36
+
</style>