more styling

.gitignore

@@ -23,4 +23,5 @@ htmlcov/
 .coverage
 .coverage.*
 *,cover
-venv
+venv
+last_predictions_cache.json

Makefile

@@ -3,7 +3,7 @@ install-node:
 build-client:
 	cd client && npm install && npm run build && pwd && rm -r ../static && cp -r dist/ ../static/
 build-client-dev:
-	cd client && npm install && NODE_ENV=development  npm run build && pwd && rm -r ../static && cp -r dist/ ../static/
+	cd client && npm install && NODE_ENV=development  npm run build && pwd && rm -r ../static/* && cp -r dist/ ../static/
 dev:
 	cd client && npm run dev
 run:

client/src/components/NewsBlock.svelte

@@ -7,14 +7,14 @@
 		{#if feedEntry.media_content}
 			<a target="_blank" href={feedEntry.link}>
 				<img
-					class="w-full object-cover	object-top aspect-[4/3]"
+					class="w-full max-w-xs object-cover object-top aspect-[4/3]"
 					src={feedEntry.media_content[0].url}
 					alt={feedEntry.title}
 				/>
 			</a>
 		{/if}
 	</div>
-	<div class="col-span-2 px-3">
+	<div class="col-span-2  sm:pl-4">
 		<div class="text-sm">
 			Score:
 			<span class="font-bold {feedEntry.sentiment > 0 ? 'text-emerald-600' : 'text-red-600'}">
@@ -23,9 +23,9 @@
 		</div>
 
 		<a target="_blank" href={feedEntry.link}>
-			<h2 class="text-2xl font-bold font-serif">{feedEntry.title}</h2>
-			<h4 class="text-sm font-bold">By {feedEntry.author}</h4>
-			<p class="py-3">{feedEntry.summary}</p>
+			<h2 class="text-2xl font-bold font-serif leading-tight">{feedEntry.title}</h2>
+			<h4 class="text-sm font-bold leading-tight">By {feedEntry.author}</h4>
+			<p class="py-3 max-w-prose leading-normal">{feedEntry.summary}</p>
 			<!-- {#if feedEntry.tags}
 				<div class="text-sm">
 					{#each feedEntry.tags as tag}

client/src/routes/index.svelte

@@ -24,14 +24,14 @@
 	}
 </script>
 
-<div class="px-6 max-w-4xl mx-auto">
-	<h1 class="text-3xl font-bold">The New York Times Homepage</h1>
+<div class="px-6 py-3 max-w-4xl mx-auto">
+	<h1 class="text-4xl font-bold font-serif py-5 leading-tight">The New York Times Homepage</h1>
 
 	<button
-		class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+		class="{positiveOrder ? 'bg-emerald-600' :'bg-red-600'} bg-blue-500 hover:bg-zinc-300 text-white font-bold py-2 px-4 rounded"
 		on:click={toggleOrder}
 	>
-		Click me
+		{!positiveOrder ? 'Sorted by negative' : 'Sorted by positive'}
 	</button>
 
 	{#await fecthPredictions()}
@@ -39,8 +39,9 @@
 	{:then data}
 		<ul>
 			{#each predictions as entry, i}
-				<li class="py-3">
+				<li class="py-5">
 					<NewsBlock feedEntry={entry} />
+					<div class="border-b border-gray-200 py-2"></div>
 				</li>
 			{/each}
 		</ul>