Improve home page with separate data and resource pack cards

src/app/components/Header.tsx

@@ -28,7 +28,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 	return <header>
 		<div class="title">
 			<Link class="home-link" href="/" aria-label={loc('home')}>{Icons.home}</Link>
-			<h2>{title}</h2>
+			<h1>{title}</h1>
 			{gen && <BtnMenu icon="chevron_down" tooltip={loc('switch_generator')}>
 				{config.generators
 					.filter(g => g.category === gen?.category && checkVersion(version, g.minVersion))

src/app/components/ToolCard.tsx

@@ -3,16 +3,25 @@ import { Icons } from './Icons'
 
 type ToolCardProps = {
 	title: string,
-	link: string,
+	desc?: string,
+	link?: string,
 	icon?: keyof typeof Icons,
 	children?: ComponentChildren,
 }
-export function ToolCard({ title, link, icon, children }: ToolCardProps) {
+export function ToolCard({ title, desc, link, icon, children }: ToolCardProps) {
-	return <a class="tool-card" href={link}>
+	const content = <>
+		<div class="tool-head">
 			{icon && Icons[icon]}
 			<div>
 				<h3>{title}</h3>
-			{children}
+				<p>{desc}</p>
 			</div>
-	</a>
+		</div>
+		{children && <div class="tool-body">
+			{children}
+		</div>}
+	</>
+	return link
+		? <a class="tool-card" href={link}>{content}</a>
+		: <div class="tool-card">{content}</div>
 }

src/app/pages/Category.tsx

@@ -13,7 +13,7 @@ export function Category({ category, lang, changeTitle }: WorldgenProps) {
 	const loc = locale.bind(null, lang)
 	changeTitle(loc('title.generator_category', loc(category)))
 	return <main>
-		<div class="home">
+		<div class="category">
 			{config.generators.filter(g => g.category === category).map(g => 
 				<ToolCard title={loc(g.id)} link={cleanUrl(g.url)} />
 			)}

src/app/pages/Home.tsx

@@ -11,24 +11,29 @@ type HomeProps = {
 export function Home({ lang, changeTitle }: HomeProps) {
 	const loc = locale.bind(null, lang)
 	changeTitle(loc('title.home'))
+	console.log(config.generators)
 	return <main>
 		<div class="home">
+			<ToolCard title="Data packs">
 				{config.generators.filter(g => !g.category).map(g => 
 					<ToolCard title={loc(g.id)} link={cleanUrl(g.url)} />
 				)}
 				<ToolCard title={loc('worldgen')} link="/worldgen/" />
-			<hr />
-			<ToolCard title={loc('assets')} link="/assets/" />
-			<hr />
-			<ToolCard title="Report Inspector" icon="report" link="https://misode.github.io/report/">
-				<p>Analyse your performance reports</p>
 			</ToolCard>
-			<ToolCard title="Minecraft Sounds" icon="sounds" link="/sounds/">
+			<ToolCard title="Resource packs">
-				<p>Browse through and mix all the vanilla sounds</p>
+				{config.generators.filter(g => g.category === 'assets').map(g =>
-			</ToolCard>
+					<ToolCard title={loc(g.id)} link={cleanUrl(g.url)} />
-			<ToolCard title="Data Pack Upgrader" link="https://misode.github.io/upgrader/">
+				)}
-				<p>Convert your 1.16 data packs to 1.17</p>
 			</ToolCard>
+			<ToolCard title="Report Inspector" icon="report"
+				link="https://misode.github.io/report/"
+				desc="Analyse your performance reports" />
+			<ToolCard title="Minecraft Sounds" icon="sounds"
+				link="/sounds/"
+				desc="Browse through and mix all the vanilla sounds" />
+			<ToolCard title="Data Pack Upgrader"
+				link="https://misode.github.io/upgrader/"
+				desc="Convert your 1.16 data packs to 1.17" />
 			<ToolCard title="Technical Changelog" link="/changelog/" />
 		</div>
 	</main>

src/styles/global.css

@@ -129,7 +129,8 @@ body[data-panel="settings"] header {
 	align-items: center;
 }
 
-.title h2 {
+.title h1 {
+	font-size: 27px;
 	color: var(--nav);
 }
 
@@ -648,34 +649,31 @@ main.has-preview {
 	color: var(--text-1)
 }
 
-.home {
+.home, .category {
 	padding: 16px;
-}
-
-.generator-picker {
-	display: flex;
-}
-
-.home.center {
-	flex-direction: column;
-	align-items: center;
-	color: var(--nav);
-}
-
-.home.center p {
-	padding-bottom: 20px;
-	text-align: center;
-	font-size: 20px;
-}
-
-.home {
 	max-width: 960px;
 	margin: 0 auto;
 }
 
+.home {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 0 8px;
+	align-items: flex-start;
+}
+
+.home > *:nth-child(n+3) {
+	grid-column: 1 / 3;
+}
+
+h2 {
+	font-size: 24px;
+	font-weight: unset;
+}
+
 .tool-card {
 	display: flex;
-	padding: 10px;
+	flex-direction: column;
 	margin-bottom: 8px;
 	color: var(--text-2);
 	background-color: var(--background-2);
@@ -684,25 +682,43 @@ main.has-preview {
 	text-decoration: none;
 }
 
-.tool-card:hover {
+a.tool-card:hover {
 	background-color: var(--background-3);
 }
 
-.tool-card svg {
+.tool-head {
+	display: flex;
+	padding: 10px;
+}
+
+.tool-head svg {
 	width: 32px;
 	height: 32px;
 	flex-shrink: 0;
 	margin-right: 8px;
 }
 
-.tool-card h3 {
+.tool-head h3 {
 	font-weight: unset;
 }
 
-.tool-card p {
+.tool-head p {
 	color: var(--text-3);
 }
 
+.tool-body {
+	display: flex;
+	flex-direction: column;
+	border-top: 2px solid var(--background-1);
+	padding-top: 4px;
+}
+
+.tool-body > .tool-card {
+	margin: 0 8px 8px;
+	box-shadow: none;
+	margin-bottom: 0;
+}
+
 hr {
 	margin: 12px 0;
 	border: none;
@@ -1193,7 +1209,16 @@ hr {
 
 /* SMALL */
 @media screen and (max-width: 580px) {
-	.title h2 {
+	.home {
+		grid-template-columns: 1fr;
+		gap: 0;
+	}
+
+	.home > * {
+		grid-column: 1 / 2;
+	}
+
+	.title h1 {
 		font-size: 18px;
 	}