Clean up stylesheets. Don't show options in game lists.

19 files changed, 369 insertions, 322 deletions

diff --git a/public/join.js b/public/join.js
index 898113b..f79eabc 100644
--- a/public/join.js
+++ b/public/join.js
@@ -96,9 +96,9 @@ function update() {
 		if (player) {
 			if (game.status > 0) {
 				if (is_active(player, role))
-					element.className = "is_active";
+					element.classList.add("is_active");
 				else
-					element.className = "";
+					element.classList.remove("is_active");
 				if (player.user_id === user_id)
 					element.innerHTML = `<a href="/${game.title_id}/play:${game.game_id}:${role}">Play</a>`;
 				else
diff --git a/public/style.css b/public/style.css
index 76d6ff2..89ba3b2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,48 +1,76 @@
-html, input, textarea { font-family: "Source Serif", "Georgia", "Dingbats", "Noto Emoji", serif; font-size: 16px; }
-button, select { font-family: "Source Sans", "Verdana", "Dingbats", "Noto Emoji", sans-serif; font-size: 16px; }
+html, input, textarea {
+	font-family: "Source Serif", "Georgia", "Dingbats", "Noto Emoji", serif;
+	font-size: 16px;
+}
+button, select {
+	font-family: "Source Sans", "Verdana", "Dingbats", "Noto Emoji", sans-serif;
+	font-size: 16px;
+}
+
 html, body { margin: 0; }
 h1 { margin-left: -2px; }
 h2 { margin-left: -1px; }
-.header { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid brown; padding-right: 1em; }
-.header img { display: block; margin: 4px 0 -2px 2px; }
-.header span { margin: 0 1em; }
-.header a { color: black; }
-.main { margin: 2em; }
-.main p, .main dl { max-width: 50rem; }
-.main hr { max-width: 50rem; margin-right: auto; margin-left: 0; }
-.main hr { border: none; border-top: 2px dotted brown; }
-.main hr + p { font-style: italic; }
-img.logo { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); height: 200px; }
-img.avatar { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5); width: 80px; height: 80px; }
-.is_active { background-color: lemonchiffon; }
-.error { color: brown; font-style: italic; white-space: pre-wrap; }
-.warning { color: brown; }
-.warning::before { content: "\26a0"; }
-form { display: inline; }
-label { user-select: none; }
-input[type="text"], input[type="password"], textarea { padding: 5px; }
-select { padding-right: 20px; }
-button, input, select { font-size: 1rem; margin: 5px 0; }
-button, select { margin: 5px 10px 5px 0; padding: 1px 10px; background-color: gainsboro; vertical-align: top; }
-button:disabled { color: gray; border: 2px solid gainsboro; outline: 1px solid gray; }
-button:enabled, select { border: 2px outset white; outline: 1px solid black; }
-button:enabled:active:hover, select:active { border: 2px inset white; padding: 2px 9px 0px 11px; }
+a { color: blue; }
+.w { white-space: nowrap; }
+.r { text-align: right; }
+
+header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 2px solid brown;
+	padding-right: 1em;
+}
+header img {
+	display: block;
+	margin: 4px 0 -2px 2px;
+}
+header nav a { margin: 0 1em; color: black; }
+article { margin: 2em; }
+article p, article dl, article ul { max-width: 50rem; }
+
+img.avatar {
+	float: left; margin: 0 20px 5px 0;
+	box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5);
+	width: 80px;
+	height: 80px;
+}
+
+img.logo {
+	float: left;
+	margin: 0 20px 5px 0;
+	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
+	height: 200px;
+}
+
+table { min-width: min(50rem,100%); }
 table { border-collapse: collapse; }
-tfoot { background-color: gainsboro; }
 th { text-align: left; background-color: gainsboro; }
 th, td { border: 1px solid black; padding: 3px 1ex; }
-table.game { min-width: min(50rem,100%); }
-table.game .title { white-space: nowrap; }
-table.game .scenario { white-space: nowrap; }
-table.game .role { white-space: nowrap; }
-table.game .time { white-space: nowrap; }
-table.game td a { text-decoration: none; color: black; }
-table.game td.command a { text-decoration: underline; color: blue; }
-table.post { min-width: min(50rem,100%); }
-table.post .author { white-space: nowrap; width: 10rem; }
-table.post .time { white-space: nowrap; text-align: right; width: 5rem; }
-table.post .replies { width: 0; }
-table.post .unread { background-color: lightyellow; }
-table.post .body { white-space: pre-wrap; padding: 10px 10px; }
-table.post th a { text-decoration: none; color: black; }
-table.post td:not(.body):not(.edit) a { text-decoration: none; color: black; }
+th a, td:not(.command) a { text-decoration: none; color: black; }
+td.body { white-space: pre-wrap; padding: 10px 10px; }
+
+input[type="text"], input[type="password"], textarea {
+	padding: 5px;
+}
+button, input, select {
+	margin: 5px 0;
+}
+button, select {
+	margin: 5px 10px 5px 0;
+	padding: 1px 10px;
+	background-color: gainsboro;
+	vertical-align: top;
+}
+button:disabled { color: gray; border: 2px solid gainsboro; outline: 1px solid gray; }
+button:enabled, select { border: 2px outset white; outline: 1px solid black; }
+button:enabled:active:hover, select:active { border: 2px inset white; padding: 2px 9px 0px 11px; }
+
+td.is_active { background-color: lemonchiffon; }
+p.error { color: brown; font-style: italic; white-space: pre-wrap; }
+p.warning { color: brown; }
+p.warning::before { content: "\26a0"; }
+
+article hr { max-width: 50rem; margin-right: auto; margin-left: 0; }
+article hr { border: none; border-top: 2px dotted brown; }
+article hr + p { font-style: italic; }
diff --git a/views/change_about.ejs b/views/change_about.ejs
index c87fc55..cbea0c5 100644
--- a/views/change_about.ejs
+++ b/views/change_about.ejs
@@ -1,9 +1,11 @@
-<%- include('header', { title: "Change profile text" }) %>
+<%- include('header', { title: "Change profile text" }) -%>
 <style>
 textarea { width: 100%; max-width: 45em; }
 </style>
 <form action="/change_about" method="post">
-<textarea name="about" rows="20" cols="80" maxlength="32000" autofocus><%= about %></textarea>
+<p>
+<textarea name="about" rows="20" cols="80" maxlength="32000" autofocus>
+<%= about %></textarea>
 <p>
 <button type="submit">Submit</button>
 </form>
diff --git a/views/chat.ejs b/views/chat.ejs
index 81697ee..d217857 100644
--- a/views/chat.ejs
+++ b/views/chat.ejs
@@ -1,4 +1,4 @@
-<%- include('header', { title: "Chat Log" }) %>
+<%- include('header', { title: "Chat Log" }) -%>
 <style>
 table{width:min(60rem,100%);}
 td:nth-child(1),td:nth-child(2){white-space:nowrap;width:0}
diff --git a/views/create.ejs b/views/create.ejs
index 74f9276..36b86e2 100644
--- a/views/create.ejs
+++ b/views/create.ejs
@@ -3,12 +3,16 @@
 <a href="/info/<%= title.title_id %>"><img class="logo" src="/<%= title.title_id %>/cover.jpg"></a>
 <form action="/create/<%= title.title_id %>" method="post">
 <p>
+<% if (scenarios.length > 1) { %>
 Scenario:<br>
 <select name="scenario">
 <% scenarios.forEach((scenario) => { %>
 <option value="<%= scenario %>"><%= scenario %></option>
 <% }); %>
 </select>
+<% } else { %>
+<input type="hidden" name="scenario" value="<%= scenarios[0] %>">
+<% } %>
 <%- include('../public/' + title.title_id + '/create.html') %>
 <p>
 Description:<br>
diff --git a/views/forum_edit.ejs b/views/forum_edit.ejs
index 2f3c3ff..7ed1414 100644
--- a/views/forum_edit.ejs
+++ b/views/forum_edit.ejs
@@ -1,10 +1,11 @@
-<%- include('header', { title: "Edit Post" }) %>
+<%- include('header', { title: "Edit Post" }) -%>
 <style>
 input, textarea { width: 100%; max-width: 45em; }
 </style>
 <form action="/forum/edit/<%- post.post_id %>" method="post">
 <p>
-<textarea name="body" rows="20" cols="80" maxlength="32000" required autofocus><%= post.body %></textarea>
+<textarea name="body" rows="20" cols="80" maxlength="32000" required autofocus>
+<%= post.body %></textarea>
 <p>
 <button type="submit">Submit</button>
 </form>
diff --git a/views/forum_post.ejs b/views/forum_post.ejs
index aa24455..98d667c 100644
--- a/views/forum_post.ejs
+++ b/views/forum_post.ejs
@@ -1,4 +1,4 @@
-<%- include('header', { title: "New Thread" }) %>
+<%- include('header', { title: "New Thread" }) -%>
 <style>
 input, textarea { width: 100%; max-width: 45em; }
 </style>
diff --git a/views/forum_reply.ejs b/views/forum_reply.ejs
index 3e87ddd..db777b6 100644
--- a/views/forum_reply.ejs
+++ b/views/forum_reply.ejs
@@ -1,13 +1,15 @@
-<%- include('header', { title: thread.subject }) %>
+<%- include('header', { title: thread.subject }) -%>
 <style>
 input, textarea { width: 100%; max-width: 45em; }
+table { max-width: 50em; }
 table .author { border-right: none; }
 table .time { border-left: none; font-weight: normal; }
+table .command { border: none; }
 </style>
 <table class="post">
 <tr>
 <th class="author"><%= post.author_name %>
