Merge pull request #2481 from sveltejs/fix-examples-toc

fix opacity on examples TOC

site/src/routes/examples/_TableOfContents.svelte

@@ -1,36 +1,6 @@
 <script>
-	import { afterUpdate } from 'svelte';
-	import Icon from '../../components/Icon.svelte';
-
 	export let sections = [];
 	export let active_section = null;
-
-	let ul;
-
-	afterUpdate(() => {
-		const active = ul.querySelector('.active');
-
-		if (active) {
-			const { top, bottom } = active.getBoundingClientRect();
-
-			const min = 200;
-			const max = window.innerHeight - 200;
-
-			if (top > max) {
-				ul.parentNode.scrollBy({
-					top: top - max,
-					left: 0,
-					behavior: 'smooth'
-				});
-			} else if (bottom < min) {
-				ul.parentNode.scrollBy({
-					top: bottom - min,
-					left: 0,
-					behavior: 'smooth'
-				});
-			}
-		}
-	});
 </script>
 
 <style>
@@ -40,7 +10,7 @@
 		border-right: 1px solid var(--second);
 		background-color: var(--second);
 		color: white;
-		padding: 2em 2em 0 2em;
+		padding: 3rem 3rem 0 3rem;
 	}
 
 	.examples-toc li {
@@ -49,13 +19,6 @@
 		margin: 0 0 4.8rem 0;
 	}
 
-	a {
-		position: relative;
-		opacity: 0.7;
-		transition: opacity 0.2s;
-		color: white;
-	}
-
 	.section-title {
 		display: block;
 		padding: 0 0 .8rem 0;
@@ -65,48 +28,40 @@
 		font-weight: 700;
 	}
 
-	.example-title {
+	a {
-		display: block;
+		display: flex;
+		position: relative;
+		color: white;
+		border-bottom: none;
+		padding: 0.2rem 3rem;
+		margin: 0 -3rem;
 		font-size: 1.6rem;
-		font-family: var(--font);
+		align-items: center;
-		padding: 0 0 0.2em 0.6em;
+		justify-content: start;
 	}
 
-	.example-title:hover {
+	a:hover {
 		color: var(--flash);
-		opacity: 1
-	}
-
-	.active {
-		opacity: 1;
-		font-weight: 600;
 	}
 
-	.row {
+	a.active {
-		position: relative;
+		background: rgba(255, 255, 255, 0.1) calc(100% - 3rem) 50% no-repeat url(/icons/arrow-right.svg);
-		margin: 0.5em 0;
+		background-size: 1em 1em;
-		display: flex;
+		color: white;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.info {
-		display: flex;
-		align-items: center;
 	}
 
 	.thumbnail {
-		background: white 50% 50% no-repeat;
+		background-color: white;
-		background-size: contain;
+		object-fit: contain;
 		width: 5rem;
 		height: 5rem;
-		border: 1px solid #ccc;
 		border-radius: 2px;
 		box-shadow: 1px 1px 3px rgba(0,0,0,0.13);
+		margin: 0.2em 0.5em 0.2em 0;
 	}
 </style>
 
-<ul bind:this={ul} class="examples-toc">
+<ul class="examples-toc">
 	{#each sections as section}
 		<li>
 			<span class="section-title">
@@ -114,24 +69,18 @@
 			</span>
 
 			{#each section.examples as example}
-			<a href="examples#{example.slug}">
+				<a
-				<div
+					href="examples#{example.slug}"
 					class="row"
 					class:active="{example.slug === active_section}"
 				>
-					<div class="info">
+					<img
-						<div
 						class="thumbnail"
-							style="background-image: url(examples/thumbnails/{example.slug}.jpg)"
+						alt="{example.title} thumbnail"
-						></div>
+						src="examples/thumbnails/{example.slug}.jpg"
-						<div class="example-title">
+					>
-							{example.title}
+
-						</div>
+					<span>{example.title}</span>
-					</div>
-					{#if example.slug === active_section}
-					<Icon name="arrow-right" />
-					{/if}
-				</div>
 				</a>
 			{/each}
 		</li>