mean spectra. better bat

index.html.haml

@@ -54,9 +54,10 @@
           .grabstein-wo Technische Universität München
           .grabstein-von ✦ 19. März 2018
           .grabstein-bis ✝ 22. März 2018
+      %img(style="height:7cm;float:right;margin-top:3.5cm" alt="Dunkle Nacht" src="files/Candle.png")
       %h1
         <q>Düsterkeit</q> in der Musik:
-        %br<>
+        -#%br<>
         Physikalische Entsprechungen und Vorhersagemodelle
       %p#authors<>
         %span.author(data-mark="1")<> Isabella Czedik-Eysenberg
@@ -98,13 +99,14 @@
 
         %section#fragestellung
           %h1 2. Fragestellungen und Ziele
-          %p
+          %ol
+            %li
               Wie lässt sich das Wahrnehmungskonzept klanglicher <q>Düsterkeit</q>
               anhand von Audiomerkmalen charakterisieren?
-          %p
+            %li
               Korreliert die empfundene klangliche <q>Düsterkeit</q> umgekehrt
               proportional mit klangfarblicher <q>Helligkeit</q>?
-          %p
+            %li
               Ziel ist die Erstellung eines Modells zur automatischen Vorhersage
               der wahrgenommenen <q>Düsterkeit</q> von Musikstücken.
 
@@ -175,8 +177,23 @@
               Korrelation der durchschnittlichen Düsterkeits<wbr/>bewertung mit Maßen
               für klangfarbliche Helligkeit.
 
+          %p
+            Zwischen den 30 am düstersten bzw. am wenigsten düster bewerteten
+            Klangbeispielen zeigen sich charakteristische Unterschiede in der spektralen
+            Verteilung (insbesondere im Bereich der Gammatone-Filterbank-Bänder 1, 4 und 5).
           %figure.left(style="width:38%")
             %img(alt='Trauriges Purpur' src='files/violin_keyEdma_darkMean_blaugelb.svg')
+          %figure.left
+            :markdown
+              Merkmal|r|p
+              ---|---|---
+              RMS Gammatone 1|- 0,3989|&lt; 0,0001
+              RMS Gammatone 4|- 0,3427|&lt; 0,0001
+              RMS Gammatone 5|- 0,3126|0,0001
+              {:.merkmale}
+          %figure.right
+            %img(style="height:6em" alt="lilien grau" src="files/meanspectra_10khz_600dpi.png")
+
           %p(style="clear:right")
             Ein deutlicher Zusammenhang zeigt sich mit der Tonart der
             jeweiligen Ausschnitte: Moll-Beispiele wurden im Durchschnitt als
@@ -199,8 +216,9 @@
             niedrigere spektrale Komplexität aufweisen, <q>fröhliche</q> (<q>happy</q>)
             Stücke jedoch eine leicht höhere spektrale Komplexität als
             <q>nicht fröhliche</q>.
-          %figure.left(style="width:59.83%")
+          %figure.left(style="width:59.83%;position:relative")
             %img(alt='Totes Grün' src='files/scatter_model8_mit_beschriftung_gross.svg')
+            %img(alt="Farbiges Beispiel" style="width:5cm;opacity:0.7;position:absolute;top:0;left:3cm" src="files/bat.png")
           %p(style="clear:right")
             Nach sequentieller Merkmalsauswahl wurden 8 Signaldeskriptoren zur
             Bildung eines Modells zu Rate gezogen:
@@ -228,23 +246,7 @@
             Mean Average Error (MAE)|0,64<span class="hidden">00</span>
             Korrelation (insgesamt)|0,7978
             {:.merkmale}
-          %img(alt="Farbiges Beispiel" style="float:right;margin-top:-0.1em;margin-right:2em;width:3em;opacity:0.4;" src="files/bat.png")
-          -#.clear
           %div(style="clear:left")
-          %figure.left
-            :markdown
-              Merkmal|r|p
-              ---|---|---
-              RMS Gammatone 1|- 0,3989|&lt; 0,0001
-              RMS Gammatone 4|- 0,3427|&lt; 0,0001
-              RMS Gammatone 5|- 0,3126|0,0001
-              {:.merkmale}
-          -#%figure.right
-            %img(alt="lilien grau" src="files/meanspectra_10khz_600dpi.png")
-          %p
-            Zwischen den 30 am düstersten bzw. am wenigsten düster bewerteten
-            Klangbeispielen zeigen sich charakteristische Unterschiede in der spektralen
-            Verteilung (insbesondere im Bereich der Gammatone-Filterbank-Bänder 1, 4 und 5).
           .clear
 
       %footer

style.scss

@@ -49,20 +49,61 @@ html {
 }
 
 header {
+  figure {
+    float: right;
+    display: block;
+
+    //background: white
+    //box-shadow: 0 0 1em white
+    //border-radius: 1em
+    //padding: 1em
+    padding: 0;
+    margin: 0;
+  }
+
 	h1 {
+		//font-family: "Italianno";
+		font-weight: normal;
     margin: 0 {
       //bottom: 0.5rem;
     };
     padding: 0;
     font-size: 2.5rem;
     text-align: center;
+		.duesterkeit {
+			position: relative;
+			&::before, &::after {
+				background: #900;
+				display: block;
+				position: absolute;
+				content: " ";
+				height: 0.07em;
+				width: 0.09em;
+				border-radius: 0.02em 0.02em 0.055em 0.055em;
+				z-index: 2;
+				top: 1.41ex;
+				//border: 1px #f90;
+				box-shadow: 0 0 0.04em #f90, inset 0 0 0.04em #f90;
+			}
+			&::before {
+				left: 3.16ex;
+			}
+			&::after {
+				left: 3.61ex;
+			}
+		}
   }
 
   padding: 0 1rem 0 1rem;
   position: relative;
 
+	color: #bbb;
+	text-shadow: 0 0 5px black, 0 0 10px black, 0 0 15px black;
+	//text-stroke: 1px black;
+	//-webkit-text-stroke: 1px black;
+
   &::after {
-    background: linear-gradient(rgba(0, 0, 0, 0.5) 10cm, rgba(256, 256, 256, 0));
+    //background: linear-gradient(rgba(0, 0, 0, 0.5) 10cm, rgba(256, 256, 256, 0));
 		height: 11cm;
     position: absolute;
     top: 0;
@@ -277,34 +318,6 @@ q {
   quotes: "„" "“";
 }
 
-header {
-	h1 {
-		//font-family: "Italianno";
-		font-weight: normal;
-		.duesterkeit {
-			position: relative;
-			&::before, &::after {
-				background: #900;
-				display: block;
-				position: absolute;
-				content: " ";
-				height: 0.07em;
-				width: 0.09em;
-				border-radius: 0.02em 0.02em 0.055em 0.055em;
-				z-index: 2;
-				top: 1.41ex;
-				//border: 1px #f90;
-				box-shadow: 0 0 0.04em #f90, inset 0 0 0.04em #f90;
-			}
-			&::before {
-				left: 3.16ex;
-			}
-			&::after {
-				left: 3.61ex;
-			}
-		}
-	}
-}
 h1 {
   font-family: "Cardo";
   //font-weight: normal;
@@ -333,20 +346,6 @@ feature {
   font-size: 0.9em;
 }
 
-header {
-  figure {
-    float: right;
-    display: block;
-
-    //background: white
-    //box-shadow: 0 0 1em white
-    //border-radius: 1em
-    //padding: 1em
-    padding: 0;
-    margin: 0;
-  }
-}
-
 main {
   margin-top: 0.7em;