From d7459170b39d1a075edcf13dedce51ad451b03a0 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Wed, 6 Apr 2016 17:59:35 +0200
Subject: fix layout in Firefox, make more responsive

---
 index.html | 91 +++++++++++++++++++++++++++++++-------------------------------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index e53ee38..de3bc7c 100644
--- a/index.html
+++ b/index.html
@@ -57,8 +57,13 @@
         /* responsive deck */
         function sizeSlides() {
             d3.selectAll(".slide")
-                .style("width", parseInt(window.innerWidth) * 0.9 + "px")
-                .style("height", parseInt(window.innerHeight) * 0.9 + "px");
+                .style("width", (parseInt(window.innerWidth) * 0.9) + "px")
+                .style("height", (parseInt(window.innerHeight) * 0.9) + "px");
+            d3.selectAll(".scale")
+                .style("font-size", function(d) {
+                    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?
+                });
         };
         window.addEventListener("resize", sizeSlides);
 
@@ -71,84 +76,80 @@
 
     <div id="impress">
         <!-- TODO Fortschrittsbalken unten? -->
-        <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="5000">
-            <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1>
+        <div class="step slide" data-x="0" data-y="0" data-z="5000">
+            <h1>Künstliche neuronale Netze</h1>
             <!-- TODO center oder Bild -->
-            <h2>38 Gewichte in 20 Minuten</h2>
+            <h2>38 Gewichte in 15 Minuten</h2>
         </div>
 
         <!-- TODO Inhaltsübersicht -->
-        <div class="mdl-layout mdl-js-layout step slide" data-x="2000" data-y="0" data-z="5000">
-            <h1 class="mdl-layout__header">Von der Eingabe zur Ausgabe</h1>
-            <div class="innerStep stepped lastInnerstep emoji center" style="font-size: 3000%;">
-                <h2>Das ist Kitty.</h2>
-                :smiley_cat:
+        <div class="step slide" data-x="2000" data-y="0" data-z="5000">
+            <h1>Von der Eingabe zur Ausgabe</h1>
+            <div class="innerStep stepped lastInnerstep center">
+                <h3>Das ist Kitty.</h3>
+                <p class="emoji scale">:smiley_cat:</p>
             </div>
-            <div class="innerStep emoji center" style="font-size: 3000%;">
-                <h2>Kitty ist blöd.</h2>
-                :pouting_cat:
+            <div class="innerStep center">
+                <h3>Kitty ist blöd.</h3>
+                <p class="emoji scale">:pouting_cat:</p>
             </div>
-            <div class="innerStep emoji center" style="font-size: 1500%;">
-                <h2>Wenn Kitty Steves Hut sieht, schnurrt sie manchmal.</h2>
-                :man: :tophat: :heart_eyes_cat:
+            <div class="innerStep center">
+                <h3>Wenn Kitty Steves Hut sieht, schnurrt sie manchmal.</h3>
+                <p class="emoji scale">:man: :tophat: :heart_eyes_cat:</p>
             </div>
-            <div class="innerStep emoji center" style="font-size: 2000%;">
-                <h2>Steve mag es, wenn Kitty schnurrt.</h2>
-                :yum:
+            <div class="innerStep center">
+                <h3>Steve mag es, wenn Kitty schnurrt.</h3>
+                <p class="emoji scale">:yum:</p>
             </div>
-            <div class="innerStep emoji center" style="font-size: 1250%;">
-                <h2>Steve trainiert Kitty.</h2>
+            <div class="innerStep center">
+                <h3>Steve trainiert Kitty.</h3>
                 <h3>Mit Keksen. (Kitty mag Kekse.)</h3>
-                :man: :tophat: :cookie: :smile_cat:
+                <p class="emoji scale">:man: :tophat: :cookie: :smile_cat:</p>
             </div>
-            <div class="innerStep center emoji" style="font-size: 3000%;">
-                <h2>Was passiert da?</h2>
+            <div class="innerStep center">
+                <h3>Was passiert da?</h3>
                 <h3>Sehen wir uns Kitty einmal genauer an.</h3>
