From 0840e75f0b9d556c2e2447561ca381590992e465 Mon Sep 17 00:00:00 2001
From: Alex Legler <alex@a3li.li>
Date: Mon, 10 Aug 2015 22:24:14 +0200
Subject: Fix news item display on small screens

Also adds support for a teaser link after the teaser
---
 _includes/frontpage/news | 13 ++++++++++---
 _sass/misc.scss          | 17 -----------------
 _sass/news.scss          | 31 +++++++++++++++++++++++++++++++
 assets/css/screen.scss   |  1 +
 4 files changed, 42 insertions(+), 20 deletions(-)
 create mode 100644 _sass/news.scss

diff --git a/_includes/frontpage/news b/_includes/frontpage/news
index 344c78e..f37099f 100644
--- a/_includes/frontpage/news
+++ b/_includes/frontpage/news
@@ -1,13 +1,20 @@
 {% for post in site.posts | limit: 3 %}
 <section id="news">
   <article class="newsitem">
-    <h2 class="stick-top">
-      <span class="fa fa-fw fa-chevron-circle-right newsitem-bullet" title="News item"></span>
+    <h2 class="stick-top newsitem-bullet">
+      <span class="fa fa-fw fa-chevron-circle-right" title="News item"></span>
+    </h2>
+    <h2 class="stick-top newsitem-headline">
       <a href="{{ post.url }}">{{ post.title }}</a> <small>({{ post.date | date: "%b %-d, %Y" }})</small>
     </h2>
     <div class="newsitem-content">
       {{ post.excerpt }}
-      <!--<a href="{{ post.url }}" class="btn btn-default btn-sm">read more <span class="fa fa-fw fa-chevron-right"></span></a>-->
+      {% if post.teaserlink %}
+        <p>
+          <span class="fa fa-fw fa-chevron-right"></span>
+          <a href="{{ post.url }}">{{ post.teaserlink }}</a>
+        </p>
+      {% endif %}
     </div>
   </article>
   {% endfor %}
diff --git a/_sass/misc.scss b/_sass/misc.scss
index 5f34dac..252036d 100644
--- a/_sass/misc.scss
+++ b/_sass/misc.scss
@@ -104,23 +104,6 @@ body.nav-align-h2 #content h2:first-of-type {
   overflow: hidden;
 }
 
-section#news {
-  padding-top: 1em;
-}
-
-article.newsitem {
-  margin-top: 1em;
-  max-height: 200px;
-}
-
-.newsitem-content {
-  padding-left: 2.9em;
-}
-
-.newsitem-bullet {
-  color: #aaa;
-}
-
 .use-flag {
   width: 25%;
 }
diff --git a/_sass/news.scss b/_sass/news.scss
new file mode 100644
index 0000000..41578cf
--- /dev/null
+++ b/_sass/news.scss
@@ -0,0 +1,31 @@
+section#news {
+  padding-top: 1em;
+}
+
+article.newsitem {
+  margin-top: 1em;
+  max-height: 200px;
+}
+
+.newsitem-headline {
+  padding-left: 45px;
+}
+
+.newsitem-content {
+  padding-left: 46px;
+}
+
+.newsitem-bullet {
+  color: #aaa;
+  float: left;
+}
+
+@media (max-width: 768px) {
+  .newsitem-bullet {
+    display: none;
+  }
+
+  .newsitem-content, .newsitem-headline {
+    padding-left: 0;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/screen.scss b/assets/css/screen.scss
index c1900da..97c2b00 100644
--- a/assets/css/screen.scss
+++ b/assets/css/screen.scss
@@ -8,6 +8,7 @@
 @import 'irc';
 @import 'mailing-lists';
 @import 'misc';
+@import 'news';
 @import 'sponsors';
 
 @import 'donate';
\ No newline at end of file
-- 
cgit v1.2.3-18-g5258