M blog.html → blog.html

@@ -29,16 +29,32 @@ 
   <div class="bcontainer">
     <div class="bcontent">
       <h1>Latest Posts</h1>
-      <ul class="posts">
-        <li><a href="/post.html">Designing this blog from scratch</a></li>
-        <li>Utilitarian design principles</li>
-        <li>Using figma for quick prototype design</li>
-        <li>Learning x86 Assembly</li>
-        <li>Learning from CTFs about IT security</li>
-        <li>The web is cluttered</li>
-        <li>The simplicity of IRC</li>
-        <li>Simple static site generator</li>
-      </ul>
+      <div class="posts">
+        <div class="post-item">
+          <a href="/post.html">Designing this blog from scratch</a>
+          <p class="post-date">10 Jan 2020</p>
+        </div>
+        <div class="post-item">
+          <a href="/post.html">Using figma for quick prototype design</a>
+          <p class="post-date">19 Dec 2019</p>
+        </div>
+        <div class="post-item">
+          <a href="/post.html">Utilitarian design principles</a>
+          <p class="post-date">1 Dec 2019</p>
+        </div>
+        <div class="post-item">
+          <a href="/post.html">Learning x86 Assembly</a>
+          <p class="post-date">7 Nov 2019</p>
+        </div>
+        <div class="post-item">
+          <a href="/post.html">Learning from CTFs about IT security</a>
+          <p class="post-date">25 Oct 2019</p>
+        </div>
+        <div class="post-item">
+          <a href="/post.html">The web is cluttered</a>
+          <p class="post-date">1 Jul 2019</p>
+        </div>
+      </div>
     </div>
   </div>
 

M css/blog.css → css/blog.css

@@ -45,14 +45,14 @@ margin-left: -0.4rem;
 }
 
 .post-label{
-    background-color: #bbb;
+    background-color: #ccc;
     border-radius: 0.4rem;
     padding: 0.2rem 1rem;
     font-size: 0.8rem;
     margin: 0.2rem 0.4rem;
 }
 
-ul.posts{
+.posts{
     list-style: none;
     margin-top: 10px;
     font-size: 18px;
@@ -60,11 +60,18 @@ line-height: 35px;
     min-width: 500px;
 }
 
-ul.posts > li:nth-child(odd){
+.posts > div:nth-child(odd){
     background-color: #E5E5E5;
 }
-.post-date{
-    padding-bottom: 5px
+
+.post-item{
+    display: flex;
+    justify-content: space-between;
+}
+
+.post-item > .post-date{
+    padding: 0 1rem;
+    font-size: 1rem;
 }
 
 .post-text{