update

news/static/news/css/app.css

@@ -7,6 +7,12 @@
     src: url("../LibreBaskerville-Bold.otf") format("opentype");
 }
 
+body {
+	background-color: #333;
+	font-size:18px;
+  margin: 0px;
+  padding: 0px;
+}
 
 header {
   /* width: 100%; */
@@ -36,11 +42,8 @@ nav {
   margin-bottom: 24px;
 }
 
-body {
-	background-color:#fff;
-	font-size:20px;
-  margin: 0px;
-  padding: 0px;
+.content {
+  background-color: #fff;
 }
 
 article h1 {
@@ -192,10 +195,6 @@ article {
   color: #ccc;
 }
 
-.content {
-  /* background-color: #eee; */
-}
-
 .body {
   padding: 0px 12px;
 }
@@ -236,9 +235,14 @@ article {
 .info {
   width: 100%;
   font-size: 14px;
-  border-bottom: 1px solid #ccc;
+  /* border-bottom: 1px solid #ccc; */
   /* margin-bottom: 6px; */
 }
+@media print, screen and (min-width: 40em) {
+  .info {
+    width: 500px;
+  }
+}
 
 .current {
   font-size: 14px;

news/templates/base.html

@@ -21,7 +21,7 @@
    <!-- <div class="cell large-2 header">
 
    </div> -->
-   <div class="cell large-8 large-offset-2 content">
+   <div class="cell large-6 large-offset-3 content">
 
      <!-- Header -->
     <header>

news/templates/news/index.html

@@ -11,16 +11,17 @@
 
 <!-- <div class="{% if forloop.counter|divisibleby:2 %}even{% else %}odd{% endif %}"> -->
 
+  <article>
+
+    <div class="postintro lat_padding">
+      {{ post.date }} - {{ post.author.username }}
+    </div>
+
     <!-- A post -->
       {% if post.style == 0 %}
 
-      <article>
-
-        <div class="postintro lat_padding">
-          {{ post.date }} - {{ post.author.username }}
-        </div>
         <div class="imgcontainer">
-          <img class="crop" src="{% static 'media/' %}{{ post.image_url }}"/>
+          <img src="{% static 'media/' %}{{ post.image_url }}"/>
           <div class="inside_image_top">
             {% if post.url %}<a href="{{ post.url }}">{% endif %}
               <h1>{{ post.title }}</h1>
@@ -45,7 +46,6 @@
 
         </div>
 
-       </article>
 
        <!-- Quote -->
       {% elif post.style == 1 %}
@@ -63,7 +63,7 @@
   </div>
 
   <div class="info">
-    {{ post.date }} - {{ post.author.username }} - <a href="{% url 'news:post' post.id %}">{% if post.comment_set.count > 0 %}{{ post.comment_set.count }} comments{% else %}write comment{% endif %}</a>
+    <a href="{% url 'news:post' post.id %}">{% if post.comment_set.count > 0 %}{{ post.comment_set.count }} comments{% else %}write comment{% endif %}</a>
   </div>
   <!-- Some comments -->
   <div class="comments">
@@ -78,26 +78,23 @@
       <!-- Picture no title no link -->
       {% elif post.style == 2 %}
 
-            <article>
-
-              {{ post.date }} - {{ post.author.username }}
-              <div class="imgcontainer">
-                <img class="crop" src="{% static 'media/' %}{{ post.image_url }}"/>
-              </div>
+        <div class="imgcontainer">
+          <img class="crop" src="{% static 'media/' %}{{ post.image_url }}"/>
+        </div>
 
-              <div class="info">
-                 <a href="{% url 'news:post' post.id %}">{% if post.comment_set.count > 0 %}{{ post.comment_set.count }} comments{% else %}write comment{% endif %}</a>
-              </div>
-              <!-- Some comments -->
-              <div class="comments">
-                {% for comment in post.top_comments %}
-                  <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
-                {% endfor %}
-              </div>
+        <div class="info">
+           <a href="{% url 'news:post' post.id %}">{% if post.comment_set.count > 0 %}{{ post.comment_set.count }} comments{% else %}write comment{% endif %}</a>
+        </div>
+        <!-- Some comments -->
+        <div class="comments">
+          {% for comment in post.top_comments %}
+            <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
+          {% endfor %}
+        </div>
 
-             </article>
 
       {% endif %}
+    </article>
 
 <!-- </div> -->
     {% endfor %}