Update the theme.

Simpler and lighter theme. Not perfect yet, there's still more work to do on the resume page and a few other things to fix (images in post, etc).
author: Franck Cuny <franckcuny@gmail.com> 2014-12-04 20:02:23 -0800
committer: Franck Cuny <franckcuny@gmail.com> 2014-12-04 20:03:12 -0800
commit: 9fe2ac2521294d97cc7273a8ba0044943896d50f (patch)
tree: 2c0acb5d9a89f30c4a26339e61cb4038338adfcf
parent: update rsync command for publishing (diff)
download: lumberjaph-9fe2ac2521294d97cc7273a8ba0044943896d50f.tar.gz
11 files changed, 192 insertions, 350 deletions
diff --git a/_includes/cover.html b/_includes/cover.html
index efdae6a..e69de29 100644
--- a/_includes/cover.html
+++ b/_includes/cover.html
@@ -1,22 +0,0 @@
-<div id="cover_wrap" class="clearfix">
-
-  <header id="masthead" class="clearfix">
-    <div class="intro">
-      <h1>
-        <a href="/" id="home">Franck Cuny</a>
-        <a href="https://twitter.com/franckcuny">@franckcuny</a>
-      </h1>
-
-      <h2>
-        <span>Software and Operation engineer.</span>
-      </h2>
-    </div>
-
-  <ul class="nav">
-    <li><a href="/articles/" title="Posts">Posts</a></li>
-    <li><a href="/about/" title="About">About</a></li>
-  </ul>
-
-  </header>
-
-</div>
diff --git a/_includes/footer.html b/_includes/footer.html
index 243c209..4c0394b 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,8 +1,9 @@
-<footer id="footer" class="clearfix">
-  <div class="center_mod">
-  <ul class="nav">
-    <li><a href="/articles/" title="Posts">Posts</a></li>
-    <li><a href="/about/" title="About">About</a></li>
-  </ul>
-  </div>
+<footer>
+<div id="footer">
+
+  <p id='copyright'><a href='/'>lumberjaph.net</a> is &copy; 2008 &ndash; 2014 Franck Cuny // <a href="https://twitter.com/franckcuny">@franckcuny</a>
+      [ <a href='/articles'>All posts</a> |
+        <a href='/about'>About</a> ]</p>
+
+</div>
 </footer>
diff --git a/_layouts/default.html b/_layouts/default.html
index 80fc4e7..c741dc9 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -23,21 +23,17 @@
   <meta name="twitter:description" content="{{ page.summary }}">
   <meta name="twitter:url" content="{{ page.url }}">
 
-  <link rel="stylesheet" href="/static/css/screen.css" type="text/css"/>
+  <link rel="stylesheet" href="/static/css/style.css" type="text/css"/>
 
   <link rel="canonical" href="//lumberjaph.net{{ page.url | replace:'index.html','' }}" />
 </head>
 
-<body style>
+<body>
 
-  {% include cover.html %}
-
-  <div id="site"> {{ content }} </div>
-
-  {% include footer.html %}
+  <div id="container">
+    {{ content }}
+  </div>
 
 </body>
 
-
-
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
index 1801d73..0af49c3 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,14 +2,14 @@
 layout: default
 ---
 
-<article id="entry">
+<header>
+  <h1><a href="{{ page.url }}">{{ page.title }}</a></h1>
+</header>
 
-  <header class="entry-title">
-    <h1>{{ page.title }}</h1>
-  </header>
+<section>
 
-  <section>
-    {{ content }}
-  </section>
+  <div id="entry"> {{ content }} </div>
 
-</article>
+  {% include footer.html %}
+
+</section>
diff --git a/_layouts/static.html b/_layouts/static.html
index 5e71126..f3f047e 100644
--- a/_layouts/static.html
+++ b/_layouts/static.html
@@ -2,4 +2,7 @@
 layout: default
 ---
 
-{{ content }}
+<section>
+  {{ content }}
+  {% include footer.html %}
+</section>
diff --git a/about/index.md b/about/index.md
index b39749d..085fa4e 100644
--- a/about/index.md
+++ b/about/index.md
@@ -3,26 +3,18 @@ layout: static
 title: Hello!
 ---
 
-<section>
-
 I'm a French guy who moved to the Bay Area in 2011. I work as a Site Reliability Engineer at [Twitter](https://twitter.com.com).
 
 At the moment I'm especially interested in functional programming and operating system.
 
-</section>
-
 <figure>
 <a href="http://www.flickr.com/photos/rgarciasuarez74/5876329422/">
-<img alt="me, photo by Rafaël Garcia-Suarez" src="/static/imgs/5876329422_32040b7f40_b.webp" Width="100%" height="100%" class='portrait' align='center'>
+  <img alt="me, photo by Rafaël Garcia-Suarez" src="/static/imgs/5876329422_32040b7f40_b.webp" Width="100%" height="100%">
 </a>
 </figure>
 
-<section>
-
 I'm on [Twitter](https://twitter.com/franckcuny) and [GitHub](https://github.com/franckcuny). You can email me at [franckcuny@gmail.com](mailto:franckcuny@gmail.com).
 
 I'm a proud member of [Paris.pm](http://paris).
 
 If not otherwise noted the content found here is licensed under a [Creative Commons Attribution-ShareAlike 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/), and code is licensed under a [BSD license](/license.txt).
-
-</section>
diff --git a/articles/index.html b/articles/index.html
index ccb2633..5a7a0d7 100644
--- a/articles/index.html
+++ b/articles/index.html
@@ -3,15 +3,26 @@ layout: static
 title: Articles
 ---
 
-<ul class="post-listing">
-  {% for post in site.posts %}
-  <li>
-    <header class="entry-title">
-      <h2>
-        <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a>
-      </h2>
-      <p class="oneliner">{{ post.summary }}</p>
-    </header>
-  </li>
-  {% endfor %}
-</ul>
+<center><h1><a href="{{ root_url }}/">lumberjaph.net</a></h1></center>
+
+{% for post in site.posts reverse %}
+
+  {% capture date %}{{ post.date }}{% endcapture %}
+  {% capture this_year %}{{ date | date: "%Y" }}{% endcapture %}
+
+  {% unless year == this_year %}
+    {% assign year = this_year %}
+    {% unless forloop.first %}
+      </section>
+    {% endunless %}
+    <section class="archives"><h2>{{ date | date: "%Y" }}</h2>
+  {% endunless %}
+
+  <article>
+    <h3><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h3>
+    <div class="meta">
+      // <span class="date">{{ date | date: "%b %e " }}</span> &#8208; <span class="oneliner">{{ post.summary }}</span>
+    </div>
+  </article>
+
+{% endfor %}
diff --git a/index.html b/index.html
index 44932b8..56da622 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,30 @@
 ---
 layout: default
+title: lumberjaph.net
 ---
 
-{% assign page = site.posts.first %}
+<center><h1><a href="{{ root_url }}/">lumberjaph.net</a></h1></center>
 
-<article id="entry">
+{% for post in site.posts reverse limit:10 %}
 
-  <header class="entry-title">
-    <h1><a href={{ page.url }}>{{ page.title }}</a></h1>
-  </header>
+  {% capture date %}{{ post.date }}{% endcapture %}
+  {% capture this_year %}{{ date | date: "%Y" }}{% endcapture %}
 
-  <section>
-    {{ page.content }}
-  </section>
+  {% unless year == this_year %}
+    {% assign year = this_year %}
+    {% unless forloop.first %}
+      </section>
+    {% endunless %}
+    <section class="archives"><h2>{{ date | date: "%Y" }}</h2>
+  {% endunless %}
 
-</article>
+  <article>
+    <h3><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h3>
+    <div class="meta">
+      <span class="date">{{ date | date: "%b %e " }}</span>
+    </div>
+  </article>
+
+{% endfor %}
+
+{% include footer.html %}
diff --git a/resume/index.html b/resume/index.html
index 665deca..4dcc6c1 100644
--- a/resume/index.html
+++ b/resume/index.html
@@ -3,64 +3,59 @@ layout: static
 title: Résumé
 ---
 
-<section id='resume'>
+<div id='resume'>
 
     <div id='interests'>
         <p style='clear: both'>My current interests are in <strong>Functional Programming</strong> and <strong>Operations</strong>.</p>
     </div>
 
     <div id='contributions'>
-        <h2>Free Software Contributions</h2>
+        <h3>Free Software Contributions</h3>
         I've contributed to <a hrefp="http://perldancer.org">Dancer</a>, a web framework in Perl. I also maintain and contribute to several CPAN modules and some Python modules.
         <p style='clear: both'>You can find more about my Open Source work and contributions <a href='/projects/'>over there</a>.</p>
     </div>
 
     <div>
-        <h2>Work Experience</h2>
-        <h3><a href='https://twitter.com'>Twitter</a>, San Francisco, CA [August 2014 - present]</h3>
-        <div class="exp">
-          I'm a Site Reliability Engineer in the PubSub team.
-        </div>
+        <h3>Work Experience</h3>
 
