From b825ec0d4008e0e8bca408ff01dab68edb012645 Mon Sep 17 00:00:00 2001
From: Anton Lydike <me@antonlydike.de>
Date: Wed, 29 Apr 2020 19:32:31 +0200
Subject: [PATCH] added weird power mandelbulbs

---
 index.html    | 22 +++++++++++++++++++---
 src/style.css | 29 ++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 0f5923e..aa611bf 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,11 @@
             <button class="slider-control slider-next">&gt;</button>
         </div>
 
+        <h1>Can you animate the Mandelbulb?</h1>
+        <p>Yes, of course! It only takes a huge amount of time. This one rendered in about an hour, it animates the power from 1 to 20:</p>
+
+        <video src="https://datenvorr.at/renders/mandelbulb.mp4" controls="show"></video>
+
         <h1>The Code</h1>
         <i>coming soon</i>
 
@@ -48,10 +53,21 @@
         
         <p>This is where the <i>power</i> comes in (mentioned in the image descriptions). We can look at Mandelbulbs with powers that are not 2.</p>
 
-        <h1>Can you animate the Mandelbulb?</h1>
-        <p>Yes, of course! It only takes a huge amount of time. This one rendered in about an hour, it animates the power from 1 to 20:</p>
+        <h2>What happens when the power is &lt 1?</h2>
 
-        <video src="https://datenvorr.at/renders/mandelbulb.mp4" controls="show"></video>
+        <p>Short answer: Weird stuff. Long answer: I don't know!</p>
+        <p>here are some renders with weird powers:</p>
+
+        <div class="image-board">
+            <div class="image-item">
+                <img class="embed-img-small" src="https://datenvorr.at/renders/lowres/mandelbulb0.2.png" alt="A mandelbulb rendered with power 0.2, it's just a small sphere"/>
+                <span class="subtitle">Mandelbulb with power 0.2</span>
+            </div>            
+            <div class="image-item">
+                <img class="embed-img-small" src="https://datenvorr.at/renders/lowres/mandelbulb-2.png" alt="A mandelbulb rendered with power -2, it's super weird looking"/>
+                <span class="subtitle">Mandelbulb with power -2. Looks like a giant, interdimensional jellyfish.</span>
+            </div>            
+        </div>
 
         <br/>
         <br/>
diff --git a/src/style.css b/src/style.css
index 6ef4447..e088d40 100644
--- a/src/style.css
+++ b/src/style.css
@@ -9,7 +9,7 @@ html, body {
 
 body {
     font-size: 16px;
-    line-height: 2rem;
+    line-height: 1.7rem;
 }
 
 .nav-inner, main, .footer-inner {
@@ -98,6 +98,33 @@ video {
     display: block;
 }
 
+.image-board {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    flex-wrap: wrap;
+}
+
+.image-board .image-item {
+    position: relative;
+    flex-shrink: 0;
+    flex-basis: 280px;
+    flex-grow: 1;
+    margin: 8px;
+}
+.image-board .image-item img {
+    width: 100%;
+}
+
+.subtitle {
+    color: rgba(0,0,0,0.7);
+    display: block;
+    font-style: italic;
+    text-align: center;
+    line-height: 1.2;
+}
+
 @media(max-width: 600px) {
     body {
         font-size: 14px;