fix 421

src/lib/components/mosaic/RefCategory.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <section>
-	<h3>{item.category}</h3>
+	<h3 class:faded={item.refs.length == 0}>{item.category}</h3>
 	<ul>
 		{#each item.refs as r}
 			<li><a href={r.url}>{r.title}</a></li>
@@ -20,6 +20,9 @@
 </section>
 
 <style>
+	.faded {
+		color: var(--grey);
+	}
 	section {
 		display: flex;
 		flex-direction: column;

src/lib/components/mosaic/References.svelte

@@ -1,13 +1,20 @@
 <script>
-	import Masonry from 'svelte-bricks';
 	import RefCategory from '$lib/components/mosaic/RefCategory.svelte';
 
 	export let items = [];
-
-	let [minColWidth, maxColWidth, gap] = [150, 250, 25];
-	let width, height;
 </script>
 
-<Masonry {items} {minColWidth} {maxColWidth} {gap} idKey={'category'} animate={true} let:item bind:width bind:height>
-	<RefCategory {item} />
-</Masonry>
+<div class="items">
+	{#each items as item}
+		<RefCategory {item} />
+	{/each}
+</div>
+
+<style>
+	.items {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 1em;
+	}
+</style>

src/routes/(content)/reference/+page.svx

@@ -21,37 +21,39 @@ layout: contentindex
 	};
 	let query = '';
 
-
 	references.forEach(r => { 
 		categorised[r.category].push(r)
 	});
 
 	const search = new FuzzySearch(references, ['title', 'tags', 'blurb', 'category'], {
 		caseSensitive: false,
-		sort: true
+		sort: false
 	})
 
-	function doSearch() { 	
+	function populateItems() {
+		return Object.entries(categorised).map(k => ({ "category" : k[0], "refs" : k[1] }));
+	}
+	let items = populateItems();
+	function doSearch() {
 		Object.keys(categorised).forEach(c => {
 			categorised[c] = [];
 		});
-
-		const searchResult = search.search(query);
-		searchResult.forEach(r => { 
+		let result = query === '' ? references : search.search(query);		
+		result.forEach(r => { 
 			categorised[r.category].push(r);
 		});
-	}
 
-	$: items = Object.entries(categorised).map(k => ({ "category" : k[0], "refs" : k[1] }));
+		items = populateItems();
+	}
 </script>
 
 <h1 class='title'>Reference</h1>
 
 <form>
 	<label class="visually-hidden" for="query"></label>
 	<input 
-	on:input={doSearch}
 	bind:value={query} 
+	on:input={doSearch}
 	placeholder='Enter a search term'
 	>
 </form>
@@ -60,7 +62,7 @@ layout: contentindex
 
 <style>
 	form > input {
-		margin-bottom: 0.5em;
+		margin-bottom: 1em;
 		font-size: 1.5rem;
 		border: none;
 		outline: none;