From 0a97fadcdf0d2ca8bfdb24963a370c1212278623 Mon Sep 17 00:00:00 2001
From: Ezekiel <ezekiel@seaube.com>
Date: Thu, 1 Aug 2024 11:45:00 -0700
Subject: [PATCH] feat: remove background for docs overview

---
 src/app/docs/overview/overview.component.html | 196 +++++++++---------
 .../layout/content/content.component.html     |   8 +-
 .../layout/showcase/showcase.component.html   |   3 +-
 3 files changed, 102 insertions(+), 105 deletions(-)

diff --git a/src/app/docs/overview/overview.component.html b/src/app/docs/overview/overview.component.html
index 5795a3e8..a5165389 100644
--- a/src/app/docs/overview/overview.component.html
+++ b/src/app/docs/overview/overview.component.html
@@ -1,7 +1,4 @@
-<article>
-	<h1 id="diagram" aria-hidden class="opacity-0 select-none h-0 m-0">
-		Ecsact Diagram
-	</h1>
+<div class="m-8 px-8 py-16">
 	<ecsact-example-diagram [verticalLayout]="smallWidth()">
 		<pre
 			diagramStart
@@ -56,105 +53,100 @@ <h1 id="diagram" aria-hidden class="opacity-0 select-none h-0 m-0">
 				x-webkit-airplay="deny"></video>
 		</div>
 	</ecsact-example-diagram>
+</div>
 
-	<h2>Start Reading</h2>
-	<section class="my-8 mx-auto px-2">
-		<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-8">
-			<ecsact-showcase
-				[title]="'The Basics'"
-				[description]="'Learn more about what drives Ecsact'">
-				<div
-					showcaseImage
-					class="w-full h-full bg-branch bg-no-repeat bg-center bg-contain dark:invert"></div>
-				<a
-					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
-					routerLink="/docs/ecs">
-					<span class="text-black">
-						<span class="i48">school</span>
-						What is ECS?
-					</span>
-				</a>
-				<a
-					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
-					routerLink="/docs/lang">
-					<span class="text-black">
-						<span class="i48">psychology</span>
-						Language
-					</span>
-				</a>
-			</ecsact-showcase>
-
-			<ecsact-showcase
-				title="Systems"
-				description="Read up on how systems are applied">
-				<div
-					showcaseImage
-					class="w-full h-full bg-systems bg-no-repeat bg-center bg-contain dark:invert"></div>
-				<a
-					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
-					routerLink="/docs/system-impl">
-					<span class="text-black">
-						<span class="i48">Settings</span>
-						System Implementations
-					</span>
-				</a>
-				<a
-					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
-					routerLink="/docs/system-execution">
-					<span class="text-black">
-						<span class="i48">Engineering</span>
-						System Execution
-					</span>
-				</a>
-			</ecsact-showcase>
+<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-8 m-8">
+	<ecsact-showcase
+		[title]="'The Basics'"
+		[description]="'Learn more about what drives Ecsact'">
+		<div
+			showcaseImage
+			class="w-full h-full bg-branch bg-no-repeat bg-center bg-contain dark:invert"></div>
+		<a
+			class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
+			routerLink="/docs/ecs">
+			<span class="text-black">
+				<span class="i48">school</span>
+				What is ECS?
+			</span>
+		</a>
+		<a
+			class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
+			routerLink="/docs/lang">
+			<span class="text-black">
+				<span class="i48">psychology</span>
+				Language
+			</span>
+		</a>
+	</ecsact-showcase>
 
