Overhaul layout of the article list

I think I'll need to reorganize the blog as a whole soon. This article list got way too tall fast.

blog/index.php

@@ -7,21 +7,17 @@
     <style type="text/css">
       ul#articles {
         margin: 0;
-        margin-top: 2rem;
+        margin-top: 1rem;
         display: flex;
         flex-direction: column;
         padding-left: 0;
         list-style: none;
-        /*height: 6.4rem;
-        overflow-x: scroll;
-        flex-wrap: wrap;*/
       }
       ul#articles li {
-        width: fit-content;
+        width: 100%;
         list-style: none;
         display: inline-block;
-        height: calc(100% / 3);
-        margin-right: 2rem;
+        margin: .4rem 0;
       }
       ul#articles h2 {
         margin: 0;
@@ -32,6 +28,26 @@
       article img, article video, article iframe {
         filter:drop-shadow(var(--stddropshadow));
       }
+      ul#articles li > a {
+        text-decoration: none;
+      }
+      ul#articles li > a > * {
+        display: block;
+        margin: 0.1rem 0;
+      }
+      ul#articles li a h4 {
+        text-decoration: underline;
+      }
+      ul#articles li a time, ul#articles li a span {
+        font-size: .9em;
+        color: gainsboro;
+      }
+      ul#articles li a time {
+        font-weight: bold;
+      }
+      article:first-of-type h2::before {
+        content: 'Journal - ';
+      }
     </style>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
   </head>
@@ -69,14 +85,15 @@
       $content = simplexml_load_file("blog.atom");
       echo "<ul id='articles'>";
       $year = "-69420";
+      $yc = 0;
       foreach($content->entry as $entry) {
 
         $nyr = substr($entry->published, 0, 4);
         if($nyr != $year) {
           $year = $nyr;
-          echo "<li><h2>$year</h2></li>";
+          echo "<li><h2 id='$year'>$year</h2></li>";
         }
-        echo "<li><time>".substr($entry->published, 0, 10)."</time> <a href='".$entry->link[href]."'>".$entry->title."</a></li>";
+        echo "<li><a href='".$entry->link[href]."'><time>".substr($entry->published, 0, 10)."</time><h4>".$entry->title."</h4><span>".$entry->summary."</span></a></li>";
         
       }
       echo "</ul>";