-<th class="time"><%= post.ctime %> <%= post.edited ? "(edited " + post.mtime + ")" : "" %>
+<th class="r time"><%= post.ctime %> <%= post.edited ? "(edited " + post.mtime + ")" : "" %>
 <tr>
 <td class="body" colspan="2"><%- post.body %></td>
 </table>
diff --git a/views/forum_thread.ejs b/views/forum_thread.ejs
index 7232bce..5c76704 100644
--- a/views/forum_thread.ejs
+++ b/views/forum_thread.ejs
@@ -1,21 +1,22 @@
-<%- include('header', { title: thread.subject }) %>
+<%- include('header', { title: thread.subject }) -%>
 <style>
+table { max-width: 50em; }
 table .author { border-right: none; }
 table .time { border-left: none; font-weight: normal; }
-table .edit { text-align: right; border: none; }
+table .command { border: none; }
 </style>
 <% posts.forEach((row) => { %>
 <p>
 <table class="post">
 <tr>
 <th class="author"><a href="/user/<%- row.author_name %>"><%= row.author_name %></a>
-<th class="time"><%= row.ctime %>
+<th class="r time"><%= row.ctime %>
 <%= row.edited ? "(edited " + row.mtime + ")" : "" %>
 <tr>
 <td class="body" colspan="2"><%- row.body %></td>
 <% if (user) { %>
 <tr>
-<td class="edit" colspan=2>
+<td class="r command" colspan=2>
 <% if (row.author_id === user.user_id) { %>
 <a href="/forum/edit/<%- row.post_id %>">Edit</a>
 <% } %>
@@ -23,8 +24,6 @@ table .edit { text-align: right; border: none; }
 <% } %>
 </table>
 <% }); %>
-<%
-if (user) {
-	%><p><a href="/forum/reply/<%- posts[0].post_id %>">Reply</a><%
-}
-%>
+<% if (user) { %>
+<p><a href="/forum/reply/<%- posts[0].post_id %>">Reply</a>
+<% } %>
diff --git a/views/forum_view.ejs b/views/forum_view.ejs
index 6838803..d5ebd46 100644
--- a/views/forum_view.ejs
+++ b/views/forum_view.ejs
@@ -1,40 +1,37 @@
-<%- include('header', { title: "Forum", refresh: 900 }) %>
-<table class="post">
-<thead>
+<%- include('header', { title: "Forum", refresh: 900 }) -%>
+<style>
+tfoot{background-color:gainsboro}
+</style>
+<table>
 <tr>
-<th class="subject">Subject
-<th class="author">Author
-<th class="replies">Replies
-<th class="time">Time
-</thead>
+<th>Subject
+<th>Author
+<th>Replies
+<th>Time
 <% threads.forEach((row) => { %>
 <tr>
-<td class="subject"><a href="/forum/thread/<%- row.thread_id %>"><%= row.subject %></a>
-<td class="author"><a href="/user/<%- row.author_name %>"><%= row.author_name %></a>
-<td class="replies"><%= row.replies %>
-<td class="time"><%= row.mtime %>
+<td><a href="/forum/thread/<%- row.thread_id %>"><%= row.subject %></a>
+<td><a href="/user/<%- row.author_name %>"><%= row.author_name %></a>
+<td><%= row.replies %>
+<td><%= row.mtime %>
 <% }); %>
 <tfoot>
 <tr>
 <td colspan="4">
-<%
-if (current_page > 1) {
-	%><a href="/forum/page/<%= current_page-1 %>">&#x2190;</a> <%
-}
-for (let p = 1; p <= page_count && p <= 30; ++p) {
-	if (p === current_page) {
-		%>(<%= p %>) <%
-	} else {
-		%><a href="/forum/page/<%= p %>"><%= p %></a> <%
-	}
-}
-if (current_page < page_count) {
-	%><a href="/forum/page/<%= current_page+1 %>">&#x2192;</a> <%
-}
-%>
+<% if (current_page > 1) { %>
+<a href="/forum/page/<%- current_page-1 %>">&#x2190;</a>
+<% } %>
+<% for (let p = 1; p <= page_count && p <= 30; ++p) { %>
+<% if (p === current_page) { %>
+(<%- p %>)
+<% } else { %>
+<a href="/forum/page/<%- p %>"><%- p %></a>
+<% } %>
+<% } %>
+<% if (current_page < page_count) { %>
+<a href="/forum/page/<%- current_page+1 %>">&#x2192;</a>
+<% } %>
 </table>
-<%
-if (user) {
-	%><p><a href="/forum/post">New thread</a><%
-}
-%>
+<% if (user) { %>
+<p><a href="/forum/post">New thread</a>
+<% } %>
diff --git a/views/games.ejs b/views/games.ejs
index 86a2502..90b2f68 100644
--- a/views/games.ejs
+++ b/views/games.ejs
@@ -1,50 +1,51 @@
-<%- include('header', { title: "All Public Games", refresh: (user ? 300 : 0) }) %>
+<%- include('header', { title: "All Public Games", refresh: (user ? 300 : 0) }) -%>
 
 <h2>Open</h2>
-<table class="game">
-<tr><th>ID<th>Title<th>Scenario<th>Options<th>Players<th>Description<th>Created<th>
-<%_ if (open_games.length > 0) { _%>
-<%_ open_games.forEach((row) => { _%>
+<table>
+<tr><th>ID<th>Title<th>Scenario<th>Players<th>Description<th>Created<th>
+<% if (open_games.length > 0) { %>
+<% open_games.forEach((row) => { %>
 <tr>
-<td class="id"><%= row.game_id %>
-<td class="title"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
-<td class="scenario"><%= row.scenario %>
-<td class="options"><%- row.options %>
-<td class="players"><%- row.player_names %>
-<td class="description"><%= row.description %>
-<td class="time"><%= row.ctime %>
+<td><%= row.game_id %>
+<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
+<td class="w"><%= row.scenario %>
+<td><%- row.player_names %>
+<td><%= row.description %>
+<td class="w"><%= row.ctime %>
 <td class="command"><a href="/join/<%= row.game_id %>">Join</a>
-<%_ }); } else { _%>
-<tr><td colspan="8">No open games.
-<%_ } _%>
+<% }); } else { %>
+<tr><td colspan="7">No open games.
+<% } %>
 </table>
 
 <h2>Active</h2>
-<table class="game">
-<tr><th>ID<th>Title<th>Scenario<th>Options<th>Players<th>Description<th>Changed<th>Active<th>
-<%_ if (active_games.length > 0) { _%>
-<%_ active_games.forEach((row) => { _%>
+<table>
+<tr><th>ID<th>Title<th>Scenario<th>Players<th>Description<th>Changed<th>Active<th>
+<% if (active_games.length > 0) { %>
+<% active_games.forEach((row) => { %>
 <tr>
-<td class="id"><%= row.game_id %>
-<td class="title"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
-<td class="scenario"><%= row.scenario %>
-<td class="options"><%- row.options %>
-<td class="players"><%- row.player_names %>
-<td class="description"><%= row.description %>
-<td class="time"><%= row.mtime %>
-<td class="role <%= row.is_active ? "is_active" : "" %>"><%= row.active %>
-<%_
-	if (row.is_yours) {
-		if (row.is_shared) {
-			%><td class="command"><a href="/join/<%= row.game_id %>">View</a><%
-		} else {
-			%><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a><%
-		}
-	} else {
-		%><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a><%
-	}
-_%>
-<%_ }); } else { _%>
-<tr><td colspan="9">No active games.
-<%_ } _%>
+<td><%= row.game_id %>
+<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
+<td class="w"><%= row.scenario %>
+<td><%- row.player_names %>
+<td><%= row.description %>
+<td class="w"><%= row.mtime %>
+<% if (row.is_active) { %>
+<td class="is_active"><%= row.active %>
+<% } else { %>
+<td><%= row.active %>
+<% } %>
+<% if (row.is_yours) { %>
+<% if (row.is_shared) { %>
+<td class="command"><a href="/join/<%= row.game_id %>">View</a>
+<% } else { %>
+<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a>
+<% } %>
+<% } else { %>
+<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a>
+<% } %>
+<% }); %>
+<% } else { %>
+<tr><td colspan="8">No active games.
+<% } %>
 </table>
diff --git a/views/header.ejs b/views/header.ejs
index c8337fc..2628f8d 100644
--- a/views/header.ejs
+++ b/views/header.ejs
@@ -2,40 +2,35 @@
 <html>
 <head>
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
-<% if (typeof refresh !== 'undefined' && refresh > 0) { %><meta http-equiv="refresh" content="<%= refresh %>"><% } %>
-<link rel="icon" href="/favicon.svg">
+<% if (typeof refresh !== 'undefined' && refresh > 0) { _%>
+<meta http-equiv="refresh" content="<%= refresh %>">
+<% } _%>
 <title><%= title %></title>
-<style>
-<%- include('../public/fonts/fonts.css') _%>
-<%- include('../public/style.css') _%>
-</style>
+<link rel="icon" href="/favicon.svg">
+<link rel="stylesheet" href="/fonts/fonts.css">
+<link rel="stylesheet" href="/style.css">
 </head>
 <body>
