@@ -85,20 +85,18 @@ main h2 {
   font-size: 1.2rem;
 }
 
-main h2,
-h3 {
-  padding: 1.25rem 0 1rem 0;
+header h3 {
+  padding: 0.4rem 0 1rem 0;
 }
 
 nav {
-  padding: 0.4rem 0 1.5rem 0;
+  margin: 1rem 0 2rem 0;
 }
 
 nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
-  padding-bottom: 1.25rem;
 }
 
 nav ul li {
@@ -112,15 +110,12 @@ padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   word-wrap: break-word;
-}
-
-a {
   color: var(--darker);
-  border-bottom: 0.1rem solid var(--medium-gray);
+  text-decoration: underline solid var(--medium-gray);
 }
 
 a:hover {
-  border-bottom-color: var(--gray);
+  text-decoration-color: var(--gray);
 }
 
 .index {
@@ -173,15 +168,15 @@ }
 
 .log {
   display: grid;
-  grid-template-columns: 20rem minmax(0, 1fr);
-  grid-row-gap: 0.8em;
-  grid-column-gap: 8rem;
+  grid-template-columns: minmax(0, 1fr) 10rem 10rem;
+  grid-row-gap: 0.4em;
+  grid-column-gap: 1rem;
   margin-bottom: 2em;
   padding-bottom: 1em;
   border-bottom: 0.1rem solid var(--medium-gray);
 }
 
-.log pre {
+.commit-message {
   white-space: pre-wrap;
   word-wrap: break-word;
   word-break: break-word;
@@ -228,26 +223,27 @@ .diff-stat {
   padding: 1rem 0 1rem 0;
 }
 
-.commit-hash,
-.commit-email {
+.commit-hash {
   font-family: var(--mono-font);
 }
 
-.commit-email:before {
-  content: "<";
-}
-
-.commit-email:after {
-  content: ">";
+.commit-reference {
+  margin-left: 1em;
+  padding: 0.1rem 0.6rem;
+  background: var(--light-gray);
+  text-decoration-color: var(--light-gray);
 }
 
 .commit {
   margin-bottom: 1rem;
 }
 
-.commit pre {
-  padding-bottom: 1rem;
-  white-space: pre-wrap;
+.commit-message {
+  padding-bottom: 0;
+}
+
+.commit-info {
+  margin-bottom: 0;
 }
 
 .diff-stat ul li {
@@ -331,9 +327,9 @@ .diff-type {
   color: var(--gray);
 }
 
-.commit-info {
+.commit-time,
+.commit-author {
   color: var(--gray);
-  padding-bottom: 1.5rem;
   font-size: 0.85rem;
 }
 
@@ -345,10 +341,6 @@
   .log {
     grid-template-columns: 1fr;
     grid-row-gap: 0em;
-  }
-
-  .commit-header {
-    max-width: 80%;
   }
 
   .index {
@@ -368,7 +360,7 @@ .index-category-name {
     padding-top: 0.7rem;
   }
 
-  .commit-info:not(:last-child) {
+  .commit-author:not(:last-child) {
     padding-bottom: 1.5rem;
   }
 

@@ -19,8 +19,10 @@ RepoHeader(data),
 		RenderNav(data),
 		Main(
 			Section(Class("commit"),
-				Pre(g.Text(diff.Commit.Message)),
-				CommitInfo(diff.Commit.Author),
+				Header(Class("commit-info"),
+					H3(Class("commit-message"), g.Text(diff.Commit.Message)),
+					CommitInfo(diff.Commit.Author),
+				),
 				Div(
 					Strong(g.Text("commit")),
 					P(A(Href(fmt.Sprintf("/%s/commit/%s", data.Name, diff.Commit.This)),
@@ -109,21 +111,26 @@ ),
 	})
 }
 
+func CommitTime(t time.Time) g.Node {
+	return Time(
+		DateTime(t.Format(time.RFC3339)),
+		TitleAttr(t.Format(time.RFC3339)),
+		g.Text(humanize.Time(t)),
+	)
+}
+
+func CommitAuthor(author object.Signature) g.Node {
+	return A(
+		Href(fmt.Sprintf("mailto:%s", author.Email)),
+		g.Text(author.Name),
+	)
+}
+
 func CommitInfo(author object.Signature) g.Node {
 	return Div(Class("commit-info"),
-		g.Text(author.Name+" "),
-		A(
-			Href(fmt.Sprintf("mailto:%s", author.Email)),
-			Class("commit-email"),
-			g.Text(author.Email),
-		),
-		Div(
-			Time(
-				DateTime(author.When.Format(time.RFC3339)),
-				TitleAttr(author.When.Format(time.RFC3339)),
-				g.Text(humanize.Time(author.When)),
-			),
-		),
+		CommitAuthor(author),
+		g.Text(" "),
+		CommitTime(author.When),
 	)
 }
 

@@ -2,6 +2,7 @@ package templates
 
 import (
 	"fmt"
+	"strings"
 
 	"github.com/go-git/go-git/v5/plumbing"
 	"go.alanpearce.eu/elgit/git"
@@ -25,28 +26,38 @@ return Div(Class("log"),
 		g.Map(commits, func(commit *git.CommitReference) g.Node {
 			return g.Group{
 				Div(Class("commit-header"),
-					Div(
-						A(
-							Href(fmt.Sprintf("/%s/commit/%s", data.Name, commit.Hash.String())),
-							Class("commit-hash"),
-							g.Text(commit.Hash.String()[:8]),
-						),
-						g.Text(" "),
-						g.If(
-							commit.HasReference(),
-							g.Map(commit.References(), func(ref *plumbing.Reference) g.Node {
-								return A(
-									Href(fmt.Sprintf("/%s/tree/%s", data.Name, ref.Name().Short())),
-									Class("commit-hash"),
-									g.Text(ref.Name().Short()),
-								)
-							}),
-						),
+					A(
+						Href(fmt.Sprintf("/%s/commit/%s", data.Name, commit.Hash.String())),
+						Class("commit-message"),
+						g.Text(firstLine(commit.Message)),
+					),
+					g.Text(" "),
+					g.If(
+						commit.HasReference(),
+						g.Map(commit.References(), func(ref *plumbing.Reference) g.Node {
+							return A(
+								Href(fmt.Sprintf("/%s/tree/%s", data.Name, ref.Name().Short())),
+								Class("commit-reference"),
+								g.Text(ref.Name().Short()),
+							)
+						}),
 					),
-					Pre(g.Text(commit.Message)),
 				),
-				CommitInfo(commit.Author),
+				Div(
+					Class("commit-time"),
+					CommitTime(commit.Author.When),
+				),
+				Div(
+					Class("commit-author"),
+					CommitAuthor(commit.Author),
+				),
 			}
 		}),
 	)
 }
+
+func firstLine(message string) string {
+	before, _, _ := strings.Cut(message, "\n")
+
+	return before
+}