From f90bb5ba634b5b6b576bf545ecc0cfe9d8046cbb Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Tue, 22 Jan 2013 22:21:47 +0100
Subject: [PATCH] made 3 different css themes

---
 config.yaml                                |   2 +-
 content/css/darkmodern.sass                | 417 +++++++++++++++++++++
 content/css/{main2.sass => modern.sass}    |   0
 content/css/{main.sass => scientific.sass} |   0
 layouts/article.html                       |   2 +-
 layouts/article2.html                      |   2 +-
 layouts/default.html                       |   2 +-
 layouts/error.html                         |   2 +-
 output/Scratch/js/index.js                 |  44 ++-
 9 files changed, 450 insertions(+), 21 deletions(-)
 create mode 100644 content/css/darkmodern.sass
 rename content/css/{main2.sass => modern.sass} (100%)
 rename content/css/{main.sass => scientific.sass} (100%)

diff --git a/config.yaml b/config.yaml
index f9fb94204..5978c8a68 100644
--- a/config.yaml
+++ b/config.yaml
@@ -35,7 +35,7 @@ translations:
         en: "in English"
     switchCss:
         fr: "Changer le style"
-        en: "Switch style"
+        en: "Change style"
     clickForComment:
         fr: "Commentaires &amp; Partage"
         en: "Comments &amp; Share"
