Improve the home page by featuring the latest article

[bobsilverberg]

Now that we are planning on linking to the blog home page more prominently from AMO, we might want to improve it a bit. On Slack @designakt suggested "pulling one article out of the list and giving it a little space below to make the layout a tad more interesting current page". See the example below:

@willdurand How much work do you think it would take to implement this change?

┆Issue is synchronized with this Jira Task

[willdurand]

@willdurand How much work do you think it would take to implement this change?

No idea, this is HTML/CSS and IIRC there is a grid for this page, so that shouldn't be too complex and therefore not too long.

[willdurand]

@bobsilverberg I just thought about that again and the one tricky thing in this project is that most templates are shared between the actual blog and the WordPress theme. It isn't very complex either but the WP theme needs to be updated (in the repo as well as on the WP instance)

[bobsilverberg]

Thanks @willdurand. I know you're focusing on MV3 stuff for Q4, but is this something you think you'd be able to take on, as the person who has done all of the work on the blog thus far?

[willdurand]

I think we can achieve this with the following patch:

diff --git a/src/assets/css/blog.scss b/src/assets/css/blog.scss
index 3441169..fd2c8e1 100644
--- a/src/assets/css/blog.scss
+++ b/src/assets/css/blog.scss
@@ -29,6 +29,10 @@ $excerpt-margin: 14px;

 .blog-entry {
   margin-bottom: 14px;
+
+  &:first-child {
+    grid-column: 1 / -1;
+  }
 }

 .blog-entry-link {

We probably need some bottom margin for width > ~300px but that does not look too bad: