Increased interactability of recent items

2 files changed, 37 insertions, 15 deletions

diff --git a/page.css b/page.css
index bd3b5e2..37c2582 100644
--- a/page.css
+++ b/page.css
@@ -22,6 +22,13 @@ section > :first-child {
 	margin-top: 0;
 }
 
+footer {
+	text-align: center;
+	color: #777;
+	font-size: 80%;
+	padding: 1em;
+}
+
 h1 {
 	color: #5a5252;
 }
@@ -31,41 +38,56 @@ h2 {
 	padding: 0.2em 0.5em;
 }
 
-a:link {
+a:not(.recent-item):link,
+a.recent-item:link .name {
 	color: #a96e3d;
 }
 
-a:hover {
+a:not(.recent-item):hover,
+a.recent-item:hover .name {
 	color: #e69958;
 }
 
-a:visited {
+a:not(.recent-item):visited,
+a.recent-item:visited .name {
 	color: #bd402d;
 }
 
-a:visited:hover {
+a:not(.recent-item):visited:hover,
+a.recent-item:visited:hover .name {
 	color: #e44e37;
 }
 
-a:active,
-a:visited:active {
+a:not(.recent-item):active,
+a:not(.recent-item):visited:active,
+a.recent-item:active .name,
+a.recent-item:visited:active .name {
 	color: #e675e6;
 }
 
-footer {
-	text-align: center;
-	color: #777;
-	font-size: 80%;
-	padding: 1em;
+.recent-item .name {
+	text-decoration: underline;
+}
+
+.recent-item .id {
+	font-family: monospace;
 }
 
 .recent-item {
-	padding: 0.2em;
+	color: inherit;
+	text-decoration: none;
+	display: block;
+	padding: 0.3em;
 	border-bottom: 1px solid #242529;
 }
 
 .recent-item:hover {
 	background: #1e1f23;
+	cursor: pointer;
+}
+
+.recent-item:active {
+	background: #2f262f;
 }
 
 .recent-item > .details {
diff --git a/recent.tmpl b/recent.tmpl
index c26feae..26a8e5d 100644
--- a/recent.tmpl
+++ b/recent.tmpl
@@ -13,16 +13,16 @@
 <section>
 <h2>Recent</h2>
 {{range .}}
-<div class="recent-item">
+<a href="/view/{{.Id}}" class="recent-item">
 	<div class="header left-right">
-		<a href="/view/{{.Id}}">{{.Name}}</a>
+		<span class="name">{{.Name}}</span>
 		<span>{{.StartTime.Format "January 02, 2006 15:04 UTC"}}</span>
 	</div>
 	<div class="details left-right">
 		<span class="id">{{.Id}}</span>
 		<span>Last updated on {{.LastModified.Format "January 02, 2006 15:04 UTC"}}</span>
 	</div>
-</div>
+</a>
 {{end}}
 <h2>About</h2>
 <p><strong>Derelict</strong> is a tool for 3D visualizations of after the battle wreckage fields for EVE Online. Main