Make blog post list and blog post entry responsive

theme/static/css/main.css

@@ -92,12 +92,17 @@ li { margin-top: 0.5em;
 margin-bottom: 1em; }
 
 .post-info {
-  float:right;
   margin:10px;
   padding:5px;
 }
 
-.post-info p{
+@media all and (min-width: 40em) {
+  .post-info {
+    float: right;
+  }
+}
+
+.post-info p {
   margin-top: 1px;
   margin-bottom: 1px;
 }
@@ -152,6 +157,10 @@ aside, nav, article, figure {
 img.right, figure.right {float: right; margin: 0 0 2em 2em;}
 img.left, figure.left {float: left; margin: 0 2em 2em 0;}
 
+article img {
+  max-width: 100%;
+}
+
 /*
 Global
  *****************/
@@ -430,36 +439,6 @@ nav#side-nav ul li a {
   text-decoration: none;
 }
 
-
-/*
-Featured
- *****************/
-#featured {
-  background: #fff;
-  margin-bottom: 2em;
-  overflow: hidden;
-  padding: 20px;
-  width: 760px;
-
-  border-radius: 10px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-}
-
-#featured figure {
-  border: 2px solid #eee;
-  float: right;
-  margin: 0.786em 2em 0 5em;
-  width: 248px;
-}
-#featured figure img {display: block; float: right;}
-
-#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
-#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
-
-#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
-#featured h3 a:hover, #featured h3 a:active {color: #fff;}
-
 /*
 Body
  *****************/
@@ -746,14 +725,6 @@ li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
 #posts-list {list-style: none; margin: 0;}
 #posts-list .hentry {padding-left: 10px; position: relative;}
 
-#posts-list footer {
-  left: 10px;
-  position: relative;
-  float: left;
-  top: 0.5em;
-  width: 190px;
-}
-
 /* About the Author */
 #about-author {
   background: #f9f9f9;

theme/static/css/pygment.css