-        <h3><a href='http://saymedia.com'>Say Media</a>, San Francisco, CA [August 2011 - August 2014]</h3>
-        <div class="exp">
-        From August 2011 to December 2012 I was part of the platform team. Tasks included designing the internal APIs.<br />
+        <p><a href='https://twitter.com'>Twitter</a>, San Francisco, CA [August 2014 - present]</p>
+        <ul>
+          <li>Site Reliability Engineer for the PubSub team</li>
+        </ul>
 
-        Starting December 2013 I joined a newly created team to improve developers efficiency by writing tools and providing a better infrastructure. Projects included setting up better monitoring with Graphite.
-        </div>
+        <p><a href='http://saymedia.com'>Say Media</a>, San Francisco, CA [August 2011 - August 2014]</p>
+        <ul>
+          <li>From August 2011 to December 2012 I was part of the platform team. Tasks included designing the internal APIs.</li>
+          <li>Starting December 2013 I joined a newly created team to improve developers efficiency by writing tools and providing a better infrastructure. Projects included setting up better monitoring with Graphite.</li>
+        </ul>
 
-        <h3><a href='https://developers.google.com/open-source/soc/'>Summer of Code Mentor</a>, Paris, France [May 2011 - August 2011]</h3>
-        <div class="exp">
-        As part of the Summer of Code 2011, I mentored one student to work on the Perl Dancer web framework. My job was to set priorities, help with development practices and review the code. I was also involved in the evaluation process.
-        </div>
+        <p><a href='https://developers.google.com/open-source/soc/'>Summer of Code Mentor</a>, Paris, France [May 2011 - August 2011]</p>
+        <ul>
+          <li>As part of the Summer of Code 2011, I mentored one student to work on the Perl Dancer web framework. My job was to set priorities, help with development practices and review the code. I was also involved in the evaluation process.</li>
+        </ul>
 
-        <h3><a href='http://linkfluence.net'>Linkfluence (RTGI)</a>, Paris, France [August 2007 - July 2011]</h3>
-        <div class="exp">
-        Linkfluence is a social media research company. Projects I've been involved on:
+        <p><a href='http://linkfluence.net'>Linkfluence (RTGI)</a>, Paris, France [August 2007 - July 2011]</p>
         <ul>
           <li>Set up procedures for development practices and software deployment (git, unit testing, how and what to document, etc)</li>
           <li>Lead developer of the backend used to aggregate data from various sources (feeds, web pages, external API, etc)</li>
           <li>Defined the architecture and designed the ReST API for most of the internal backend</li>
           <li>Wrote many libraries for accessing various webservices, data storage (Riak, CouchDB). Most of them have been open sourced</li>
         </ul>
-        </div>
 
-        <h3>Axe Media Direct, Brest, France [January 2005 - August 2007]</h3>
-        <div class="exp">
+        <p>Axe Media Direct, Brest, France [January 2005 - August 2007]</p>
         <ul>
           <li>Development of an online customer loyalty program (consultation, listing, statistics, etc.) (Catalyst Framework)</li>
           <li>PDF documents generation with XSLT</li>
           <li>Web server configuration and maintenance for database consulting</li>
        </ul>
-        </div>
 
-       <h3><a href='https://www.cmb.fr'>Crédit Mutuel de Bretagne</a>, Brest, France [April 2004- January 2005]<h3>
-           <div class="exp" />
+       <p><a href='https://www.cmb.fr'>Crédit Mutuel de Bretagne</a>, Brest, France [April 2004- January 2005]<p>
    </div>
 
    <div>
-     <h2>Other</h2>
+     <h3>Other</h3>
      <p>Self-taught (no college degree).</p>
      <p> Native French speaker, fluent in English.</p>
    </div>
