From 199d2f56660fde3e31f389b7697cfba2c73842ff Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Tue, 2 Jan 2024 08:59:47 +1100
Subject: [PATCH] Improve mobile responsiveness, more tailwind classes (#570)

* More tailwind classes

* Add prettier-plugin-tailwindcss

* More class replacement

* Update Card.svelte

* Remove tags from card

* Update header link

* Run format
---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 56 +++++++++++++
 prettier.config.js                            |  2 +-
 src/lib/SearchableJson.svelte                 | 48 ++++-------
 src/lib/TagFilters.svelte                     |  9 +-
 src/lib/components/ComponentIndex/Card.svelte | 83 +++++--------------
 .../components/ComponentIndex/CardList.svelte | 30 -------
 src/lib/components/layout/Footer.svelte       | 15 +---
 src/lib/components/layout/Header.svelte       |  9 +-
 src/lib/components/layout/Link.svelte         |  5 +-
 src/routes/+layout.svelte                     | 14 +---
 src/routes/+page.svelte                       | 21 +----
 src/routes/recipes/+layout.svelte             |  2 +-
 tailwind.config.cjs                           |  4 +-
 14 files changed, 111 insertions(+), 188 deletions(-)
 delete mode 100644 src/lib/components/ComponentIndex/CardList.svelte

diff --git a/package.json b/package.json
index d55994d..fbaeefc 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"postcss": "8.4.32",
 		"prettier": "4.0.0-alpha.8",
 		"prettier-plugin-svelte": "3.1.2",
+		"prettier-plugin-tailwindcss": "0.5.10",
 		"publint": "0.2.7",
 		"rehype-slug": "6.0.0",
 		"svelte": "4.2.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15bd3d6..6361f93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ devDependencies:
   prettier-plugin-svelte:
     specifier: 3.1.2
     version: 3.1.2(prettier@4.0.0-alpha.8)(svelte@4.2.8)
+  prettier-plugin-tailwindcss:
+    specifier: 0.5.10
+    version: 0.5.10(prettier-plugin-svelte@3.1.2)(prettier@4.0.0-alpha.8)
   publint:
     specifier: 0.2.7
     version: 0.2.7
@@ -2437,6 +2440,59 @@ packages:
       svelte: 4.2.8
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.10(prettier-plugin-svelte@3.1.2)(prettier@4.0.0-alpha.8):
+    resolution: {integrity: sha512-9UGSejqFxGG6brYjFfTYlJ8zs4L/lvZg1AngFfaC5Fs1otSskASv5IWKmjPu5MlABQUtTKtMArKyYr/hWpXSUg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 4.0.0-alpha.8
+      prettier-plugin-svelte: 3.1.2(prettier@4.0.0-alpha.8)(svelte@4.2.8)
+    dev: true
+
   /prettier@4.0.0-alpha.8:
     resolution: {integrity: sha512-7FFBkQb0Eg0wJRYzA7ucc31nqTjWgoSpmS0ey9OATHU6WiV0z53Uzo5hA3tZs/pbhhIG7YvOIBNmkRQ7Dr/k5A==}
     engines: {node: '>=14'}
diff --git a/prettier.config.js b/prettier.config.js
index 66b56a8..9e57c7f 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -6,7 +6,7 @@ const config = {
 	singleQuote: true,
 	trailingComma: 'none',
 	printWidth: 100,
-	plugins: ['prettier-plugin-svelte'],
+	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
 	overrides: [
 		{ files: '*.svelte', options: { parser: 'svelte' } },
 		{ files: '*.svx', options: { parser: 'mdx' } }
diff --git a/src/lib/SearchableJson.svelte b/src/lib/SearchableJson.svelte
index a2d9dde..3dee457 100644
--- a/src/lib/SearchableJson.svelte
+++ b/src/lib/SearchableJson.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
-	import CardList from '$lib/components/ComponentIndex/CardList.svelte';
 	import Seo from '$lib/components/Seo.svelte';
 	import Select from '$lib/components/Select.svelte';
 	import { packageManager } from '$stores/packageManager';
@@ -29,14 +28,14 @@
 
 <TagFilters {tags} {selectedTags} />
 <br />
-<section class="controls">
+<section class="controls relative grid items-center justify-stretch gap-4">
 	<input
 		class="searchbar"
 		type="text"
 		placeholder="Search for {displayTitle.toLowerCase()}..."
 		bind:value={searchValue}
 	/>
-	<div class="inputs">
+	<div class="grid gap-2 lg:grid-cols-2">
 		<Select
 			items={sortableFields}
 			bind:value={sort}
@@ -66,35 +65,24 @@
 	>
 </section>
 <hr />
-<section>
-	<CardList>
-		{#each sortedData as entry (entry.title)}
-			<ComponentCard
-				title={entry.title}
-				description={entry.description}
-				repository={entry.repository}
-				stars={entry.stars}
-				tags={entry.tags}
-				date={entry.date}
-				npm={entry.npm}
-				version={entry.version}
-			/>
-		{/each}
-	</CardList>
+<section class="mx-auto mb-12 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+	{#each sortedData as entry (entry.title)}
+		<ComponentCard
+			title={entry.title}
+			description={entry.description}
+			repository={entry.repository}
+			stars={entry.stars}
+			tags={entry.tags}
+			date={entry.date}
+			npm={entry.npm}
+			version={entry.version}
+		/>
+	{/each}
 </section>
 
 <style>
 	.controls {
-		display: grid;
-		justify-content: stretch;
-		align-items: center;
-		gap: var(--s-4);
 		font-family: Overpass;
-		position: relative;
-	}
-	.inputs {
-		display: grid;
-		gap: var(--s-2);
 	}
 	.searchbar {
 		padding: 20.5px var(--s-2);
@@ -114,10 +102,4 @@
 		top: calc(100% + 1rem);
 		right: 0;
 	}
-
-	@media (min-width: 1024px) {
-		.inputs {
-			grid-template-columns: repeat(2, auto);
-		}
-	}
 </style>
diff --git a/src/lib/TagFilters.svelte b/src/lib/TagFilters.svelte
index 49c77f4..12ce3c6 100644
--- a/src/lib/TagFilters.svelte
+++ b/src/lib/TagFilters.svelte
@@ -6,7 +6,7 @@
 	export let selectedTags: string[];
 </script>
 
-<div data-sveltekit-noscroll>
+<div class="flex flex-wrap items-center gap-2" data-sveltekit-noscroll>
 	{#each selectedTags as tag}
 		{@const newTags = selectedTags.filter((t) => t !== tag)}
 		{@const title = tag.replaceAll('-', ' ')}
@@ -38,13 +38,6 @@
 </div>
 
 <style>
-	div {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
 	a {
 		text-decoration: none;
 	}
diff --git a/src/lib/components/ComponentIndex/Card.svelte b/src/lib/components/ComponentIndex/Card.svelte
index 840255d..992886a 100644
--- a/src/lib/components/ComponentIndex/Card.svelte
+++ b/src/lib/components/ComponentIndex/Card.svelte
@@ -27,23 +27,32 @@
 	};
 </script>
 
-<div class="card" id="component-{title}">
-	<div class="card__top">
+<div class="card flex flex-col rounded-md p-3 text-base lg:text-lg" id="component-{title}">
+	<div class="flex justify-between align-top">
 		<div>
-			<h3>
-				<a href="#component-{title}">#</a>
-				{#if repository}<a href={repository}>{title}</a>{:else}<span>{title}</span>{/if}
+			<h3 class="text-xl">
+				<a href="#component-{title}"># {title}</a>
 			</h3>
 		</div>
 		<div>
 			{#if repository.includes('github')}
-				<a class="repo" title="Go to the source code" target="_blank" href={repository}
-					><img style="display:inline" src="/images/github_logo.svg" alt="github logo" /></a
+				<a
+					class="repo box-border flex aspect-square rounded-full border-none"
+					title="Go to the source code"
+					target="_blank"
+					href={repository}
 				>
+					<img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
+				</a>
 			{:else if repository.includes('gitlab')}
-				<a class="repo" title="Go to the source code" target="_blank" href={repository}
-					><img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" /></a
+				<a
+					class="repo box-border flex aspect-square rounded-full border-none"
+					title="Go to the source code"
+					target="_blank"
+					href={repository}
 				>
+					<img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
+				</a>
 				<!-- {:else} -->
 			{/if}
 		</div>
@@ -56,83 +65,33 @@
 			title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${npm}`}
 		/>
 	{/if}
-	<p class="flex-grow">{description}</p>
-	{#if tags}
-		<div class="flex flex-row flex-wrap mb-4">
-			{#each tags as tag}
-				<Tag title={tag} variant="blue" />
-			{/each}
-		</div>
-	{/if}
-	<div class="card__bottom">
+	<p class="flex-grow pb-6">{description}</p>
+	<div class="flex items-end justify-between">
 		<div>
 			{#if typeof stars !== 'undefined'}
 				&#9733;
 				<code>{stars}</code>
 			{/if}
 		</div>
-		{#if date && version}<span class="date">Updated {relativeDate(date)} ({version})</span>{/if}
+		{#if date && version}<span class="text-sm">Updated {relativeDate(date)} ({version})</span>{/if}
 	</div>
 </div>
 
 <style>
 	.card {
-		display: flex;
-		flex-direction: column;
-		max-width: var(--width-card);
-		padding: 14px;
 		background: #f3f6f9;
-		border-radius: 5px;
-	}
-	.card h3 {
-		word-break: none;
-		font-size: var(--font-300);
 	}
 	.card:hover {
 		background: #e8f3fe;
 	}
-	.card__top {
-		display: flex;
-		justify-content: space-between;
-		align-items: top;
-	}
-	.card__bottom {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-	}
-	.card__bottom > * {
-		white-space: nowrap;
-	}
 	.repo {
-		border-bottom: none;
-		aspect-ratio: 1/1;
-		display: flex;
 		min-height: 26px;
 		padding: 4px;
-		border-radius: 50%;
 		margin: -4px;
-		box-sizing: border-box;
 		background-color: rgba(0, 0, 0, 0);
 		transition: background-color 200ms ease-out;
 	}
 	.repo:hover {
 		background-color: rgba(0, 0, 0, 0.25);
 	}
-	.date {
-		font-size: 14px;
-	}
-	.flex-grow {
-		flex-grow: 1;
-	}
-
-	@media screen and (max-width: 400px) {
-		.card {
-			font-size: 0.9rem;
-		}
-
-		.card h3 {
-			font-size: 24px;
-		}
-	}
 </style>
diff --git a/src/lib/components/ComponentIndex/CardList.svelte b/src/lib/components/ComponentIndex/CardList.svelte
deleted file mode 100644
index 6811607..0000000
--- a/src/lib/components/ComponentIndex/CardList.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<div class="list">
-	<div class="grid">
-		<slot />
-	</div>
-</div>
-
-<style>
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		grid-gap: 25px;
-	}
-	.list {
-		margin-bottom: 5rem;
-	}
-	@media screen and (max-width: 1024px) {
-		.grid {
-			max-width: calc(var(--width-card) * 2 + 25px);
-			grid-template-columns: repeat(2, 1fr);
-			margin: 0 auto;
-		}
-	}
-	@media screen and (max-width: 700px) {
-		.grid {
-			max-width: var(--width-card);
-			grid-template-columns: 1fr;
-			margin: 0 auto;
-		}
-	}
-</style>
diff --git a/src/lib/components/layout/Footer.svelte b/src/lib/components/layout/Footer.svelte
index 09fca14..34c048d 100644
--- a/src/lib/components/layout/Footer.svelte
+++ b/src/lib/components/layout/Footer.svelte
@@ -4,8 +4,8 @@
 	var year = date.getFullYear();
 </script>
 
-<footer>
-	<div class="grid mx-auto gap-2 justify-items-center justify-center text-center md:flex md:gap-6">
+<footer class="p-8 print:hidden md:p-12">
+	<div class="mx-auto grid justify-center justify-items-center gap-2 text-center md:flex md:gap-6">
 		<span>&copy; {year} Svelte Society</span>
 		<span>•</span>
 		<a href="/about">Code of Conduct</a>
@@ -23,17 +23,6 @@
 	footer {
 		background-color: var(--accent);
 		color: var(--white);
-		padding: var(--s-8);
 		font-size: var(--font-200);
 	}
-	@media (min-width: 768px) {
-		footer {
-			padding: var(--s-12);
-		}
-	}
-	@media print {
-		footer {
-			display: none;
-		}
-	}
 </style>
diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
index 228a91b..64da1b4 100644
--- a/src/lib/components/layout/Header.svelte
+++ b/src/lib/components/layout/Header.svelte
@@ -15,10 +15,10 @@
 </script>
 
 <header class="px-6 py-4 print:hidden">
-	<div class="w-full max-w-7xl mx-auto">
+	<div class="mx-auto w-full max-w-7xl">
 		<nav class="py-6">
 			<ul
-				class="xl:flex xl:justify-between grid gap-6 justify-center place-items-center font-extrabold"
+				class="grid place-items-center justify-center gap-6 font-extrabold xl:flex xl:justify-between"
 			>
 				{#each linksLeft as [path, name]}
 					<Link
@@ -29,7 +29,7 @@
 					</Link>
 				{/each}
 				<li>
-					<a href="/" class="logo">
+					<a href="/" class="border-none">
 						<img alt="Svelte Society Logo" src="/images/logo.svg" />
 					</a>
 				</li>
@@ -61,9 +61,6 @@
 		width: var(--s-12);
 		height: var(--s-12);
 	}
-	.logo {
-		border-bottom: none;
-	}
 	@media (min-width: 1280px) {
 		li {
 			display: flex;
diff --git a/src/lib/components/layout/Link.svelte b/src/lib/components/layout/Link.svelte
index d05564f..93afc95 100644
--- a/src/lib/components/layout/Link.svelte
+++ b/src/lib/components/layout/Link.svelte
@@ -3,16 +3,13 @@
 	export let active = false;
 </script>
 
-<li>
+<li class="uppercase">
 	<a href={path} class:active class="nav-item">
 		<slot />
 	</a>
 </li>
 
 <style>
-	li {
-		text-transform: uppercase;
-	}
 	a {
 		text-decoration: none;
 		border-bottom: transparent;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 57b2380..42a36dc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -12,9 +12,9 @@
 
 <GlobalSearch bind:this={globalSearch} />
 
-<div class="flex flex-col h-screen justify-between">
+<div class="flex h-screen flex-col justify-between">
 	<Header />
-	<main class="grid mx-auto w-full max-w-7xl mb-auto">
+	<main class="mx-auto mb-auto grid w-full max-w-7xl px-5 py-10 xl:py-20">
 		<slot />
 	</main>
 	<Footer />
@@ -25,10 +25,6 @@
 >
 
 <style>
-	main {
-		padding: var(--s-10) var(--s-5) var(--s-20);
-	}
-
 	button {
 		position: fixed;
 		bottom: var(--s-2);
@@ -49,10 +45,4 @@
 	button img {
 		filter: grayscale(1) brightness(0) invert(1);
 	}
-
-	@media (min-width: 1280px) {
-		main {
-			padding: var(--s-20) var(--s-5);
-		}
-	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d72a854..f136e39 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,8 +8,8 @@
 	description="Svelte Society is a community-driven effort to organise and promote SvelteJS."
 />
 
-<article class="max-w-5xl gap-6 grid grid-cols-1 mx-auto w-full">
-	<h1 class="text-center">Welcome to Svelte Society!</h1>
+<article class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-5 xl:gap-10">
+	<h1 class="m-0 text-center">Welcome to Svelte Society!</h1>
 	<section>
 		<p>
 			We are a volunteer global network of Svelte fans that strive to promote Svelte and its
@@ -23,7 +23,7 @@
 			out the resources below:
 		</p>
 	</section>
-	<ul>
+	<ul class="flex flex-wrap justify-around text-center">
 		<Link path="https://discord.gg/svelte">
 			<img src="images/discord.svg" alt="" />
 			Discord
@@ -37,7 +37,7 @@
 			Twitter
 		</Link>
 	</ul>
-	<ul>
+	<ul class="flex flex-wrap justify-around text-center">
 		<Link path="https://svelte.substack.com/">
 			<img src="images/newsletter.svg" alt="" />
 			Newsletter
@@ -57,28 +57,15 @@
 </article>
 
 <style>
-	h1 {
-		margin: 0;
-	}
 	section {
 		display: grid;
 		gap: var(--s-5);
 	}
 	ul {
-		display: flex;
-		flex-wrap: wrap;
 		column-gap: var(--s-20);
 		row-gap: var(--s-5);
-		justify-content: space-around;
-		text-align: center;
 	}
 	img {
 		width: 128px;
 	}
-
-	@media (min-width: 1280px) {
-		article {
-			gap: var(--s-20);
-		}
-	}
 </style>
diff --git a/src/routes/recipes/+layout.svelte b/src/routes/recipes/+layout.svelte
index 528e4aa..8cb0ac0 100644
--- a/src/routes/recipes/+layout.svelte
+++ b/src/routes/recipes/+layout.svelte
@@ -7,7 +7,7 @@
 	categories.set(data.categories);
 </script>
 
-<div class="grid grid-cols-1 mx-auto w-full max-w-7xl">
+<div class="mx-auto grid w-full max-w-7xl grid-cols-1">
 	<slot />
 </div>
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7e89efa..516e52b 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,7 +4,9 @@
 const config = {
 	content: ['./src/**/*.{html,js,ts,svelte}'],
 	theme: {
-		extend: {}
+		container: {
+			center: true
+		}
 	},
 	plugins: []
 };