use a right column on home page on bigger screens

panikweb_templates/static/css/specifics.css

@@ -73,7 +73,7 @@
 
 @media screen and (min-width: 600px) {
 	.wrapper.sided .leftPart,
-	  .wrapper.sided .rightPart{
+	.wrapper.sided .rightPart{
 		width:45%;
 	}
 	.wrapper.sided .leftPart{
@@ -82,6 +82,26 @@
 	.wrapper.sided .rightPart{
 		float:right;
 	}
+
+	#Home .leftPart,
+	#Home .rightPart {
+		width: 100%;
+	}
+}
+
+
+@media screen and (min-width: 1280px) {
+	#Home .leftPart {
+		width: 60%;
+	}
+	#Home .rightPart {
+		width: 30%;
+	}
+	#recent-sounds ul.columns {
+		column-count: 1;
+		-webkit-column-count: 1;
+		-moz-column-count: 1;
+	}
 }
 
 

panikweb_templates/templates/home.html

@@ -10,35 +10,26 @@
 	{% endwith %}
 {% endblock %}
 {% block main %}
-		<div class="wrapper">
-			<h2><a href="{% url 'program' %}">Cette semaine sur Panik</a></h2>
-			{% weekview %}
-		</div>
-<div class="padded">
-  <form method="post" action="{% url 'newsletter-subscribe' %}" class="big center" id="subscribe-form">
-  <p>Tous les lundis, l'actualité de la semaine de Panik :</p>
-    {% csrf_token %}
-    {{ newsletter_form.as_table }}
-    <button>M'inscrire</button>
-  </form>
-</div>
 
-{% endblock %}
-{% block related %}
-		<div class="wrapper">
-			<h2><a href="{% url 'listen' %}">Derniers sons</a></h2>
-			<ul class="custom columns list">
-			{% for soundfile in soundfiles %}
-				<li class="item {% if soundfile.episode.emission.categories.all.count = 0 %}nocat{% endif %} {% for category in soundfile.episode.emission.categories.all %} {{ category|slugify }}{% endfor %}">
-				  {% soundfile_resume soundfile=soundfile date=soundfile.first_diffusion %}
-				</li>
-			{% endfor %}
-			</ul>
-		</div>
-{% endblock %}
-{% block links %}
-	<div class="wrapper">	
-		<h2><a href="{% url 'emissions' %}">Nouvelles émissions dans la grille</a></h2>
+
+<div class="sided wrapper padded">
+	<div class="leftPart">
+		<h2><a href="{% url 'program' %}">Cette semaine sur Panik</a></h2>
+		{% weekview %}
+
+	  <form method="post" action="{% url 'newsletter-subscribe' %}"
+		  class="big center padded" id="subscribe-form">
+	  <p>Tous les lundis, l'actualité de la semaine de Panik :</p>
+	    {% csrf_token %}
+	    {{ newsletter_form.as_table }}
+	    <button>M'inscrire</button>
+	  </form>
+	</div>
+
+	<div class="rightPart">
+
+		<div id="recent-emissions">
+		<h4><a href="{% url 'emissions' %}">Nouveau dans la grille</a></h4>
 		<ul class="custom list columns padded">
 		{% for emission in emissions %}
 			<li class="item ellipsis">
@@ -51,5 +42,20 @@
 			</li>
 		{% endfor %}
 		</ul>
+		</div>
+
+		<div id="recent-sounds">
+		<h4><a href="{% url 'listen' %}">Derniers sons</a></h4>
+		<ul class="custom columns list">
+		{% for soundfile in soundfiles %}
+			<li class="item {% if soundfile.episode.emission.categories.all.count = 0 %}nocat{% endif %} {% for category in soundfile.episode.emission.categories.all %} {{ category|slugify }}{% endfor %}">
+			  {% soundfile_resume soundfile=soundfile date=soundfile.first_diffusion %}
+			</li>
+		{% endfor %}
+		</ul>
+		</div>
+
 	</div>
+</div>
+
 {% endblock %}