web: add prettier icons

The icons come from the lovely people at Bootstrap, who've shared them
under a permissive licence. To avoid loading a large file consisting
almost entirely of icons we'll never display, I've generated the icon
font myself, limiting it to only the glyphs we use.

1 files changed, 16 insertions, 2 deletions

diff --git a/web/static/style.css b/web/static/style.css
index f501429..cec45ba 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,5 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter&family=Lato:wght@400;700&family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap');
 
+@font-face {
+	font-family: 'icons';
+	src: url('icons.woff2') format('woff2');
+}
+
 html {
 	height: 100vh;
 }
@@ -48,6 +53,10 @@ body {
 	}
 }
 
+.icon {
+	font-family: icons;
+}
+
 /* titlebar */
 
 #titlebar {
@@ -97,7 +106,11 @@ body {
 	background-color: #3d2466;
 	font-weight: 700;
 
-	padding: 0 0.4em;
+	height: 100%;
+	padding: 0em 0.2em;
+
+	display: flex;
+	align-items: center;
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -430,7 +443,8 @@ body {
 #visits .p100 { color: #78c018; }
 #visits .p140 { color: #20e018; }
 #visits .p180 { color: #20e018; font-weight: bold; }
-#visits .throws-first { color: #aaa; }
+#visits .throws-first { color: #999; }
+#visits .throws-first:before { content: '\f151'; font-size: 0.75em; }
 #visits .visit-p1-name { grid-column: 1 / span 2; }
 #visits .visit-p2-name { grid-column: 4 / span 2; }
 #visits .visit-p1-pts { grid-column: 1; }