Layout improvements

news/static/news/css/app.css

@@ -35,24 +35,28 @@ body {
 
 .imgcontainer {
   position: relative;
-  /* text-align: center; */
   color: white;
 }
 
-/* Bottom left text */
-.bottom-left {
-  width: 800px;
-  position: absolute;
-  bottom: 8px;
-  left: 16px;
-}
+/* @media print, screen and (min-width: 40em) {
+  .imgcontainer {
+    position: relative;
+    color: white;
+  }
+} */
 
 .crop {
   width: 1000px;
     /* width: 1000px; */
     height: 200px;
     overflow: hidden;
-    border-radius: 20px;/*0px 20px 20px 0px;*/
+    border-radius: 0px;/*0px 20px 20px 0px;*/
+}
+
+@media print, screen and (min-width: 40em) {
+ .crop {
+   border-radius: 20px;
+ }
 }
 
 .crop img {
@@ -67,17 +71,26 @@ body {
   margin-top: 20px;
 }
 
-.content {
-  /* background-color: #eee; */
-  padding: 16px;
+/* .content {
+  padding: 0px;
+} */
+
+article {
+  margin-bottom: 20px;
+}
+
+@media print, screen and (min-width: 40em) {
+  article {
+    padding: 16px;
+  }
 }
 
-.content h1 {
+/* .content h1 {
   font-family: 'LibreBaskervilleBold';
   font-size: 28px;
   margin: 10px 0px 0px 0px;
   padding: 0px;
-}
+} */
 
 .imgcontainer a {
   color: #fff;
@@ -87,16 +100,55 @@ body {
   color: #aaa;
 }
 
-.contentbody {
-  font-family: 'LibreBaskerville';
+/* .content {
   padding: 12px 12px 0px 12px;
 }
 
+.content p {
+  font-family: 'LibreBaskerville';
+} */
+
+.body {
+  padding: 0px 12px;
+}
+
+.body p {
+  font-family: 'LibreBaskerville';
+}
+
 .post {
   padding: 10px 0px;
   margin-bottom: 10px;
 }
 
+/*
+.bottom-left {
+  position: absolute;
+  top: 8px;
+  left: 16px;
+}
+@media print, screen and (min-width: 32em) {
+  .bottom-left {
+    width: 24em;
+  }
+} */
+
+article h1 {
+  font-family: 'LibreBaskervilleBold';
+  font-size: 18px;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+@media print, screen and (min-width: 40em) {
+  article h1 {
+      font-size: 28px;
+      width: 24em;
+      bottom: 8px;
+      top: auto;
+    }
+}
+
 .padded {
   padding: 8px;
 }

news/templates/news/index.html

@@ -14,29 +14,33 @@
     <!-- A post -->
       {% if post.style == 0 %}
 
-      <div class="post">
+      <article>
 
         <div class="imgcontainer">
            <a href="{{ post.url }}">
              <img class="crop" src="{% static 'media/' %}{{ post.image_url }}"/>
-           <div class="bottom-left">
+           <div>
              <h1>{{ post.title }}</h1>
            </div>
            </a>
         </div>
-        <p class="contentbody">
-          {{ post.body }}
-        </p>
-        <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>
-        </div>
-        <!-- Some comments -->
-        <div class="comments">
-          {% for comment in post.top_comments %}
-            <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
-          {% endfor %}
+
+        <div class="body">
+          <p>
+            {{ post.body }}
+          </p>
+          <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>
+          </div>
+          <!-- Some comments -->
+          <div class="comments">
+            {% for comment in post.top_comments %}
+              <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
+            {% endfor %}
+          </div>
         </div>
-      </div>
+      </article>
+
 
           <!-- <div class="grid-x post">
               <div class="cell large-2 large-offset-2 info">