diff --git a/src/listing.html b/src/listing.html index 525cf82..ab30750 100644 --- a/src/listing.html +++ b/src/listing.html @@ -29,7 +29,7 @@ --item-link: #ACF; --link-hover-bg: #556; --sort: lightseagreen; - --search-bg: background-color: rgba(0, 0, 0, 0.9); + --search-bg: rgba(0, 0, 0, 0.9); } } html { @@ -152,8 +152,8 @@ display: flex; flex-direction: row-reverse; position: fixed; - top: 1em; - right: 1em; + top: 0.5em; + right: 0.5em; z-index: 1000; } #search { @@ -186,6 +186,7 @@ position: relative; width: 100%; aspect-ratio: 1 / 1; + text-align: center; background-size: cover; background-position: center center; background-color: var(--thumbnail-bg); @@ -216,7 +217,8 @@ @media (max-width: 768px) { .image-grid { - grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); + /* 119 makes 3 across on iPhone SE */ + grid-template-columns: repeat(auto-fit, minmax(119px, 2fr)); } } @@ -474,6 +476,10 @@

~{linked-path}

]); } + function makeEmpty() { + return createElem('div', {className: 'empty'}); + } + const makeAudio = makeIcon('icon-audio'); const makeVideoLink = makeIcon('icon-video'); const makeAudioLink = makeIcon('icon-audio'); @@ -486,11 +492,13 @@

~{linked-path}

png: makeImage, svg: makeImage, gif: makeImage, + webp: makeImage, mp4: makeVideo, m4v: makeVideo, + webm: makeVideo, + mkv: makeVideo, mov: makeVideoLink, avi: makeVideoLink, - mkv: makeVideo, wmv: makeVideoLink, mp3: makeAudio, m4a: makeAudio, @@ -509,6 +517,12 @@

~{linked-path}

imageGrid.appendChild(fn(e)); }); + // these are needed to make the images not + // spread when there are too few. + for (let i = 0; i < 10; ++i) { + imageGrid.appendChild(makeEmpty()) + } + search(); }