Fix news layout

idre/settings.py

@@ -61,7 +61,7 @@ DATABASES = {
 # Internationalization
 # https://docs.djangoproject.com/en/1.7/topics/i18n/
 
-LANGUAGE_CODE = 'fr-FR'
+LANGUAGE_CODE = 'en-UK'
 TIME_ZONE = 'Europe/Paris'
 USE_I18N = True
 USE_L10N = True

news/static/news/css/news.css

@@ -1,22 +1,17 @@
-#news article .title {
+.article .header .title {
   font-size: 1.2em;
   font-weight: bold;
 }
 
-#news article .author,
-#news article .date {
-  font-style: oblique;
+.article .content {
+  text-align: justify;
 }
 
-#news hr {
+hr {
   border-color: #929292 -moz-use-text-color -moz-use-text-color;
   border-right: 0px none;
   border-style: solid none none;
   border-width: 1px 0px 0px;
   margin-bottom: 20px;
   margin-top: 20px;
-  -moz-border-bottom-colors: none;
-  -moz-border-left-colors: none;
-  -moz-border-right-colors: none;
-  -moz-border-top-colors: none;
 }

news/templates/news/news.html

@@ -12,17 +12,26 @@
 <section id="news">
 
 {% for article in articles %}
-  <article>
-    <p class="article_header">
-      <span class="title">{{ article.title }}</span>
-      <span class="author">{{ article.author }}</span>,
-      <span class="date">{{ article.date }}</span>
-    </p>
-    {% autoescape off %}
-    {{ article.content }}
-    {% endautoescape %}
+  <article class="article">
+    <div class="header">
+      <div class="title">
+        {{ article.title }}
+      </div>
+      <div class="subtitle">
+        By <span class="author">{{ article.author }}</span>,
+        <span class="date">{{ article.date }}</span>
+      </div>
+    </div>
+
+    <div class="content">
+      {% autoescape off %}
+      {{ article.content }}
+      {% endautoescape %}
+    </div>
   </article>
-  {% if not forloop.last %}<hr />{% endif %}
+  {% if not forloop.last %}
+    <hr />
+  {% endif %}
 {% endfor %}
 
 </section>

static/css/base.css

@@ -17,7 +17,6 @@ body {
 }
 
 
-
 /* Header */
 
 header {
@@ -32,7 +31,6 @@ header img {
 }
 
 
-
 /* Nav bar */
 
 nav {
@@ -57,7 +55,6 @@ nav .link:nth-child(4):hover { background-color: #ab9df2; }
 nav .link:nth-child(5):hover { background-color: #78dce8; }
 
 
-
 /* Content */
 
 #content {
@@ -89,8 +86,7 @@ nav .link:nth-child(5):hover { background-color: #78dce8; }
 }
 
 
-
-/* Extra */
+/* Extras */
 
 .grayscale {
   /* Firefox 10+ (& Android) */