diff --git a/content/css/darkmodern.sass b/content/css/darkmodern.sass
new file mode 100644
index 000000000..fb8db4bbd
--- /dev/null
+++ b/content/css/darkmodern.sass
@@ -0,0 +1,417 @@
+-----
+
+-----
+/* Solarized palette */
+$base03 : #002b36
+$base02 : #073642
+$base01 : #586e75
+$base00 : #657b83
+$base0  : #839496
+$base1  : #93a1a1
+$base2  : #eee8d5
+$base3  : #fdf6e3
+$yellow : #b58900
+$orange : #cb4b16
+$red    : #dc322f
+$magenta: #d33682
+$violet : #6c71c4
+$blue   : #268bd2
+$cyan   : #2aa198
+$green  : #859900
+
+// Dark
+$background: $base03
+$altbackground: $base02
+$front: $base1
+$altfront: $base01
+$lighter: $base0
+
+// Light
+// $background: $base3
+// $altbackground: $base2
+// $front: $base01
+// $altfront: $base1
+// $lighter: $base00
+
+$unit: 20px
+$small: 14px
+$lineheight: $unit * 1.5
+$smalllineheight: $small * 1.5
+$hmargin: 4*$unit
+
+html
+  padding: 0
+body
+  padding: 0
+  margin: 0
+  font-family: 'Droid Sans', Helvetica, sans-serif !important
+  font-size: $unit
+  line-height: $lineheight
+  background: $altbackground
+  color: $front
+
+a
+  text-decoration: none
+  color: $yellow
+a:visited
+  color: $blue
+a:hover
+  color: $orange
+
+
+#blackpage, #nojsredirect
+  top: 0
+  left: 0
+  width: 100%
+  min-height: 100%
+  margin-left: 0
+  margin-right: 0
+  margin-top: 0
+  margin-bottom: 0
+  position: fixed
+  text-align: center
+  background: $altbackground
+
+#content
+  background: $background
+  color: $front
+  width: 37*$unit + 2*$hmargin
+  margin: 0 auto
+  padding: 0
+  #titre h1
+    padding: 0 $hmargin
+    margin: 4*$unit auto
+    text-align: center
+  h1,h2,h3,h4,h5,h6
+    color: $lighter
+    padding: 0 $hmargin
+    margin: $unit 0
+  table
+    margin: $unit 0
+    padding: 0 $hmargin
+    tr
+      &:nth-child(odd)
+        background-color: $altbackground
+      th
+        border: solid medium $altfront
+        padding: 0.25*$unit
+        margin: 0
+      td
+        border: solid 1px $altfront
+        padding: 0.25*$unit
+        margin: 0
+  figure
+    margin: 0
+    padding: 0
+    figcaption
+      padding: 0 $hmargin
+      margin: $unit 0
+  p
+    padding: 0 $hmargin
+    margin: $unit 0
+  img
+    max-width: 100%
+    display: block
+    border-top: medium solid
+    border-bottom: medium solid
+    margin: $unit auto
+  pre
+    background: $background
+    font-family: monaco, monospace
+    font-size: 0.8*$unit
+    overflow: auto
+    padding: $unit
+    line-height: 1.4 * 0.8 * $unit
+    border-top: solid 1px $altfront
+    border-bottom: solid 1px $altfront
+  pre code
+    background: none
+    border: none
+  ul
+    list-style: none
+  ul li:before
+    content: "- "
+  ul
+    padding-left: 0
+    margin: $unit $hmargin
+    // width of '-'
+    text-indent: -($unit/2)
+  ol
+    padding-left: 0
+    margin: $unit $hmargin
+  .toc, #markdown-toc
+    a
+      color: $front
+    ol li, ul li
+      margin: ($unit/2) 0
+  ol li ul, ol li ol, ul li ol, ul li ul
+    margin: ($unit/2) (3*$unit/2)
+    list-style: none
+  li p
+    display: inline
+    margin: 0
+    padding: 0
+
+#entete > #choix > #choixrss
+  margin: 0
+  padding: 0
+#entete > #choix > #choixlang
+  float: left
+
+#choixlang
+  float: left
+#choix
+  text-align: center
+#choix > div
+  display: inline-block
+
+
+#choix
+  text-align: center
+  font-size: (3*$unit / 4)
+  background: $background
+  padding: 0 $unit
+  font-weight: bold
+  .return
+    float: right
+.cut
+  color: $front
+  font-size: (2*$unit/3)
+  opacity: .5
+  display: block
+  text-align: right
+  &:after
+    content: " »"
+  &:hover
+    opacity: 1
+hr
+  color: $altfront
+  border-color: $altfront
+  margin: 0 $hmargin
+p code, li code
+  padding: 1px 2px
+  background: $altbackground
+  border: solid 1px $altfront
+#content
+  blockquote
+    border: solid 1px $altfront
+    background: $altbackground
+    p
+      padding: 0 $unit
+    code
+      background: $altbackground
+      border: solid 1px rgba(0,0,0,0.1)
+    pre code
+      background: none
+      border: none
+
+// Specific elements
+#social,#choixrss,#comment
+  margin: $unit $hmargin
+#social
+  float: left
+  opacity: 0.3
+  &:hover
+    opacity: 1
+#choixrss
+  float: right
+  opacity: 0.3
+  &:hover
+    opacity: 1
+#comment
+  img
+    width: auto
+    max-width: 100%
+.intro
+  width: 37*$small + 2*$hmargin
+  margin: 0 auto
+  font-size: $small
+  line-height: $smalllineheight
+  color: $lighter
+  blockquote hr
+    display: none
+.left
+  float: left
+.right
+  float: right
+#content
+  img.right, img.left
+    max-width: 30%
+    border: medium solid
+  img.left
+    margin: 0 (0.5*$hmargin) 0 $hmargin
+  img.right
+    margin: 0 $hmargin 0 (0.5*$hmargin)
+.flush
+  clear: both
+
+#bottom
+  padding: $unit 0
+  text-align: center
+  font-size: $small
+  line-height: $smalllineheight
+#entete
+  padding: $unit 0
+  text-align: center
+  ul
+    text-indent: 0
+  ul li:before
+    content: ""
+  ul li
+    display: inline-block
+    span.active
+      color: $yellow
+  ul li > *
+    padding: 2px $unit
+    border: solid
+#previous_articles
+  float: left
+  text-align: left
+#next_articles
+  float: right
+  text-align: right
+.corps
+  padding-bottom: 2*$unit
+
+#tagcloud
+  margin: $unit $hmargin
+  font-size: $small
+  line-height: $smalllineheight
+#sousliens.archive > ul
+  display: none
+#sousliens.archive > h4:hover
+  cursor: pointer
+#hiddenDivs > div
+  display: none
+.list
+  margin: $unit $hmargin
+pre .list
+  margin: 0 0
+#content img#mainlogo
+  width: auto
+  margin: 0 auto
+  display: block
+  max-width: 100%
+.date, .day, .month, .year
+  display: inline-block
+  padding-left: 10px
+  text-align: right
+.day
+  width: 10px
+.month
+  width: 20px
+.year
+  width: 30px
+.date
+  margin-right: 10px
+
+.popularblock
+  display: block
+  float: left
+  margin: 1.5%
+  width: 30%
+  figure
+    width: 100%
+    height: 120px
+    overflow: hidden
+    figcaption
+      display: none
+
+// classes for colors
+.base03
+  color: $base03
+.base02
+  color: $base02
+.base01
+  color: $base01
+.base00
+  color: $base00
+.base0
+  color: $base0
+.base1
+  color: $base1
+.base2
+  color: $base2
+.base3
+  color: $base3
+.yellow
+  color: $yellow
+.orange
+  color: $orange
+.red
+  color: $red
+.magenta
+  color: $magenta
+.violet
+  color: $violet
+.blue
+  color: $blue
+.cyan
+  color: $cyan
+.green
+  color: $green
+
+// Presentation
+#content
+  section.slide.last
+    border-bottom: ($unit/5) solid $altfront
+  section.slide
+    border-top: ($unit/5) solid $altfront
+    & > *
+      padding: 0 $unit
+    margin: 0
+    background-color: $background
+    color: $front
+    padding: $unit 0
+    a
+      text-decoration: none
+      color: $lighter
+    a:visited
+      color: $altfront
+    pre
+      padding: $unit
+      margin: $unit
+    pre,code
+      background-color: $altbackground
+      border: 1px solid $altfront
+      code
+        border: none
+        background: none
+    blockquote
+      background-color: $altbackground
+      border-color: $altfront
+    h1,h2,h3,h4,h5,h6
+      color: $lighter
+    ul
+      margin: $unit 0
+      padding: 0
+      li
+        margin: 0.5*$unit 1.5*$unit
+    img
+      display: block
+      max-width: 80%
+      margin: $unit auto
+      padding: .5*$unit
+      background-color: $altbackground
+      border: solid 1px $altfront
+    img.right, img.left, figure.right, figure.left
+      max-width: 26%
+      margin: .5*$unit
+      figcaption
+        padding: 0
+        text-align: center
+    figure
+      max-width: 80%
+      margin: 0 auto
+      img
+        max-width: 80%
+.codefile
+  font-size: 0.7*$unit
+  text-align: right
+  margin-bottom: -2*$unit
+.footnotes
+  font-size: 0.8*$unit
+#next_before_articles
+  font-size: (14 * $unit / 20)
+  padding: 0 $hmargin
+  margin: $unit 0
diff --git a/content/css/main2.sass b/content/css/modern.sass
similarity index 100%
rename from content/css/main2.sass
rename to content/css/modern.sass
diff --git a/content/css/main.sass b/content/css/scientific.sass
similarity index 100%
rename from content/css/main.sass
rename to content/css/scientific.sass
diff --git a/layouts/article.html b/layouts/article.html
index c44b30e61..67c941513 100644
--- a/layouts/article.html
+++ b/layouts/article.html
@@ -11,7 +11,7 @@
 %>        <meta name="keywords" content="<%= t %>"><%
         end
 %>        <link rel="shortcut icon" type="image/x-icon" href="<%=@config[:webprefix]%>/img/favicon.ico" />
