1 files changed, 76 insertions, 0 deletions
diff --git a/public-src/style.scss b/public-src/style.scss
new file mode 100644
index 0000000..70747bd
--- /dev/null
+++ b/public-src/style.scss
@@ -0,0 +1,76 @@
+/* page layout */
+html {
+	height: 100%;
+}
+body {
+	font-size: 8px;
+	font-family: monospace;
+	height: 100%;
+	margin: 0;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	& > * {
+		flex-direction: column;
+		align-items: center;
+		margin: auto;
+		& > * {
+			margin: auto;
+		}
+	}
+}
+* {
+	box-sizing: border-box;
+}
+/* diff styling */
+table.diff {
+	border-collapse: collapse;
+	td, th {
+		padding: 0;
+		white-space: nowrap;
+	}
+	.diff-del, .diff-del a { color: red; }
+	.diff-add, .diff-add a { color: green; }
+	.diff-dat, .diff-dat a { color: blue; }
+	.diff-ctx, .diff-ctx a { color: black; }
+}
+/* sortable styling */
+table.sortable {
+	border-collapse: collapse;
+	caption p {
+		margin: 0;
+	}
+	td, th {
+		padding: 0;
+		border: solid 1px black;
+		white-space: nowrap;
+	}
+	td {
+		background-color: #F3F3F3;
+	}
+}
+/* generic table interaction */
+table {
+	tr.invalid td {
+		background-color: #F30000 !important;
+	}
+	tr:hover a, tr.invalid:hover a {
+		background-color: #AAAAF3;
+	}
+	td a {
+		text-decoration: none;
+		padding: 0.1em 0.25em;
+		display: block;
+		width: 100%;
+		height: 100%;
+		color: black;
+	}
+}
+/* generic time formatting - for datetimes that we want to render as
+   just a date, but still want to be sortable, we a construct like
+   `<time>DATE<span class=time>TIME</span></time>`, then use this to
+   hide the TIME part of it. */
+time .time {
+	display: none
+}