From 1a541223719b5fbbbc4e1f18d7dbf761b782ce48 Mon Sep 17 00:00:00 2001
From: Misode <Misoloo64@gmail.com>
Date: Sat, 18 Jun 2022 17:57:37 +0200
Subject: [PATCH] Fix style of sounds page and version navigation

---
 src/app/pages/Category.tsx  |  2 +-
 src/app/pages/Changelog.tsx |  2 +-
 src/app/pages/Guide.tsx     |  2 +-
 src/app/pages/Guides.tsx    |  2 +-
 src/app/pages/Home.tsx      |  2 +-
 src/app/pages/Partners.tsx  |  2 +-
 src/app/pages/Sounds.tsx    |  2 +-
 src/app/pages/Versions.tsx  |  4 ++--
 src/styles/global.css       | 10 +++++++++-
 9 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/app/pages/Category.tsx b/src/app/pages/Category.tsx
index ee32a432..b4d38c60 100644
--- a/src/app/pages/Category.tsx
+++ b/src/app/pages/Category.tsx
@@ -11,7 +11,7 @@ export function Category({ category }: Props) {
 	const { locale } = useLocale()
 	useTitle(locale('title.generator_category', locale(category)))
 	return <main>
-		<div class="category">
+		<div class="container">
 			{config.generators.filter(g => g.category === category).map(g => 
 				<ToolCard title={locale(g.id)} link={cleanUrl(g.url)} />
 			)}
diff --git a/src/app/pages/Changelog.tsx b/src/app/pages/Changelog.tsx
index 80688316..9b21d069 100644
--- a/src/app/pages/Changelog.tsx
+++ b/src/app/pages/Changelog.tsx
@@ -15,7 +15,7 @@ export function Changelog({}: Props) {
 	return <main>
 		<Ad type="text" id="changelog" />
 		{error && <ErrorPanel error={error} />}
-		<div class="changelog">
+		<div class="container changelog">
 			<ChangelogList changes={changelogs} defaultOrder="desc" />
 		</div>
 		<Footer />
diff --git a/src/app/pages/Guide.tsx b/src/app/pages/Guide.tsx
index ac16244e..991bcbd7 100644
--- a/src/app/pages/Guide.tsx
+++ b/src/app/pages/Guide.tsx
@@ -172,7 +172,7 @@ export function Guide({ id }: Props) {
 	const [largeWidth] = useState(window.innerWidth > 600)
 
 	return <main>
-		<div class="guide">
+		<div class="container guide">
 			<div class="navigation">
 				<a class="btn btn-link" href="/guides/">
 					{Octicon.arrow_left}
diff --git a/src/app/pages/Guides.tsx b/src/app/pages/Guides.tsx
index 1ff7c512..8d35530d 100644
--- a/src/app/pages/Guides.tsx
+++ b/src/app/pages/Guides.tsx
@@ -49,7 +49,7 @@ export function Guides({}: Props) {
 	}, [versionedGuides, search, activeTags])
 
 	return <main>
-		<div class="guides">
+		<div class="container">
 			<div class="changelog-query">
 				<TextInput class="btn btn-input changelog-search" placeholder={locale('guides.search')} value={search} onChange={setSearch} />
 				<VersionSwitcher value={versionFilter ? version : undefined} onChange={v => {changeVersion(v); setVersionFiler(true)}} hasAny onAny={() => setVersionFiler(false)} />
diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx
index 245bb53e..8eeddc30 100644
--- a/src/app/pages/Home.tsx
+++ b/src/app/pages/Home.tsx
@@ -10,7 +10,7 @@ export function Home({}: Props) {
 	const { locale } = useLocale()
 	useTitle(locale('title.home'))
 	return <main>
-		<div class="home">
+		<div class="container home">
 			<ToolCard title="Data packs">
 				{config.generators.filter(g => !g.category).map(g => 
 					<ToolCard title={locale(g.id)} link={cleanUrl(g.url)} />
diff --git a/src/app/pages/Partners.tsx b/src/app/pages/Partners.tsx
index f84ee8a6..ea017798 100644
--- a/src/app/pages/Partners.tsx
+++ b/src/app/pages/Partners.tsx
@@ -16,7 +16,7 @@ export function Partners({}: Props) {
 	useTitle(locale('title.partners'))
 
 	return <main>
-		<div class="category">
+		<div class="container">
 			{partners.map(p => <ToolCard title={locale(`partner.${p}`)}>
 				{config.generators.filter(g => g.partner === p).map(g =>
 					<ToolCard title={locale(`partner.${p}.${g.id}`)} link={cleanUrl(g.url)} />
diff --git a/src/app/pages/Sounds.tsx b/src/app/pages/Sounds.tsx
index af806e7e..941e4d9a 100644
--- a/src/app/pages/Sounds.tsx
+++ b/src/app/pages/Sounds.tsx
@@ -60,7 +60,7 @@ export function Sounds({}: Props) {
 	return <main>
 		{error && <ErrorPanel error={error} />}
 		{soundKeys.length > 0 && <>
-			<div class="controls sounds-controls">
+			<div class="sounds-controls">
 				<div class="sound-search-group">
 					<TextInput class="btn btn-input sound-search" list="sound-list" placeholder={locale('sounds.search')}
 						value={search} onChange={setSearch} onEnter={addConfig} />
diff --git a/src/app/pages/Versions.tsx b/src/app/pages/Versions.tsx
index 8cbdb667..47e744dc 100644
--- a/src/app/pages/Versions.tsx
+++ b/src/app/pages/Versions.tsx
@@ -27,9 +27,9 @@ export function Versions({}: Props) {
 	return <main>
 		<Ad type="text" id="versions" />
 		{error && <ErrorPanel error={error} />}
-		<div class="versions">
+		<div class="container">
 			{selectedId ? <>
-				<div class="version-navigation">
+				<div class="navigation">
 					<BtnLink link="/versions/" icon="three_bars" label={locale('versions.all')} />
 					<BtnLink link={previousVersion ? `/versions/?id=${previousVersion.id}` : undefined}
 						icon="arrow_left" label={locale('versions.previous')} />
diff --git a/src/styles/global.css b/src/styles/global.css
index d228b02b..3a23fa18 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -328,6 +328,14 @@ main > .controls {
 	margin-top: 40px;
 }
 
+.sounds-controls {
+	display: flex;
+	margin: 0 16px;
+	position: sticky;
+	top: 68px;
+	z-index: 1;
+}
+
 .project-controls {
 	margin: 8px;
 	display: flex;
@@ -985,7 +993,7 @@ main.has-project {
 	box-shadow: none;
 }
 
-.home, .category, .versions, .guides, .guide {
+.container {
 	padding: 16px;
 	max-width: 960px;
 	margin: 0 auto;