Consistent sidebars 2641 (#2642)

* consistent sidebar tutorial

- added css-var for light sidebar-text for easy handling
- provide higher contrast for better readability in code and blockquotes
- push SHOW ME with higher contrast (on dark instead on white)

* minor fixes on opacities and color

* adjust sidebar-styles of docs and examples

closes #2641

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;
 	}
@@ -63,34 +65,34 @@
 		width: 5rem;
 		height: 5rem;
 		border-radius: 2px;
-		box-shadow: 1px 1px 3px rgba(0,0,0,0.13);
+		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.13);
 		margin: 0.2em 0.5em 0.2em 0;
 	}
 </style>
 
 <ul class="examples-toc">
 	{#each sections as section}
-		<li>
+	<li>
-			<span class="section-title">
+		<span class="section-title">
-				{section.title}
+			{section.title}
-			</span>
+		</span>
 
-			{#each section.examples as example}
+		{#each section.examples as example}
-				<a
+		<a
-					href="examples#{example.slug}"
+			href="examples#{example.slug}"
-					class="row"
+			class="row"
-					class:active="{example.slug === active_section}"
+			class:active="{example.slug === active_section}"
-					class:loading="{isLoading}"
+			class:loading="{isLoading}"
-				>
+		>
-					<img
+			<img
-						class="thumbnail"
+				class="thumbnail"
-						alt="{example.title} thumbnail"
+				alt="{example.title} thumbnail"
-						src="examples/thumbnails/{example.slug}.jpg"
+				src="examples/thumbnails/{example.slug}.jpg"
-					>
+			/>
 
-					<span>{example.title}</span>
+			<span>{example.title}</span>
-				</a>
+		</a>
-			{/each}
+		{/each}
-		</li>
+	</li>
 	{/each}
 </ul>

site/src/routes/tutorial/[slug]/_TableOfContents.svelte

@@ -30,13 +30,17 @@
 		display: block;
 		padding: 0.7em 0;
 		text-align: center;
-		opacity: 0.7;
+		opacity: 0.75;
 		color: white;
 	}
 
+	a:hover {
+		opacity: 1;
+	}
+
 	a.disabled, a.disabled:hover, a.disabled:active {
 		color: white;
-		opacity: 0.4;
+		opacity: 0.3;
 	}
 
 	span {

site/src/routes/tutorial/[slug]/index.svelte

@@ -151,7 +151,7 @@
 		height: 100%;
 		border-right: 1px solid var(--second);
 		background-color: var(--second);
-		color: white;
+		color: var(--sidebar-text);
 	}
 
 	.chapter-markup {
@@ -165,6 +165,7 @@
 		margin: 4rem 0 1.6rem 0;
 		font-size: var(--h3);
 		line-height: 1;
+		font-weight: 400;
 		color: white;
 	}
 
@@ -173,16 +174,21 @@
 	}
 
 	.chapter-markup :global(a) {
+		color: var(--sidebar-text);
+	}
+
+	.chapter-markup :global(a:hover) {
 		color: white;
 	}
 
+
 	.chapter-markup :global(ul) {
 		padding: 0 0 0 2em;
 	}
 
 	.chapter-markup :global(blockquote) {
-		background-color: rgba(255,255,255,.1);
+		background-color: rgba(0,0,0,.17);
-		color: white;
+		color: var(--sidebar-text);
 	}
 
 	.chapter-markup::-webkit-scrollbar {
@@ -198,22 +204,22 @@
 
 	.chapter-markup :global(p) > :global(code),
 	.chapter-markup :global(ul) :global(code) {
-		color: white;
+		color: var(--sidebar-text);
-		background: rgba(255,255,255,.1);
+		background: rgba(0,0,0,.12);
-		padding: .2em .4em;
+		padding: .2em .4em .3em;
 		white-space: nowrap;
 		position: relative;
 		top: -0.1em;
 	}
 
 	.controls {
-		border-top: 1px solid rgba(255,255,255,.1);
+		border-top: 1px solid rgba(255,255,255,.15);
 		padding: 1em 0 0 0;
 		display: flex;
 	}
 
 	.show {
-		background: rgba(255,255,255,.1);
+		background: rgba(0,0,0,.4);
 		padding: .2em .7em .3em;
 		border-radius: var(--border-r);
 		top: .1em;
@@ -223,22 +229,17 @@
 	}
 
 	.show:hover {
-		background: rgba(255,255,255,.2);
+		background: rgba(0,0,0,.65);
+		color: white;
 	}
 
 	a.next {
-		/* border-bottom: none; */
 		padding-right: 1.2em;
 		background: no-repeat 100% 50% url(/icons/arrow-right.svg);
 		background-size: 1em 1em;
 		margin-left: auto;
 	}
 
-	a.next:hover {
-		/* border-bottom: 2px solid currentColor; */
-		/* text-decoration: underline; */
-	}
-
 	.improve-chapter {
 		padding: 1em 0 .5em 0;
 	}

site/static/global.css

@@ -46,6 +46,7 @@
 	--flash:      	#40b3ff;
 	--heading:	var(--second);
 	--text:      		#444;
+	--sidebar-text: rgba(255, 255, 255, .75);
 	--border-w:  		.3rem; /* border-width  */
 	--border-r:  		.4rem; /* border-radius */
 }