adjust sidebar-styles of docs and examples

site/src/routes/docs/_GuideContents.svelte

@@ -48,19 +48,12 @@
 
 	a {
 		position: relative;
-		opacity: 0.75;
+		transition: color 0.2s;
-		transition: opacity 0.2s;
 		border-bottom: none;
 		padding: 0;
 		color: var(--second);
 	}
 
-	@media (min-width: 832px) {
-		a {
-			color: white;
-		}
-	}
-
 	.section {
 		display: block;
 		padding: 0 0 .8rem 0;
@@ -78,22 +71,33 @@
 	}
 
 	.section:hover,
-	.subsection:hover {
+	.subsection:hover,
+	.active {
 		color: var(--flash);
-		opacity: 1
 	}
 
 	.subsection[data-level="4"] {
 		padding-left: 1.2rem;
 	}
 
-	.active { opacity: 1 }
-
 	.icon-container {
 		position: absolute;
 		top: -.2rem;
 		right: 2.4rem;
 	}
+
+	@media (min-width: 832px) {
+		a {
+			color: var(--sidebar-text);
+		}
+
+		a:hover,
+		.section:hover,
+		.subsection:hover,
+		.active {
+			color: white
+		}
+	}
 </style>
 
 <ul

site/src/routes/examples/_TableOfContents.svelte

@@ -22,7 +22,7 @@
 
 	.section-title {
 		display: block;
-		padding: 0 0 .8rem 0;
+		padding: 0 0 0.8rem 0;
 		font: 400 var(--h6) var(--font);
 		text-transform: uppercase;
 		letter-spacing: 0.12em;
@@ -32,7 +32,7 @@
 	a {
 		display: flex;
 		position: relative;
-		color: white;
+		color: var(--sidebar-text);
 		border-bottom: none;
 		padding: 0.2rem 3rem;
 		margin: 0 -3rem;
@@ -42,17 +42,19 @@
 	}
 
 	a:hover {
-		color: var(--flash);
+		color: white;
 	}
 
 	a.active {
-		background: rgba(255, 255, 255, 0.1) calc(100% - 3rem) 50% no-repeat url(/icons/arrow-right.svg);
+		background: rgba(0, 0, 0, 0.15) calc(100% - 3rem) 50% no-repeat
+			url(/icons/arrow-right.svg);
 		background-size: 1em 1em;
 		color: white;
 	}
 
 	a.active.loading {
-		background: rgba(255, 255, 255, 0.1) calc(100% - 3rem) 50% no-repeat url(/icons/loading.svg);
+		background: rgba(0, 0, 0, 0.1) calc(100% - 3rem) 50% no-repeat
+			url(/icons/loading.svg);
 		background-size: 1em 1em;
 		color: white;
 	}
@@ -86,7 +88,7 @@
 				class="thumbnail"
 				alt="{example.title} thumbnail"
 				src="examples/thumbnails/{example.slug}.jpg"
-					>
+			/>
 
 			<span>{example.title}</span>
 		</a>