final

.gitignore

@@ -7,4 +7,5 @@ fonts/*.map
 style.css
 *.swp
 /.bundle
+/files/einhorn
 /vendor/bundle

brushed-metal.dark.svg

@@ -24,11 +24,11 @@
        inkscape:collect="always"
        id="linearGradient5938">
       <stop
-         style="stop-color:#000000;stop-opacity:1;"
+         style="stop-color:#6d635e;stop-opacity:1;"
          offset="0"
          id="stop5940" />
       <stop
-         style="stop-color:#000000;stop-opacity:0;"
+         style="stop-color:#6d635e;stop-opacity:0;"
          offset="1"
          id="stop5942" />
     </linearGradient>
@@ -37,11 +37,11 @@
        id="linearGradient4468"
        osb:paint="gradient">
       <stop
-         style="stop-color:#252220;stop-opacity:1"
+         style="stop-color:#6d635e;stop-opacity:1"
          offset="0"
          id="stop4470" />
       <stop
-         style="stop-color:#252220;stop-opacity:0;"
+         style="stop-color:#6d635e;stop-opacity:0;"
          offset="1"
          id="stop4472" />
     </linearGradient>

files/predictionTree_genreAgg2.svg

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="20cm" height="11cm" viewBox="-440 -300 381 216" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Hintergrund">
+    <g>
+      <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x="-306" y="-299" width="106" height="40" rx="0" ry="0"/>
+      <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-253" y="-275.1">
+        <tspan x="-253" y="-275.1">darkness</tspan>
+      </text>
+    </g>
+    <g>
+      <line style="fill: none; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x1="-249.998" y1="-258" x2="-293.895" y2="-221.155"/>
+      <polygon style="fill: #000000; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" points="-297.11,-224.984 -301.555,-214.726 -290.681,-217.325 "/>
+    </g>
+    <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="-333.998" y="-234">
+      <tspan x="-333.998" y="-234">&lt; 3.573</tspan>
+      <tspan x="-333.998" y="-218"></tspan>
+    </text>
+    <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="-299" y="-244">
+      <tspan x="-299" y="-244"></tspan>
+    </text>
+    <g>
+      <line style="fill: none; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x1="-248.998" y1="-258" x2="-205.945" y2="-222.234"/>
+      <polygon style="fill: #000000; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" points="-209.14,-218.388 -198.253,-215.843 -202.75,-226.08 "/>
+    </g>
+    <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="-214.998" y="-235">
+      <tspan x="-214.998" y="-235">&gt;= 3.573</tspan>
+    </text>
+    <g>
+      <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x="-380.2" y="-213.2" width="106" height="40" rx="0" ry="0"/>
+      <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-327.2" y="-189.3">
+        <tspan x="-327.2" y="-189.3">hardness</tspan>
+      </text>
+    </g>
+    <g>
+      <rect style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x="-225.2" y="-214.2" width="106" height="40" rx="0" ry="0"/>
+      <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-172.2" y="-190.3">
+        <tspan x="-172.2" y="-190.3">hardness</tspan>
+      </text>
+    </g>
+    <g>
+      <line style="fill: none; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x1="-327.2" y1="-173.2" x2="-366.891" y2="-138.903"/>
+      <polygon style="fill: #000000; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" points="-370.16,-142.687 -374.458,-132.365 -363.622,-135.12 "/>
+    </g>
+    <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="-407" y="-149">
+      <tspan x="-407" y="-149">&lt; 3.294</tspan>
+    </text>
+    <g>
+      <line style="fill: none; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x1="-327.2" y1="-173.2" x2="-314.226" y2="-141.38"/>
+      <polygon style="fill: #000000; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" points="-318.856,-139.493 -310.451,-132.12 -309.596,-143.268 "/>
+    </g>
+    <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="-312.998" y="-149">
+      <tspan x="-312.998" y="-149">&gt;= 3.294</tspan>
+    </text>
+    <g>
+      <line style="fill: none; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x1="-172.2" y1="-174.2" x2="-185.641" y2="-141.358"/>
+      <polygon style="fill: #000000; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" points="-190.268,-143.252 -189.428,-132.103 -181.013,-139.464 "/>
+    </g>
+    <g>
+      <line style="fill: none; stroke-opacity: 1; stroke-width: 2; stroke: #000000" x1="-172.2" y1="-174.2" x2="-132.695" y2="-138.478"/>
+      <polygon style="fill: #000000; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" points="-136.048,-134.769 -125.277,-131.771 -129.341,-142.186 "/>
+    </g>
+    <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="-235.998" y="-149">
+      <tspan x="-235.998" y="-149">&lt; 4.632</tspan>
+    </text>
+    <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="-138.998" y="-149">
+      <tspan x="-138.998" y="-149">&gt;= 4.632</tspan>
+    </text>
+    <g>
+      <path style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" d="M -425.831 -131 L -377.165,-131 C -370.445,-131 -364.998,-121.15 -364.998,-109 C -364.998,-96.8497 -370.445,-87 -377.165,-87 L -425.831,-87 C -432.551,-87 -437.998,-96.8497 -437.998,-109 C -437.998,-121.15 -432.551,-131 -425.831,-131z"/>
+      <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-401.498" y="-105">
+        <tspan x="-401.498" y="-105">Pop</tspan>
+      </text>
+    </g>
+    <g>
+      <path style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" d="M -326.023 -130.2 L -275.373,-130.2 C -268.38,-130.2 -262.71,-120.35 -262.71,-108.2 C -262.71,-96.0497 -268.38,-86.2 -275.373,-86.2 L -326.023,-86.2 C -333.016,-86.2 -338.685,-96.0497 -338.685,-108.2 C -338.685,-120.35 -333.016,-130.2 -326.023,-130.2z"/>
+      <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-300.698" y="-104.2">
+        <tspan x="-300.698" y="-104.2">Techno</tspan>
+      </text>
+    </g>
+    <g>
+      <path style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" d="M -224.535 -130.2 L -173.885,-130.2 C -166.892,-130.2 -161.223,-120.35 -161.223,-108.2 C -161.223,-96.0497 -166.892,-86.2 -173.885,-86.2 L -224.535,-86.2 C -231.529,-86.2 -237.198,-96.0497 -237.198,-108.2 C -237.198,-120.35 -231.529,-130.2 -224.535,-130.2z"/>
+      <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-199.21" y="-104.2">
+        <tspan x="-199.21" y="-104.2">Gothic</tspan>
+      </text>
+    </g>
+    <g>
+      <path style="fill: #ffffff; fill-opacity: 1; stroke-opacity: 1; stroke-width: 2; stroke: #000000" fill-rule="evenodd" d="M -124.536 -130.2 L -73.8855,-130.2 C -66.8922,-130.2 -61.223,-120.35 -61.223,-108.2 C -61.223,-96.0497 -66.8922,-86.2 -73.8855,-86.2 L -124.536,-86.2 C -131.529,-86.2 -137.198,-96.0497 -137.198,-108.2 C -137.198,-120.35 -131.529,-130.2 -124.536,-130.2z"/>
+      <text font-size="12.7998" style="fill: #000000; fill-opacity: 1; stroke: none;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-99.2105" y="-104.2">
+        <tspan x="-99.2105" y="-104.2">Metal</tspan>
+      </text>
+    </g>
+  </g>
+</svg>

index.html.haml

@@ -19,10 +19,10 @@
   %head
     -#%meta(charset="utf-8")
     %title Decoding the sound of 'hardness' and 'darkness' as perceptual dimensions of music
-    -#%link(rel="stylesheet" href="fonts/Roboto.css")
+    %link(rel="stylesheet" href="fonts/Roboto.css")
-    -#%link(rel="stylesheet" href="fonts/RobotoSlab.css")
+    %link(rel="stylesheet" href="fonts/RobotoSlab.css")
     -#%link(rel="stylesheet" href="fonts/PT_Mono.css")
-    -#%link(rel="stylesheet" href="fonts/PT_Sans.css")
+    %link(rel="stylesheet" href="fonts/PT_Sans.css")
     -#%link(rel="stylesheet" href="fonts/Vollkorn.css")
     -#%link(rel="stylesheet" href="fonts/Asset.css")
     -#%link(rel="stylesheet" href="fonts/WithinDestruction.css")
@@ -39,8 +39,8 @@
   %body
     %header(style="")
       %figure.logos(style="margin-top:0.3cm")<>
-        %img#tagungs-logo(style="float:right" src="files/icmpc15_logo.png")
+        %img#uni-logo(src="files/univie_logo.png")
-        %img#uni-logo(src="files/Uni_Logo_2016_ausschnitt.gif")
+        %img#tagungs-logo(style="float:right;height:i3.5em" src="files/icmpc15_logo.png")
         -#%div(style="font-size:0.8em;margin-top:1.31cm")
           44. Jahrestagung für Akustik
           %br<>
@@ -82,56 +82,85 @@
             Considering Bonferroni correction, 65 significant feature
             correlations were found for the concept of <q>hardness</q>.
 
-            The characterizing attributes of <q>hardness</q> include high
+            The characterizing attributes of <q>hardness</q> include **high
-            tempo and sound density, less focus on clear melodic lines than
+            tempo** and **sound density**, less focus on clear melodic lines than
-            noise-like sounds and especially the occurrence of strong percussive
+            **noise-like** sounds and especially the occurrence of strong **percussive**
             components. 
           %ol
             %li
-              percussive energy / rhythmic density
+              %p percussive energy / rhythmic density
-              %figure
+              %figure.pfifty
-                %img.fifty(src="files/sonagramm_blunt_log.png")
+                %figcaption Spectrogram <q>James Blunt - You're Beautiful</q>
-                %img.fifty(src="files/sonagramm_decap_log.png")
+                %img(src="files/sonagramm_blunt_log.png")
+              %figure.pfifty
+                %figcaption Spectrogram <q>Decapitated - The Fury</q>
+                %img(src="files/sonagramm_decap_log.png")
+              .clear
             %li
-              dynamic distribution
+              %p dynamic distribution
-              %figure
+              %figure.pfifty
-                %img.fifty(src="files/blunt_envelope.png")
+                %figcaption Dynamic Envelope <q>James Blunt - You're Beautiful</q>
-                %img.fifty(src="files/decap_envelope.png")
+                %img(src="files/blunt_envelope.png")
-              %figure
+              %figure.pfifty
-                %img.fifty(src="files/blunt_dyndist.png")
+                %figcaption Dynamic Envelope <q>Decapitated - The Fury</q>
-                %img.fifty(src="files/decap_dyndist.png")
+                %img(src="files/decap_envelope.png")
+              -#%figure.pfifty
+                %figcaption Dynamic distribution <q>James Blunt - You're Beautiful</q>
+                %img(src="files/blunt_dyndist.png")
+              -#%figure.pfifty
+                %figcaption Dynamic distribution <q>Decapitated - The Fury</q>
+                %img(src="files/decap_dyndist.png")
+              .clear
             %li
-              melodic content / harmonic entropy
+              %p melodic content / harmonic entropy
-              %figure
+              %figure.pfifty
-                %img.fifty(src="files/blunt_chromagram.png")
+                %figcaption Chromagramm <q>James Blunt - You're Beautiful</q>
-                %img.fifty(src="files/decap_chromagram.png")
+                %img(src="files/blunt_chromagram.png")
-          :markdown
+              %figure.pfifty
-            Model
+                %figcaption Chromagram <q>Decapitated - The Fury</q>
-            -----
+                %img(src="files/decap_chromagram.png")
+              .clear
 
-            Sequential feature selection  
+          -#%h2(style="margin-top:1.5em") Model
-
+          %h2(style="margin-top:40px") Model
-            * set of 5 features 
+          %figure.fifty.left(style="width:67%;text-align:center")
-            * predictive linear regression model
+            %img(src="files/scatter_hardness_model5.png")
-
+            %div(style="display:inline-block")
-            RMSE      | 0.64
+              :markdown
-            R-Squared | 0.80
+                RMSE | R<sup>2</sup> | MSE  | MAE  | r
-            MSE       | 0.40
+                0.64 |          0.80 | 0.40 | 0.49 | 0.90
-            MAE       | 0.49
+          %p(style="text-align:center")<>
-            r         | 0.900
+            Sequential feature selection
-          %figure
+            %br<>
-            %img(src="scatter_hardness_model5.png")
+            &darr;
+            %br<>
+            set of 5 features
+            %br<>
+            &darr;
+            %br<>
+            <b>predictive linear regression model</b>
+          -#
+            RMSE | 0.64
+            R<sup>2</sup> | 0.80
+            MSE | 0.40
+            MAE | 0.49
+            r | 0.90
+          .clear
           :markdown
             Rater Agreement
             ---------------
 
-            Intraclass Correlation Coefficient  (Two-Way Model, Consistency): <b>0.653</b>
+            Intraclass Correlation Coefficient <nobr>(Two-Way Model, Consistency): <b>0.653</b></nobr>
           .clear
 
       #column1_2
-        -#%section#aims
+        %section#aims
           %h1 Aims
           %p
+            The semantic concepts of <q>hardness</q> and <q>darkness</q> in music are analyzed
+            in terms of their corresponding sound attributes.  Based on listening test data,
+            predictive models for both dimensions are created and compared.
+          -#%p
             Based on computationally obtainable signal features, the creation
             of models for the perceptual concepts of <q>hardness</q> and
             <q>darkness</q> in music is aimed for.  Furthermore it shall be
@@ -140,7 +169,7 @@
             these dimensions.
         %section#method
           %h1 Method
-          %figure.right(style="width:50%")
+          %figure.right(style="width:12%;height:2em;margin: 0.5em 0.5em 0.5em 1.5em")
             %img(src="files/LastFM.png")
           %p
             Based on last.fm listener statistics, 150 pieces of music were selected
@@ -151,7 +180,8 @@
             These ratings served as a ground truth for examining the two
             concepts using a machine learning approach:
 
-          %figure.right(style="width:50%")
+          %figure.right
+            //(style="width:50%")
             %img(src="files/diagramm_vorgang_english.png")
           %p
             Taking into account 230 features describing spectral distribution,
@@ -159,45 +189,25 @@
             investigated and combined into models.
             Predictors were trained using five-fold cross-validation.
           .clear
-          %h2 Data
+
+        -#.blockarrow(style="display:block;width:100%;font-size:6em;margin:0") &#129075;
+        %section#data(style="margin-top:2em")
+          %h1 Data
           %figure
             %img(src="files/scatter_hard_dark_dashedline_2017-09-05.png")
+          .blockarrow(style="top:-3.8rem;left:0;right:0") &#129095;
+          .blockarrow(style="bottom:9rem;left:-3rem") &#129092;
+          .blockarrow(style="bottom:9rem;right:-3rem") &#129094;
           .clear
-        %section#further_resultes_conclusion
+        %div(style="margin-top:1em;margin-bottom:-1em")
-          %h1 Further Results &amp; Conclusions
+          %div(style="width:40%;display:inline-block;float:left;text-align:center")
-          %figure.fifty
+            -#%img(src="files/hammer-306313_960_720.png" style="height:5em")
-            %img.right(src="files/predictionTree_genreAgg2.png")
+            %img(src="files/thor-hammer3.png" style="height:5em")
-            %img.right(src="files/confusionMatrix_simpleTree_genreAgg2.png")
+          .blockarrow(style="display:block;width:100%;font-size:7.5rem;margin:0;margin-top:-1.3rem") &#129095;
-          :markdown
+          %div(style="width:40%;display:inline-block;float:right;text-align:center")
-            Comparison
+            %img(src="files/Candle.png" style="height:5em")
-            ----------
-
-            When comparing <q>darkness</q> and <q>hardness</q>, the results
-            indicate that the latter concept can be more efficiently described
-            and modeled by specific sound attributes:
-
-            * The consistency between ratings given by different raters is
-              higher for <q>hardness</q> (see Intraclass Correlation
-              Coefficients)
-            * For the <q>hardness</q> dimension, a model can be based on a more
-              compact set of features and at the same time leads to a better
-              prediction rate
-
-            Further application
-            -------------------
-
-            Although a considerable linear relation
-            (<nobr>r = 0.65</nobr>, <nobr>p &lt; 0.01</nobr>) is present between
-            the two dimensions within the studied dataset, the concepts prove to
-            be useful criteria for distinguishing music examples from different
-            genres.
-
-            E.g. a simple tree can be constructed for classification into broad
-            genre categories (Pop, Techno, Metal, Gothic) with an accuracy of
-            74%.
           .clear
 
-
       #column1_3
         %section#darkness
           %h1 Darkness
@@ -225,92 +235,144 @@
             correlations were found for the <q>darkness</q> ratings. 
 
             While a suspected negative correlation with **timbral
-            <q>brightness</q>** cannot be confirmed, <q>darkness</q> appears to
+            <q>brightness</q>** can **not** be confirmed, <q>darkness</q> appears to
             be associated with a high **spectral complexity** and harmonic
             traits like **major or minor mode**.
-          %figure.fifty
+          %figure.fifty.left
             %img(src="files/scatter_spectral_centroid_essentia_darkness.png")
-          :markdown
+          %div(style="height:1em")
-            Correlations between darkness rating and measures for brightness:
+          %p No evidence for negative correlations between darkness rating and measures for brightness:
 
-            Feature                | r      | p
+          %div(style="text-align:center")
-            -----------------------|--------|----------
+            %div(style="display:inline-block")
-            Spectral centroid      | 0.3340 | &lt;0.01
+              :markdown
-            High frequency content | 0.1526 | 0.0631
+                Feature                | r     | p
-          %figure.fifty
+                -----------------------|-------|----------
+                <nobr>Spectral centroid</nobr>      | 0.334 | &lt;0.01
+                <nobr>High frequency content</nobr> | 0.153 | 0.063
+          %figure.fifty(style="margin-top:0.4em")
             %img(src="files/violin_keyEdma_darkMean_blaugelb.png")
           %p
             Musical excerpts in minor mode were significantly rated as
             <q>harder</q> than those in major mode. (<nobr>p &lt; 0.01</nobr>
             according to t-test)
           %h2 Model
-          %figure.fifty
+          %figure.fifty.right(style="width:67%;text-align:center;margin-bottom:3px")
             %img(src="files/scatter_darkness_model8.png")
-          :markdown
+            %div(style="display:inline-block")
-            Sequential feature selection:
+              :markdown
-
+                RMSE | R<sup>2</sup> | MSE  | MAE | r
-            * combination of 8 features 
+                0.81 | 0.60          | 0.65 | 0.64 | 0.798
-            * predictive linear regression model
+          %p(style="text-align:center")<>
-
+            Sequential feature selection
-            RMSE| 0.81
+            %br<>
-            R-Squared| 0.60
+            &darr;
-            MSE| 0.65
+            %br<>
-            MAE| 0.64
+            set of 8 features
-            r| 0.7978
+            %br<>
+            &darr;
+            %br<>
+            <b>predictive linear regression model</b>
+          -#
+            RMSE | 0.81
+            R<sup>2</sup> | 0.60
+            MSE | 0.65
+            MAE | 0.64
+            r | 0.798
+          .clear
           :markdown
             Rater Agreement
             ---------------
 
-            Intraclass Correlation Coefficient (Two-Way Model, Consistency):
+            Intraclass Correlation Coefficient <nobr>(Two-Way Model, Consistency):
-            **0.498**
+            <b>0.498</b></nobr>
           .clear
 
-      %footer
+    %footer(style="padding-top:0.2em")
-        %section#conclusion
+      %section#further_resultes_conclusion(style="padding-bottom:0.20em")
-          :markdown
+        %h1 Further Results &amp; Conclusions
-            Conclusion
+        %div
-            ==========
+          #column2_1
+            :markdown
+              Comparison
+              ----------
 
-            <q>Hardness</q> and <q>darkness</q> constitute perceptually relevant
+              When comparing <q>darkness</q> and <q>hardness</q>, the results
-            dimensions for a high-level description of music. By decoding the
+              indicate that the latter concept can be more efficiently described
-            sound characteristics associated with these concepts, they can be
+              and modeled by specific sound attributes:
-            used for analyzing and indexing music collections and e.g. in a
-            decision tree for automatic genre prediction.
 
-        %section#references
+              * The consistency between ratings given by different raters is
-          -#(style="width:44.5%;display:inline-block;float:right")
+                higher for <q>hardness</q> (see Intraclass Correlation
-          %h1 References
+                Coefficients)
-          %ul.literatur
+              * For the <q>hardness</q> dimension, a model can be based on a more
-            %li
+                compact set of features and at the same time leads to a better
-              %span.author Czedik-Eysenberg, I., Knauf, D., &amp; Reuter, C.
+                prediction rate
-              %span.year 2017
+
-              %span.title <q>Hardness</q> as a semantic audio descriptor for music using automatic feature extraction
+          #column2_2
-              %span.herausgeber Gesellschaft für Informatik, Bonn
+            :markdown
-              %span.link= link 'https://doi.org/10.18420/in2017_06'
+              Further application
-            %li
+              -------------------
-              %span.author Grey, J.M.
+
-              %span.year 1975
+            %figure.fifty(style="width:37%")
-              %span.title An Exploration of Musical Timbre
+              %img(src="files/confusionMatrix_simpleTree_genreAgg2.png")
-              %span.herausgeber Stanford University, CCRMA Report No.STAN-M-2
+            :markdown
-            %li
+              Although a considerable linear relation
-              %span.author Li,T., Ogihara,M.
+              (<nobr>r = 0.65</nobr>, <nobr>p &lt; 0.01</nobr>) is present between
-              %span.year 2003
+              the two dimensions within the studied dataset, the concepts prove to
-              %span.title Detecting emotion in music
+              be useful criteria for distinguishing music examples from different
-              %nobr
+              genres.
-                %span.herausgeber 4th ISMIR Washington &amp; Baltimore
+            %figure.quarterly(style="clear:initial;width:28%")
-                %span.pages 239-240
+              %img(src="files/predictionTree_genreAgg2.svg")
-            %li
+            %p
-              %span.author Huron, D.
+              E.g. a simple tree can be constructed for classification into broad
-              %span.year 2008
+              genre categories (Pop, Techno, Metal, Gothic) with an accuracy of
-              %span.title A comparison of average pitch height and interval size in major-and minor-key themes
+              74&nbsp;%.
-              %nobr
+
-                %span.herausgeber Empirical Musicology Review, 3
+          #column2_3
-                %span.pages 59-63
+            :markdown
-            %li
+              Conclusion
-              %span.author Siddiq,S. et al.
+              ----------
-              %span.year 2014
+
-              %span.title Kein Raum für Klangfarben - Timbre Spaces im Vergleich
+              <q>Hardness</q> and <q>darkness</q> constitute perceptually relevant
-              %nobr
+              dimensions for a high-level description of music. By decoding the
-                %span.herausgeber 40. DAGA
+              sound characteristics associated with these concepts, they can be
-                %span.pages 56-57
+              used for analyzing and indexing music collections and e.g. in a
-          .clear
+              decision tree for automatic genre prediction.
+
+      %section#references
+        -#(style="width:44.5%;display:inline-block;float:right")
+        %h1 References
+        %ul.literatur
+          %li
+            %span.author Czedik-Eysenberg, I., Knauf, D., &amp; Reuter, C.
+            %span.year 2017
+            %span.title <q>Hardness</q> as a semantic audio descriptor for music using automatic feature extraction
+            %span.herausgeber Gesellschaft für Informatik, Bonn
+            %span.link= link 'https://doi.org/10.18420/in2017_06'
+          %li
+            %span.author Grey, J.M.
+            %span.year 1975
+            %span.title An Exploration of Musical Timbre
+            %span.herausgeber Stanford University, CCRMA Report No.STAN-M-2
+          %li
+            %span.author Li,T., Ogihara,M.
+            %span.year 2003
+            %span.title Detecting emotion in music
+            %nobr
+              %span.herausgeber 4th ISMIR Washington &amp; Baltimore
+              %span.pages 239-240
+          %li
+            %span.author Huron, D.
+            %span.year 2008
+            %span.title A comparison of average pitch height and interval size in major-and minor-key themes
+            %nobr
+              %span.herausgeber Empirical Musicology Review, 3
+              %span.pages 59-63
+          %li
+            %span.author Siddiq,S. et al.
+            %span.year 2014
+            %span.title Kein Raum für Klangfarben - Timbre Spaces im Vergleich
+            %nobr
+              %span.herausgeber 40. DAGA
+              %span.pages 56-57
+        .clear

style.scss

@@ -63,7 +63,6 @@ header {
 	}
 
 	h1 {
-		//font-family: "Italianno";
 		font-weight: normal;
 		margin: 0 {
 			//bottom: 0.5rem;
@@ -101,7 +100,7 @@ header {
 	padding: 0 1rem 0 1rem;
 	position: relative;
 
-	color: #bbb;
+	color: #ddd;
 	text-shadow: 0 0 5px black, 0 0 10px black, 0 0 15px black;
 	//text-stroke: 1px black;
 	//-webkit-text-stroke: 1px black;
@@ -132,11 +131,14 @@ header, main, footer {
 }
 
 footer {
-	padding-top: 0.5em;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 0 0.45em 0 0.45em;
+	//padding-top: 0.5em;
 	section {
-		padding: 2.25rem 0.5rem 0.25rem 0.5rem;
+		//padding: 2.25rem 0.5rem 0.25rem 0.5rem;
 		h1:first-child {
-			margin: (-2.25rem) -0.5rem 0.25rem -0.5rem;
+			//margin: (-2.25rem) -0.5rem 0.25rem -0.5rem;
 		}
 	}
 }
@@ -144,6 +146,7 @@ footer {
 body {
 	margin: 0;
 	background: url(brushed-metal.dark.svg), url(files/marble_black.png), #252220;
+	//background: #252220;
 	color: #565655;
 	font-family: "Cardo";
 }
@@ -166,7 +169,7 @@ section {
 	font-size: 0.95em;
 	//text-align: justify;
 
-	&:first-child + * {
+	& + * {
 		margin-top: 1em;
 	}
 
@@ -187,7 +190,10 @@ section {
 	&::before {
 		z-index: -1;
 		//background: linear-gradient( rgba(44, 58, 41, 0.8) 2.2rem, rgba(256, 256, 256, 0.8) 2.3rem );
-		background: linear-gradient( rgba(49, 206, 15, 0.8) 2.2rem, rgba(256, 256, 256, 0.8) 2.3rem );
+		//background: linear-gradient( rgba(101, 42, 7, 0.8) 2.2rem, rgba(256, 256, 256, 0.85) 2.3rem );
+		//background: linear-gradient( rgba(0, 99, 166, 0.8) 2.2rem, rgba(256, 256, 256, 0.85) 2.3rem );
+		//background: linear-gradient( rgba(187, 187, 187, 0.8) 2.2rem, rgba(256, 256, 256, 0.85) 2.3rem );
+		background: linear-gradient( rgba(78, 83, 159, 0.8) 2.2rem, rgba(256, 256, 256, 0.85) 2.3rem );
 		content: "";
 		//border-radius: 2rem 2rem 0.5rem 0.5rem;
 		position: absolute;
@@ -195,7 +201,7 @@ section {
 		right: 0;
 		bottom: 0;
 		left: 0;
-		box-shadow: 0 0 1rem #555;
+		box-shadow: 0 0 1rem black;
 		-webkit-print-color-adjust: exact;
 		-webkit-filter: opacity(1);
 	}
@@ -207,18 +213,31 @@ section {
 		//border-bottom: 0.3rem solid black
 		//border-radius: 0.18rem 1.68rem 0 0
 		font-size: 1.8rem;
-		color: orange;
+		//color: #0063a6;
+		color: #ddd;
 		line-height: normal;
 		text-align: center;
-		font-family: "Italianno";
-		font-weight: normal;
 
 		//border-radius: 0.5rem 2rem 0 0
 		//padding: 0.1em 0.5rem;
-		margin: (-2.5rem) -1rem 0.5rem -1rem;
+		margin: (-2.25rem) -1rem 0.75rem -1rem;
 
 		//background-color: rgba(128,128,256,0.8)
 	}
+	h1, h2 {
+		font-family: "PT Slab";
+		font-weight: normal;
+		margin: 0;
+	}
+	h2 {
+		line-height: normal;
+	}
+}
+
+sup {
+	font-size: 0.65em;
+	vertical-align: top;
+	line-height: 1em;
 }
 
 quellen {
@@ -254,11 +273,11 @@ quellen {
 }
 
 #column1_1, #column1_2, #column1_3,
-#column2_1, #column2_2 {
+#column2_1, #column2_2, #column2_3 {
 	display: inline-block;
 	box-sizing: border-box;
 	margin: 0;
-	padding: 0 1em 0.5em 1em;
+	padding: 0 0.3em 0.5em 0.3em;
 	vertical-align: top;
 	position: relative;
 
@@ -275,7 +294,7 @@ quellen {
 }
 
 #column1_1 {
-	width: 33%;
+	width: 29%;
 	//padding-right: 0.5em;
 }
 
@@ -283,21 +302,24 @@ quellen {
 	//float: right;
 	//padding-left: 0.7em;
 	//margin-left: -0.5em;
-	width: 33%;
+	width: 41%;
 }
 #column1_3 {
 	//float: right;
 	//padding-left: 0.7em;
 	//margin-left: -0.5em;
-	width: 33%;
+	width: 29%;
 }
 
 #column2_1 {
-	width: 49%;
+	width: 30%;
 }
 #column2_2 {
 	width: 49%;
 }
+#column2_3 {
+	width: 20%;
+}
 
 .logos {
 	width: 19rem;
@@ -350,6 +372,9 @@ h1 {
 	font-family: "Cardo";
 	//font-weight: normal;
 }
+h2 {
+	font-family: "Cardo";
+}
 
 em {
 	color: #500;
@@ -375,15 +400,21 @@ feature {
 }
 
 main {
-	position: absolute;
+	text-align: center;
-	top: 10.5cm;
+	&>*{
-	right: 0;
+		text-align: initial;
-	left: 0;
+	}
+	position: relative;
+	//top: 10.5cm;
+	//right: 0;
+	//left: 0;
 
 	/*img {
 		margin: -0.5em;
 	}*/
+}
 
+main, footer {
 	figure {
 		margin: 0;
 		&.left {
@@ -411,6 +442,12 @@ main {
 				clear: left;
 			}
 		}
+		&.pfifty {
+			width: 47%;
+			display: inline-block;
+			vertical-align: bottom;
+			text-align: center;
+		}
 
 		&.quarterly {
 			float: right;
@@ -462,10 +499,11 @@ footer #literatur {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
+	font-size: 0.8em;
 
 	th, td {
 		border: 1px solid #aaa;
-		padding: 0.1em;
+		padding: 0.1em 0.5em;
 	}
 }
 
@@ -549,9 +587,10 @@ ul.literatur {
 }
 
 figcaption {
-	font-size: 0.8em;
+	font-size: 0.45em;
 	font-style: italic;
-	margin-bottom: 1em;
+	//margin-bottom: 1em;
+	padding: 0;
 }
 
 jbr {
@@ -559,3 +598,19 @@ jbr {
 	width: 100%;
 	height: 0;
 }
+
+.blockarrow {
+	line-height: 1em;
+	position: absolute;
+	text-align: center;
+	font-size: 4.5rem;
+	//color: #652a07;
+	color: #bbb;
+	text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black;
+}
+
+.col2center {
+	td:first-child + td {
+		text-align: center;
+	}
+}