Merge pull request #468 from coppolaemilio/news-view-revamp

Updating news to display articles on a grid

themes/godotengine/assets/css/main.css

@@ -20,6 +20,8 @@
   --primary-color-text-title: white;
   --accent-color: #f57389;
 
+  --secondary-color-text: #546b99;
+
   --link-color: hsl(206, 58%, 50%);
   --link-underline-color: hsla(206, 58%, 50%, 0.3);
   --navbar-link-color: var(--dark-color);
@@ -89,6 +91,8 @@
     --primary-color-text-title: white;
     --accent-color: #5b5491;
 
+    --secondary-color-text: #a6a6a6;
+
     --link-color: hsl(200, 60%, 70%);
     --link-underline-color: hsla(200, 60%, 70%, 0.3);
     --navbar-link-color: hsla(0, 0%, 100%, 0.9);
@@ -774,6 +778,11 @@ p.small {
   margin-bottom: 3rem;
 }
 
+.tags > a {
+  border-radius: 1000px;
+  display: inline-block;
+}
+
 .tag {
   display: inline-block;
   background-color: var(--card-background-color);

themes/godotengine/assets/default_avatar.svg

@@ -0,0 +1,4 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="256" height="256" fill="#a6a6a6"/>
+<path d="M199.908 156.293L199.945 162.088C199.933 164.685 199.908 167.516 199.908 168.093C199.908 193.599 167.646 205.859 127.549 206H127.451C87.3542 205.859 55.0813 193.599 55.0813 168.093C55.0813 167.527 55.0563 164.7 55.0452 162.104L55.0812 112.482C51.815 108.426 48.2881 103.225 45 98.0508C49.1839 90.9125 54.3055 84.5332 59.7831 78.623C64.8648 81.1867 69.7977 84.091 74.4582 87.1815C76.7911 84.8575 79.4222 82.9564 81.9986 80.9693C84.5342 78.928 87.3874 77.4313 90.1021 75.6875C89.2932 69.6645 88.8943 63.7349 88.7344 57.5464C95.7248 54.0188 103.181 51.68 110.718 50C113.733 55.0732 116.485 60.5672 118.882 65.938C121.726 65.4616 124.581 65.285 127.446 65.2509H127.556C130.416 65.285 133.273 65.4616 136.117 65.938C138.515 60.5672 141.268 55.0732 144.279 50C151.82 51.68 159.275 54.0188 166.266 57.5464C166.106 63.7349 165.707 69.6645 164.9 75.6875C167.61 77.4313 170.467 78.928 173.001 80.9693C175.581 82.9564 178.208 84.8575 180.54 87.1815C185.201 84.091 190.135 81.1867 195.215 78.623C200.693 84.5332 205.818 90.9125 210 98.0508C207.263 102.469 203.691 107.721 199.919 112.482L199.908 156.293Z" fill="white"/>
+</svg>

themes/godotengine/layouts/news.htm

@@ -7,44 +7,63 @@ description = "News layout"
 {% partial "header" selected="news" %}
 
 <style>
-  .news-item {
-    margin-bottom: 16px;
+  .posts {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 30px;
   }
-
-  .news-item .image {
-    height: inherit;
-    flex: 1;
-  }
-
-  .news-item .content {
-    flex: 4;
-  }
-
-  .news-item .title {
-    margin-top: 0px;
-    margin-bottom: 8px;
-    text-transform: none;
-  }
-
-  .news-item .title a {
-    text-decoration: none;
-    color: var(--base-color-text-title);
-  }
-
-  .news-item .content .date {
-    flex: 1;
-    text-align: right;
-  }
-
-  .news-item .date-big {
-    line-height: .75;
-  }
-
-  @media (max-width: 900px) {
-    .news-item .content .date {
-      text-align: left;
+  @media (min-width: 768px) {
+    .posts {
+      grid-template-columns: 1fr 1fr;
     }
   }
+  @media (min-width: 1024px) {
+    .posts {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+  article {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  article p.excerpt {
+    color: var(--base-color-text);
+    font-size: 16px;
+    opacity: 0.8;
+    margin-top: 0;
+  }
+  article h3 {
+    font-size: 22px;
+    margin-bottom: 10px;
+  }
+  article .thumbnail {
+    aspect-ratio: 16 / 9;
+    border-radius: 7px;
+    background-position: center;
+    background-size: cover;
+    background-color: var(--card-background-color);
+    box-shadow: 0 5px 10px -3px #00000078;
+  }
+  article .info {
+    display: flex;
+    margin-bottom: 15px;
+    position: relative;
+    padding-left: 32px;
+  }
+  article .info .avatar {
+    border-radius: 100%;
+    position: absolute;
+    top: -3px;
+    left: 0px;
+    width: 25px;
+    height: 25px;
+  }
+  article .info span {
+    font-size: 14px;
+    color: var(--secondary-color-text);
+  }
 </style>
 
 <div class="head">
@@ -55,6 +74,7 @@ description = "News layout"
   </div>
 </div>
 
+
 <div class="container">
   {#
     search for articles on duckduckgo.com
@@ -91,30 +111,34 @@ description = "News layout"
 
   {% partial "pagination" %}
 
-  {% set posts = blogPosts.posts %}
-  {% for post in posts %}
-    <a href="{{ 'article'|page({ slug: post.slug }) }}" style="text-decoration: none">
-      <div class="news-item flex card responsive">
-        <div
-          class="image"
-          style="background-image: url('{{ post.featured_images[0].thumb(400, { extension: 'jpg' }) }}'); background-size: cover; background-color: white"
-          href="{{ 'article'|page({ slug: post.slug }) }}"
-        ></div>
-        <div class="content base-padding flex">
-          <div class="brief">
-            <h3 class="title">
-              {{ post.title }}
-            </h3>
-            <h4 class="author">
-              By: {{ post.user.full_name }}
-              <span class="date">{{ post.published_at|date('j F Y') }}</span>
-            </h4>
-            <p>{{ post.excerpt |raw }}</p>
+  <div class="posts">
+    {% set posts = blogPosts.posts %}
+    {% for post in posts %}
+      <a href="{{ 'article'|page({ slug: post.slug }) }}" style="text-decoration: none">
+        <article>
+          <div
+            class="thumbnail"
+            style="background-image: url('{{ post.featured_images[0].thumb(400, { extension: 'jpg' }) }}');"
+            href="{{ 'article'|page({ slug: post.slug }) }}"
+          ></div>
+          <div class="content">
+            <div class="info">
+              {% if post.user.avatar %}
+              {# We display it at 25x25, but load it at a higher scale to avoid too much compression. #}
+              <img class="avatar" width="25" height="25" src="{{ post.user.avatar.getThumb(40, 40, { mode: 'crop' }) }}" alt="">
+              {% else %}
+              <img class="avatar" width="25" height="25" src="{{ 'assets/default_avatar.svg'|theme }}" alt="">
+              {% endif %}
+              <span class="by">{{ post.user.full_name }} </span>
+              <span class="date">&nbsp;-&nbsp;{{ post.published_at|date('j F Y') }}</span>
+            </div>
+            <h3>{{ post.title }}</h3>
+            <p class="excerpt">{{ post.excerpt |raw }}</p>
           </div>
-        </div>
-      </div>
-    </a>
-  {% endfor %}
+        </article>
+      </a>
+    {% endfor %}
+  </div>
 
   {% partial "pagination" %}
 </div>

themes/godotengine/pages/news.htm

@@ -7,7 +7,7 @@ is_hidden = 0
 [blogPosts]
 pageNumber = "{{ :page }}"
 categoryFilter = "{{ :slug }}"
-postsPerPage = 25
+postsPerPage = 24
 noPostsMessage = "No posts found"
 sortOrder = "published_at desc"
 categoryPage = "article"