-</section>
+
+</div>
diff --git a/static/css/cabin.ttf b/static/css/cabin.ttf
new file mode 100644
index 0000000..7c57306
--- /dev/null
+++ b/static/css/cabin.ttf
diff --git a/static/css/screen.css b/static/css/style.css
index 962a8fd..adb4c40 100644
--- a/static/css/screen.css
+++ b/static/css/style.css
@@ -1,271 +1,113 @@
-html {
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+@font-face {
+    font-family: 'Cabin';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Cabin Regular'), local('Cabin-Regular'), url('cabin.ttf') format('truetype');
 }
 
-body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  background-color: #fff;
-  text-align: left;
-  margin: auto;
-}
-@media only screen and (max-width: 46em) {
-  body {
-    font-size: 0.8em;
-  }
+* {
+    font-family: 'Cabin', "Book Antiqua", "URW Palladio L", sans-serif;
 }
 
-em {
-  font-style: italic;
+body {
+    padding: 1.5em 0;
 }
 
-a {
-  color: #4c6296;
-  text-decoration: none;
-  outline: 0;
+div#container {
+    width: 900px;
+    margin: 0 auto;
 }
 
-a:hover {
-  color: #173061;
-  text-decoration: none;
+h1 {
+    margin: 1.5em 0 1.5em 3em;
 }
 
-a:visited {
-  color: #6a4c96;
+h1 a {
+    text-decoration: none;
 }
 
-a:visited:hover {
-  color: #463263;
+.archives h2 h3 h4 {
+  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
 }
 
-a img {
-  border: 0;
+blockquote {
+  background-color: #eee;
+  margin: 1em;
+  padding: 0.3em 1em;
 }
 
-h1, h2, h3, h4 {
-  color: #375EAB;
+#entry, #wrapper {
+  font-size: 15pt;
 }
 
-#cover_wrap {
-  width: 900px;
-  margin: auto;
-  line-height: 1;
-  border-bottom: 1px solid #e8ebf2;
-}
-@media only screen and (max-width: 46em) {
-  #cover_wrap {
-    width: 90%;
-  }
-}
-#cover_wrap #masthead {
-  margin: 0 auto;
-  color: #57626b;
-}
-#cover_wrap #masthead header {
-  display: block;
-}
-#cover_wrap #masthead .intro {
-  line-height: 0.8;
-  float: left;
-}
-#cover_wrap #masthead .intro h1 {
-  line-height: 1;
-}
-#cover_wrap #masthead #home {
-  font-size: 1.2em;
-  font-weight: 700;
-  color: #57626b;
-}
-#cover_wrap #masthead h1 {
-  font-weight: 700;
-  font-size: 1.1em;
-}
-#cover_wrap #masthead h2 {
-  font-weight: 500;
-  font-size: 1em;
-}
-#cover_wrap #masthead a {
-  text-decoration: none;
-  font-size: 0.8em;
-  font-weight: 500;
-  color: #669ecc;
+#entry img {
+  margin-right: 1em;
+  margin-bottom: 1em;
 }
 
-.clearfix:after {
-  clear: both;
-  content: ".";
-  display: block;
-  height: 0;
-  visibility: hidden;
-  font-size: 0;
+#entry img.right {
+  float: right;
+  margin-left: 1em;
 }
 
-#footer {
-  width: 900px;
-  margin: auto;
-  border-top: 1px solid #e8ebf2;
-  box-shadow: inset 0 1px 0 #fff;
-  background: #fdfdfd;
-  display: block;
-}
-@media only screen and (max-width: 46em) {
-  #footer {
-    width: 90%;
-  }
-}
-#footer .center_mod {
-  margin: 0 auto;
+#entry, #entries, #wrapper, #resume {
+  width: 40em;
+  margin-left: 5em;
+  text-align: justify;
+  line-height: 1.5em;
 }
 
-.nav {
-  float: right;
-  padding: 0;
-}
-.nav li {
-  line-height: 1.3;
-  display: inline-block;
-}
-.nav li a {
-  margin-right: 16px;
-  font-weight: 700;
-  color: #9198ad;
-  font-size: 12px;
+#entries li {
+  margin: 0.5em;
 }
 
-img {
-  width: 100%;
-  max-width: 1000px;
-  text-align: center;
-  vertical-align: baseline;
-  height: auto !important;
+.footnotes {
+  font-size: 88%;
+  border-top: 1px solid grey;
 }
 
-figure {
-  margin: 4em 0;
-  display: block;
-  text-align: center;
+ul.spaced li {
+  margin-bottom: 1.5em;
 }
 
-#site {
-  margin: auto;
-  text-align: justify;
-  text-justify: inter-word;
-  line-height: 1.65;
-  font-weight: 400;
-  font-size: 110%;
-}
-#site section {
-  width: 900px;
-  margin: auto;
-}
-@media only screen and (max-width: 46em) {
-  #site section {
-    width: 90%;
-  }
-}
-#site .post-listing {
-  width: 900px;
-  margin: auto;
-  padding-left: 0px;
-  display: block;
-  list-style-image: none;
-  list-style-position: outside;
-  margin-bottom: 1em;
-}
-@media only screen and (max-width: 46em) {
-  #site .post-listing {
-    width: 90%;
-  }
-}
-#site .post-listing li {
-  list-style-type: none;
-  margin: 2.5em 0;
-}
-#site .post-listing li:first-child {
-  margin-top: 0;
-}
-#site .post-listing li h2 {
-  color: #2C251D;
-}
-#site .post-listing .oneliner {
-  color: #4A4235;
-}
-#site .post-listing .entry-title {
-  margin: 15px auto;
-}
-#site .post-listing .entry-title h2 {
-  font-size: 1.7em;
-  font-weight: 500;
-  margin-bottom: 5px;
-  color: #2c251d;
-  line-height: 1.1;
-}
-#site #resume #interests p {
-  font-weight: 700;
-  margin-top: 4em;
+#footer {
+  margin: 2em 0 8em 2em;
 }
