Skip to content

Instantly share code, notes, and snippets.

@ulrischa

ulrischa/baseline-zoo.markdown

Created March 12, 2026 19:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ulrischa/75a884a5c3c39625fcf3a3dbe8e03df0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ulrischa/75a884a5c3c39625fcf3a3dbe8e03df0 to your computer and use it in GitHub Desktop.
Download ZIP
Baseline Zoo
Raw
index.html
<main>
<ul class="gallery">
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-1.avif" alt="A small fluffy white cloud of a dog on green grass." />
<button class="show">Say hi to <span>Mochi</span></button>
<p class="credit" hidden>Mochi - Photo by author</p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-2.avif" alt="Two small brown dogs wearing adorable red hair ribbons." />
<button class="show">Say hi to <span>Sisters</span></button>
<p class="credit" hidden>Mochi - Photo by author</p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-3.avif" alt="A profile headshot of a blue macaw with a striking yellow chest." />
<button class="show">Say hi to <span>Mr. Macaw</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@imandrewpons?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Andrew Pons</a> on <a href="https://unsplash.com/photos/close-up-of-a-yellow-and-blue-macaw-lylCw4zcA7I?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-4.avif" alt="A kingfisher with a long black beak and irridescent blue feathers." />
<button class="show">Say hi to <span>Chirp</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@borisworkshop?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Boris Smokrovic</a> on <a href="https://unsplash.com/photos/blue-and-brown-bird-on-brown-tree-trunk-DPXytK8Z59Y?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-5.avif" alt="A dour looking pug in a yellow raincoat." />
<button class="show">Say hi to <span>Grumps</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@charlesdeluvio?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">charlesdeluvio</a> on <a href="https://unsplash.com/photos/adult-black-puppy-in-yellow-raincoat-lJJlaUWYrPE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-6.avif" alt="A strikingly pink flamingo preens their feathers against a blue sky." />
<button class="show">Say hi to <span>Flambe</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@edrxckk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Edrick Krozendijk</a> on <a href="https://unsplash.com/photos/pink-flamingo-in-close-up-photography-25JxltstHSc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-7.avif" alt="A Plumbeous Water Redstart, which is a small blue bird with a red tail, eyes the camera warily." loading="lazy" />
<button class="show">Say hi to <span>Sassy</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@deepaknautiyal?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Deepak Nautiyal</a> on <a href="https://unsplash.com/photos/blue-and-red-bird-during-daytime-Nbv7PkL_rvI?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-8.avif" alt="Four sheep stand in a field looking straight at the camera." loading="lazy" />
<button class="show">Say hi to <span>Meh</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@judithprins?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Judith Prins</a> on <a href="https://unsplash.com/photos/four-lambs-on-ground-AJa7S1fjy-I?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-9.avif" alt="A polar bear stands and waves with endless ice behind them." loading="lazy" />
<button class="show">Say hi to <span>Bob</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@hansjurgen007?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Hans-Jurgen Mager</a> on <a href="https://unsplash.com/photos/polar-bear-on-snow-covered-ground-during-daytime-qQWV91TTBrE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-10.avif" alt="A giraffe towers over the camera, with the long neck extending out of the frame." loading="lazy" />
<button class="show">Say hi to <span>Hank</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@jeremiahdelmar?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Jeremiah Del Mar</a> on <a href="https://unsplash.com/photos/brown-giraffe-under-blue-sky-during-daytime-6wEM5ZJWVDQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-11.avif" alt="A dust-covered rhinocerous walks through a dust-covered landscape." loading="lazy" />
<button class="show">Say hi to <span>Buddy</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@rhino007?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Keith Markilie</a> on <a href="https://unsplash.com/photos/adult-rhinosaurus-jBjQA3LU9Dc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-12.avif" alt="A Lilac-breasted Roller, which is a multicolored small bird, perches on a stick." loading="lazy" />
<button class="show">Say hi to <span>Bwird</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@davidclode?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">David Clode</a> on <a href="https://unsplash.com/photos/shallow-focus-photography-of-multi-colored-bird-7_TTPznVIQI?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-13.avif" alt="A hedgehog wears a small plastic crown." loading="lazy" />
<button class="show">Say hi to <span>Quill</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@hedgehog90?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Liudmyla Denysiuk</a> on <a href="https://unsplash.com/photos/brown-hedgehog-iJ9o00UeAWk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-14.avif" alt="An orange clownfish with a white strip peers out from purple anemone" loading="lazy" />
<button class="show">Say hi to <span>Bubble</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@davidclode?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">David Clode</a> on <a href="https://unsplash.com/photos/clown-fish-in-purple-and-white-coral-reef-Gv-Cx3_clZ4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-15.avif" alt="A tiny green and orange frog and huge eyes desperately clings to the top of a flower bud." loading="lazy" />
<button class="show">Say hi to <span>Greg</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@sleblanc01?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Stephanie LeBlanc</a> on <a href="https://unsplash.com/photos/green-frog-on-red-post-SVwOposMxHY?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-16.avif" alt="A brown sea turtle with white lines in a cellular pattern on their flippers swims through a blue ocean." loading="lazy" />
<button class="show">Say hi to <span>Flash</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@wexor?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Wexor Tmg</a> on <a href="https://unsplash.com/photos/brown-turtle-swimming-underwater-L-2p8fapOA8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-17.avif" alt="Two puffins sit on a cliff amongst purple and white clover." loading="lazy" />
<button class="show">Say hi to <span>Peg & Jax</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@wwwynand?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Wynand van Poortvliet</a> on <a href="https://unsplash.com/photos/two-black-and-white-birds-4AmyOdXZAQc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="https://assets.codepen.io/11149797/gallery-18.avif" alt="A fluffy little white dark peeks out from a leafy plant." loading="lazy" />
<button class="show">Say hi to <span>Frank</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@alvannee?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Alvan Nee</a> on <a href="https://unsplash.com/photos/short-coat-beige-puppy-behind-green-leaves-CfDAo3C3bvQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
</ul>
<dialog id="dialog">
<button class="close">close</button>
<img id="dialog-image" src="" />
<p id="dialog-credit"></p>
</dialog>
</main>
Raw
script.js
const dialogElem = document.getElementById("dialog");
const dialogImageElem = document.getElementById("dialog-image");
const dialogCreditElem = document.getElementById("dialog-credit");
const showBtns = document.querySelectorAll(".show");
const closeBtn = document.querySelector(".close");
[...showBtns].forEach((showBtn) => {
showBtn.addEventListener("click", (event) => {
const listItem = event.currentTarget.closest("li");
const creditHTML = listItem.querySelector(".credit").innerHTML;
dialogCreditElem.innerHTML = creditHTML;
const imgSrc = listItem.querySelector("img").getAttribute("src");
dialogImageElem.setAttribute("src", imgSrc);
dialogImageElem.addEventListener("load", () => {
dialogElem.showModal();
});
});
});
closeBtn.addEventListener("click", () => {
dialogElem.close();
});
Raw
style.css
.gallery {
display: grid;
gap: 0.2em;
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
}
dialog {
--btn-bg-color: var(--color-base);
align-content: start;
background-color: transparent;
border: thin;
max-block-size: 80vh;
max-inline-size: 80vw;
opacity: var(--dialog-opacity, 0);
padding: 0;
scale: var(--dialog-scale, 0);
@media (prefers-reduced-motion: reduce) {
--dialog-scale: 1;
}
transition: display var(--fast) var(--ease) allow-discrete,
opacity var(--fast) var(--ease),
overlay var(--fast) var(--ease) allow-discrete,
scale var(--fast) var(--ease);
&::backdrop {
background-color: var(--backdrop-bg, oklch(0.2 0.6 200 / 0.8));
opacity: var(--dialog-opacity, 0);
transition: background-color var(--fast), display var(--fast) allow-discrete,
opacity var(--fast), overlay var(--fast) allow-discrete;
}
&[open] {
--dialog-opacity: 1;
--dialog-scale: 1;
display: grid;
grid-template:
'dialog-close' auto
'dialog-image' auto
'dialog-credit' auto / 1fr;
}
@starting-style {
&[open] {
--dialog-opacity: 0;
--dialog-scale: 0;
@media (prefers-reduced-motion: reduce) {
--dialog-scale: 1;
}
}
&[open]::backdrop {
--backdrop-bg: transparent;
--dialog-opacity: 0;
}
}
#dialog-image {
grid-area: dialog-close / dialog-close / dialog-credit / dialog-credit;
}
#dialog-credit {
backdrop-filter: blur(1em) brightness(60%);
color: white;
grid-area: dialog-credit;
margin: 0;
padding: 0.5em;
}
}
[data-img] {
aspect-ratio: 1 / 1;
grid-area: image-start / image-start / caption-end / caption-end;
object-fit: cover;
}
li {
display: grid;
grid-template:
"image" 1fr
"button" auto / 1fr;
}
button {
--btn-filter: blur(1em);
backdrop-filter: var(--btn-filter);
border-color: oklch(from var(--color-contrast) l c h / 0.5);
border-style: solid;
border-width: var(--border-size, 1px) 0 0 0;
text-shadow: 0.05rem 0.05rem 0.2rem var(--text-shadow-color, transparent);
transition: backdrop-filter var(--fast) var(--ease),
outline var(--fast) var(--ease), text-shadow var(--fast) var(--ease);
@media (min-resolution: 2x) {
--border-size: 0.5px;
}
&:hover,
&:focus {
--btn-filter: blur(0.75em) saturate(350%);
--text-shadow-color: oklch(from var(--color-base) 10% c h);
}
}
.show {
grid-area: button;
}
/* Presentational styles */
html {
--color-base: oklch(0.4 0.2 210);
--color-contrast: oklch(
from var(--color-base) calc(l + 0.6) calc(c - 0.15) h
);
--fast: 0.35s;
--ease: cubic-bezier(0.5, 0.75, 0.75, 1.25);
background-color: var(--color-base);
color: var(--color-contrast);
font-size: calc(0.75em + 1vw);
font-family: "Varta", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
margin: 0;
}
:any-link {
color: var(--action-color, var(--color-contrast));
text-decoration-color: inherit;
text-decoration-line: underline;
text-decoration-thickness: var(--link-underline-thickness, 1px);
text-underline-offset: 0.25em;
transition:
color var(--fast) var(--ease),
text-decoration-color var(--fast) var(--ease),
text-decoration-thickness var(--fast) var(--ease);
&:is(:hover, :focus) {
--action-color: oklch(from var(--color-base) 90% c h);
--link-underline-thickness: 3px;
}
}
img {
block-size: auto;
inline-size: 100%;
max-block-size: inherit;
}
button {
appearance: none;
background-color: var(--btn-bg-color, transparent);
color: var(--action-color, var(--color-contrast));
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: var(--btn-padding, 0.5em);
outline: 2px var(--outline-color, transparent) solid;
outline-offset: -2px;
span {
font-weight: 670;
}
&:focus {
--outline-color: white;
}
}
.close {
--btn-padding: 0.25em 0.5em;
grid-area: dialog-close;
place-self: start end;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment