Add an ugly but functional grid style

static/style.css

@@ -1,3 +1,37 @@
 .admin {
     color: red;
 }
+
+#article_browser {
+    display: grid;
+    grid-template-areas: ". up ."
+    "before focused after"
+    ". down .";
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: 1fr auto 1fr;
+}
+
+#article_browser .focused {
+    grid-area: focused;
+
+    align-self: center;
+    justify-self: center;
+    padding: 3em;
+}
+#article_browser .up {
+    grid-area: up;
+}
+#article_browser .before {
+    grid-area: before;
+}
+#article_browser .after {
+    grid-area: after;
+}
+#article_browser .down {
+    grid-area: down;
+}
+
+#article-browser ul {
+    list-style: none;
+    margin-block-start: 0;
+}

templates/site_main_article_detail.html

@@ -14,8 +14,7 @@
     {%- endmacro %}
 
     <div id="article_browser">
-        <div class="simultaneous_up">
-            Up
+        <div class="up">
             <ul>
                 {% for a in simultaneous_up %}
                     <li>{{ article(a) }}</li>
@@ -25,22 +24,15 @@
         <div class="focused">{{ focused["title"] }}</div>
         {% if after %}
             <div class="after">
-                After
-                <ul>
-                    <li>{{ article(after) }} @ {{ after["time_diff"] }}</li>
-                </ul>
+                {{ article(after) }} @ {{ after["timestamp_virtual"] }}
             </div>
         {% endif %}
         {% if before %}
             <div class="before">
-                Before
-                <ul>
-                    <li>{{ article(before) }} @ {{ before["time_diff"] }}</li>
-                </ul>
+                {{ article(before) }} @ {{ before["timestamp_virtual"] }}
             </div>
         {% endif %}
-        <div class="simultaneous_down">
-            Down
+        <div class="down">
             <ul>
                 {% for a in simultaneous_down %}
                     <li>{{ article(a) }}</li>