added a new article style
This commit is contained in:
Yann Esposito
parent
9bfa296091
commit
4d4e082ebc
4 changed files with 472 additions and 3 deletions
6
Rules
6
Rules
|
|
@ -71,10 +71,10 @@ compile '/html/*' do
|
|||
# filter :yabbreviations
|
||||
filter :footnotes
|
||||
|
||||
if item[:kind] == 'article'
|
||||
layout 'article'
|
||||
elsif not item[:layout].nil?
|
||||
if not item[:layout].nil?
|
||||
layout item[:layout]
|
||||
elsif item[:kind] == 'article'
|
||||
layout 'article'
|
||||
else
|
||||
layout 'default' unless item[:layout] == "none"
|
||||
end
|
||||
|
|
|
|||
24
content/css/cmufontface.sass
Normal file
24
content/css/cmufontface.sass
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
@font-face
|
||||
font-family: 'cmuntt'
|
||||
src: url('fonts/cmuntt.eot')
|
||||
src: local('☺'), url('fonts/cmuntt.svg') format('svg'), url('fonts/cmuntt.ttf') format('truetype')
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
@font-face
|
||||
font-family: 'ComputerModern'
|
||||
src: url('fonts/cmunrb.eot')
|
||||
src: local('☺'), url('fonts/cmunrb.svg') format('svg'), url('fonts/cmunrb.ttf') format('truetype')
|
||||
font-weight: bold
|
||||
@font-face
|
||||
font-family: 'ComputerModern'
|
||||
src: url('fonts/cmunsl.eot')
|
||||
src: local('☺'), url('fonts/cmunsl.svg') format('svg'), url('fonts/cmunsl.ttf') format('truetype')
|
||||
font-style: italic,oblique
|
||||
@font-face
|
||||
font-family: 'ComputerModern'
|
||||
src: url('fonts/cmunrm.eot')
|
||||
src: local('☺'), url('fonts/cmunrm.svg') format('svg'), url('fonts/cmunrm.ttf') format('truetype')
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
262
content/css/main2.sass
Normal file
262
content/css/main2.sass
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
-----
|
||||
|
||||
-----
|
||||
/* 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
|
||||
|
||||
/* $backtext: #FAFAFC */
|
||||
$backtext: $base3 + #151515
|
||||
$fronttext: $base02
|
||||
$hightext: $base03
|
||||
$borderColor: $base2
|
||||
$altback: $base3
|
||||
|
||||
@import url(/Scratch/assets/css/cmufontface.css)
|
||||
|
||||
/* General */
|
||||
body
|
||||
font-family: 'Futura', serif
|
||||
font-size: 20px
|
||||
color: $base3
|
||||
background: $base02
|
||||
|
||||
a, a:link, a:visited, a:active, a:hover
|
||||
color: $hightext
|
||||
text-decoration: none
|
||||
outline: none
|
||||
|
||||
a:hover
|
||||
color: $orange
|
||||
|
||||
hr
|
||||
color: $borderColor
|
||||
border:
|
||||
top: 1px solid $borderColor
|
||||
bottom: none
|
||||
left: none
|
||||
right: none
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
margin-left: 1.5ex
|
||||
text-indent: -1.5ex
|
||||
ol
|
||||
padding-left: 0
|
||||
|
||||
ul li:before
|
||||
content: "- "
|
||||
|
||||
ol li ul, ol li ol, ul li ol, ul li ul
|
||||
margin: .5em 1.5em
|
||||
list-style: none
|
||||
|
||||
/* fix for possible markdown issues */
|
||||
li p, ol p
|
||||
display: inline
|
||||
padding: 0
|
||||
|
||||
table tr
|
||||
&:nth-child(odd)
|
||||
background-color: $altback
|
||||
table
|
||||
border:
|
||||
top: solid 2px $borderColor
|
||||
bottom: solid 2px $borderColor
|
||||
|
||||
body
|
||||
text-rendering: optimizelegibility
|
||||
line-height: 1.5em
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: $hightext
|
||||
line-height: 1.1em
|
||||
padding-left: 30px
|
||||
|
||||
/* Header Numbering */
|
||||
.article #afterheader
|
||||
counter-reset: niv02
|
||||
h2
|
||||
counter-increment: niv02
|
||||
counter-reset: niv03
|
||||
marker-offset: 3em
|
||||
&:before
|
||||
content: counter(niv02) ". "
|
||||
h3
|
||||
counter-increment: niv03
|
||||
counter-reset: niv04
|
||||
&:before
|
||||
content: counter(niv02) "." counter(niv03) ". "
|
||||
h4
|
||||
counter-increment: niv04
|
||||
&:before
|
||||
content: counter(niv02) "." counter(niv03) "." counter(niv04) ". "
|
||||
|
||||
p, ul, ol, h1, h2, h3, h4
|
||||
margin-bottom: 30px
|
||||
padding: 0 30px
|
||||
text-align: justify
|
||||
|
||||
pre
|
||||
line-height: 1.1em
|
||||
margin-bottom: 30px
|
||||
padding: 30px
|
||||
overflow: auto
|
||||
background: $base3
|
||||
font-size: 18px
|
||||
|
||||
=sc
|
||||
text-transform: uppercase
|
||||
font-size: 0.8em
|
||||
|
||||
abbr, acronym
|
||||
+sc
|
||||
text:
|
||||
decoration: none
|
||||
border:
|
||||
bottom:
|
||||
width: 0
|
||||
|
||||
// -- TYPOGRAPHY --
|
||||
.small
|
||||
font-size: 0.8em
|
||||
|
||||
.sc
|
||||
+sc
|
||||
|
||||
.clear,.flush
|
||||
clear: both
|
||||
|
||||
.impact, .darkimpact
|
||||
font-size: 2em
|
||||
margin: 0 auto 1em auto
|
||||
line-height: 1.3em
|
||||
|
||||
figure
|
||||
margin: 3em 0
|
||||
img
|
||||
box-shadow: 0 10px 15px #CCC inset
|
||||
figcaption
|
||||
text-align: center
|
||||
margin: .5em 0
|
||||
figure.left, figure.right
|
||||
max-width: 30%
|
||||
|
||||
/* Specific */
|
||||
#afterheader
|
||||
color: $base01
|
||||
background-color: $backtext
|
||||
|
||||
.intro, .resume, blockquote
|
||||
font-style: italic
|
||||
padding: 0.5em 1em
|
||||
a:hover
|
||||
color: $orange
|
||||
i, em
|
||||
font-style: normal
|
||||
strong, b
|
||||
font-weight: normal
|
||||
|
||||
.intro, .resume
|
||||
font-size: 0.9em
|
||||
|
||||
blockquote
|
||||
border: solid 1px $borderColor
|
||||
background-color: $altback
|
||||
pre, pre code
|
||||
background-color: $base2
|
||||
pre
|
||||
border: solid 1px rgba(0,0,0,0.1)
|
||||
ul
|
||||
padding-left: 1.5em
|
||||
|
||||
section.slide
|
||||
border-color: $borderColor
|
||||
border: solid 1px
|
||||
margin-bottom: 1em
|
||||
padding: .5em
|
||||
font-family: sans-serif
|
||||
font-size: .8em
|
||||
|
||||
.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
|
||||
|
||||
/* Black page */
|
||||
#blackpage
|
||||
font-family: sans-serif
|
||||
font-style: italic
|
||||
padding-top: 8em
|
||||
z-index: 9000
|
||||
cursor: wait
|
||||
img
|
||||
background: none
|
||||
border: none
|
||||
max-width: 80%
|
||||
margin: 0 auto
|
||||
a
|
||||
cursor: pointer
|
||||
|
||||
.cut
|
||||
font-size: .8em
|
||||
text-align: right
|
||||
display: inline-block
|
||||
width: 100%
|
||||
opacity: 0.3
|
||||
|
||||
.cut:hover
|
||||
opacity: 1
|
||||
|
||||
|
||||
/* Layout */
|
||||
#afterheader
|
||||
width: 35em
|
||||
margin: 0 auto
|
||||
img
|
||||
width: 100%
|
||||
img.left, img.right
|
||||
width: 30%
|
||||
183
layouts/article2.html
Normal file
183
layouts/article2.html
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
-----
|
||||
-----
|
||||
<% language, languages, blog, article = setItemConf %><?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><%
|
||||
t=tags
|
||||
if t.length > 0
|
||||
%> <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]%>/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'>
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocom<%= language %>"/><%
|
||||
languages.each do |lang|
|
||||
item_for_lang=item_of_language(lang)
|
||||
if not item_for_lang.nil? %>
|
||||
<link rel="alternate" lang="<%= lang %>" xml:lang="<%= lang %>" title="<%= item_for_lang[:title] %>" type="text/html" hreflang="<%= lang %>" href="<%= item_for_lang.reps[0].path %>" /> <%
|
||||
end
|
||||
end
|
||||
%>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||||
<![endif]-->
|
||||
<title><%= @item[:title] %></title>
|
||||
</head>
|
||||
<body lang="<%= language %>" class="article">
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
document.write('<div id="blackpage"><div><%= tradOf(:welcomeloading)%><img src="<%=@config[:webprefix]%>/img/loading.gif" alt="<%= tradOf(:loading) %>"/></div></div>');
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<div id="content">
|
||||
<div id="choix">
|
||||
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
||||
<div id="choixlang"><%=
|
||||
languages.map do |l|
|
||||
dest=@item_rep.path.sub(%r{#{@config[:webprefix]}/../}, %{#{config[:webprefix]}/#{l}/})
|
||||
if @item_rep.path != dest
|
||||
%{<a href="#{dest}" onclick="setLanguage('#{l}')">#{ tradOfKeywordIn(:switchTo,l)}</a>}
|
||||
else
|
||||
nil
|
||||
end
|
||||
end.join() %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
</div>
|
||||
<div id="titre">
|
||||
<h1>
|
||||
<%= @item[:title] %>
|
||||
</h1>
|
||||
<% unless @item[:subtitle].nil? %>
|
||||
<h2>
|
||||
<%= @item[:subtitle] %>
|
||||
</h2>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
|
||||
<% if content_for(@item,:summary) %>
|
||||
<div class="corps summary">
|
||||
<% content_for(@item,:summary) %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= generateSubMenu %>
|
||||
|
||||
<div class="flush"></div>
|
||||
<div id="afterheader">
|
||||
<div class="corps">
|
||||
<%= yield %>
|
||||
</div>
|
||||
<% depth = depthOf(@item) %>
|
||||
<% if depth > 3 or ( depth == 3 and @item.children.length > 0 ) %>
|
||||
<div class="navigation">
|
||||
<div class="navigationprev"><%= previousFor(@item) %></div>
|
||||
<div class="navigationnext"><%= nextFor(@item) %></div>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
<% end %>
|
||||
|
||||
<div id="social">
|
||||
<div class="left"> <%= twitter_share_button %> </div>
|
||||
<div class="left"> <%= google_plus_button %> </div>
|
||||
<div class="flush"></div>
|
||||
</div>
|
||||
<div id="choixrss">
|
||||
<a id="rss" href="http://feeds.feedburner.com/yannespositocom<%= language %>">
|
||||
<%= tradOf(:subscribe) %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
|
||||
<div class="corps" id="comment">
|
||||
<h2 class="first"><%= tradOf(:comment) %></h2>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = 'yannesposito'; // required: replace example with your forum shortname
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
||||
</div>
|
||||
|
||||
<div id="entete" class="corps_spaced">
|
||||
<div id="liens">
|
||||
<%= generateMenu %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
<hr/>
|
||||
<div id="next_before_articles">
|
||||
<div id="previous_articles">
|
||||
<%= tradOf(:previousArticles) %>
|
||||
<%
|
||||
(1..3).each do |n|
|
||||
a=article_brother(-n)
|
||||
if not a.nil?
|
||||
%>
|
||||
<div class="previous_article">
|
||||
<%= link_to( %{<span class="nicer">«</span> }+ a[:title], a) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div id="next_articles">
|
||||
<%= tradOf(:nextArticles) %>
|
||||
<%
|
||||
(1..3).each do |n|
|
||||
a=article_brother(n)
|
||||
if not a.nil?
|
||||
%>
|
||||
<div class="next_article">
|
||||
<%= link_to(a[:title] + %{ <span class="nicer">»</span>}, a) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="bottom">
|
||||
<div>
|
||||
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
|
||||
</div>
|
||||
<div>
|
||||
<%=tradOf(:copyright) %>
|
||||
</div>
|
||||
<div id="lastmod">
|
||||
<%=tradOf(:created_at)%>: <%= @item[:created_at].strftime(@config[:dateFormat][language.intern]) %>
|
||||
<%=tradOf(:last_modified)%>: <%= gitmtime.strftime(@config[:dateFormat][language.intern]) %>
|
||||
</div>
|
||||
<div>
|
||||
<%= tradOf(:entirely_done_with) %>
|
||||
<a href="http://www.vim.org">Vim</a>
|
||||
<%= tradOf(:and) %>
|
||||
<a href="http://nanoc.stoneship.org">nanoc</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<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>
|
||||
<script type="text/javascript" src="<%=@config[:webprefix]%>/js/index.js"></script>
|
||||
<script type="text/javascript" src="<%=@config[:webprefix]%>/js/highlight/highlight.pack.js"></script>
|
||||
<script type="text/javascript" src="<%=@config[:webprefix]%>/js/article.js"></script>
|
||||
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||
</html>
|
||||
Loading…
Reference in a new issue