-#site #resume h2 {
-  margin-top: 3em;
+
+#footer p {
   text-align: center;
 }
-#site #resume h3 {
-  font-weight: 700;
-  font-size: 1.1em;
-}
-#site #resume .exp {
-  padding-bottom: 1.2em;
-  border-bottom: 1px solid #dedede;
-}
-#site #resume .exp:last-child {
-  border-bottom: 1px solid white;
-}
-#site #entry {
-  padding: 0;
-  margin: 0 auto;
-  font-weight: 400;
-  color: #222;
-}
-#site #entry .entry-title {
-  width: 900px;
-  margin: 15px auto;
-  font-size: 100%;
-}
-@media only screen and (max-width: 46em) {
-  #site #entry .entry-title {
-    width: 90%;
-  }
-}
-#site #entry .entry-title h1 {
-  color: #2c251d;
-  font-size: 2.2em;
-  font-weight: 700;
-  line-height: 1.1;
+
+#footer img {
+  border: 0;
 }
-#site #entry section {
-  font-size: 100%;
+
+img.portrait {
+  margin-top: -3em;
+  margin-left: 2em;
 }
-#site #entry a {
-  transition: color 0.25s ease-in;
-  font-weight: 600;
-  color: #4c6296;
+
+a {
+  text-decoration: none;
+  color: #31674b;
 }
-#site #entry a:visited {
-  color: #6a4c96;
+
+a:hover {
+  text-decoration: underline;
+  color: #11472b;
 }
-#site #entry blockquote {
-  border-left: 4px solid #eee;
-  margin-left: 0;
-  margin-right: 18px;
-  margin-bottom: 18px;
-  padding-left: 10px;
-  color: #666;
+
+a img { border: 0; }
+
+a.older, a.newer {
+  size: 80%;
 }
-#site #entry pre {
+
+pre {
   font-family: Menlo, monospace;
   -webkit-font-smoothing: subpixel-antialiased;
   font-smoothing: subpixel-antialiased;
-  background-color: #E9E9E9;
+  background: #eee;
   border: 1px solid #d1d8e3;
   padding: .35em;
   overflow: auto;
@@ -274,32 +116,43 @@ figure {
   border-bottom-right-radius: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
+  line-height: 1;
 }
-#site #entry pre::-webkit-scrollbar {
-  height: 12px;
-  background-color: #fafafa;
-  border-top: 1px solid #d1d8e3;
-}
-#site #entry .highlight code {
-}
-#site #entry p code, #site #entry li code {
-  background-color: #E9E9E9;;
-  font-weight: 400;
+
+code {
+  background: #eee;
   font-family: Menlo, monospace;
   font-size: 14px;
 }
-#site #entry .highlight {
-  margin: 1.5em 0;
-}
-#site #entry p {
-  margin: 0 0 1.5em;
+
+.timestamp {
+  text-align: right;
+  color: grey;
 }
-#site #entry h2 {
-  font-weight: 700;
-  font-size: 1.6em;
-  color: #5F516;
+
+#resume h3 { margin-left: -1em; }
+#resume dt { font-style: italic; }
+
+@media only screen and (max-width: 960px) {
+  body {
+    font-size: 0.8em;
+  }
+  div#container {
+    width: 90%;
+    padding: 
+  }
+  #entry, #entries, #wrapper, #resume {
+    width: 90%;
+    margin-left: 0.2em;
+    text-align: justify;
+  }
+  h1 {
+    margin-left: 0em;
+  }
 }
 
+/* htmlize styles for code snippets */
+.highlight { margin: 1.5em 0; }
 .highlight .hll { background-color: #ffffcc }
 .highlight .c { color: #999988; font-style: italic } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
author	Franck Cuny <franckcuny@gmail.com>	2014-12-04 20:02:23 -0800
committer	Franck Cuny <franckcuny@gmail.com>	2014-12-04 20:03:12 -0800
commit	9fe2ac2521294d97cc7273a8ba0044943896d50f (patch)
tree	2c0acb5d9a89f30c4a26339e61cb4038338adfcf
parent	update rsync command for publishing (diff)
download	lumberjaph-9fe2ac2521294d97cc7273a8ba0044943896d50f.tar.gz