Minetest-WorldEditAdditions/.docs/index.html
Starbeamrainbowlabs 8a500735c0
Implement a css-only gallery, with descriptions!
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
2021-06-09 00:34:25 +01:00

66 lines
3.9 KiB
HTML

---
layout: theme.njk
title: Welcome
tags: navigable
date: 2000-01-01
---
<section class="bigbox" style="--bg: url({% image-url "images/banner-main.jpeg" %})">
<h1>WorldEditAdditions</h1>
<p><em>Extra tools and commands to extend <a href="https://github.com/Uberi/Minetest-WorldEdit">WorldEdit</a> for <a href="https://www.minetest.net/">Minetest</a></em></p>
<p>If you can dream of it, it probably belongs here!</p>
<p><a href="#get-started" class="bigbutton">Get Started</a></p>
</section>
<section class="features-large">
<figure>
{% image "images/maze2d-alt.png", "A green 2D hedge maze, made with the //maze command" %}
<!-- <img src="/images/maze2d-alt.png" alt="A green 2D hedge maze, made with the //maze command" /> -->
<figcaption>
<p>Use <code>//maze</code> and <code>//maze3d</code> to generate customisable mazes in 2 or 3 dimensions.</p>
<p>Customise the path sizing for additional artistic control.</p>
</figcaption>
</figure>
<figure>
{% image "images/forest.png", "A forest of orange and lemon trees from the cooltrees mod, along with some bushes from Minetest Game." %}
<!-- <img src="/images/forest.png" alt="A forest of orange and lemon trees from the cooltrees mod, along with some bushes from Minetest Game." /> -->
<figcaption>
<p>Save time by creating instant forests with <code>//forest</code>.</p>
<p>Artibrary mixes of saplings are supported too as a weighted list.</p>
</figcaption>
</figure>
<figure>
{% image "images/conv-layers.png", "A small mountain smoothed with //smoothadv and topped with snow with //overlay" %}
<!-- <img src="/images/conv-layers.png" alt="A small mountain smoothed with //smoothadv and topped with snow with //overlay" /> -->
<figcaption>
<p>Unlock a continuously growing library of commands, such as <code>//smoothadv</code> for easy terrain smoothing, and <code>//overlay</code> for overlaying a node on top of terrain.</p>
<p>Many more commands are waiting to be discovered, including <code>//torus</code>, <code>//bonemeal</code>, and <code>//scale</code>.</p>
</figcaption>
</figure>
<figure>
{% image "images/torus-bonemeal.png", "A dirt torus with a grassy top, and a meadow of grass/flowers. Demonstrates //layers and //bonemeal. Doesn't have much to do with the sentences below - I just thought it looked nice as meta commands are difficult to find a good picture for." %}
<img src="/images/torus-bonemeal.png" alt="A dirt torus with a grassy top, and a meadow of grass/flowers. Demonstrates //layers and //bonemeal. Doesn't have much to do with the sentences below - I just thought it looked nice as meta commands are difficult to find a good picture for." />
<figcaption>
<p>Powerful meta commands such as <code>//multi</code> for executing multiple commands at once and <code>//subdivide</code> for running commands on areas of virtually unlimited size enable convenience and enhance flexibility.</p>
</figcaption>
</figure>
</section>
<!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
<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>