adds in more example images

src/components/nba/Annotation.svelte

@@ -8,8 +8,8 @@
 	let fadeDuration = 500;
     let annoPos;
 
-    let imageIDs = ["lebron-sleeves", "butler-vice", "wemby"];
-    let altIDs = ["lebron james in the cleveland cavalier's black sleeved jersey", "jimmy butler in miami heat's vice jersey", "victor wembanyama is the san antonio spurs' hemisfair jersey"];
+    let imageIDs = ["lebron-sleeves", "tatum", "jordan", "butler-vice", "wemby"];
+    let altIDs = ["lebron james in the cleveland cavalier's black sleeved jersey", "jason tatum in the boston celtics' off-white city jersey", "michael jordan in the chicago bulls' classic red jersey", "jimmy butler in miami heat's vice jersey", "victor wembanyama is the san antonio spurs' hemisfair jersey"];
 
     function imgMatch(annoID) {
 		const img = imageIDs[annoID];

src/components/nba/Graphic.svelte

@@ -121,7 +121,9 @@
 		</div>
 	{:else if id == "beeswarm-flair-13"}
 		<div class={`lollipop graphic-wide graphic`}>
-			<h3>Change in Flair from 2013-14 to 2023-24</h3>
+			<div class="header-wrapper">
+				<h3>Change in Flair from 2013-14 to 2023-24</h3>
+			</div>
 			<button class={`lollipop-button ${unfurlFlair ? 'lollipop-button-unfurled' : ''}`} on:click={() => unfurlFlair = true}>View All Teams</button>
 			<div class="graphic-inner">
 				<LayerCake
@@ -147,7 +149,9 @@
 		</div>
 	{:else if id == "city-bars"}
 		<div class="barchart graphic-wide graphic city-bars">
-			<h3>All teams by edition usage</h3>
+			<div class="header-wrapper">
+				<h3>All teams by edition usage</h3>
+			</div>
 			<TeamCompare data={teamTotals} />
 		</div>
 	{/if}
@@ -289,7 +293,13 @@
 
 	.city-bars h3 {
 		padding: 2rem 1rem 1rem 1rem;
+		max-width: 1000px;
+		margin: 0 auto;
+	}
+
+	.header-wrapper {
 		background-color: rgba(255, 255, 255, 0.75);
+		width: 100%;
 	}
 
 	@media(max-width: 700px) {

src/components/nba/Lollipop.svelte

@@ -25,8 +25,10 @@
 </script>
 
 <div class="flair-explain">
-	<span class="left"><span class="caret-left"></span> Less flair</span>
-	<span class="right">More flair <span class="caret-right"></span></span>
+	<div class="flair-inner">
+		<span class="left"><span class="caret-left"></span> Less flair</span>
+		<span class="right">More flair <span class="caret-right"></span></span>
+	</div>
 </div>
 {#if yourTeamData !== undefined}
 <div class="dot-plot your-team">
@@ -210,16 +212,25 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0 1rem 0 210px;
+		padding: 0;
 		width: 100%;
-		max-width: 1000px;
 		margin: 0 auto;
 		font-family: var(--sans);
 		font-size: 14px;
 		font-weight: bold;
 		background-color: rgba(255, 255, 255, 0.75);
 	}
 
+	.flair-inner {
+		max-width: 1000px;
+		width: 100%;
+		margin: 0 auto;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 1rem 0 210px;
+	}
+
 	.left,
 	.right {
 		display: flex;