tweak styles

site/src/routes/docs/_GuideContents.svelte

@@ -78,6 +78,12 @@
 		margin: 0 0 4.8rem 0;
 	}
 
+	a {
+		position: relative;
+		opacity: 0.7;
+		transition: opacity 0.2s;
+	}
+
 	.section {
 		display: block;
 		padding: 0 0 .8rem 0;
@@ -90,12 +96,25 @@
 		display: block;
 		font-size: 1.6rem;
 		font-family: var(--font);
-		padding: 0.3em 0;
+		padding: 0 0 0.6em 0;
 	}
 
 	.section:hover,
-	.subsection:hover { color: var(--flash) }
+	.subsection:hover {
-	.active           { color: var(--prime) }
+		color: var(--flash);
+		opacity: 1
+	}
+
+	.active {
+		opacity: 1;
+		/* font-weight: 700; */
+	}
+
+	.icon-container {
+		position: absolute;
+		top: -.3rem;
+		right: 3.2rem;
+	}
 </style>
 
 <ul
@@ -110,7 +129,9 @@
 				{section.metadata.title}
 
 				{#if section.slug === active_section}
-					<Icon name="arrow-right" />
+					<div class="icon-container">
+						<Icon name="arrow-right" />
+					</div>
 				{/if}
 			</a>
 
@@ -120,7 +141,9 @@
 					{subsection.title}
 
 					{#if subsection.slug === active_section}
-						<Icon name="arrow-right" />
+						<div class="icon-container">
+							<Icon name="arrow-right" />
+						</div>
 					{/if}
 				</a>
 			{/each}

site/static/global.css

@@ -166,7 +166,7 @@ a:focus {
 :root {
 	--nav-h:       6rem;
 	--top-offset:  6rem;
-	--sidebar-w:  24rem;
+	--sidebar-w:  30rem;
 	--main-width: 80rem;
 	--code-w:      72em;
 	--side-nav:  1.6rem;