Merge #64

64: Update post links layout r=Aloso a=Aloso

This changes the layout the blog post links.

Screenshot of the home page:
![ra1](https://user-images.githubusercontent.com/15658558/90049265-db618400-dcd4-11ea-9c78-74d34fad96ae.png)

Screenshot of the blog page:
![ra2](https://user-images.githubusercontent.com/15658558/90049278-df8da180-dcd4-11ea-9a9e-66d9275f7ac0.png)

Co-authored-by: Ludwig Stecher <[email protected]>

Author: bors[bot]

blog.html

@@ -5,11 +5,9 @@ <h2>Posts</h2>
 
 <ul class="post-list">
     {% for post in site.categories.blog %}
-    <li>
-        <h3>
-            <span class="post-meta post-first-col">{{ post.date | date: "%b %-d, %Y" }}</span> <a class="post-link"
-                href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
-        </h3>
+    <li class="post">
+        <div class="post-date">{{ post.date | date: "%b %-d, %Y" }}</div>
+        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
     </li>
     {% endfor %}
 </ul>

css/main.css

@@ -74,7 +74,7 @@ main {
 
 footer {
     width: 100%;
-    margin-top: 1rem;
+    margin-top: 3rem;
     box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
 }
 
@@ -147,38 +147,37 @@ a.source:hover {
     list-style: none;
 }
 
-
 .post-list {
-    margin-left: 0;
-    list-style: none;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 }
 
-.post-list > li {
-    margin-top: 2rem;
-}
-
-.post-list h2 {
-    margin-top: 0;
-    font-size: 2rem;
+.post {
+    margin: 0 0 1.5rem 0;
 }
 
-.post-meta {
+.post .post-date {
+    font-size: 1.25rem;
     color: #666666;
     font-weight: 300;
 }
 
-/* Help me! I know there should be some subgrid magic to align these spans... */
-.post-first-col {
-    display: inline-block;
-    width: 16rem;
+.post .post-link {
+    font-size: 1.7rem;
+    line-height: 2.4rem;
+    font-weight: 400;
 }
 
-.post-link {
-    font-weight: 400;
+.all-posts-link {
+    font-size: 1.25rem;
+}
+
+.post .post-link, .all-posts-link {
     text-decoration: none;
 }
 
-.post-link:hover {
+.post .post-link:hover, .all-posts-link:hover {
     text-decoration: underline;
 }
 

index.html

@@ -27,7 +27,7 @@ <h2>About</h2>
     </p>
 
     <p>Note that the project is in <strong>alpha</strong> status: it is already
-    useful in practice, but can't be considered stable.</p>
+        useful in practice, but can't be considered stable.</p>
 </section>
 
 <section class="paragraph lead">
@@ -70,45 +70,40 @@ <h2>Support</h2>
 
     <p>
         The following companies contributed significantly towards rust-analyzer development:
-
-        <div class="sponsors">
-            <ul>
-                <li><a href="https://ferrous-systems.com/">Ferrous Systems</a></li>
-                <li><a href="https://www.mozilla.org/">Mozilla</a></li>
-            </ul>
-            <ul>
-                <li><a href="https://embark-studios.com">Embark Studios</a></li>
-                <li><a href="https://www.freiheit.com/">freiheit.com</a></li>
-            </ul>
-        </div>
     </p>
+    <div class="sponsors">
+        <ul>
+            <li><a href="https://ferrous-systems.com/">Ferrous Systems</a></li>
+            <li><a href="https://www.mozilla.org/">Mozilla</a></li>
+        </ul>
+        <ul>
+            <li><a href="https://embark-studios.com">Embark Studios</a></li>
+            <li><a href="https://www.freiheit.com/">freiheit.com</a></li>
+        </ul>
+    </div>
 
 </section>
 
 <section>
-    <h2><span class="post-first-col">Latest News</span> <a class="post-link" href="/thisweek">All</a></h2>
+    <h2><span class="post-first-col">Latest News</span></h2>
 
-    <ul class="post-list">
+    <div class="post">
         {% assign post = site.categories.thisweek.first %}
-        <li>
-            <h3>
-                <span class="post-meta post-first-col">{{ post.date | date: "%b %-d, %Y" }}</span>
-                <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
-            </h3>
-        </li>
-    </ul>
+        <div class="post-date">{{ post.date | date: "%b %-d, %Y" }}</div>
+        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+    </div>
+
+    <a class="all-posts-link" href="/thisweek">All news</a>
 </section>
 
 <section>
-    <h2><span class="post-first-col">Latest Post</span> <a class="post-link" href="/blog">All</a></h2>
+    <h2><span class="post-first-col">Latest Post</span></h2>
 
-    <ul class="post-list">
+    <div class="post">
         {% assign post = site.categories.blog.first %}
-        <li>
-            <h3>
-                <span class="post-meta post-first-col">{{ post.date | date: "%b %-d, %Y" }}</span>
-                <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
-            </h3>
-        </li>
-    </ul>
+        <div class="post-date">{{ post.date | date: "%b %-d, %Y" }}</div>
+        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+    </div>
+
+    <a class="all-posts-link" href="/blog">All posts</a>
 </section>

thisweek.html

@@ -5,11 +5,9 @@ <h2>This Week In rust-analyzer</h2>
 
 <ul class="post-list">
     {% for post in site.categories.thisweek %}
-    <li>
-        <h3>
-            <span class="post-meta post-first-col">{{ post.date | date: "%b %-d, %Y" }}</span> <a class="post-link"
-                href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
-        </h3>
+    <li class="post">
+        <div class="post-date">{{ post.date | date: "%b %-d, %Y" }}</div>
+        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
     </li>
     {% endfor %}
 </ul>