Commit e31f2952 authored by Maxime Vidori's avatar Maxime Vidori
Browse files

Make blog post list and blog post entry responsive

parent a1311dd2
......@@ -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;
......
......@@ -2,7 +2,7 @@ pre {
padding: 5px;
margin: 0;
font-size: 12px;
overflow: scroll;
overflow-x: scroll;
}
code {
......
......@@ -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);
});
......
{% 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 %}
......@@ -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>
......
......@@ -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 %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment