[fix] Prevent layout shifting on hovering "Who's using Svelte?" (#6639)

sveltejs · Aug 13, 2021 · b1621d6 · b1621d6
1 parent 5f693c8
commit b1621d6
Showing 1 changed file with 33 additions and 28 deletions.
diff --git a/site/src/routes/_components/WhosUsingSvelte.svelte b/site/src/routes/_components/WhosUsingSvelte.svelte
@@ -1,10 +1,30 @@
 <script>
 	import { companies } from './WhosUsingSvelte.js';
-	const randomizer = ({prominent}) =>  Math.random();
+	const randomizer = ({ prominent }) => Math.random();
 	const doSort = (a, b) => randomizer(b) - randomizer(a);
 	const sortedCompanies = companies.sort(doSort);
 </script>
 
+<div class="logos">
+	{#each sortedCompanies as { href, filename, alt, style, picture, span }, index}
+		<a target="_blank" rel="noopener" {href} style={style || ""}>
+			{#if picture}
+				<picture>
+					{#each picture as { type, srcset }}
+						<source {type} {srcset} />
+					{/each}
+					<img src="/whos-using-svelte/{filename}" {alt} loading="lazy" />
+				</picture>
+			{:else}
+				<img src="/whos-using-svelte/{filename}" {alt} loading="lazy" />
+				{#if span}
+					<span>{span}</span>
+				{/if}
+			{/if}
+		</a>
+	{/each}
+</div>
+
 <style>
 	.logos {
 		margin: 1em 0 0 0;
@@ -17,44 +37,29 @@
 		display: flex;
 		align-items: center;
 		border: 2px solid var(--second);
-		padding: 5px 10px;
+		padding: 0;
 		border-radius: 20px;
 		color: var(--text);
 	}
 	picture,
 	img {
 		height: 100%;
+		padding: 5px 10px;
+		transition: transform 0.2s;
+	}
+	picture:hover,
+	img:hover {
+		transform: scale(1.2);
 	}
 	@media (min-width: 540px) {
 		a {
 			height: 60px;
-			padding: 10px 20px;
 			border-radius: 30px;
 		}
+
+		picture,
+		img {
+			padding: 10px 20px;
+		}
 	}
 </style>
-
-<div class="logos">
-	{#each sortedCompanies as {href, filename, alt, style, picture, span}, index}
-		<a
-			target="_blank"
-			rel="noopener"
-			{href}
-			style="{style || ''}"
-		>
-			{#if picture}
-				<picture>
-					{#each picture as {type, srcset}}
-						<source {type} {srcset}>
-					{/each}
-					<img src="/whos-using-svelte/{filename}" {alt} loading="lazy">
-				</picture>
-			{:else}
-				<img src="/whos-using-svelte/{filename}" {alt} loading="lazy">
-				{#if span}
-					<span>{span}</span>
-				{/if}
-			{/if}
-		</a>
-	{/each}
-</div>