fixed multi page, css and switching

Scratch/css/darkmodern.sass

@@ -1,6 +1,7 @@
 @import "Scratch/css/include/solarized"
 
 // Dark
+$textbackground: $base03 - #131313
 $background: $base03
 $altbackground: $base02
 $front: $base1

Scratch/css/dynamic.sass

@@ -0,0 +1,19 @@
+*
+  transition-property: all
+  transition-duration: .5s
+  -moz-transition-property: all
+  -moz-transition-duration: .5s
+  -webkit-transition-property: all
+  -webkit-transition-duration: .5s
+  -o-transition-property: all
+  -o-transition-duration: .5s
+
+#social *, #comment *
+  transition-property: all
+  transition-duration: 0s
+  -moz-transition-property: all
+  -moz-transition-duration: 0s
+  -webkit-transition-property: all
+  -webkit-transition-duration: 0s
+  -o-transition-property: all
+  -o-transition-duration: 0s

Scratch/css/include/modern.sass

@@ -17,12 +17,31 @@ body
 
 a
   text-decoration: none
-  color: $yellow
+  color: $orange
 a:visited
-  color: $blue
+  color: $violet
 a:hover
-  color: $orange
+  color: $blue
+  text-shadow: 0 0 1px $red
 
+.corps
+  a
+    color: $front
+    &:after
+      content: '*'
+      line-height: 0
+      font-size: .66em
+      vertical-align: super
+    &:visited
+      color: $front
+
+#navigation
+  text-align: center
+  padding: 1em
+  letter-spacing: .25em
+  .sep
+    opacity: .3
+    font-style: italic
 
 #blackpage, #nojsredirect
   top: 0
@@ -35,10 +54,10 @@ a:hover
   margin-bottom: 0
   position: fixed
   text-align: center
-  background: $altbackground
+  background: $background
 
 #content
-  background: $background
+  background: $textbackground
   color: $front
   width: 37*$unit + 2*$hmargin
   margin: 0 auto
@@ -56,7 +75,7 @@ a:hover
     padding: 0 $hmargin
     tr
       &:nth-child(odd)
-        background-color: $altbackground
+        background-color: $background
       th
         border: solid medium $altfront
         padding: 0.25*$unit
@@ -125,19 +144,23 @@ a:hover
 
 #choixlang
   float: left
+#switchcss
+  float: right
 #choix
   text-align: center
 #choix > div
   display: inline-block
 
 
+#header
+  background: $background
+
 #choix
   text-align: center
   font-size: (3*$unit / 4)
-  background: $background
   padding: 0 $unit
   font-weight: bold
-  .return
+  #switchcss
     float: right
 .cut
   color: $front
@@ -155,16 +178,16 @@ hr
   margin: 0 $hmargin
 p code, li code
   padding: 1px 2px
-  background: $altbackground
+  background: $background
   border: solid 1px $altfront
 #content
   blockquote
     border: solid 1px $altfront
-    background: $altbackground
+    background: $background
     p
       padding: 0 $unit
     code
-      background: $altbackground
+      background: $background
       border: solid 1px rgba(0,0,0,0.1)
     pre code
       background: none
@@ -225,7 +248,7 @@ p code, li code
   ul li
     display: inline-block
     span.active
-      color: $yellow
+      color: $orange
   ul li > *
     padding: 2px $unit
     border: solid
@@ -337,13 +360,13 @@ pre .list
       padding: $unit
       margin: $unit
     pre,code
-      background-color: $altbackground
+      background-color: $background
       border: 1px solid $altfront
       code
         border: none
         background: none
     blockquote
-      background-color: $altbackground
+      background-color: $background
       border-color: $altfront
     h1,h2,h3,h4,h5,h6
       color: $lighter
@@ -357,7 +380,7 @@ pre .list
       max-width: 80%
       margin: $unit auto
       padding: .5*$unit
-      background-color: $altbackground
+      background-color: $background
       border: solid 1px $altfront
     img.right, img.left, figure.right, figure.left
       max-width: 26%
@@ -380,3 +403,20 @@ pre .list
   font-size: (14 * $unit / 20)
   padding: 0 $hmargin
   margin: $unit 0
+
+.inlineblockimg
+  width: 60px
+  margin: 0 8px
+  text-align: center
+  vertical-align: middle
+  display: inline-block
+img.inlineimage
+  max-height: 48px
+  max-width: 48px
+  border: solid
+  box-shadow: none
+  margin: 0 auto
+  vertical-align: middle
+  font-size: 7px
+  font-family: Helvetica, sans-serif
+  overflow: hidden

Scratch/css/modern.sass

@@ -0,0 +1,11 @@
+@import "Scratch/css/include/solarized"
+
+// Light theme
+$textbackground: $base3 + #181818
+$background: $base3
+$altbackground: $base1
+$front: $base01
+$altfront: $base1
+$lighter: $base00
+
+@import "Scratch/css/include/modern"

Scratch/css/scientific.sass

@@ -229,6 +229,18 @@ body, h1, h2, h3, h4, #entete, .tagname
 body
   font-family: Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif
 
+#choix
+  font-style: italic
+#navigation
+  letter-spacing: .25em
+  margin: 1em auto 2em
+  font-size: 1.25em
+  text-align: center
+  font-weight: bold
+  .sep
+    opacity: .3
+    font-style: italic
+
 /* Header Numbering */
 .article #afterheader
   counter-reset: niv02
@@ -300,7 +312,7 @@ acronym
 
 =clearbutton
   display: block
-  width: 25%
+  width: 20%
   cursor: pointer
   margin: 1em 0
   padding: 1em
@@ -338,7 +350,7 @@ acronym
 .nojsbutton
   font-size: 2.5em
 
