diff options
| author | Franck Cuny <franck@lumberjaph.net> | 2012-11-26 21:43:31 -0800 |
|---|---|---|
| committer | Franck Cuny <franck@lumberjaph.net> | 2012-11-26 21:43:46 -0800 |
| commit | 98a8e8dbe8fda8445af7e9adade3e221cc34eb98 (patch) | |
| tree | c78be6e4b4498092c172a37344b7363ddfd93e74 | |
| parent | article about graphite (diff) | |
| download | lumberjaph-98a8e8dbe8fda8445af7e9adade3e221cc34eb98.tar.gz | |
New theme, inspired by http://skife.org/.
Diffstat (limited to '')
| -rw-r--r-- | _includes/disqus.html | 3 | ||||
| -rw-r--r-- | _layouts/default.html | 53 | ||||
| -rw-r--r-- | _layouts/post.html | 29 | ||||
| -rw-r--r-- | about/index.html | 83 | ||||
| -rw-r--r-- | archives.html | 14 | ||||
| -rw-r--r-- | index.html | 17 | ||||
| -rw-r--r-- | static/css/screen.css | 532 |
7 files changed, 325 insertions, 406 deletions
diff --git a/_includes/disqus.html b/_includes/disqus.html index 8b07c75..fce7455 100644 --- a/_includes/disqus.html +++ b/_includes/disqus.html @@ -1,5 +1,4 @@ -<div id="disqus"> - <div id="disqus_thread"></div> +<div id="disqus_thread"> <script type="text/javascript"> /** * var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread] diff --git a/_layouts/default.html b/_layouts/default.html index 3d4b93b..5fe7a10 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,52 +3,45 @@ <head> <meta charset="utf-8" /> <title>{{ page.title }}</title> - <meta name="author" content="franck cuny" /> - <link href="http://feeds.feedburner.com/ImALumberjaph" rel="alternate" title="I'm a lumberjaph" type="application/atom+xml" /> + + <meta name="author" content="Franck Cuny" /> + + <link href="/index.atom" rel="alternate" title="I'm a lumberjaph" type="application/atom+xml" /> <!--Homepage CSS--> <link rel="stylesheet" href="/static/css/screen.css" media="screen, projection" /> <link href="/favicon.ico" rel="shortcut icon" /> + <link rel="openid2.provider" href="http://www.google.com/accounts/o8/ud?source=profiles" /> <link rel="openid2.local_id" href="http://www.google.com/profiles/franck.cuny" /> + {% include analytics.html %} + + <link rel="me" href="http://twitter.com/franckcuny"> + <link rel="me" href="http://github.com/franckcuny"> + <link rel="me" href="http://www.linkedin.com/in/franckcuny"> </head> -<body> -<div class="site"> +<body> - <div class="title"> - <div class="intro"> - This is <a class="extra" rel="author" href="/about/">Franck</a>'s blog, - where he <a href="/archives.html" class="extra">writes about web - technologies, code, graph, and Perl</a>. - </div> +<div id="site"> + <div id="header"> + <h1> + <a href="/">I'm a lumberjaph and I'm OK.</a> + <span id="navigation"> + <a href="/about/">About</a> + <a href="/archives.html">Archive</a> + </span> + </h1> </div> - {{ content }} <footer> - <div class="footer"> - <div class="contact"> - <p> - franck cuny<br /> - franck@lumberjaph.net - </p> - </div> - <div class="contact"> - <p> - <a href="http://github.com/franckcuny/">github.com/franckcuny</a><br /> - <a href="http://twitter.com/franckcuny/">twitter.com/franckcuny</a><br /> - </p> - </div> - <div class="rss"> - <a href="http://feeds.feedburner.com/ImALumberjaph"> - <img src="/static/imgs/rss.png" alt="Subscribe to RSS Feed" /> - </a> - </div> - </div> + <div id="footer"> + © 2008-2012 + <a href="/about/">Franck Cuny</a> </footer> </div> diff --git a/_layouts/post.html b/_layouts/post.html index c3db531..9a2f7d3 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,17 +1,24 @@ --- layout: default --- -<div id="post"> - <h2 id="post_title"> - <span id="gplus"><g:plusone size="medium" annotation="none"></g:plusone></span><span id="actual_title"><a href="{{ page.url }}" rel="bookmark" title="{{ page.title }}">{{ page.title }}</a></span> - </h2> - - <span id="date">published <time datetime="{{ page.date }}" pubdate>{{ page.date | date_to_string }}</time></span> - <article> - {{ content }} - </article> +<div id="content"> + <div id="page"> + <h1 class="emphnext"> + <a href="{{ page.url }}" rel="bookmark" title="{{ page.title }}">{{ page.title }}</a> + <span class="post-date">{{ page.date | date_to_string }}<span> + </h1> - <hr /> - {% include disqus.html %} + <article> + {{ content }} + </article> + + {% include disqus.html %} + + <div id="pagination"> + <a href="/">Home</a> + | + <a href="/archives.html">Archives</a> + </div> + </div> </div> diff --git a/about/index.html b/about/index.html index 53e1498..7635a21 100644 --- a/about/index.html +++ b/about/index.html @@ -1,50 +1,53 @@ --- layout: default --- +<div id="content"> <div id="page"> -<section itemscope itemtype="http://data-vocabulary.org/Person"> - <h2>About me</h2> - <p> - - <img class="floatright" src="/static/imgs/stargit.jpg" alt="me, photo (c) Rafael Garcia-Suarez" /> - - My name is <span itemprop="name">franck cuny</span>, and I'm just - another Perl hacker. I'm a french software engineer living in San - Francisco. - - <br /><br /> - - I'm passionate about <a href="/graph/2010/03/25/github-explorer.html">graphs</a>, code, and web technologies. - - <br /><br /> - - I write about technologies I like, software I use, code, or conferences I go. - - <br /><br /> + <section itemscope itemtype="http://data-vocabulary.org/Person"> + <h2>About me</h1> + + <p><img class="floatright" src="/static/imgs/stargit.jpg" alt="me, + photo (c) Rafael Garcia-Suarez" width="400"/>My name + is <span itemprop="name">Franck Cuny</span>, and I'm just another + (french) Perl hacker living in the wonderful city of San Francisco.</p> + + <p>I'm passionate + about code, <a href="/graph/2010/03/25/github-explorer.html">graphs</a>, + and web technologies. I write about technologies I like, + software I use, code, and conferences I go.</p> + + <p>I'm a <span itemprop="title">software engineer</span> working + at <a href="http://saymedia.com/"><span itemprop="affiliation">SAY: + Media</span></a>, where most of my time is spent working on our + platform, and writing Perl and Python code.</p> - I'm a <span itemprop="title">software engineer</span> working at <a - href="http://saymedia.com/"><span itemprop="affiliation">SAY: - Media</span></a>, where most of my time is spent working on - our platform, and writing Perl and Python code. + <p> I'm also a member + of <a href="http://paris.mongueurs.net/">Paris.pm</a>, a + wonderful group of people spreading the love for Perl in France.</p> - <br /><br /> + <h3>Contacting me</h3> - I'm also a member of <a href="http://paris.mongueurs.net/">Paris.pm</a> and SF.pm. + <p> You can reach me + via <a href="mailto:franck@lumberjaph.net">mail</a>, or irc (I'm + franck) on <a href="irc://irc.perl.org">irc.perl.org</a>.</p> - <br /><br /> + <h3>Other places where you can find me</h3> + <ul> + <li><a itemprop="url" href="http://github.com/franckcuny">GitHub</a></li> + <li><a itemprop="url" href="http://twitter.com/franckcuny">Twitter</a></li> + <li><a itemprop="url" href="http://www.linkedin.com/in/franckcuny">LinkedIn</a></li> + </ul> - You can reach me via <a href="mailto:franck@lumberjaph.net">mail</a>, or irc (I'm franck) on <a href="irc://irc.perl.org">irc.perl.org</a>. + <h3>Copyright, Licensing, Etc</h3> - <br /><br /> - Other places where you can find me: - - <ul> - <li><a itemprop="url" href="http://github.com/franckcuny">github</a></li> - <li><a itemprop="url" href="http://twitter.com/franckcuny">twitter</a></li> - <li><a itemprop="url" href="http://search.cpan.org/~franckc/">CPAN</a></li> - <li><a itemprop="url" href="https://plus.google.com/114048512345425814599/posts">Google+</a></li> - <li><a itemprop="url" href="http://fr.linkedin.com/pub/franck-cuny/1a/362/506">linkedin</a></li> - </ul> - </p> -</section> -</div> + <p>The content of this site is licensed under + a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative + Commons Attribution-ShareAlike 3.0 Unported License (CC BY-SA + 3.0)</a>.</p> + + <p>The main CSS styling is derived + from <a href="http://skife.org/about.html">Brian McCallister</a> + styling.</p> + + </section> +</div></div> diff --git a/archives.html b/archives.html index 9dfb73d..9d3389f 100644 --- a/archives.html +++ b/archives.html @@ -2,11 +2,11 @@ layout: default title: Archives --- -<div id="page"> -<h2>archive</h2> -<ul> -{% for post in site.posts %} -<li><a href="{{ post.url }}">{{ post.title }}</a> <abbr>{{ post.date | date_to_string }}</abbr></li> -{% endfor %} -</ul> +<div id="content"> + <div id="page"> + <h1>Archives</h1> + {% for post in site.posts %} + <h2><a href="{{ post.url }}">{{ post.title }}</a> <abbr>{{ post.date | date_to_string }}</abbr></h2> + {% endfor %} + </div> </div> @@ -3,15 +3,14 @@ layout: default title: I'm a lumberjaph --- {% assign first_post = site.posts.first %} -<div id="post"> - <h2 id="post_title"> - <span id="gplus"><g:plusone size="medium" annotation="none"></g:plusone></span> - <span id="actual_title"><a href="{{ first_post.url }}" rel="bookmark" title="{{ first_post.title }}">{{ first_post.title }}</a></span> - </h2> - <span id="date">published <time datetime="{{ first_post.date }}" pubdate>{{ first_post.date | date_to_string }}</time></span> +<div id="content"> + <div id="page"> + <h1 class="emphnext"> + <a href="{{ first_post.url }}" rel="bookmark" title="{{ first_post.title }}">{{ first_post.title }}</a> + <span class="post-date">{{ first_post.date | date_to_string }}<span> + </h1> - <article>{{ first_post.content }}</article> - - <a id="more" href="{{ first_post.url }}#disqus">Comments »</a> + <article>{{ first_post.content }}</article> + </div> </div> diff --git a/static/css/screen.css b/static/css/screen.css index 48a1e0e..4519912 100644 --- a/static/css/screen.css +++ b/static/css/screen.css @@ -1,341 +1,292 @@ -@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold); -@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular); +/* reset */ +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,abbr { margin:0; padding:0;} +/* /reset */ body { - background-color: #fafafa; - color: #222; - font-family: 'Droid Sans',Verdana, sans-serif; - font-size: 13px; - margin-top: 0px; + font-family: Palatino, georgia, "times new roman", serif; + font-size: 1.2em; } -ul { - margin-left: 1.25em; - list-style-type: square; -} - -li { - display: list-item; +p { + margin: 0 0 1.5em 0; + text-align: justify; } -h1, h2 { - font-size: 120%; - margin: 1em 0em .5em 0em; +a { + text-decoration: none; + color: #339; } -h3, h4, h5, h6 { - font-size: 100%; - margin: 1em 0em .5em 0em; +a:hover { + text-decoration: underline; + color: #33f; } -p { - margin: 1em 0; +#content h1,h2,h3,h4 { + line-height:1em; + font-weight: normal; + clear: left; + font-family: 'lucida grande', sans-serif; + margin-top: .5em; + margin-right: 0; + margin-left: 0em; + margin-bottom: 0; + padding-bottom: .5em; } -a { - color: #8085C1; - text-decoration: none; +#content h1 span.author { + font-size: 0.75em; } -.img_center { - display: block; - margin-left: auto; - margin-right: auto; - -webkit-box-shadow: 5px 5px 5px #262526; -moz-box-shadow: 5px 5px 5px #262526; box-shadow: 5px 5px 5px #262526; -}; - -a:hover { - color: black; - text-decoration: none; +#content h1 span.post-date { + font-size: 0.75em; } -a:visited { - /*color: #660000;*/ - text-decoration: none; -} -table { - font-size: inherit; - font: 100%; +/* post title */ +#content h1.emphnext { + font-size: 1.5em; } - -ul.posts { - margin-bottom: 2em; -} - -ul.posts span { - color: #aaa; - font-family: Monaco, "Courier New", monospace; - font-size: 80%; -} - -.site { - background: #ffffff; - border-style: solid; - border-width: 1px; - font-size: 110%; - width: 65em; - margin: 0em auto 2em auto; -} - -.intro { - font-size: 110%; - line-height: 1.6em; - padding-top: 50px; - padding-left: 30px; -} - -.title { - /*background-color: black;*/ - background-image:url('/static/imgs/back.png'); - color: black; - font-weight: bold; - font-size: 180%; - height: 248px; - padding: 4em 1em 0 1em; -} - -.site .title a { - color: #ffffff; - text-decoration: none; - /*-moz-transition: color .25s linear;*/ - /*-webkit-transition: color .25s linear;*/ - /*transition: color .25s linear;*/ -} - -.site .title a:hover { - /*color: black;*/ -} - -.site .title a.extra { - /*color: #660000;*/ - text-decoration: none; -/* margin-left: 1em;*/ +#content h1 { font-size: 1.25em; } +#content h2 { font-size: 1.1em; } +#content h2::before { + color: silver; + content: "❯ "; } - -.site .title a.extra:hover { - /*color: black;*/ +#content h3 { font-size: 1em; } +#content h3::before { + color: silver; + content: "❯❯ "; } -.site .meta { - color: #aaa; -} +sup { line-height: 1ex; } -.site footer { - font-size: 90%; - color: #666; - border-top: 4px solid #eee; - margin-top: 2em; - overflow: hidden; - padding: 0 1em 0 1em; +#site { + max-width: 46em; + margin: 1.5em auto 3em auto; + line-height:1.5em; } -.site footer .contact { - float: left; - margin-right: 3em; +#page { + background: white; + padding: .5em 3em 1.5em 3em; } -.site footer .contact a { - color: #8085C1; +/* @group FancyFirst */ +.emphnext + p:first-letter, p.emphfirst:first-letter { + font-size: 2em; + padding: 0 0.15em 0 0; + margin: 0.05em 0 -0.15em 0; + line-height: 1em; + float: left; } -.site footer .rss { - margin-top: 1.1em; - margin-right: -.2em; - float: right; +.emphnext + p:first-line, p.emphfirst:first-line { + font-variant: small-caps; + font-size: larger; } +/* @end */ -.site footer .rss img { - border: 0; +.right { float: right; clear: left; } +.left { float: left; clear: right; } +.inset { + border: 1em solid silver; + padding: 2px; + margin: 0em 0.8em 0.8em 0.8em; } +.right.inset { margin-right: 0 !important; } +.left.inset { margin-left: 0 !important; } -#page { - text-align: justify; - line-height: 1.5em; - margin: .5em 1.1em .5em 1.1em; +blockquote { + padding: 0 2.8em; + margin: 1.714em 0; + color: #444; + font-size: 0.875em; + line-height: 1.714em; } -#post { - text-align: justify; - line-height: 1.5em; - margin: 0em 1.1em .5em 1.1em; +.note { + padding-top: 0.5em; + background-color: #fafaff; + border-top: 1px solid silver; + border-bottom: 1px solid silver; } - -#post pre { - border: 1px solid #ddd; - background-color: #eef; - padding: 0 .4em; +/* @group Table */ +table { + width: 80%; + margin: 1.5em auto 1.5em auto; + table-layout: fixed; + border-spacing: 0; +} +table tr { text-align: center; } +table th { font-weight: normal; background-color: #eeeeee; } +table td { background-color: white; } +table th.title { border-bottom: 1px solid gray; border-top: 1px solid gray; vertical-align: bottom; background-color: lightgrey; } +caption { + color: #333; + font-size: 0.875em; + margin: 0.875em auto 0 auto; + line-height: 1.14em; + text-align: justify; +} + +/* @end */ + +/* @group Lists */ +ul { + margin-top: 1.5em; + margin-bottom: 1.5em; + line-height: 1.5em; + padding-left: 1.5em; +} +ul li { + list-style-type: square; + list-style-position: outside; +} +ol li { + list-style-type: decimal; + list-style-position: inside; +} +dt { font-weight: bold;} +dd { margin: 0 0 1.5em 0; text-align: justify; } + +ul.compact { margin: 0; padding: 0;} +ul.compact li { list-style: none; } +/* @end */ + +/* @group Header */ +#header a { color: silver; } + +#header { + color: silver; + position: relative; + font-variant: small-caps; + line-height: 1em; + margin-top: .5em; + margin-bottom: 0; + background: white; + padding-top: 0em; + padding-left: 3em; + padding-right: 3em; + padding-bottom: .25em; +} + +#header h1 { + font-size: 1.5em; + font-family: Palatino, georgia, "times new roman", serif; + margin-bottom: 0; + line-height: 0.9em; + display: block; + font-weight: normal; + color: silver; } - -#post ul, #post ol { - margin-left: 1.25em; +/* @end */ + +/* @group Footnotes */ +.footnotes { color: grey; } +.footnotes:hover { color: black; } +.footnotes ol li { + list-style-type: decimal; + list-style-position: inside; + font-size: 75%; + line-height: 1.5em; } +.footnotes ol li > a { display: none; } +/* @end */ -#post code { - border: 1px solid #ddd; - background-color: #eef; - font-size: 95%; - padding: 0 .2em; -} +.list { font-weight: bold; } +p.line { position: relative; margin: 0; } +p.excerpt { margin: 0; } +.comments { font-size: smaller; position: absolute; color: silver; right: 0; top: 0; } +.excerpt { color: black; } -#post pre code { - border: none; +/* @group Code */ +pre { + margin: 1em 0 1.5em 0; + line-height: 1.5em; + color: #111; + background: white; + border: 1px solid #ddc; + padding: 0.5em 1em; + overflow: hidden; } -#post pre.terminal { - border: 1px solid black; - background-color: #333; - color: white; +pre:hover { + border-right: none; + overflow: visible; } - -#post pre.terminal code { - background-color: #333; +code { + font-size: 1em; + background-color: #f7f7ff; + line-height: 1.4em; } - -#date { - font-size: 80%; - text-align: right; - font-weight: normal; +pre > code { + background-color: transparent; } +/* @end */ -#post h2 { - border-bottom: 1px solid #ededed; +/* @group Figures and images */ +dl.figure { + margin-top: 1.5em; + margin-bottom: 1.5em; + text-align: center; } -#post h3 { - border-bottom: 1px solid #ededed; - margin-top: 2em; +dl.figure dd { + color: #333; + font-size: 0.875em; + margin: 0.875em auto 0 auto; + line-height: 1.14em; + text-align: justify; + width: 85%; } +/* @end */ -#page h2 { - border-bottom: 1px solid #ededed; -} +/* @group Equations */ +div.maruku-equation { display: block ;text-align: center; } +div.maruku-equation img.maruku-png { position: relative; top: -0.75em;} +span.maruku-inline { } +img.maruku-png { } +/* @end */ -#page h3 { - border-bottom: 1px solid #ededed; - margin-top: 2em; +#footer { + padding: .5em 3em 1.5em 3em; + font-family: 'lucida grande', sans-serif; } -#post_title { - background-color: #000000; - text-align: left; - letter-spacing: 2px; - line-height: 1.8em; - /*border-bottom: 1px solid #ededed;*/ - font-weight:bold; - font-size: 1.5em; - position: relative; - /*margin: 0 -1.1em 0 -1.1em;*/ - /*padding-bottom: .1em;*/ - padding: 10px 10px 10px 0px; - margin: 0px -15px 20px -55px; - /*-webkit-box-shadow: 0px 2px 4px #888;*/ - /*-moz-box-shadow: 0px 2px 4px #888;*/ - /*box-shadow: 0px 2px 4px #888;*/ +#pagination a.back { + float: left; } -#post_title:after { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: 0px; - top: 100%; - border-width: 5px 20px; - border-style: solid; - border-color:#666 #666 transparent transparent; +#pagination { + text-align: center; + font-family: 'lucida grande', sans-serif; } -#post_title:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - right: -4px; - top: 0px; - border-color: transparent #fff transparent transparent; +#pagination a.forward { + float: right; } -#post_title a{ - color:white; -/* -moz-transition: color .25s linear; - -webkit-transition: color .25s linear; - transition: color .25s linear;*/ +#navigation { + float: right; + font-size: .75em; } -#gplus { - padding: 0px 10px 0px 6px; +#navigation a { + color: darkgray; } -#actual_title{ - padding: 0px 0px 0px 10px; +hr { + border-color: #ccc; + border-style: solid; + border-width: 1px 0 0; + clear: both; + margin: 0 0 20px; + height: 0; } -/*#post_title {*/ - /*background-color: #000000;*/ - /*text-align: left;*/ - /*letter-spacing: 2px;*/ - /*line-height: 1.8em;*/ - /*[>border-bottom: 1px solid #ededed;<]*/ - /*font-weight:bold;*/ - /*font-size: 1.5em;*/ - /*position: relative;*/ - /*[>width: 50%;<]*/ - /*[>margin: 0 -1.1em 0 -1.1em;<]*/ - /*[>padding-bottom: .1em;<]*/ - /*padding: 6px 20px 6px 70px;*/ - /*margin: 30px 10px 10px -70px;*/ - /*text-shadow: 0px 1px 2px #bbb;*/ - /*-webkit-box-shadow: 0px 2px 4px #888;*/ - /*-moz-box-shadow: 0px 2px 4px #888;*/ - /*[>box-shadow: 0px 2px 4px #888;<]*/ -/*}*/ - -/*#post_title:after {*/ - /*content: ' ';*/ - /*position: absolute;*/ - /*width: 0;*/ - /*height: 0;*/ - /*left: 0px;*/ - /*top: 100%;*/ - /*border-width: 5px 10px;*/ - /*border-style: solid;*/ - /*border-color: #666 #666 transparent transparent;*/ -/*}*/ - -/*#post_title:before {*/ - /*content: ' ';*/ - /*position: absolute;*/ - /*width: 0;*/ - /*height: 0;*/ - /*right: -2px;*/ - /*top: 0px;*/ - /*border-color: transparent #fff transparent transparent;*/ -/*}*/ - -/*#post_title a{*/ - /*color:#E50;*/ - /*-moz-transition: color .25s linear;*/ - /*-webkit-transition: color .25s linear;*/ - /*transition: color .25s linear;*/ -/*}*/ -/*#post_title a:hover{color:#E50;}*/ - -#related { - margin-top: 2em; -} - -#related h2 { - margin-bottom: 1em; -} - -.talk { - padding-top: 1em; -}; - -.avatar { - float: right; - -webkit-box-shadow: 0px 0px 10px #262526; -moz-box-shadow: 0px 0px 10px #262526; box-shadow: 0px 0px 10px #262526; +#dsq-footer { + display: none; } .floatright { @@ -344,37 +295,4 @@ ul.posts span { -webkit-box-shadow: 5px 5px 10px #262526; -moz-box-shadow: 5px 5px 10px #262526; box-shadow: 5px 5px 10px #262526; } -/* stargit */ -ul.actions { - display: block; - list-style-type: none; - overflow: hidden; - padding: 0; -} - -ul.actions li { - float: left; - font-size: 1.2em; - margin-left: 0.6em; -} - -.minibutton input { - background-color: #f7f7f7; - border: 1px solid #d4d4d4; - color: #333; - display: block; - font-weight: bold; - margin: 0; - padding: 0.4em 1em; - height: 2em; - - text-shadow: 0 1px 0 #fff; - - background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#ececec)); - background: -moz-linear-gradient(top, #f4f4f4, #ececec); - - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; -} |
