mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 03:34:51 +00:00
multipleof4andClaude Opus 5.5
ac5081d294
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>
33 lines
1.5 KiB
HTML
33 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>vibegif</title>
|
|
<meta name="description" content="public domain gallery of 1000 gifs and animated webp">
|
|
<style>
|
|
@font-face{font-family:"Stain";src:url("https://cdn.jsdelivr.net/gh/multipleof4/stain.otf@master/dist/Stain.otf") format("opentype");font-display:swap}
|
|
*{box-sizing:border-box;margin:0}
|
|
body{background:#fff;color:#000;font-family:"Stain",sans-serif;text-align:center;padding:24px 16px}
|
|
h1{font-weight:400;font-size:clamp(22px,5vw,44px);line-height:1.2;margin:8px auto 12px;max-width:900px}
|
|
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}
|
|
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>
|
|
</head>
|
|
<body>
|
|
<h1>public domain gallery of 1000 gifs and animated webp</h1>
|
|
<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>
|
|
<!--gallery-->
|
|
</main>
|
|
</body>
|
|
</html>
|