-<div class="header">
-<div><a href="/"><img src="/images/rally-the-troops.svg" width="48" height="48"></a></div>
-<div>
-<span><a href="/about">About</a></span>
-<span><a href="/forum">Forum</a></span>
-<%
-	if (user) {
-		let unread = user.unread | 0;
-		if (unread > 0) {
-			%><span><a href="/inbox">Inbox (<%= unread %>)</a></span><%
-		} else {
-			%><span><a href="/inbox">Inbox</a></span><%
-		}
-		%><span><a href="/profile">Profile (<%= user.name %>)</a></span><%
-	} else {
-		%><span><a href="/signup">Signup</a></span><%
-		%><span><a href="/login">Login</a></span><%
-	}
-%>
-</div>
-</div>
-<div class="main">
+<header>
+<a href="/"><img src="/images/rally-the-troops.svg" width="48" height="48"></a>
+<nav>
+<a href="/about">About</a>
+<a href="/forum">Forum</a>
+<%_ if (user) { _%>
+<%_ if (user.unread > 0) { _%>
+<a href="/inbox">Inbox (<%= unread %>)</a>
+<%_ } else { _%>
+<a href="/inbox">Inbox</a>
+<%_ } _%>
+<a href="/profile">Profile (<%= user.name %>)</a>
+<%_ } else { _%>
+<a href="/signup">Signup</a>
+<a href="/login">Login</a>
+<%_ } _%>
+</nav>
+</header>
+<article>
 <h1><%= title %></h1>
-<%
-	if (typeof flash !== 'undefined' && flash.length > 0) {
-		%><p class="error"><%= Array.isArray(flash) ? flash.join("\n") : flash %></p><%
-	}
-%>
+<%_ if (typeof flash !== 'undefined' && flash.length > 0) { _%>
+<p class="error"><%= flash %></p>
+<%_ } _%>
diff --git a/views/info.ejs b/views/info.ejs
index 4a515ff..49625ed 100644
--- a/views/info.ejs
+++ b/views/info.ejs
@@ -1,84 +1,80 @@
-<%- include('header', { title: title.title_name, refresh: (user ? 300 : 0) }) _%>
+<%- include('header', { title: title.title_name, refresh: (user ? 300 : 0) }) -%>
 <img class="logo" src="/<%= title.title_id %>/cover.jpg">
-<%- include('../public/' + title.title_id + '/about.html') %>
+<%- include('../public/' + title.title_id + '/about.html') -%>
 <p>
 Read more about the game on
 <a href="https://boardgamegeek.com/boardgame/<%= title.bgg %>">boardgamegeek.com</a>.
 
 <h2>Open Games</h2>
-<table class="game">
-<tr><th>ID<th>Scenario<th>Options<th>Players<th>Description<th>Created<th>
-<%_ if (open_games.length > 0) { _%>
-<%_ open_games.forEach((row) => { _%>
+<table>
+<tr><th>ID<th>Scenario<th>Players<th>Description<th>Created<th>
+<% if (open_games.length > 0) { -%>
+<% open_games.forEach((row) => { %>
 <tr>
-<td class="id"><%= row.game_id %>
-<td class="scenario"><%= row.scenario %>
-<td class="options"><%- row.options %>
-<td class="players"><%- row.player_names %>
-<td class="description"><%= row.description %>
-<td class="time"><%= row.ctime %>
+<td><%= row.game_id %>
+<td class="w"><%= row.scenario %>
+<td><%- row.player_names %>
+<td><%= row.description %>
+<td class="w"><%= row.ctime %>
 <td class="command"><a href="/join/<%= row.game_id %>">Join</a>
-<%_ }); } else { _%>
-<tr><td colspan="7">No open games.
-<%_ } _%>
+<% }); } else { %>
+<tr><td colspan="6">No open games.
+<% } %>
 </table>
 
 <p>
 <a href="/create/<%= title.title_id %>">Create a new game</a>.
 
-<%_ if (active_games.length > 0) { _%>
+<% if (active_games.length > 0) { %>
 <h2>Active Games</h2>
 <table class="game">
-<tr><th>ID<th>Scenario<th>Options<th>Players<th>Description<th>Changed<th>Turn<th>
-<%_ active_games.forEach((row) => { _%>
+<tr><th>ID<th>Scenario<th>Players<th>Description<th>Changed<th>Turn<th>
+<% active_games.forEach((row) => { %>
 <tr>
-<td class="id"><%= row.game_id %>
-<td class="scenario"><%= row.scenario %>
-<td class="options"><%- row.options %>
-<td class="players"><%- row.player_names %>
-<td class="description"><%= row.description %>
-<td class="time"><%= row.mtime %>
-<td class="<%= row.is_active ? "role is_active" : "role" %>"><%= row.active %>
-<%_
-	if (row.is_yours) {
-		if (row.is_shared) {
-			%><td class="command"><a href="/join/<%= row.game_id %>">Play</a><%
-		} else {
-			%><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">Play</a><%
-		}
-	} else {
-		%><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a><%
-
-	}
-_%>
-<%_ }); _%>
+<td><%= row.game_id %>
+<td class="w"><%= row.scenario %>
+<td><%- row.player_names %>
+<td><%= row.description %>
+<td class="w"><%= row.mtime %>
+<% if (row.is_active) { %>
+<td class="is_active"><%= row.active %>
+<% } else { %>
+<td><%= row.active %>
+<% } %>
+<% if (row.is_yours) { %>
+<% if (row.is_shared) { %>
+<td class="command"><a href="/join/<%= row.game_id %>">Play</a>
+<% } else { %>
+<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">Play</a>
+<% } %>
+<% } else { %>
+<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a>
+<% } %>
+<% }); %>
 </table>
-<%_ } _%>
+<% } %>
 
