Merge pull request 'CSS refinement' (#3) from flowbite-svelte into main

Reviewed-on: #3

src/app.css

@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 body {
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+	transition:
-  @apply bg-stone-100 dark:bg-gray-950 text-black dark:text-stone-100 text-center;
+		background-color 0.2s ease-in-out,
+		color 0.2s ease-in-out;
+	@apply bg-stone-100 dark:bg-gray-950 text-black dark:text-stone-100 text-center;
 }
-
-  

src/lib/Commit.svelte

@@ -1,20 +1,25 @@
 <script>
 	import { AccordionItem } from 'flowbite-svelte';
+	import { Heading, Secondary } from 'flowbite-svelte';
 	import moment from 'moment';
-	export let isOpen = false;
+	export let index;
 	export let link;
 	export let title;
 	export let description;
 	export let published;
 	const pubAgo = moment(published).fromNow();
+	const open = index === 0;
 </script>
 
-<AccordionItem {...isOpen ? { open: true } : {}}>
+<AccordionItem {...open ? { open: true } : {}}>
-	<span slot="header">{@html title} - {pubAgo}</span>
+	<span slot="header" class="flex justify-between items-center w-full">
+		<span>{@html title}</span>
+		<p class="text-xs mr-2">{pubAgo}</p>
+	</span>
 	<div class="flex flex-col">
 		{#if description}
 			<p>with the message:</p>
-			<code>{@html description}</code>
+			<code class="overflow-x-clip">{@html description}</code>
 		{/if}
 		<a class="hover:text-slate-100" href={link}>view commit for more details</a>
 	</div>

src/lib/RssFeed.svelte

@@ -62,13 +62,9 @@
 		<Spinner />
 	{:else}
 		<div class="flex flex-col gap-2">
-			<Accordion>
+			<Accordion flush>
 				{#each feed.slice(0, 5) as commit, i}
-					{#if i === 0}
+					<Commit {...commit} index={i} />
-						<Commit {...commit} isOpen={true} />
-					{:else}
-						<Commit {...commit} open={false} />
-					{/if}
 				{/each}
 			</Accordion>
 		</div>

src/routes/+layout.svelte

@@ -4,6 +4,7 @@
 	import ThemeSwitch from '$lib/ThemeSwitch.svelte';
 	import '../app.css';
 	import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
+	import { DarkMode } from 'flowbite-svelte';
 
 	// Navigation links are generated based on this object
 	const nav = [
@@ -73,7 +74,7 @@
 			{/each}
 		</ul>
 	{/key}
-	<ThemeSwitch />
+	<DarkMode />
 </nav>
 <div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
 	<slot />

src/routes/svelte/+page.svelte

@@ -7,7 +7,8 @@
 
 <div in:fade>
 	<h1 class="text-2xl">Svelte Portfolio Page</h1>
-	<p class="text-left">For this product i've used the following:</p>
+	<p class="text-left">For this project i've used the following:</p>
+
 	<p class="text-left">
 		<a
 			class="underline font-normal hover:text-slate-400"

tailwind.config.js

@@ -2,7 +2,7 @@
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
   plugins: [require('flowbite/plugin')],
-  darkMode: 'selector',
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {