yogsototh/scratch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made 3 different css themes

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2013-01-22 22:21:47 +01:00
parent 5d9c19c865
commit f90bb5ba63
9 changed files with 450 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.yaml
View file

@ -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
View 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

0
content/css/main2.sass → content/css/modern.sass
View file

0
content/css/main.sass → content/css/scientific.sass
View file

2
layouts/article.html
View file

@ -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'>

2
layouts/article2.html
View file

@ -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'>

2
layouts/default.html
View file

@ -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]>

2
layouts/error.html
View file

@ -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]>

44
output/Scratch/js/index.js
View file

@ -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 ]);
});
}