slide's style update + makefile option

- the "--slide-level 2" allows to generate consistent html structure
- one should only use "##" but never "#" for now

Makefile

@@ -26,8 +26,8 @@ all : commands
 preview : $(DST_ALL)
 
 # Pattern for slides (different parameters and template).
-motivation.html : motivation.md _layouts/slides.revealjs
-	pandoc -s -t revealjs \
+motivation.html : motivation.md _layouts/slides.revealjs Makefile
+	pandoc -s -t revealjs --slide-level 2 \
 	--template=_layouts/slides \
 	-o $@ $<
 

css/swc-slides.css

@@ -318,17 +318,23 @@ h1 {
   font-size: 1.75em;
 }
 
-h2 {
+.level2 h1, h2 {
   margin: 0;
   padding: 0 10px;
   font-size: 1.5em;
+  /* undoing strange thing from _reset */
+  -webkit-transform: none;
+  -moz-transform: none;
+  -ms-transform: none;
+  -o-transform: none;
+  transform: none;
 }
 
 .deck-container > .slide {
   padding-top: 3em;
 }
 
-h2 {
+.level1 h1, h2 {
   position: absolute;
   top: 0;
   left: 0;
@@ -339,7 +345,7 @@ h2 {
   padding-top: 0;
 }
 
-h2 {
+.level2 h1, h2 {
   text-align: center;
 }
 
@@ -614,7 +620,7 @@ a:hover, a:focus {
   width: 50%;
 }
 
-div.figure p.caption {
+figure p.caption {
   color: #141a41;
   text-align: center;
   font-size: 80%;
@@ -624,19 +630,19 @@ div.figure p.caption {
   color: #141a41;
 }
 
-.slide.media-left > *:not(h2):not(img):not(blockquote):not(pre):not(div), .slide.media-left > div:not(.figure) {
+.slide.media-left > *:not(h2):not(h1):not(img):not(blockquote):not(pre):not(div):not(figure) {
   margin-left: 400px;
 }
-.slide.media-left > div.figure, .slide.media-left > img, .slide.media-left > blockquote, .slide.media-left > pre {
+.slide.media-left > figure, .slide.media-left > img, .slide.media-left > blockquote, .slide.media-left > pre {
   float: left;
   width: 50%;
   box-sizing: border-box;
 }
 
-.slide.media-right > *:not(h2):not(img):not(blockquote):not(pre):not(div), .slide.media-right > div:not(.figure) {
+.slide.media-right > *:not(h2):not(h1):not(img):not(blockquote):not(pre):not(div):not(figure) {
   margin-right: 400px;
 }
-.slide.media-right > div.figure, .slide.media-right > img, .slide.media-right > blockquote, .slide.media-right > pre {
+.slide.media-right > figure, .slide.media-right > img, .slide.media-right > blockquote, .slide.media-right > pre {
   float: right;
   width: 50%;
   box-sizing: border-box;
@@ -661,7 +667,7 @@ h1, h2 {
   font-weight: normal;
 }
 
-h2 {
+.level2 h1, h2 {
   border-bottom: none;
   font-size: 60px;
   position: absolute;
@@ -698,18 +704,18 @@ a:hover {
   text-decoration: none;
 }
 
-.slide.title-slide {
+.slide.title-slide, .slide.level1 {
   text-align: center;
   padding-top: 325px;
 }
-.slide.title-slide h1 {
+.slide.title-slide h1, .slide.level1 h1 {
   padding-bottom: 50px;
   bottom: 50%;
   top: auto;
   height: auto;
   transform: none;
 }
-.slide.title-slide img.logo {
+.slide.title-slide img.logo, .slide.level1 img.logo {
   position: absolute;
   padding-top: 100px;
   left: 0;