mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 11:44:51 +00:00
Add code-generated animations and build the gallery from public/
Each animation is its own file in gen/<subject>/<action>.js; npm run gen renders the missing ones to public/ as webp + gif. The homepage grid is now generated at build time by a small Vite plugin. First four: ghost/float, heart/beat, cloud/rain, coffee/steam. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
+5
-7
@@ -13,7 +13,10 @@ h1{font-weight:400;font-size:clamp(22px,5vw,44px);line-height:1.2;margin:8px aut
|
||||
p{font-size:clamp(16px,3vw,22px);margin-bottom:16px}
|
||||
iframe{border:0;border-radius:6px;margin-bottom:28px}
|
||||
main{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;max-width:1400px;margin:auto}
|
||||
a{display:flex;align-items:center;justify-content:center;aspect-ratio:1}
|
||||
figure>a{display:flex;align-items:center;justify-content:center;aspect-ratio:1}
|
||||
figcaption{font-size:14px;margin-top:4px}
|
||||
figcaption a{color:#888;text-decoration:none;margin:0 4px}
|
||||
figcaption a:hover{color:#000;text-decoration:underline}
|
||||
img{width:100%;height:100%;object-fit:contain}
|
||||
@media(max-width:480px){main{grid-template-columns:repeat(3,1fr);gap:10px}}
|
||||
</style>
|
||||
@@ -23,12 +26,7 @@ img{width:100%;height:100%;object-fit:contain}
|
||||
<p>feel free to hot link them</p>
|
||||
<iframe src="https://github.com/sponsors/multipleof4/button" title="Sponsor multipleof4" height="32" width="114"></iframe>
|
||||
<main>
|
||||
<a href="/bird/wave.webp"><img src="/bird/wave.webp" alt="bird wave" width="256" height="256" loading="lazy" decoding="async"></a>
|
||||
<a href="/cat/blink.webp"><img src="/cat/blink.webp" alt="cat blink" width="100" height="67" loading="lazy" decoding="async"></a>
|
||||
<a href="/cat/tail.webp"><img src="/cat/tail.webp" alt="cat tail" width="256" height="171" loading="lazy" decoding="async"></a>
|
||||
<a href="/cat/wink.webp"><img src="/cat/wink.webp" alt="cat wink" width="256" height="171" loading="lazy" decoding="async"></a>
|
||||
<a href="/cat/tail.gif"><img src="/cat/tail.gif" alt="cat tail" width="120" height="90" loading="lazy" decoding="async"></a>
|
||||
<a href="/heart/wink.gif"><img src="/heart/wink.gif" alt="heart wink" width="128" height="128" loading="lazy" decoding="async"></a>
|
||||
<!--gallery-->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user