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 ``;
+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 %}
+
+
+ {% gallerybox "images/gallery-a.jpeg" "image-first" "image-last" "image-b" %}
+ A scene demonstrating //replacemix, //ellipsoid, //layers, smoothadv (aka convolve and conv), and //floodfill - all of which are provided by WorldEditAdditions.
+ {% endgallerybox %}
+ {% gallerybox "images/gallery-b.jpeg" "image-b" "image-first" "image-last" %}
+ The inside of a 3d maze made with //maze3d. Lighting was placed manually to improve screenshot quality.
+ {% endgallerybox %}
+ {% gallerybox "images/gallery-c.jpeg" "image-last" "image-b" "image-first" %}
+ A cliff made with //erode and //layers. A //forest has been applied on top with multiple sapling / tree types.
+ {% endgallerybox %}
+