Rewrite default CSS

1 files changed, 35 insertions, 27 deletions

diff --git a/default.css b/default.css
index d9c89c9..1606b6f 100644
--- a/default.css
+++ b/default.css
@@ -1,14 +1,16 @@
 :root {
 	--background: #fff;
 	--foreground: #222;
+	--light: #eee;
+	--dark: #777;
 	--accent: #c29;
-	--dim: #777;
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
 		--background: #111;
 		--foreground: #bbb;
+		--light: #222;
 	}
 }
 
@@ -29,12 +31,12 @@ a:hover {
 
 body {
 	max-width: 130ch;
+	padding: 0 1ch;
 	margin: auto;
-	padding: 1em 1ch;
 }
 
-h1 {
-	margin: 0;
+h1, h2, nav, table, footer {
+	margin: 1rem 0;
 }
 
 nav {
@@ -42,13 +44,11 @@ nav {
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	margin-bottom: 1em;
 }
-
 nav ol {
-	margin: 1em 1ch 0 0;
+	margin: 0;
 	padding: 0;
-	list-style-type: none;
+	margin-right: 1ch;
 }
 nav ol li {
 	display: inline;
@@ -57,40 +57,49 @@ nav ol li::before {
 	content: '/';
 }
 
-nav form {
-	margin-top: 1em;
-}
-
 table {
 	width: 100%;
-	margin: 1em 0;
-	border-collapse: collapse;
+	border-spacing: 0;
 }
 tr {
 	vertical-align: top;
 }
-tr td:not(:last-child) {
+td:not(:last-child) {
 	padding-right: 1ch;
 }
+th {
+	font-weight: inherit;
+}
+
+thead {
+	background-color: var(--light);
+}
+tr.topic th {
+	text-align: left;
+	padding: 0.5em 0.5ch;
+}
+tr.page th {
+	padding: 0.5em 0;
+}
+tr.gap {
+	color: var(--dark);
+	background-color: var(--light);
+}
 
-td.time {
+td.time, td.network, td.context, td.nick {
 	white-space: nowrap;
 }
-td.time a {
-	color: var(--dim);
+td.time a, td.network a, td.context a {
+	font-size: x-small;
+	color: var(--dark);
 }
 tr:target td.time a {
 	color: var(--accent);
 	text-decoration: underline;
 }
 
-td.network a, td.context a {
-	color: var(--dim);
-}
-
 td.nick {
 	text-align: right;
-	white-space: nowrap;
 }
 tr.privmsg td.nick span::before {
 	content: '<';
@@ -111,15 +120,14 @@ td.message {
 }
 
 footer {
-	font-size: 0.83em;
-	color: var(--dim);
-	margin-top: 1rem;
+	color: var(--dark);
+	font-size: small;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
 }
 footer a, footer a:visited {
-	color: var(--dim);
+	color: inherit;
 }
 footer span[title] {
 	cursor: help;