🚧 A little format page polish

Author: SnaveSutit

src/components/blueprintSettingsDialog.svelte

@@ -656,7 +656,7 @@
 	.ko-fi-popup-container {
 		position: absolute;
 		top: 30px;
-		right: -23.8vw;
+		right: -287px;
 		font-family: 'MinecraftFull';
 		font-size: 20px;
 		display: flex;
@@ -705,9 +705,9 @@
 		border-radius: 12px;
 	}
 	.ko-fi-button {
-		width: 18vw;
-		margin-right: 1vw;
-		margin-top: 1vw;
+		width: 250px;
+		margin-right: 8px;
+		margin-top: 12px;
 		transition: transform 0.2s ease;
 	}
 	.ko-fi-button:hover {
@@ -729,18 +729,18 @@
 	}
 	@keyframes slideIn {
 		0% {
-			right: 23.8vw;
+			right: 287px;
 		}
 		100% {
-			right: 0px;
+			right: 0;
 		}
 	}
 	@keyframes slideInPanel {
 		0% {
-			right: 0vw;
+			right: 0;
 		}
 		100% {
-			right: -23.8vw;
+			right: -287px;
 		}
 	}
 

src/components/formatPage.svelte

@@ -1,5 +1,38 @@
 <script lang="ts">
 	import { BLUEPRINT_FORMAT } from '../blueprintFormat'
+	import AnimatedJavaIcon from '../assets/animated_java_icon.svg'
+
+	const title = document.querySelector('#format_page_animated_java_blueprint')
+		?.children[1] as HTMLHeadingElement
+
+	if (title) {
+		let previousID = title.parentElement?.id
+		if (!title.children.namedItem('format_icon')) {
+			const img = new Image(48, 48)
+			img.id = 'format_icon'
+			img.src = AnimatedJavaIcon
+			img.style.marginRight = '16px'
+			img.style.borderRadius = '6px'
+			img.style.boxShadow = '2px 2px 2px #000000aa'
+			title.prepend(img)
+			previousID = undefined
+			setInterval(() => {
+				if (title.parentElement?.id === previousID) return
+				if (title.parentElement?.id === 'format_page_animated_java_blueprint') {
+					img.style.display = 'block'
+					title.style.display = 'flex'
+					title.style.alignItems = 'center'
+					title.style.fontWeight = 'normal'
+				} else {
+					img.style.display = 'none'
+					title.style.fontWeight = 'lighter'
+				}
+				previousID = title.parentElement?.id
+			}, 16)
+		}
+	} else {
+		throw new Error('Format page title not found!')
+	}
 
 	function createBlueprint() {
 		newProject(BLUEPRINT_FORMAT)
@@ -9,13 +42,23 @@
 	}
 </script>
 
-<p class="format_description">Create advanced animated models in Vanilla Java Edition</p>
+<p class="format_description">Create advanced animated models for Vanilla Java Edition</p>
 
 <p class="format_target">
 	<b>Target</b>:
 	<span>Minecraft: Java Edition</span>
 </p>
 
+<h3 class="markdown">
+	<p class="markdown">Getting Started</p>
+</h3>
+
+<p>
+	<a href="https://animated-java.dev/docs/getting-started/creating-a-blueprint"
+		>Check out the Docs</a
+	> to learn how to use Animated Java.
+</p>
+
 <h3 class="markdown">
 	<p class="markdown">Good to know:</p>
 </h3>
@@ -25,8 +68,8 @@
 		at a time. However, the rotation of bones is not restricted.
 	</li>
 	<li class="markdown">
-		Documentation for Animated Java can be found at <a href="https://animated-java.dev/"
-			>https://animated-java.dev/</a
+		Documentation for Animated Java can be found at <a href="https://animated-java.dev/docs"
+			>https://animated-java.dev/docs</a
 		>
 	</li>
 </ul>