showcase tweaks and branch graphic

Author: zaucy

WORKSPACE

@@ -59,7 +59,7 @@ sass_repositories()
 
 http_archive(
     name = "rules_blender",
-    sha256 = "",
+    sha256 = "3fa3c8de4172164563c5e8a98972d6b00e8e299a7266bc7a9ee2516546e71673",
     strip_prefix = "rules_blender-e0513aede99e98558f95ff2d6ba9b9f576b3a61f",
     urls = ["https://github.com/zaucy/rules_blender/archive/e0513aede99e98558f95ff2d6ba9b9f576b3a61f.zip"],
 )

src/app/docs/overview/overview.component.html

@@ -51,81 +51,87 @@ <h1 id="title">Documentation Overview</h1>
 		<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'"
-				[img]="'assets/EcsactCode.png'">
+				[description]="'Learn more about what drives Ecsact'">
+				<div
+					showcaseImage
+					class="w-full h-full bg-branch bg-no-repeat bg-center bg-contain"></div>
+
 				<a
-					class="btn text-secondary/50 bg-primary-bright"
+					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-secondary/50 bg-primary-bright"
+					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'"
 				[img]="'assets/EcsactCode.png'">
 				<a
-					class="btn text-secondary/50 bg-primary-bright"
+					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-secondary/50 bg-primary-bright"
+					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]="'Unity Integration'"
 				[description]="'Check out the official support for Ecsact with Unity'"
 				[img]="'assets/EcsactCode.png'">
 				<a
-					class="btn text-secondary/50 bg-primary-bright"
+					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
 					routerLink="/docs/defaults">
 					<span class="text-black">
 						<span class="i48">library_books</span>
 						Defaults Class
 					</span>
 				</a>
 				<a
-					class="btn text-secondary/50 bg-primary-bright"
+					class="btn text-primary/50 bg-primary-bright whitespace-nowrap text-ellipsis overflow-hidden"
 					routerLink="/docs/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'"
 				[img]="'assets/EcsactCode.png'">
 				<a
-					class="btn text-secondary/50 bg-primary-bright"
+					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-secondary/50 bg-primary-bright"
+					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>

src/assets/BUILD.bazel

@@ -5,5 +5,6 @@ filegroup(
     srcs = glob(["**/*"]) + [
         # renders are in the bazelignore so they must be manually specified here
         "renders/ecsact-action-anim.webm",
+        "renders/branch.png",
     ],
 )

src/assets/renders/branch.png

@@ -1,16 +1,16 @@
-<div class="flex flex-col bg-secondary/20 rounded-xl">
-	<div>
-		<img class="h-64 max-h-64 sm:h-80 sm:max-h-80 w-full" src="{{ img }}" />
+<div class="flex flex-col bg-secondary/20 rounded-lg shadow-lg h-full">
+	<div class="h-64 md:h-80 w-full relative overflow-hidden">
+		<ng-content select="[showcaseImage]"></ng-content>
 	</div>
-	<div>
-		<h2 class="px-4 light:text-black dark:text-white mb-2">{{ title }}</h2>
-		<p class="light: text-black dark:text-white px-4 font-semibold text-lg">
+	<div class="grow">
+		<h2 class="px-4 text-black dark:text-white mb-2">{{ title }}</h2>
+		<p class="text-black dark:text-white px-4 mb-2 font-semibold text-lg">
 			{{ description }}
 		</p>
 	</div>
 
 	<div
-		class="grid grid-flow-col sm:grid-flow-row grid-rows-2 sm:grid-rows-1 grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4 pb-2 px-2 grow justify-evenly auto-cols-max w-full">
+		class="grid grid-flow-col md:grid-flow-row grid-rows-2 md:grid-rows-1 grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 pb-6 px-4 justify-evenly auto-cols-max w-full">
 		<ng-content></ng-content>
 	</div>
 </div>

src/components/layout/showcase/showcase.component.html

@@ -11,9 +11,16 @@ blender_render(
     render_format = "WEBM",
 )
 
+blender_render(
+    name = "branch",
+    blend_file = "branch.blend",
+    render_format = "PNG",
+)
+
 bzlws_copy(
     name = "copy_renders",
     srcs = [
+        ":branch",
         ":ecsact-action-anim",
     ],
     out = "src/assets/renders/{FILENAME}",

src/renders/BUILD.bazel

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4092d336af379d25c9acfb8a27b6e995ee3c7449776b92e68b8b2ab73de80f54
+size 1024376

src/renders/branch.blend

@@ -11,6 +11,7 @@ module.exports = {
 				logoColor: 'url(external/ecsact_logo/ecsact-color.png)',
 				'subtle-texture': 'url(assets/bg/subtle-texture.webp)',
 				wasmLogo: 'url(assets/brand/wasm.svg)',
+				branch: 'url(assets/renders/branch.png)',
 			},
 			keyframes: {
 				'slide-down': {