made 3 different css themes
This commit is contained in:
parent
5d9c19c865
commit
f90bb5ba63
9 changed files with 450 additions and 21 deletions
|
@ -35,7 +35,7 @@ translations:
|
|||
en: "in English"
|
||||
switchCss:
|
||||
fr: "Changer le style"
|
||||
en: "Switch style"
|
||||
en: "Change style"
|
||||
clickForComment:
|
||||
fr: "Commentaires & Partage"
|
||||
en: "Comments & Share"
|
||||
|
|
417
content/css/darkmodern.sass
Normal file
417
content/css/darkmodern.sass
Normal file
|
@ -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
|
|
@ -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'>
|
||||
|
|
|
@ -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'>
|
||||
|
|
|
@ -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]>
|
||||
|
|
|
@ -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]>
|
||||
|
|
|
@ -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 ]);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue