diff --git a/src/components/Bookmark.tsx b/src/components/Bookmark.tsx
index 5fb52b6..95afe56 100644
--- a/src/components/Bookmark.tsx
+++ b/src/components/Bookmark.tsx
@@ -11,6 +11,9 @@ import { BookmarkEditModal } from "./BookmarkEditModal.tsx"
import { useMutation, useQueryClient } from "@tanstack/solid-query"
import { useWebHaptics } from "../utils/haptics.ts"
import { client } from "../apiclient.ts"
+import { InternetArchiveIcon } from "../utils/icons.tsx"
+
+import "./ui/tooltip.css"
interface BookmarkProps {
bookmark: Bookmark & { id: string }
@@ -221,6 +224,16 @@ export function Bookmark(props: BookmarkProps) {
>
+
+
+
diff --git a/src/components/ui/tooltip.css b/src/components/ui/tooltip.css
new file mode 100644
index 0000000..903b576
--- /dev/null
+++ b/src/components/ui/tooltip.css
@@ -0,0 +1,23 @@
+[data-tooltip] {
+ &::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ top: 120%;
+ transform: translateY(-5px);
+ background-color: var(--primary-text);
+ color: var(--page-bg);
+ padding: 5px 10px;
+ border-radius: 4px;
+ font-size: 0.75rem;
+ white-space: nowrap;
+ z-index: 1000;
+ opacity: 0;
+ transition: all 0.2s ease;
+ pointer-events: none;
+ }
+
+ &:hover::after {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/src/routes/index.css b/src/routes/index.css
index d5c469b..36e0704 100644
--- a/src/routes/index.css
+++ b/src/routes/index.css
@@ -86,7 +86,6 @@
border-radius: var(--radius);
background: var(--secondary);
border: 1px solid oklch(from var(--primary-text) l c h / 0.1);
- overflow: hidden;
transition: all 0.25s ease;
&:hover {
@@ -98,6 +97,7 @@
position: relative;
width: 100%;
aspect-ratio: 16/9;
+ border-radius: var(--radius);
overflow: hidden;
background: oklch(from var(--primary) l c h / 0.05);
object-fit: cover;
diff --git a/src/routes/main.css b/src/routes/main.css
index 940a9df..be62859 100644
--- a/src/routes/main.css
+++ b/src/routes/main.css
@@ -47,7 +47,7 @@
z-index: 1;
}
- & ~ :is(a, button, select, input) {
+ & ~ :is(a, button, select, input, [class*="button"]) {
z-index: 2;
}
}
diff --git a/src/utils/icons.tsx b/src/utils/icons.tsx
new file mode 100644
index 0000000..72f4400
--- /dev/null
+++ b/src/utils/icons.tsx
@@ -0,0 +1,20 @@
+import { JSX } from "solid-js/jsx-runtime"
+
+export function InternetArchiveIcon(
+ props: JSX.IntrinsicElements["svg"] & { size: number },
+) {
+ return (
+
+ )
+}