-                :smiley_cat:
+                <p class="emoji scale">:smiley_cat:</p>
             </div>
         </div>
 
-        <div class="mdl-layout mdl-js-layout step slide" data-x="2000" data-y="2000" data-z="2500">
-            <h1 class="mdl-layout__header">Die Informationsverarbeitung im Gehirn</h1>
+        <div class="step slide" data-x="2000" data-y="2000" data-z="2500">
+            <h1>Die Informationsverarbeitung im Gehirn</h1>
             <!-- TODO margins -->
-            <div class="emoji center" style="font-size: 750%;">
+            <div class="emoji scale center">
                 <p style="font-size: inherit;">Eingabe (:tophat:)</p>
                 <p style="font-style: italic; font-size: 50%;">Rezeptor</p>
-                <br />
                 <p style="font-size: inherit;">&darr;</p>
-                <br />
                 <p style="font-size: inherit;">Gehirn (:sparkles:)</p>
                 <p style="font-style: italic; font-size: 50%;">neuronales Netz</p>
-                <br />
                 <p style="font-size: inherit;">&darr;</p>
-                <br />
                 <p style="font-size: inherit;">Ausgabe (:heart_eyes_cat:)</p>
                 <p style="font-style: italic; font-size: 50%;">Effektor</p>
             </div>
         </div>
 
-        <div class="mdl-layout mdl-js-layout step slide" data-x="2000" data-y="4000" data-z="2500">
-            <h1 class="mdl-layout__header">Neuronale Netze</h1>
+        <div class="step slide" data-x="2000" data-y="4000" data-z="2500">
+            <h1>Neuronale Netze</h1>
             <div class="innerStep stepped lastInnerstep center">
-                <h2>Ein Neuron</h2>
+                <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" />
             </div>
             <div class="innerStep center">
-                <h2>Ein Neuronales Netz</h2>
+                <h3>Ein Neuronales Netz</h3>
                 <img style="height: 60%; width: 60%;" src="img/neuronales-netz.jpg" alt="Foto Neuron" />
             </div>
         </div>
 
-        <div class="mdl-layout mdl-js-layout step slide" data-x="4000" data-y="0" data-z="2500">
-            <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1>
+        <div class="step slide" data-x="4000" data-y="0" data-z="2500">
+            <h1>Künstliche neuronale Netze</h1>
             <div class="innerStep stepped lastInnerstep center">
-                <h2>Neuron - künstliches Neuron</h2>
+                <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" />
             </div>
             <div class="innerStep center">
-                <h2>Neuronales Netz - künstliches neuronales Netz</h2>
+                <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" />
             </div>
@@ -201,7 +202,7 @@
 
         <div class="step slide mdl-layout mdl-js-layout" data-x="9500" data-y="0" data-z="1000">
             <div class="mdl-layout__header">
-                <h2>Ein leeres Netz</h2>
+                <h3>Ein leeres Netz</h3>
             </div>
 
             <div class="visContainer"></div>
@@ -220,7 +221,7 @@
 
         <div class="step slide mdl-layout mdl-js-layout" data-x="3000" data-y="0" data-z="1000">
             <div class="mdl-layout__header">
-                <h2>Aktivierungstest</h2>
+                <h3>Aktivierungstest</h3>
             </div>
 
             <div class="visContainer"></div>
@@ -253,7 +254,7 @@
 
         <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="0" data-z="1000">
             <div class="mdl-layout__header">
-                <h2>Der Fehler im Verlauf</h2>
+                <h3>Der Fehler im Verlauf</h3>
             </div>
 
             <div class="errorContainer"></div>
@@ -272,7 +273,7 @@
 
         <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000">
             <div class="mdl-layout__header">
-                <h2>Die Gewichte im Verlauf</h2>
+                <h3>Die Gewichte im Verlauf</h3>
             </div>
 
             <div class="visContainer"></div>
@@ -291,7 +292,7 @@
 
         <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="1000">
             <div class="mdl-layout__header">
-                <h2>Gewichte und Fehler</h2>
+                <h3>Gewichte und Fehler</h3>
             </div>
 
             <div class="visContainer"></div>
-- 
cgit v1.3.1