Chronological nethack logfile page

content/nethack/index.md

@@ -3,6 +3,7 @@ title: "Nethack"
 description: In which I play way too much of a silly command line Rogue-like game.
 date: 2022-04-13T08:43:46-07:00
 draft: true
+type: simple
 ---
 
 Herein is a chronological accounting of my descents into the Dungeons of Doom.

content/nethack/style.css

@@ -1,32 +1,81 @@
 /* Eryn Wells <eryn@erynwells.me> */
 
-.logfile li {
-    display: block;
-    margin-block-start: 2rem;
+:root {
+    --logentry-background-color: var(--tag-background-color);
+    --logentry-foreground-color: var(--tag-text-color);
 }
 
-.logfile dt {
-    margin-block-start: 2rem;
+ol.logfile {
+    margin-block-start: 0;
+    padding-inline-start: 0;
 }
 
-table.stats {
+.logentry {
+    background-color: var(--logentry-background-color);
+    color: var(--logentry-foreground-color);
+}
+
+.logentry {
+    align-items: first baseline;
+    border-radius: 6px;
+    display: grid;
+    grid-template-columns: 32px auto auto;
+    row-gap: 1rem;
+    margin-block-start: 2rem;
+    padding: 3rem;
+}
+
+.logentry .date {
+    grid-column-start: 2;
+    grid-row-start: 1;
+}
+
+.logentry h4.date {
+    margin: 0;
+    padding: 0;
+}
+
+.logentry .character-descriptor {
+    color: #aaa;
+    font-size: 1.5rem;
+    font-weight: 700;
+    grid-column-start: 3;
+    grid-row-start: 1;
+    text-align: right;
+    text-transform: uppercase;
+}
+
+.logentry p {
+    grid-column-start: 2;
+    grid-column-end: 4;
+    grid-row-start: 2;
+    margin: 0;
+}
+
+.logentry .stats {
+    grid-column-start: 2;
+    grid-column-end: 4;
+    grid-row-start: 3;
+}
+
+.logentry table.stats {
     border: 0;
     width: 100%;
     -webkit-border-horizontal-spacing: 0;
     -webkit-border-vertical-spacing: 0;
 }
 
-table.stats td {
+.logentry table.stats td {
     color: #aaa;
-    font-size: 1.75rem;
+    font-size: 1.5rem;
     font-weight: 700;
     padding: 0;
     text-transform: uppercase;
 }
 
-table.stats td.score,
-table.stats td.hp,
-table.stats td.level {
+.logentry table.stats td.score,
+.logentry table.stats td.hp,
+.logentry table.stats td.level {
     width: 16rem;
     text-align: right;
 }