make download link more obvious but hide it for tiny images

This commit is contained in:
Rhiannon Morris 2020-11-24 21:18:20 +01:00
parent 9a54cc0d53
commit ed88f03bab
2 changed files with 8 additions and 4 deletions

View file

@ -51,6 +51,7 @@ make' root prefix nsfw dataDir dir info@(Info {date, title, artist, bg}) = do
= head images = head images
let download0 = fromMaybe path0 download0' let download0 = fromMaybe path0 download0'
let path0' = pageFile path0 let path0' = pageFile path0
let tinyCls = if any (tiny . #second) images then [b| class=tiny|] else ""
let descSection = makeDesc $ descFor nsfw info let descSection = makeDesc $ descFor nsfw info
let tagsList = makeTags undir $ tagsFor nsfw info let tagsList = makeTags undir $ tagsFor nsfw info
@ -126,7 +127,7 @@ make' root prefix nsfw dataDir dir info@(Info {date, title, artist, bg}) = do
$2.buttonBar $2.buttonBar
<main> <main>
<figure id=mainfig data-width=$width0 data-height=$height0> <figure id=mainfig data-width=$width0 data-height=$height0$tinyCls>
$warning' $warning'
<a id=mainlink href="$download0" title="download full version"> <a id=mainlink href="$download0" title="download full version">
<img id=mainimg src="$path0'" alt=""> <img id=mainimg src="$path0'" alt="">
@ -261,6 +262,9 @@ makeUpdate (Update {date, desc}) = [b|@8
data Size = Size {width, height :: !Int} deriving (Eq, Show) data Size = Size {width, height :: !Int} deriving (Eq, Show)
tiny :: Size -> Bool
tiny (Size {width, height}) = width < 250 || height < 250
imageSize :: FilePath -> FilePath -> IO Size imageSize :: FilePath -> FilePath -> IO Size
imageSize dir img = do imageSize dir img = do
-- "[0]" to get the first frame of an animation -- "[0]" to get the first frame of an animation

View file

@ -22,15 +22,15 @@
background: hsl(340, 45%, 65%); background: hsl(340, 45%, 65%);
} }
#mainfig::after { #mainfig:not(.tiny)::after {
content: attr(data-width) '×' attr(data-height); content: 'click for full (' attr(data-width) '×' attr(data-height) ')';
position: absolute; position: absolute;
top: calc(0px - var(--border-thickness)); top: calc(0px - var(--border-thickness));
right: calc(0px - var(--border-thickness)); right: calc(0px - var(--border-thickness));
padding: 0.15em 1.25em 0.15em 0.75em; padding: 0.15em 1.25em 0.15em 0.75em;
font-size: 60%; font-size: 70%;
font-weight: 700; font-weight: 700;
background: hsl(0, 0%, 0%, 50%); background: hsl(0, 0%, 0%, 50%);