-        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/main.css" />
+        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/scientific.css" />
         <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/solarized.css" />
         <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/idc.css" />
         <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
diff --git a/layouts/article2.html b/layouts/article2.html
index 6efa31983..d2c69ad71 100644
--- a/layouts/article2.html
+++ b/layouts/article2.html
@@ -11,7 +11,7 @@
 %>        <meta name="keywords" content="<%= t %>"><%
         end
 %>        <link rel="shortcut icon" type="image/x-icon" href="<%=@config[:webprefix]%>/img/favicon.ico" />
-        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/main2.css" />
+        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/modern.css" />
         <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/solarized_striped.css" />
         <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/idc.css" />
         <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
diff --git a/layouts/default.html b/layouts/default.html
index 9724153cf..4ed6cd29e 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -8,7 +8,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <%= meta_tags %>
         <link rel="shortcut icon" type="image/x-icon" href="<%=@config[:webprefix]%>/img/favicon.ico" />
-        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/main.css" />
+        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/scientific.css" />
         <link rel="alternate" type="application/rss+xml" title="RSS" href="<%= @config[:rss_uri][language.intern] %>"/>
         <%= meta_alternate %>
         <!--[if lt IE 9]>
diff --git a/layouts/error.html b/layouts/error.html
index fe2baf5d2..10aef7643 100644
--- a/layouts/error.html
+++ b/layouts/error.html
@@ -11,7 +11,7 @@
         <meta name="keywords" content="<%= t %>">
         <% end %>
         <link rel="shortcut icon" type="image/x-icon" href="<%=@config[:webprefix]%>/img/favicon.ico" />
-        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/main.css" />
+        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/scientific.css" />
         <script type="text/javascript" src="<%=@config[:webprefix]%>/js/jquery-1.3.1.min.js"></script>
         <script type="text/javascript" src="<%=@config[:webprefix]%>/js/jquery.cookie.js"></script>
         <!--[if lt IE 9]>
diff --git a/output/Scratch/js/index.js b/output/Scratch/js/index.js
index 0d5ac7d7d..8d37010bd 100644
--- a/output/Scratch/js/index.js
+++ b/output/Scratch/js/index.js
@@ -78,27 +78,39 @@ function detectClient() {
 //     $('#blackpage').append('<div class="preintro"><div class="corps">'+msgintro+'</div></div>');
 // });
 
+var pref='/Scratch/assets/css';
+var styleindex=0;
+var styles=[ pref+'/scientific.css'
+		  , pref+'/modern.css'
+		  , pref+'/darkmodern.css'];
 
+function reloadStylesheets() {
+	var queryString = '?reload=' + new Date().getTime();
+	$('link[rel="stylesheet"]').each(function () {
+		this.href = this.href.replace(/\?.*|$/, queryString);
+	});
+}
+function switchCssTo(style) {
+	// try each style
+	styles.forEach(function(trystyle){
+		if ($('link[href="'+trystyle+'"]').length > 0) {
+			$('link[href="'+trystyle+'"]').attr('href',style);
+			styleindex = $.inArray(style,styles);
+			console.log('styleindex = ' + styleindex + ', style = ' + style);
+		}
+	});
+	// save the preference
+	$.cookie('css',style);
+}
 // Ability to switch css by clicking on #swtichcss
 function switchcss() {
-	var pref='/Scratch/assets/css';
-	var latexstyle=pref+'/main.css';
-	var modernstyle=pref+'/main2.css';
-
-	if ( $.cookie('css') == latexstyle ) {
-		$('link[href="'+modernstyle+'"]').attr('href',latexstyle);
-	}
-	if ( $.cookie('css') == modernstyle ) {
-		$('link[href="'+latexstyle+'"]').attr('href',modernstyle);
+	// If the user has saved a preference
+	// load its preferred style
+	if ( $.cookie('css') !== null ) {
+		setTimeout(function(){switchCssTo($.cookie('css'));}, 1000);
 	}
 	$('#switchcss').click(function(){
-			if ($('link[href="'+latexstyle+'"]').length > 0) {
-				$('link[href="'+latexstyle+'"]').attr('href',modernstyle);
-				$.cookie('css',modernstyle);
-			} else {
-				$('link[href="'+modernstyle+'"]').attr('href',latexstyle);
-				$.cookie('css',latexstyle);
-			}
+		switchCssTo(styles[ (styleindex+1) % styles.length ]);
 		});
 }