-<%_ if (finished_games.length > 0) { _%>
+<% if (finished_games.length > 0) { %>
 <h2>Finished Games</h2>
 <table class="game">
-<tr><th>ID<th>Scenario<th>Options<th>Players<th>Description<th>Finished<th>Result<th>
-<%_ finished_games.forEach((row) => { _%>
+<tr><th>ID<th>Scenario<th>Players<th>Description<th>Finished<th>Result<th>
+<% finished_games.forEach((row) => { %>
 <tr>
-<td class="id"><%= row.game_id %>
-<td class="scenario"><%= row.scenario %>
-<td class="options"><%- row.options %>
-<td class="players"><%- row.player_names %>
-<td class="description"><%= row.description %>
-<td class="time"><%= row.mtime %>
-<td class="result"><%= row.result %>
-<%_
-	if (row.is_yours) {
-		if (row.is_shared) {
-			%><td class="command"><a href="/join/<%= row.game_id %>">View</a><%
-		} else {
-			%><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a><%
-		}
-	} else {
-		%><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a><%
-	}
-_%>
-<%_ }); _%>
+<td><%= row.game_id %>
+<td class="w"><%= row.scenario %>
+<td><%- row.player_names %>
+<td><%= row.description %>
+<td class="w"><%= row.mtime %>
+<td><%= row.result %>
+<% if (row.is_yours) { %>
+<% if (row.is_shared) { %>
+<td class="command"><a href="/join/<%= row.game_id %>">View</a>
+<% } else { %>
+<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a>
+<% } %>
+<% } else { %>
+<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a>
+<% } %>
+<% }); %>
 </table>
-<%_ } _%>
+<% } %>
diff --git a/views/join.ejs b/views/join.ejs
index 6558745..b4e4718 100644
--- a/views/join.ejs
+++ b/views/join.ejs
@@ -1,7 +1,8 @@
 <%- include('header', { title: game.title_name }) -%>
 <style>
-th, td { min-width: 10em; font-size: 16px; }
-a.red { text-decoration: none; color: brown; font-size: 15px; }
+table { min-width: auto; }
+th, td { min-width: 10em; }
+a.red { text-decoration: none; color: brown; }
 td a { text-decoration: underline; color: blue; }
 .hide { display: none; }
 </style>
@@ -20,24 +21,30 @@ let ready = <%- ready %>;
 <div class="info">
 <p>
 Owner: <%= game.owner_name %>
-<br>
-Private: <%= game.private ? "yes" : "no" %>
+<% if (game.private) { %>
+(private)
+<% } %>
 <br>
 Scenario: <%= game.scenario %>
 <br>
 Options: <%= game.options %>
-<br>
-Description: <%= game.description || "No description." %>
+
+<p>
+<%= game.description || "No description." %>
 
 <br clear=left>
 
 <table class="small">
 <tr>
-<% roles.forEach((role) => { %><th id="role_<%= role.replace(/ /g, '_') %>_name"><%= role %></th><% }); %>
+<% roles.forEach((role) => { %>
+<th class="command" id="role_<%= role.replace(/ /g, '_') %>_name"><%= role %></th>
+<% }); %>
 <tr>
-<% roles.forEach((role) => { %><td id="role_<%= role.replace(/ /g, '_') %>">-</td><% }); %>
+<% roles.forEach((role) => { %>
+<td class="command" id="role_<%= role.replace(/ /g, '_') %>">-</td>
+<% }); %>
 <tr>
-<td id="message" colspan="<%= roles.length %>">-</td>
+<td class="command" id="message" colspan="<%= roles.length %>">-</td>
 </table>
 
 <p>
diff --git a/views/message_inbox.ejs b/views/message_inbox.ejs
index e70e156..626662d 100644
--- a/views/message_inbox.ejs
+++ b/views/message_inbox.ejs
@@ -1,12 +1,19 @@
-<%- include('header', { title: "Inbox" }) %>
+<%- include('header', { title: "Inbox" }) -%>
+<style>
+.unread { background-color: lightyellow; }
+</style>
 <p><a href="/message/send">Send message</a>
 <table class="post">
 <tr><th>From<th>Subject<th>Date
 <% if (messages.length > 0) { messages.forEach((row) => { %>
-<tr class="<%- row.read ? "read" : "unread" %>">
-<td class="author"><a href="/user/<%- row.from_name %>"><%= row.from_name %></a>
-<td class="subject"><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a>
-<td class="time"><%= row.time %>
+<% if (row.read) { %>
+<tr class="read">
+<% } else {%>
+<tr>
+<% } %>
+<td><a href="/user/<%- row.from_name %>"><%= row.from_name %></a>
+<td><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a>
+<td><%= row.time %>
 <% }); } else { %>
 <tr><td colspan="3">No messages</td>
 <% } %>