@@ -2,7 +2,7 @@ pre {
   padding: 5px;
   margin: 0;
   font-size: 12px;
-  overflow: scroll;
+  overflow-x: scroll;
 }
 
 code {

theme/static/scripts/mine.js

@@ -12,7 +12,6 @@ $window.on('load', function() {
   if (window.matchMedia('(max-width: 40rem)').matches) {
     return;
   }
-
   content.find('h2:last').add('h2:last ~ *').each(function() {
     size += $(this).outerHeight(true);
   });

theme/templates/article.html

@@ -1,42 +1,38 @@
 {% extends "base.html" %}
 {% block title %}{{ article.title|striptags }}{% endblock %}
 {% block content %}
-<section id="content" class="body">
-  <article>
-    <header>
-      <h1 class="entry-title">
-        <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark"
-           title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
-      {% include 'twitter.html' %}
-    </header>
+<article id="content">
+    <h1 class="entry-title col1of1">
+      {{ article.title }}
+    </h1>
 
-    {% if article.toc %}
-    <nav class="toc">
-      {{ article.toc }}
-    </nav>
-    {% endif %}
-    <div class="entry-content">
-      {% include 'article_infos.html' %}
-      {{ article.content }}
-    </div><!-- /.entry-content -->
-    {% if DISQUS_SITENAME and SITEURL and article.status != "draft" %}
-    <div class="comments">
-      <h2>Comments !</h2>
-      <div id="disqus_thread"></div>
-      <script type="text/javascript">
-        var disqus_shortname = '{{ DISQUS_SITENAME }}';
-        var disqus_identifier = '{{ article.url }}';
-        var disqus_url = '{{ SITEURL }}/{{ article.url }}';
-        (function() {
-        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-        dsq.src = '//{{ DISQUS_SITENAME }}.disqus.com/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-        })();
-      </script>
-      <noscript>Please enable JavaScript to view the comments.</noscript>
-    </div>
-    {% endif %}
-
-  </article>
-</section>
+  {% if article.toc %}
+  <nav id="side-nav" class="col1of3">
+    {{ article.toc }}
+  </nav>
+  {% endif %}
+  <div {% if article.toc %}class="col2of3"{% else %}class="col1of1"{% endif %}>
+    {% include 'twitter.html' %}
+    {% include 'article_infos.html' %}
+    {{ article.content }}
+  </div><!-- /.entry-content -->
+  {% if DISQUS_SITENAME and SITEURL and article.status != "draft" %}
+  <div class="comments">
+    <h2>Comments !</h2>
+    <div id="disqus_thread"></div>
+    <script type="text/javascript">
+      var disqus_shortname = '{{ DISQUS_SITENAME }}';
+      var disqus_identifier = '{{ article.url }}';
+      var disqus_url = '{{ SITEURL }}/{{ article.url }}';
+      (function() {
+      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+      dsq.src = '//{{ DISQUS_SITENAME }}.disqus.com/embed.js';
+      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+      })();
+    </script>
+    <noscript>Please enable JavaScript to view the comments.</noscript>
+  </div>
+  {% endif %}
+  <div class="clearfix"></div>
+</article>
 {% endblock %}

theme/templates/base.html

@@ -26,7 +26,7 @@
 
   <body id="index" class="home">
     {% include 'github.html' %}
-    <header id="banner" class="body">
+    <header id="banner">
       <div id="headerContainer">
         <div id="logo">
           <a href="{{ SITEURL }}/index.html"></a>
@@ -53,7 +53,7 @@
         </nav>
       </div>
     </header><!-- /#banner -->
-    <div class="container body">
+    <div class="container">
     {% block content %}
     {% endblock %}
     </div>

theme/templates/index.html

@@ -2,58 +2,61 @@
 {% block content_title %}{% endblock %}
 {% block content %}
 {% if articles %}
-    {% for article in articles_page.object_list %}
+{% for article in articles_page.object_list %}
 
-        {# First item #}
-        {% if loop.first and not articles_page.has_previous() %}
-            <aside id="featured" class="body">
-                <article>
-                    <h1 class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h1>
-                    {% include 'article_infos.html' %}{{ article.content }}{% include 'comments.html' %}
-                </article>
-            </aside><!-- /#featured -->
-            {% if loop.length > 1 %}
-                <section id="content" class="body">
-                    <h1>Other articles</h1>
-                    <hr />
-                    <ol id="posts-list" class="hfeed">
-            {% endif %}
-        {# other items #}
-        {% else %}
-            {% if loop.first %}
-                <section id="content" class="body">
-                    <ol id="posts-list" class="hfeed" start="{{ articles_paginator.per_page -1 }}">
-            {% endif %}
-            <li><article class="hentry">
-                <header>
-                    <h1><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark"
-                           title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
-                </header>
-
-                <div class="entry-content">
-                {% include 'article_infos.html' %}
-                {{ article.summary }}
-                <a class="readmore" href="{{ SITEURL }}/{{ article.url }}">read more</a>
-                {% include 'comments.html' %}
-                </div><!-- /.entry-content -->
-            </article></li>
-        {% endif %}
-        {% if loop.last %}
-            {% if loop.length > 1 or articles_page.has_other_pages() %}
-                </ol><!-- /#posts-list -->
-                {% if articles_page.has_other_pages() %}
-                    {% include 'pagination.html' %}
-                {% endif %}
-                </section><!-- /#content -->
-            {% endif %}
+{# First item #}
+{% if loop.first and not articles_page.has_previous() %}
+<aside id="featured">
+  <article>
+    <h1 class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h1>
+    {% include 'article_infos.html' %}{{ article.content }}{% include 'comments.html' %}
+  </article>
+</aside><!-- /#featured -->
+{% if loop.length > 1 %}
+<section class="m3y">
+  <h1>Autres articles</h1>
+  <hr />
+  <ol id="posts-list" class="hfeed">
+    {% endif %}
+    {# other items #}
+    {% else %}
+    {% if loop.first %}
+    <section id="content">
+      <ol id="posts-list" class="hfeed" start="{{ articles_paginator.per_page -1 }}">
         {% endif %}
+        <li><article class="hentry">
+            <header>
+              <h1>
+                <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">
+                  {{ article.title }}
+                </a>
+              </h1>
+            </header>
+
+            <div class="entry-content">
+              {% include 'article_infos.html' %}
+              {{ article.summary }}
+              <a class="readmore" href="{{ SITEURL }}/{{ article.url }}">read more</a>
+              {% include 'comments.html' %}
+            </div><!-- /.entry-content -->
+          </article></li>
+          {% endif %}
+          {% if loop.last %}
+          {% if loop.length > 1 or articles_page.has_other_pages() %}
+      </ol><!-- /#posts-list -->
+      {% if articles_page.has_other_pages() %}
+      {% include 'pagination.html' %}
+      {% endif %}
+    </section><!-- /#content -->
+    {% endif %}
+    {% endif %}
     {% endfor %}
-{% else %}
-<section id="content" class="body">
-<h2>Pages</h2>
-    {% for page in PAGES %}
-        <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
-    {% endfor %}
-</section>
-{% endif %}
-{% endblock content %}
+    {% else %}
+    <section id="content">
+      <h2>Pages</h2>
+      {% for page in PAGES %}
+      <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
+      {% endfor %}
+    </section>
+    {% endif %}
+    {% endblock content %}