-			<ecsact-showcase
-				title="Unity Integration"
-				description="Explore the Ecsact Unity integration APIs">
-				<div showcaseImage class="w-full h-full p-8">
-					<div class="brand unity w-full h-full"></div>
-				</div>
-				<a
-					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
-					routerLink="/docs/unity/defaults">
-					<span class="text-black">
-						<span class="i48">library_books</span>
-						Defaults Class
-					</span>
-				</a>
-				<a
-					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
-					routerLink="/docs/unity/entities">
-					<span class="text-black">
-						<span class="i48">add_circle</span>
-						Creating Entities
-					</span>
-				</a>
-			</ecsact-showcase>
+	<ecsact-showcase
+		title="Systems"
+		description="Read up on how systems are applied">
+		<div
+			showcaseImage
+			class="w-full h-full bg-systems bg-no-repeat bg-center bg-contain dark:invert"></div>
+		<a
+			class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
+			routerLink="/docs/system-impl">
+			<span class="text-black">
+				<span class="i48">Settings</span>
+				System Implementations
+			</span>
+		</a>
+		<a
+			class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
+			routerLink="/docs/system-execution">
+			<span class="text-black">
+				<span class="i48">Engineering</span>
+				System Execution
+			</span>
+		</a>
+	</ecsact-showcase>
 
-			<ecsact-showcase
-				title="Runtime"
-				description="Find out how the Runtime works">
-				<div
-					showcaseImage
-					class="w-full h-full bg-runtime bg-no-repeat bg-cover bg-center dark:invert"></div>
-				<a
-					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
-					routerLink="/docs/runtime">
-					<span class="text-black">
-						<span class="i48">memory</span>
-						Runtime
-					</span>
-				</a>
-				<a
-					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
-					routerLink="/docs/runtime-implementations">
-					<span class="text-black">
-						<span class="i48">memory</span>
-						Runtime Implementations
-					</span>
-				</a>
-			</ecsact-showcase>
+	<ecsact-showcase
+		title="Unity Integration"
+		description="Explore the Ecsact Unity integration APIs">
+		<div showcaseImage class="w-full h-full p-8">
+			<div class="brand unity w-full h-full"></div>
 		</div>
-	</section>
-</article>
+		<a
+			class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
+			routerLink="/docs/unity/defaults">
+			<span class="text-black">
+				<span class="i48">library_books</span>
+				Defaults Class
+			</span>
+		</a>
+		<a
+			class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
+			routerLink="/docs/unity/entities">
+			<span class="text-black">
+				<span class="i48">add_circle</span>
+				Creating Entities
+			</span>
+		</a>
+	</ecsact-showcase>
+
+	<ecsact-showcase title="Runtime" description="Find out how the Runtime works">
+		<div
+			showcaseImage
+			class="w-full h-full bg-runtime bg-no-repeat bg-cover bg-center dark:invert"></div>
+		<a
+			class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
+			routerLink="/docs/runtime">
+			<span class="text-black">
+				<span class="i48">memory</span>
+				Runtime
+			</span>
+		</a>
+		<a
+			class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
+			routerLink="/docs/runtime-implementations">
+			<span class="text-black">
+				<span class="i48">memory</span>
+				Runtime Implementations
+			</span>
+		</a>
+	</ecsact-showcase>
+</div>
diff --git a/src/components/layout/content/content.component.html b/src/components/layout/content/content.component.html
index cf9ee2be..783d60fe 100644
--- a/src/components/layout/content/content.component.html
+++ b/src/components/layout/content/content.component.html
@@ -50,8 +50,12 @@
 
 <div>
 	<div class="page-anchors-container">
-		<div class="page-anchors border-l-2 border-primary border-solid">
-			<div><strong>On this page</strong></div>
+		<div
+			[class.opacity-0]="pageAnchors.length > 0"
+			class="page-anchors border-l-2 border-primary border-solid">
+			<div>
+				<strong>On this page</strong>
+			</div>
 			<a
 				*ngFor="let pageAnchor of pageAnchors; trackBy: trackBy"
 				[routerLink]=""
diff --git a/src/components/layout/showcase/showcase.component.html b/src/components/layout/showcase/showcase.component.html
index fd65c6b6..73f47a77 100644
--- a/src/components/layout/showcase/showcase.component.html
+++ b/src/components/layout/showcase/showcase.component.html
@@ -1,5 +1,6 @@
 <div class="flex flex-col shadow-lg h-full">
-	<div class="aspect-video w-full relative overflow-hidden bg-bg rounded-t-lg">
+	<div
+		class="aspect-video w-full relative overflow-hidden rounded-t-lg bg-content-bg">
 		<ng-content select="[showcaseImage]"></ng-content>
 	</div>
 	<div class="grow bg-secondary/20">