diff --git a/views/message_outbox.ejs b/views/message_outbox.ejs
index c7ff379..a5d1abd 100644
--- a/views/message_outbox.ejs
+++ b/views/message_outbox.ejs
@@ -1,4 +1,7 @@
-<%- include('header', { title: "Outbox" }) %>
+<%- include('header', { title: "Outbox" }) -%>
+<style>
+.unread { background-color: lightyellow; }
+</style>
 <script>
 function delete_all() {
 	let warning = "Are you sure you want to delete ALL the messages?";
@@ -9,10 +12,14 @@ function delete_all() {
 <table class="post">
 <tr><th>To<th>Subject<th>Date
 <% if (messages.length > 0) { messages.forEach((row) => { %>
-<tr class="<%- row.read ? "read" : "unread" %>">
-<td class="author"><a href="/user/<%- row.to_name %>"><%= row.to_name %></a>
-<td class="subject"><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a>
-<td class="time"><%= row.time %>
+<% if (row.read) { %>
+<tr class="read">
+<% } else {%>
+<tr>
+<% } %>
+<td><a href="/user/<%- row.to_name %>"><%= row.to_name %></a>
+<td><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a>
+<td><%= row.time %>
 <% }); } else { %>
 <tr><td colspan="3">No messages</td>
 <% } %>
diff --git a/views/message_read.ejs b/views/message_read.ejs
index 7b32eda..b2f8227 100644
--- a/views/message_read.ejs
+++ b/views/message_read.ejs
@@ -1,4 +1,7 @@
 <%- include('header', { title: message.subject }) %>
+<style>
+th{font-weight:normal;width:4em;}
+</style>
 <script>
 function delete_message(id) {
 	let warning = "Are you sure you want to DELETE this message?";
@@ -9,10 +12,10 @@ function reply_message(id) {
 	window.location.href = "/message/reply/" + id;
 }
 </script>
-<table class="post">
-<tr><th>From:<td> <a href="/user/<%- message.from_name %>"><%= message.from_name %></a>
-<tr><th>To:<td> <a href="/user/<%- message.to_name %>"><%= message.to_name %></a>
-<tr><th>Date:<td> <%= message.time %>
+<table>
+<tr><th>From:<td><a href="/user/<%- message.from_name %>"><%= message.from_name %></a>
+<tr><th>To:<td><a href="/user/<%- message.to_name %>"><%= message.to_name %></a>
+<tr><th>Date:<td><%= message.time %>
 <tr><td colspan="2" class="body"><%- message.body %></td>
 </table>
 <p>
diff --git a/views/message_send.ejs b/views/message_send.ejs
index 4dafa3a..cea21e3 100644
--- a/views/message_send.ejs
+++ b/views/message_send.ejs
@@ -1,4 +1,4 @@
-<%- include('header', { title: "Send Message" }) %>
+<%- include('header', { title: "Send Message" }) -%>
 <style>
 input, textarea { width: 100%; max-width: 45rem; }
 </style>
diff --git a/views/profile.ejs b/views/profile.ejs
index a001e21..a4a23fc 100644
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -1,5 +1,5 @@
-<%- include('header', { title: "Rally the Troops!", refresh: (active_games.length > 0 ? 300 : 0) }) _%>
-<img class="logo avatar" src="<%= avatar %>" width="80" height="80">
+<%- include('header', { title: "Rally the Troops!", refresh: (active_games.length > 0 ? 300 : 0) }) -%>
+<img class="avatar" src="<%= avatar %>" width="80" height="80">
 <p>
 Welcome, <%= user.name %>!
 <p>
@@ -8,13 +8,11 @@ Your mail address is <%= user.mail %>.
 <br clear=left>
 
 <p>&#xbb;
-<%
-	if (user.notify) {
-		%><a href="/unsubscribe">Disable mail notifications</a><%
-	} else {
-		%><a href="/subscribe">Enable mail notifications</a><%
-	}
-%>
+<% if (user.notify) { %>
+<a href="/unsubscribe">Disable mail notifications</a>
+<% } else { %>
+<a href="/subscribe">Enable mail notifications</a>
+<% } %>
 <br>&#xbb;
 Change
 <a href="/change_password">password</a>,
@@ -26,79 +24,79 @@ or <a href="/change_about">profile text</a>.
 <br>&#xbb;
 <a href="/logout">Logout</a>
 
-<%_ if (open_games.length > 0) { _%>
+<% if (open_games.length > 0) { %>
 <h2>Open Games</h2>
-<table class="game">
-<tr><th>ID<th>Game<th>Scenario<th>Options<th>Players<th>Description<th>Created<th>
-<%_ open_games.forEach((row) => { _%>
+<table>
+<thead>
+<tr><th>ID<th>Game<th>Scenario<th>Players<th>Description<th>Created<th>
+<tbody>
+<% open_games.forEach((row) => { %>
 <tr>
-<td class="id"><%= row.game_id %>
-<td class="name"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
-<td class="scenario"><%= row.scenario %>
-<td class="options"><%- row.options %>
-<td class="players"><%- row.player_names %>
-<td class="description"><%= row.description %>
-<td class="time"><%= row.ctime %>
+<td><%= row.game_id %>
+<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
+<td class="w"><%= row.scenario %>
+<td><%- row.player_names %>
+<td><%= row.description %>
+<td class="w"><%= row.ctime %>
 <td class="command"><a href="/join/<%= row.game_id %>">Join</a>
-<%_ }); _%>
+<% }); %>
 </table>
-<%_ } _%>
+<% } %>
 
-<%_ if (active_games.length > 0) { _%>
+<% if (active_games.length > 0) { %>
 <h2>Active Games</h2>
 <table class="game">
-<tr><th>ID<th>Game<th>Scenario<th>Options<th>Players<th>Description<th>Changed<th>Turn<th>
-<%_ active_games.forEach((row) => { _%>
+<thead>
+<tr><th>ID<th>Game<th>Scenario<th>Players<th>Description<th>Changed<th>Turn<th>
+<tbody>
+<% active_games.forEach((row) => { %>
 <tr>
-<td class="id"><%= row.game_id %>
-<td class="title"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
-<td class="scenario"><%= row.scenario %>
-<td class="options"><%- row.options %>
-<td class="players"><%- row.player_names %>
-<td class="description"><%= row.description %>
-<td class="time"><%= row.mtime %>
-<%_
-	if (row.is_active) {
-		%><td class="role is_active"><%= row.active %><%
-	} else {
-		%><td class="role"><%= row.active %><%
-	}
-	if (row.is_shared) {
-		%><td class="command"><a href="/join/<%= row.game_id %>">Play</a><%
-	} else {
-		%><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">Play</a><%
-	}
-_%>
-<%_ }); _%>
+<td><%= row.game_id %>
+<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
+<td class="w"><%= row.scenario %>
+<td><%- row.player_names %>
+<td><%= row.description %>
+<td class="w"><%= row.mtime %>
+<% if (row.is_active) { %>
+<td class="is_active"><%= row.active %>
+<% } else { %>
+<td><%= row.active %>
+<% } %>
+<% if (row.is_shared) { %>
+<td class="command"><a href="/join/
+<%= row.game_id %>">Play</a>
+<% } else { %>
+<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">Play</a>
+<% } %>
+<% }); %>
 </table>
-<%_ } _%>
+<% } %>
 
-<%_ if (finished_games.length > 0) { _%>
+<% if (finished_games.length > 0) { %>
 <h2>Finished Games</h2>
-<table class="game">
-<tr><th>ID<th>Game<th>Scenario<th>Options<th>Players<th>Description<th>Finished<th>Result<th>
-<%_ finished_games.forEach((row) => { _%>
+<table>
+<thead>
+<tr><th>ID<th>Game<th>Scenario<th>Players<th>Description<th>Finished<th>Result<th>
+<tbody>
+<% finished_games.forEach((row) => { %>
 <tr>
-<td class="id"><%= row.game_id %>
-<td class="title"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
-<td class="scenario"><%= row.scenario %>
-<td class="options"><%- row.options %>
-<td class="players"><%- row.player_names %>
-<td class="description"><%= row.description %>
-<td class="time"><%= row.mtime %>
-<td class="result"><%= row.result %>
-<%_
-	if (row.is_shared) {
-		%><td class="command"><a href="/join/<%= row.game_id %>">View</a><%
-	} else {
-		%><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a><%
-	}
-_%>
-<%_ }); _%>
+<td><%= row.game_id %>
+<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a>
+<td class="w"><%= row.scenario %>
+<td><%- row.player_names %>
+<td><%= row.description %>
+<td class="w"><%= row.mtime %>
+<td><%= row.result %>
+<% if (row.is_shared) { %>
+<td class="command"><a href="/join/<%= row.game_id %>">View</a>
+<% } else { %>
+<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a>
+<% } %>
+<% }); %>
 </table>
-<%_ } _%>
+<% } %>
 
-<%_ if (open_games.length === 0 && active_games.length === 0 && finished_games.length === 0) { _%>
+<% if (open_games.length === 0 && active_games.length === 0 && finished_games.length === 0) { %>
 <p>
 You don't have any current or finished games.
-<%_ } _%>
+<% } %>