From a8691820aac2e5d1370f467b5b92e792fdc629a7 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 4 Mar 2022 18:45:58 +0000
Subject: make the info text for leaderboards better

---
 src/routes/leaderboards/[name].svelte | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/routes/leaderboards/[name].svelte b/src/routes/leaderboards/[name].svelte
index 2aec4b3..9163eda 100644
--- a/src/routes/leaderboards/[name].svelte
+++ b/src/routes/leaderboards/[name].svelte
@@ -42,7 +42,10 @@
 		{toTitleCase(cleanId(data.name))}
 	</h1>
 	{#if data.info}
-		<p class="leaderboard-info">{data.info}</p>
+		<p class="leaderboard-info">
+			<span class="leaderboard-info-icon">ⓘ</span>
+			<span class="leaderboard-info-content">{data.info}</span>
+		</p>
 	{/if}
 
 	<ol class="leaderboard-profile-list">
@@ -83,4 +86,16 @@
 	.leaderboard-profile-player {
 		margin-right: 0.5em;
 	}
+
+	.leaderboard-info {
+		background-color: var(--theme-lighter-background);
+		padding: 0.5em 0.7em;
+		border-radius: 0.5rem;
+		width: max-content;
+
+		box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
+	}
+	.leaderboard-info-content {
+		font-style: italic;
+	}
 </style>
-- 
cgit