tweak some focus states

Author: Rich-Harris

apps/svelte.dev/src/routes/_home/Video.svelte

@@ -197,6 +197,7 @@
 	label {
 		opacity: 0.2;
 		transition: opacity 0.2s;
+		border-radius: var(--sk-border-radius);
 	}
 
 	.top-controls {
@@ -237,12 +238,14 @@
 		border-radius: 0 var(--sk-border-radius) var(--sk-border-radius) var(--sk-border-radius);
 	} */
 
-	.video-player:hover label {
+	.video-player:hover label,
+	.video-player:focus-within label {
 		opacity: 1;
 	}
 
 	.video-player input:focus-visible ~ img {
 		outline: 2px solid var(--sk-fg-accent);
 		outline-offset: 2px;
+		border-radius: var(--sk-border-radius);
 	}
 </style>

packages/site-kit/src/lib/nav/Nav.svelte

@@ -125,14 +125,17 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			<Search />
 
 			<div class="external-links">
-				<a href="/chat" data-icon="discord" aria-label="Discord Chat"></a>
-				<a
-					href="https://bsky.app/profile/sveltesociety.dev"
-					data-icon="bluesky"
-					aria-label="Svelte Society on Bluesky"
-				></a>
-				<a href="https://github.com/sveltejs/svelte" data-icon="github" aria-label="GitHub Repo"
-				></a>
+				<a href="/chat" aria-label="Discord Chat">
+					<span data-icon="discord"></span>
+				</a>
+
+				<a href="https://bsky.app/profile/sveltesociety.dev" aria-label="Svelte Society on Bluesky">
+					<span data-icon="bluesky"></span>
+				</a>
+
+				<a href="https://github.com/sveltejs/svelte" aria-label="GitHub Repo">
+					<span data-icon="github"></span>
+				</a>
 			</div>
 
 			<FontToggle />
@@ -281,6 +284,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: flex;
 			height: 100%;
 			margin: 0 0.5rem;
+
+			a {
+				outline-offset: -2px;
+			}
 		}
 	}
 
@@ -377,9 +384,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: contents;
 
 			[data-icon] {
+				display: flex;
 				background: var(--sk-fg-3);
 				padding: 0 0.5rem;
 				height: 100%;
+				aspect-ratio: 1;
 				mask: no-repeat 50% 50%;
 				mask-size: calc(100% - 1rem) auto;
 			}