diff --git a/index.html b/index.html
index 3fb701d..b912994 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,14 @@ p {
gap: 30px;
justify-content: center;
}
+.control {
+ background-color: transparent;
+ color: white;
+ border: none;
+ padding: 0;
+ margin: 0;
+ cursor: pointer;
+}
.thumbnail-card {
height: 400px;
width: 400px;
@@ -79,7 +87,7 @@ p {
z-index: -1;
position: fixed;
height: fit-content;
- font-size: 70px;
+ font-size: 90px;
top: 0;
bottom: 0;
margin: auto 0;
@@ -93,9 +101,9 @@ p {
}
#close {
position: absolute;
- font-size: 40px;
- top: 10px;
- right: 20px;
+ font-size: 50px;
+ top: 5px;
+ right: 40px;
}
#focused-panel.unzoomed > div.blurhash-frame {
max-height: 80vh;
diff --git a/src/UI.purs b/src/UI.purs
index 6de26aa..529c34d 100644
--- a/src/UI.purs
+++ b/src/UI.purs
@@ -45,9 +45,9 @@ widthHeight w h = "width:" <> (show w) <> "px;height:" <> (show h) <> "px;"
renderThumbnail :: forall m. Int -> Image -> H.ComponentHTML Event () m
renderThumbnail pos image =
- HH.div
+ HH.button
(
- [ HP.classes $ ClassName <$> ["thumbnail-card", "blurhash-frame"]
+ [ HP.classes $ ClassName <$> ["thumbnail-card", "blurhash-frame", "control"]
, HE.onClick \_ -> Focus pos
]
<>
@@ -82,20 +82,23 @@ renderFocused zoom image =
[ HP.id "focused-bg"
, HE.onClick \_ -> Unfocus
]
- [ HH.div
+ [ HH.button
[ HP.id "close"
+ , HP.class_ $ ClassName "control"
]
[ HH.text "⨯"
]
]
- , HH.div
+ , HH.button
[ HP.id "prev-image"
+ , HP.class_ $ ClassName "control"
, HE.onClick \_ -> Pan false
]
[ HH.text "❰"
]
- , HH.div
+ , HH.button
[ HP.id "next-image"
+ , HP.class_ $ ClassName "control"
, HE.onClick \_ -> Pan true
]
[ HH.text "❱"