Mirrorlandia_minetest/Minetest-WorldEditAdditions
1
0
Fork 0
mirror of https://github.com/sbrl/Minetest-WorldEditAdditions.git synced 2024-12-25 15:12:27 +01:00
Code Issues Projects Releases Wiki Activity

Implement a css-only gallery, with descriptions!

Browse Source 
It's an absolutely *glorious* series of hacks :D

Including, but certainly not limited to:

 - CSS Grids with only 1 cell
 - Flexboxes used for positioning text nodes
 - Element heights set indirectly with the width property
 - z-index abused to show the current image in the sequence


it's undefined which image will be shown initially, but given the amount 
of effort this took I'm ok with that

If anyone knows how  to shift the <picture> element 0.25em upwards 
*without* moving the image so that I can remove the upper and lower 
borders, I'd lvoe to know. I've tried everything - including settingit's 
height to zero etc. In the end I've padded out the top to balance it out 
instead :P
This commit is contained in:
Starbeamrainbowlabs 2021-06-09 00:34:25 +01:00
parent b88080a698
commit 8a500735c0
No known key found for this signature in database
GPG Key ID: 1BE5172E637709C2
6 changed files with 137 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
.docs/.eleventy.js
View File

@ -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 `<div class="cssbox">
<a id="${idthis}" href="#${idthis}">${await shortcode_image(src, content, "cssbox_thumb", "300w")}
<span class="cssbox_full">${await shortcode_image(src, content, "", "1920w")}</span>
</a>
<a class="cssbox_close" href="#void"></a>
<a class="cssbox_prev" href="#${idprev}">&lt;</a>
<a class="cssbox_next" href="#${idnext}">&gt;</a>
</div>`;
async function shortcode_gallerybox(content, src, idthis, idprev, idnext) {
return `<figure class="gallerybox-item" id="${idthis}">
<!-- ${await shortcode_image(src, "", "gallerybox-thumb", "300w")} -->
${await shortcode_image(src, "", "", "1920w")}
<figcaption>${content}</figcaption>
<a class="gallerybox-prev" href="#${idprev}">❰</a>
<a class="gallerybox-next" href="#${idnext}">❱</a>
</figure>`;
}
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);
}

2
.docs/css.njk
View File

@ -2,4 +2,4 @@
permalink: theme.css
---
{% include "css/theme.css" %}
{% include "css/CSSBox/cssbox.css" %}
{% include "css/gallerybox.css" %}

109
.docs/css/gallerybox.css Normal file
View File

@ -0,0 +1,109 @@
.gallerybox {
display: flex;
justify-content: center;
/*
The <picture /> 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 <picture> out of the way, but we can't without also
shifting the <img /> 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)); }

4
.docs/css/theme.css
View File

@ -265,3 +265,7 @@ footer {
opacity: 0.75;
cursor: default;
}
.gallerybox {
background: var(--bg-transcluscent);
}

BIN
.docs/images/gallery-c.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 827 KiB

19
.docs/index.html
View File

@ -50,11 +50,16 @@ date: 2000-01-01
</section>
<!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
<section class="cssbox">
{% cssbox "images/gallery-a.jpeg" %}
A scene demonstrating <code>//replacemix</code>, <code>//ellipsoid</code>, <code>//layers</code>, <code>smoothadv</code> (aka <code>convolve</code> and <code>conv</code>), and <code>//floodfill</code> - all of which are provided by WorldEditAdditions.
{% endcssbox %}
{% cssbox "images/gallery-b.jpeg" %}
The inside of a 3d maze made with <code>//maze3d</code>. Lighting was placed manually to improve screenshot quality.
{% endcssbox %}
<section class="gallerybox">
<section class="gallerybox-gallery">
{% gallerybox "images/gallery-a.jpeg" "image-first" "image-last" "image-b" %}
A scene demonstrating <code>//replacemix</code>, <code>//ellipsoid</code>, <code>//layers</code>, <code>smoothadv</code> (aka <code>convolve</code> and <code>conv</code>), and <code>//floodfill</code> - 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 <code>//maze3d</code>. Lighting was placed manually to improve screenshot quality.
{% endgallerybox %}
{% gallerybox "images/gallery-c.jpeg" "image-last" "image-b" "image-first" %}
A cliff made with <code>//erode</code> and <code>//layers</code>. A <code>//forest</code> has been applied on top with multiple sapling / tree types.
{% endgallerybox %}
</section>
</section>