Changes the news post previews up a little

assets/less/mio/classes/news/container.less

@@ -1,12 +1,9 @@
 @mio-news-mobile: 700px;
 
 .news__container {
-    &__content {
-        margin: 2px;
     display: flex;
 
     @media (max-width: @mio-news-mobile) {
         flex-direction: column;
     }
-    }
 }

assets/less/mio/classes/news/list.less

@@ -1,7 +1,6 @@
 .news__list {
     margin: 0;
     margin-bottom: 2px;
-    box-shadow: initial;
 
     &__item {
         text-decoration: none;

assets/less/mio/classes/news/preview.less

@@ -1,6 +1,5 @@
 .news__preview {
     margin: 0;
-    box-shadow: initial;
 
     &:not(:last-child) {
         margin-bottom: 2px;
@@ -11,39 +10,51 @@
         flex-shrink: 1;
     }
 
-    &__content {
+    &__container {
+        display: flex;
+        margin: 1px;
+        flex-direction: column;
+    }
+
+    &__content {
+        flex-grow: 1;
+        flex-shrink: 1;
         display: flex;
-        margin: 2px;
     }
 
     &__text {
-        flex-grow: 1;
+        flex: 1 1 auto;
-        flex-shrink: 1;
-        margin-left: 2px;
     }
 
     &__info {
-        text-align: right;
+        display: flex;
-        flex-grow: 0;
+        justify-content: space-between;
-        flex-shrink: 0;
+        border-top: 1px solid #9475b2;
+        font-size: .9em;
+        padding: 0 2px;
+        margin-top: 1px;
     }
 
-    &__date {
+    &__link {
-        display: block;
+        color: inherit;
+        text-decoration: underline dotted;
+
+        &:hover {
+            text-decoration: underline;
+        }
     }
 
     &__user {
+        text-align: center;
+        flex: 0 0 auto;
         text-decoration: none;
         color: inherit;
-        display: inline-flex;
+        display: flex;
-
+        flex-direction: column;
-        &__name {
-            font-weight: 700;
-        }
 
         &__avatar {
-            height: 20px;
+            height: 50px;
-            width: 20px;
+            width: 50px;
             margin-left: 4px;
         }
     }

public/index.php

@@ -34,7 +34,7 @@ $news = Database::query('
     ON u.`display_role` = r.`role_id`
     WHERE p.`is_featured` = true
     ORDER BY p.`created_at` DESC
-    LIMIT 3
+    LIMIT 5
 ')->fetchAll(PDO::FETCH_ASSOC);
 
 $statistics = Cache::instance()->get('index:stats:v1', function () {

templates/home/index.twig

@@ -34,18 +34,11 @@
                 </div>
             {% endif %}
 
-            <div class="container news__container">
-                <a class="container__title container__title--link" href="/news.php">Featured News</a>
-                <div class="news__container__content">
-                    <div class="news__preview__listing">
             {% for post in featured_news %}
                 {{ news_preview(post) }}
             {% endfor %}
         </div>
     </div>
-            </div>
-        </div>
-    </div>
 
     {% if embed_linked_data is defined and embed_linked_data %}
         <script type="application/ld+json">

templates/news/category.twig

@@ -9,9 +9,7 @@
 }) %}
 
 {% block content %}
-    <div class="container news__container">
+    <div class="news__container">
-        <div class="container__title news__container__title">News » {{ category.category_name }}</div>
-        <div class="news__container__content">
         <div class="news__preview__listing">
             {% for post in posts %}
                 {{ news_preview(post) }}
@@ -19,16 +17,14 @@
         </div>
 
         <div class="news__sidebar">
-                {% if category.category_description|length > 0 %}
+            <div class="container news__list">
-                    <div class="container news__container">
+                <div class="container__title news__container__title">
-                        <div class="container__title">
+                    News » {{ category.category_name }}
-                            Description
                 </div>
                 <div class="container__content">
-                            {{ category.category_description }}
+                    {{ category.category_description|length > 0 ? category.category_description : '' }}
                 </div>
             </div>
-                {% endif %}
 
             {% if featured|length > 0 %}
                 <div class="container news__list">
@@ -46,5 +42,4 @@
             {{ pagination(category.posts_count, posts_take, posts_offset, '/news.php?c=' ~ category.category_id) }}
         </div>
     </div>
-    </div>
 {% endblock %}

templates/news/index.twig

@@ -6,9 +6,7 @@
 {% set canonical_url = '/news.php'|url_construct({'o':posts_offset}) %}
 
 {% block content %}
-    <div class="container news__container">
+    <div class="news__container">
-        <div class="container__title news__container__title">News</div>
-        <div class="news__container__content">
         <div class="news__preview__listing">
             {% for post in posts %}
                 {{ news_preview(post) }}
@@ -37,5 +35,4 @@
             {{ pagination(posts_count, posts_take, posts_offset, '/news.php') }}
         </div>
     </div>
-    </div>
 {% endblock %}

templates/news/macros.twig

@@ -4,33 +4,34 @@
             {{ post.post_title }}
         </a>
 
+        <div class="news__preview__container">
             <div class="news__preview__content">
                 <div class="news__preview__text">
                     {{ post.post_text|first_paragraph|parse_text('md')|raw }}
                 </div>
 
+                {% if post.user_id is not null %}
+                    <a class="news__preview__user" href="/profile.php?u={{ post.user_id }}">
+                        <div class="avatar news__preview__user__avatar" style="background-image:url('/profile.php?u={{ post.user_id }}&amp;m=avatar')"></div>
+                        <div class="news__preview__user__name" style="{{ post.user_colour|html_colour({
+                            'color': '%s',
+                            'text-shadow': '0 0 5px %s',
+                        }) }}">
+                            {{ post.username }}
+                        </div>
+                    </a>
+                {% endif %}
+            </div>
+
             <div class="news__preview__info">
+                <a href="/news.php?p={{ post.post_id }}" class="news__preview__link">
                     <time class="news__preview__date" datetime="{{ post.created_at|date('c') }}" title="{{ post.created_at|date('r') }}">
                         {{ post.created_at|time_diff }}
                     </time>
-
-                {% if post.user_id is not null %}
-                    <a class="news__preview__user" href="/profile.php?u={{ post.user_id }}">
-                        <div class="news__preview__user__name" style="{{ post.user_colour|html_colour }}">
-                            {{ post.username }}
-                        </div>
-                        <div class="avatar news__preview__user__avatar" style="background-image:url('/profile.php?u={{ post.user_id }}&amp;m=avatar')"></div>
                 </a>
-                {% endif %}
 
-                <a href="/news.php?p={{ post.post_id }}#comments" style="color: inherit; text-decoration: none; display: block">
+                <a href="/news.php?p={{ post.post_id }}#comments" class="news__preview__link">
-                    {% if post.post_comments < 1 %}
+                    {{ post.post_comments < 1 ? 'No' : post.post_comments|number_format }} comment{{ post.post_comments != 1 ? 's' : '' }}
-                        No comments
-                    {% elseif post.post_comments == 1 %}
-                        1 comment
-                    {% else %}
-                        {{ post.post_comments }} comments
-                    {% endif %}
                 </a>
             </div>
         </div>