diff --git a/src/image-gallery/images/gallery-1.avif b/src/image-gallery/images/gallery-1.avif new file mode 100644 index 0000000..c6b0abe Binary files /dev/null and b/src/image-gallery/images/gallery-1.avif differ diff --git a/src/image-gallery/images/gallery-10.avif b/src/image-gallery/images/gallery-10.avif new file mode 100644 index 0000000..ffd694a Binary files /dev/null and b/src/image-gallery/images/gallery-10.avif differ diff --git a/src/image-gallery/images/gallery-11.avif b/src/image-gallery/images/gallery-11.avif new file mode 100644 index 0000000..82b3e4b Binary files /dev/null and b/src/image-gallery/images/gallery-11.avif differ diff --git a/src/image-gallery/images/gallery-12.avif b/src/image-gallery/images/gallery-12.avif new file mode 100644 index 0000000..440c81a Binary files /dev/null and b/src/image-gallery/images/gallery-12.avif differ diff --git a/src/image-gallery/images/gallery-13.avif b/src/image-gallery/images/gallery-13.avif new file mode 100644 index 0000000..9fec87f Binary files /dev/null and b/src/image-gallery/images/gallery-13.avif differ diff --git a/src/image-gallery/images/gallery-14.avif b/src/image-gallery/images/gallery-14.avif new file mode 100644 index 0000000..39f4177 Binary files /dev/null and b/src/image-gallery/images/gallery-14.avif differ diff --git a/src/image-gallery/images/gallery-15.avif b/src/image-gallery/images/gallery-15.avif new file mode 100644 index 0000000..163aaed Binary files /dev/null and b/src/image-gallery/images/gallery-15.avif differ diff --git a/src/image-gallery/images/gallery-16.avif b/src/image-gallery/images/gallery-16.avif new file mode 100644 index 0000000..bfacd0f Binary files /dev/null and b/src/image-gallery/images/gallery-16.avif differ diff --git a/src/image-gallery/images/gallery-17.avif b/src/image-gallery/images/gallery-17.avif new file mode 100644 index 0000000..f28b8e2 Binary files /dev/null and b/src/image-gallery/images/gallery-17.avif differ diff --git a/src/image-gallery/images/gallery-18.avif b/src/image-gallery/images/gallery-18.avif new file mode 100644 index 0000000..fedffc6 Binary files /dev/null and b/src/image-gallery/images/gallery-18.avif differ diff --git a/src/image-gallery/images/gallery-2.avif b/src/image-gallery/images/gallery-2.avif new file mode 100644 index 0000000..b62e4d9 Binary files /dev/null and b/src/image-gallery/images/gallery-2.avif differ diff --git a/src/image-gallery/images/gallery-3.avif b/src/image-gallery/images/gallery-3.avif new file mode 100644 index 0000000..6b9100b Binary files /dev/null and b/src/image-gallery/images/gallery-3.avif differ diff --git a/src/image-gallery/images/gallery-4.avif b/src/image-gallery/images/gallery-4.avif new file mode 100644 index 0000000..7e75541 Binary files /dev/null and b/src/image-gallery/images/gallery-4.avif differ diff --git a/src/image-gallery/images/gallery-5.avif b/src/image-gallery/images/gallery-5.avif new file mode 100644 index 0000000..8c583b6 Binary files /dev/null and b/src/image-gallery/images/gallery-5.avif differ diff --git a/src/image-gallery/images/gallery-6.avif b/src/image-gallery/images/gallery-6.avif new file mode 100644 index 0000000..2231110 Binary files /dev/null and b/src/image-gallery/images/gallery-6.avif differ diff --git a/src/image-gallery/images/gallery-7.avif b/src/image-gallery/images/gallery-7.avif new file mode 100644 index 0000000..2db3115 Binary files /dev/null and b/src/image-gallery/images/gallery-7.avif differ diff --git a/src/image-gallery/images/gallery-8.avif b/src/image-gallery/images/gallery-8.avif new file mode 100644 index 0000000..92a2be0 Binary files /dev/null and b/src/image-gallery/images/gallery-8.avif differ diff --git a/src/image-gallery/images/gallery-9.avif b/src/image-gallery/images/gallery-9.avif new file mode 100644 index 0000000..9f76ea7 Binary files /dev/null and b/src/image-gallery/images/gallery-9.avif differ diff --git a/src/image-gallery/index.html b/src/image-gallery/index.html new file mode 100644 index 0000000..bae10bc --- /dev/null +++ b/src/image-gallery/index.html @@ -0,0 +1,119 @@ + + + + + + Baseline Zoo + + + + + + +
+ + + + + +

+ +
+ + + + diff --git a/src/image-gallery/script.js b/src/image-gallery/script.js new file mode 100644 index 0000000..48849cf --- /dev/null +++ b/src/image-gallery/script.js @@ -0,0 +1,24 @@ +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(); +}); diff --git a/src/image-gallery/style.css b/src/image-gallery/style.css new file mode 100644 index 0000000..8e4c813 --- /dev/null +++ b/src/image-gallery/style.css @@ -0,0 +1,196 @@ +.gallery { + display: grid; + gap: 0.2em; + grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); +} + +dialog { + --btn-bg-color: var(--color-base); + + 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; +}