Add Tailwind CSS (#425)

* Install and configure tailwind

* Fix style issues

src/app/pages/Changelog.tsx

@@ -14,7 +14,7 @@ export function Changelog({}: Props) {
 
 	return <main>
 		{error && <ErrorPanel error={error} />}
-		<div class="container changelog">
+		<div class="legacy-container changelog">
 			<ChangelogList changes={changes} defaultOrder="desc" limit={100} navigation={(
 				<BtnLink link="/versions/" icon="three_bars" label={locale('versions.all')} />
 			)} />

src/app/pages/Customized.tsx

@@ -82,7 +82,7 @@ export function Customized({}: Props) {
 	}, [model, version])
 
 	return <main>
-		<div class="container customized">
+		<div class="legacy-container customized">
 			<div class="tabs tabs-sticky">
 				<span class={tab === 'basic' ? 'selected' : ''} onClick={() => setTab('basic')}>{locale('customized.basic')}</span>
 				<span class={tab === 'structures' ? 'selected' : ''} onClick={() => setTab('structures')}>{locale('customized.structures')}</span>

src/app/pages/Generators.tsx

@@ -9,7 +9,7 @@ export function Generators({}: Props) {
 	useTitle(locale('title.generators'))
 
 	return <main>
-		<div class="container">
+		<div class="legacy-container">
 			<GeneratorList predicate={gen => !gen.partner} />
 		</div>
 		<Footer />

src/app/pages/Guide.tsx

@@ -3,12 +3,12 @@ import json from 'highlight.js/lib/languages/json'
 import { marked } from 'marked'
 import { route } from 'preact-router'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
-import { Ad, Badge, Btn, Footer, Giscus, Icons, Octicon, VersionSwitcher } from '../components/index.js'
 import config from '../Config.js'
+import { parseFrontMatter, versionContent } from '../Utils.js'
+import { Ad, Badge, Btn, Footer, Giscus, Icons, Octicon, VersionSwitcher } from '../components/index.js'
 import { useLocale, useTitle, useVersion } from '../contexts/index.js'
 import { useActiveTimeout, useAsync, useHash } from '../hooks/index.js'
 import type { VersionId } from '../services/index.js'
-import { parseFrontMatter, versionContent } from '../Utils.js'
 
 const HASH = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.368 1.01a.75.75 0 01.623.859L6.57 4.5h3.98l.46-2.868a.75.75 0 011.48.237L12.07 4.5h2.18a.75.75 0 010 1.5h-2.42l-.64 4h2.56a.75.75 0 010 1.5h-2.8l-.46 2.869a.75.75 0 01-1.48-.237l.42-2.632H5.45l-.46 2.869a.75.75 0 01-1.48-.237l.42-2.632H1.75a.75.75 0 010-1.5h2.42l.64-4H2.25a.75.75 0 010-1.5h2.8l.46-2.868a.75.75 0 01.858-.622zM9.67 10l.64-4H6.33l-.64 4h3.98z"></path></svg>'
 
@@ -172,7 +172,7 @@ export function Guide({ id }: Props) {
 	const [largeWidth] = useState(window.innerWidth > 600)
 
 	return <main>
-		<div class="container guide">
+		<div class="legacy-container guide">
 			<div class="navigation">
 				<a class="btn btn-link" href="/guides/">
 					{Octicon.arrow_left}

src/app/pages/Guides.tsx

@@ -41,7 +41,7 @@ export function Guides({}: Props) {
 	}, [versionedGuides, search, activeTags])
 
 	return <main>
-		<div class="container guides">
+		<div class="legacy-container guides">
 			<div class="navigation">
 				<TextInput class="btn btn-input query-search" placeholder={locale('guides.search')} value={search} onChange={setSearch} />
 				<VersionSwitcher value={versionFilter ? version : undefined} onChange={v => {changeVersion(v); setVersionFiler(true)}} hasAny onAny={() => setVersionFiler(false)} />

src/app/pages/Home.tsx

@@ -22,7 +22,7 @@ export function Home({}: Props) {
 	const smallScreen = useMediaQuery('(max-width: 580px)')
 
 	return <main>
-		<div class="container">
+		<div class="legacy-container">
 			<MinecraftWikiBanner />
 			<div class="card-group">
 				<div class="card-column">

src/app/pages/Partners.tsx

@@ -9,7 +9,7 @@ export function Partners({}: Props) {
 	useTitle(locale('title.partners'))
 
 	return <main>
-		<div class="container">
+		<div class="legacy-container">
 			<GeneratorList predicate={gen => gen.partner !== undefined} />
 		</div>
 		<Footer donate={false} />

src/app/pages/Versions.tsx

@@ -27,7 +27,7 @@ export function Versions({}: Props) {
 
 	return <main>
 		{error && <ErrorPanel error={error} />}
-		<div class="container">
+		<div class="legacy-container">
 			{selectedId ? <>
 				<div class="navigation">
 					<BtnLink link="/versions/" icon="three_bars" label={locale('versions.all')} />

src/app/pages/WhatsNew.tsx

@@ -29,7 +29,7 @@ export function WhatsNew({}: Props) {
 	}, [items, storeTime])
 
 	return <main>
-		<div class="container whats-new">
+		<div class="legacy-container whats-new">
 			<p>{locale('whats_new.description')}</p>
 			{error && <ErrorPanel error={error} />}
 			{items?.map(item => <WhatsNewEntry item={item} />)}

src/app/pages/Worldgen.tsx

@@ -9,7 +9,7 @@ export function Worldgen({}: Props) {
 	useTitle(locale('title.worldgen'))
 
 	return <main>
-		<div class="container worldgen">
+		<div class="legacy-container worldgen">
 			<div class="card-group">
 				<ToolGroup title={locale('generators.popular')}>
 					<GeneratorCard minimal id="dimension" />