-#clickcomment, #choixlang > a, #choixrss > a, .return > a
+#clickcomment, #choixrss > a
   +clearbutton
 
 .return > a, #choixrss > a
@@ -347,11 +359,11 @@ acronym
 #choix
   .return > a, #choixrss > a
     margin-top: 0
-  #return
+  #switchcss
     float: right
   #choixlang
     float: left
-    width: 25%
+  #choixlang, #switchcss
     a
       margin-top: 0
       width: 100%
@@ -515,7 +527,7 @@ $hauteur_menu: 4em
 
 // Le Contenu
 #content
-  line-height: 4em
+  line-height: 2em
   margin-left: auto
   margin-right: auto
   margin-top: 0
@@ -741,35 +753,6 @@ pre
   overflow-x: auto
   overflow-y: hidden
 
-.navigationprev, .navigationnext
-  padding: 0px
-  margin-left: 0.2em
-  margin-right: 0.2em
-  margin-bottom: 0
-  margin-top: $VMarginCorps
-  width: 45%
-
-.navigation .navigationprev,
-.navigation .navigationnext
-  width: 30%
-  margin-top: 0
-
-.navigation
-  height: 4em
-  border-bottom: $lighterColorBorderBottom solid 1px
-
-.presarticleleft,
-.presarticleright
-  font-size: 1em
-
-.navigationprev
-  float: left
-  text-align: left
-
-.navigationnext
-  float: right
-  text-align: right
-
 .impact, .darkimpact
   text-align: left
   width: 66%

Scratch/en/blog/03_losthighway.md

@@ -53,3 +53,87 @@ I give an **interpretation** and not an **explanation**. Just to tell my vision
 There is certainly many coherent explanations.
 
 I write this post because I believe I had found an interpretation which seems coherent for most of the movie.
+
+# Movie's keys
+
+<div class="encadre" style="text-align: center">
+        <strong>
+            All is in Fred's memory
+        </strong>
+</div>
+
+In a first, it is clear for me, it is not a fantastic movie. If you follow this line, you'll face many problem explaining some scenes.
+
+My hypothesis is the movie describe the Fred's representation of reality.
+Each of his tries to escape reality will fail.
+
+Fred had commited an horrible act, a murder, and try to *repair* his memory to accepts it. He'll then create alternative realities.
+
+  - In a first time he kills his wife (Renee) because he believes she cheated at him.
+  - In the second part, he's weaker and will be manipulated by the blond equivalent of Renee to kill Dick Laurent.
+  - In a third part, he kills Dick Laurent
+
+## Why this interpretation can be valid?
+
+Because of the dialog at the begining of the movie. Cops ask Fred if he's own a video camera:
+
+> "Do you own a video camera?"  
+> "No, Fred hates them."  
+> "I like to remember things my own way."  
+> "What do you mean by that?"  
+> "How I remember them, not necessarily the way they happened."  
+
+Then, what we see is not reality but the Fred's perception. Fred is the God of the reality we see. This is why some God/Devil interpretation of the movie works not so bad.
+
+
+## Who is the mysterious man?
+
+leftblogimage( "mysteryman.jpg" , "l'homme mystérieux" )
+
+Who's this mysterious man? He tells Fred it's him who invited him in his house. He's present at the party and in the house of Fred in the same time. Eyes wide open, looking everything Fred's doing?
+
+It's a key of the movie. In my humble opinion, I believe it represents the bad part of Fred. Certainly jalousy. If I was catholic, I'll said he's Satan. He observe, film but don't act. He helps Fred to kill Dick Laurent.
+Fred had let him enter and cannot let him go.
+As _Iago_ of Shakespeare is imprisonned by its own jalousy.
+The Mysterious Man help Fred doing the acts of violence. 
+It also force Fred to remember the reality.
+
+When he makes love to his wife (Renee), he sees the face of the Mysterious Man instead of his wife's face. In reality, it's the same person for Fred. It should be her who's the origin of his interior badness.
+
+
+## Who's at the origin of the video tapes?
+
+Certainly it's the mysterious man (Fred himself) who makes them. 
+Their reason should be:
+
+  + Remember the reality to Fred. From Fred point-of-view, video tapes are the reality. He tries to forget reality. But, finally, the video tapes go to the end: the murder of his wife.
+  + It may also be a reference to pornographic video tapes, made by Renee.
+
+## What really happened?
+
+There is many possibilities here. But we have many indices. Here is a supposition.
+
+### #1 Hypothesis
+
+The protagonist is a garagist fallen in love with a porno actress. He believe the producer is the bad guy who go again his will. Then he kills Dick Laurent.
+
+### #2 Hypothesis
+
+He was really married, he had killed his wife. The the remorse let him create an alternate self, which live in a kind of perfect world. But after the time pass, his obsession about the murder came again. And nobody could know if he had killed Andy or not.
+
+## which one then?
+
+The second hypothesis seems better. We can make much more interpretation with it. It explain in most part the strange phone call from Dick Laurent to Pete.
+But the first hypothesis remain coherent. And, we should probably make an in depth explanantion using the first hypothesis. And I'm not sure it would be better.
+
+One of the strength of this movie is to understand there is many other coherent hypothesis. It is an expression of the [Rashomon effect](http://en.wikipedia.org/wiki/Rashomon_effect). Many different persons could describe in a coherent manner what they saw. But each description contradicts the others.
+
+---
+
+## Conclusion
+
+There is much to tell about this movie. But I believe I put all essential keys here. It is a proof this movie is not a random one.
+
+I believe it is essential to remember the "test of Rorschach effet" when watching this movie.
+
+I'd like to know or opinion ; is my interpration wrong?