diff --git a/.docs/.eleventy.js b/.docs/.eleventy.js index 87d5aa5..870513b 100644 --- a/.docs/.eleventy.js +++ b/.docs/.eleventy.js @@ -47,19 +47,16 @@ async function shortcode_image_url(src) { return data.url; } -async function shortcode_cssbox(content, src) { - let idprev = `image-${nextid}`; - nextid += 1; - let idthis = `image-${nextid}`; - let idnext = `image-${nextid + 1}`; - return `
-${await shortcode_image(src, content, "cssbox_thumb", "300w")} - ${await shortcode_image(src, content, "", "1920w")} - - -< -> -
`; +async function shortcode_gallerybox(content, src, idthis, idprev, idnext) { + return `
+ + ${await shortcode_image(src, "", "", "1920w")} + +
${content}
+ + + +
`; } module.exports = function(eleventyConfig) { @@ -68,5 +65,5 @@ module.exports = function(eleventyConfig) { eleventyConfig.addShortcode("image", shortcode_image); eleventyConfig.addJavaScriptFunction("image", shortcode_image); eleventyConfig.addShortcode("image-url", shortcode_image_url); - eleventyConfig.addPairedShortcode("cssbox", shortcode_cssbox); + eleventyConfig.addPairedShortcode("gallerybox", shortcode_gallerybox); } diff --git a/.docs/css.njk b/.docs/css.njk index 5c14c61..b50a488 100644 --- a/.docs/css.njk +++ b/.docs/css.njk @@ -2,4 +2,4 @@ permalink: theme.css --- {% include "css/theme.css" %} -{% include "css/CSSBox/cssbox.css" %} +{% include "css/gallerybox.css" %} diff --git a/.docs/css/gallerybox.css b/.docs/css/gallerybox.css new file mode 100644 index 0000000..0ab7094 --- /dev/null +++ b/.docs/css/gallerybox.css @@ -0,0 +1,109 @@ +.gallerybox { + display: flex; + justify-content: center; + /* + The element causes a small amount of extra padding at the + bottom of the element, so we use this to balance out the look at the top + ideally we'd shift the out of the way, but we can't without also + shifting the inside + */ + padding-top: 0.2em; +} + +.gallerybox-gallery { + --gallerybox-nextprev-padding: 5vw; + --gallerybox-nextprev-move: 0.2em; + --gallerybox-nextprev-hover: 0.1em; + + max-width: 80vmax; + + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + grid-template-areas: "main"; +} + +/* .gallerybox picture { + position: relative; + top: -1em; +} +.gallerybox picture > img { + position: relative; + top: 1em; +} */ + +.gallerybox-item { + grid-area: main; + z-index: 2; +} + +.gallerybox-item > figcaption { + background: hsla(0, 0%, 95%, 0.75); + position: absolute; + bottom: 0.25em; left: 0; right: 0; + padding: 0.75em 1em; + text-align: center; +} + +.gallerybox-gallery > .gallerybox-item:target { + display: block; + z-index: 100; +} +/* .gallerybox-gallery > .gallerybox-item:not(:target) { + display: none; + z-index: 2; +} +.gallerybox-item:not(:target) ~ .gallerybox-item:last-child { + display: block; + z-index: 2; +} */ + +/* +.gallerybox-gallery:target-within > .gallerybox-item:target { + display: block; +} +.gallerybox-gallery:target-within > .gallerybox-item:not(:target) { + display: none; +} */ + + +.gallerybox-item { + position: relative; +} +.gallerybox-item img { + max-width: 100%; +} +:where(.gallerybox-prev, .gallerybox-next) { + display: flex; + align-items: center; + height: 100%; + position: absolute; top: 0; + vertical-align: middle; + font-weight: bold; + font-size: 4em; + color: hsla(0, 0%, 100%, 0.8) !important; + text-decoration: none; + transform: none; + transition: transform 0.25s; +} +.gallerybox-item > .gallerybox-prev { + padding-left: var(--gallerybox-nextprev-padding); + left: 0; +} +.gallerybox-item > .gallerybox-next { + padding-right: var(--gallerybox-nextprev-padding); + right: 0; +} + + +:where(.gallerybox-prev, .gallerybox-next):hover { + color: hsla(0, 0%, 100%, 1) !important; +} +:is(.gallerybox-prev, .gallerybox-next):active { + color: hsla(0, 0%, 100%, 1) !important; +} +.gallerybox-next:hover { transform: translateX(calc(var(--gallerybox-nextprev-hover) * -1)); } +.gallerybox-prev:hover { transform: translateX(var(--gallerybox-nextprev-hover)); } + +.gallerybox-prev:active { transform: translateX(calc(var(--gallerybox-nextprev-move) * -1)); } +.gallerybox-next:active { transform: translateX(var(--gallerybox-nextprev-move)); } diff --git a/.docs/css/theme.css b/.docs/css/theme.css index b1d9a27..5fa672c 100644 --- a/.docs/css/theme.css +++ b/.docs/css/theme.css @@ -265,3 +265,7 @@ footer { opacity: 0.75; cursor: default; } + +.gallerybox { + background: var(--bg-transcluscent); +} diff --git a/.docs/images/gallery-c.jpeg b/.docs/images/gallery-c.jpeg new file mode 100644 index 0000000..745506c Binary files /dev/null and b/.docs/images/gallery-c.jpeg differ diff --git a/.docs/index.html b/.docs/index.html index c25daa3..36600ad 100644 --- a/.docs/index.html +++ b/.docs/index.html @@ -50,11 +50,16 @@ date: 2000-01-01 -
- {% cssbox "images/gallery-a.jpeg" %} - A scene demonstrating //replacemix, //ellipsoid, //layers, smoothadv (aka convolve and conv), and //floodfill - all of which are provided by WorldEditAdditions. - {% endcssbox %} - {% cssbox "images/gallery-b.jpeg" %} - The inside of a 3d maze made with //maze3d. Lighting was placed manually to improve screenshot quality. - {% endcssbox %} +
+