From 46744170b3801ffa358c853a49abc17f3112d823 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Wed, 6 Apr 2016 19:04:35 +0200
Subject: improve layout; fix invisible first innerstep

---
 index.html | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index de3bc7c..078708a 100644
--- a/index.html
+++ b/index.html
@@ -60,15 +60,15 @@
                 .style("width", (parseInt(window.innerWidth) * 0.9) + "px")
                 .style("height", (parseInt(window.innerHeight) * 0.9) + "px");
             d3.selectAll(".scale")
-                .style("font-size", function(d) {
+                .style("font-size", function() {
                     var lines = d3.select(this).selectAll("p")[0].length; // TODO a bit specific, may not work in all cases
-                    return Math.min(window.innerWidth/10, window.innerHeight/lines/2) + "px"; // TODO replace by line height?
+                    return Math.min(this.clientWidth/10, this.clientHeight/lines*(1.5)) + "px"; // TODO replace by line height?
                 });
         };
         window.addEventListener("resize", sizeSlides);
 
         document.addEventListener("impress:innerstep", function(e) {
-            d3.selectAll(".lastInnerstep")[0].forEach(function(ist) { ist.classList.remove("lastInnerstep"); });
+            d3.select(e.target).selectAll(".lastInnerstep")[0].forEach(function(ist) { ist.classList.remove("lastInnerstep"); });
             var stepped = d3.select(e.target).selectAll(".stepped")[0];
             stepped[stepped.length-1].classList.add("lastInnerstep");
         });
@@ -118,13 +118,13 @@
             <!-- TODO margins -->
             <div class="emoji scale center">
                 <p style="font-size: inherit;">Eingabe (:tophat:)</p>
-                <p style="font-style: italic; font-size: 50%;">Rezeptor</p>
+                <p style="font-style: italic; font-size: 75%;">Rezeptor</p>
                 <p style="font-size: inherit;">&darr;</p>
                 <p style="font-size: inherit;">Gehirn (:sparkles:)</p>
-                <p style="font-style: italic; font-size: 50%;">neuronales Netz</p>
+                <p style="font-style: italic; font-size: 75%;">neuronales Netz</p>
                 <p style="font-size: inherit;">&darr;</p>
                 <p style="font-size: inherit;">Ausgabe (:heart_eyes_cat:)</p>
-                <p style="font-style: italic; font-size: 50%;">Effektor</p>
+                <p style="font-style: italic; font-size: 75%;">Effektor</p>
             </div>
         </div>
 
@@ -132,12 +132,11 @@
             <h1>Neuronale Netze</h1>
             <div class="innerStep stepped lastInnerstep center">
                 <h3>Ein Neuron</h3>
-                <!-- TODO Beim ersten slide-in tauchen die Bilder nicht auf! -->
-                <img style="height: 80%; width: 80%;" src="img/neuron.svg" alt="Schema Neuron" />
+                <img style="width: 100%;" src="img/neuron.svg" alt="Schema Neuron">
             </div>
             <div class="innerStep center">
                 <h3>Ein Neuronales Netz</h3>
-                <img style="height: 60%; width: 60%;" src="img/neuronales-netz.jpg" alt="Foto Neuron" />
+                <img style="width: 80%;" src="img/neuronales-netz.jpg" alt="Foto Neuron">
             </div>
         </div>
 
@@ -145,13 +144,13 @@
             <h1>Künstliche neuronale Netze</h1>
             <div class="innerStep stepped lastInnerstep center">
                 <h3>Neuron - künstliches Neuron</h3>
-                <img style="height: 40%; width: 40%;" src="img/neuron.svg" alt="Schema Neuron" />
-                <img style="height: 40%; width: 40%;" src="img/kuenstliches_neuron.svg" alt="Schema eines künstlichen Neurons" />
+                <img style="width: 60%;" src="img/neuron.svg" alt="Schema Neuron" />
+                <img style="width: 60%;" src="img/kuenstliches_neuron.svg" alt="Schema eines künstlichen Neurons" />
             </div>
             <div class="innerStep center">
                 <h3>Neuronales Netz - künstliches neuronales Netz</h3>
-                <img style="height: 40%; width: 40%;" src="img/neuronales-netz.jpg" alt="Foto Neuron" />
-                <img style="height: 50%; width: 50%;" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" />
+                <img style="width: 40%;" src="img/neuronales-netz.jpg" alt="Foto Neuron" />
+                <img style="width: 60%;" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" />
             </div>
         </div>
 <!--
-- 
cgit v1.3.1