Refactor layout and styling for improved responsiveness and readability across components

LoStisWorld · LoStisWorld · commit c0dba2a4fde6 · 2025-01-12T17:14:42.000+01:00
diff --git a/src/app.html b/src/app.html
@@ -8,7 +8,7 @@
 	</head>
 	<body
 		data-sveltekit-preload-data="hover"
-		class="bg-gray-950 text-gray-300 grid grid-rows-[auto_1fr_auto] min-h-full antialiased text-base lg:text-lg"
+		class="bg-gray-950 text-gray-300 min-h-full antialiased text-base lg:text-lg"
 	>
 		<div class="contents">%sveltekit.body%</div>
 	</body>
diff --git a/src/routes/landing/Codeblock.svelte b/src/routes/landing/Codeblock.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div
-	class="rounded-md border border-gray-800 overflow-clip bg-neutral-950 max-w-4xl {classes}"
+	class="rounded-md border border-gray-800 overflow-clip bg-neutral-950 max-w-full lg:max-w-4xl {classes}"
 	data-interactive-cursor="hidden"
 >
 	<div class="flex justify-between items-center px-3 py-2">
diff --git a/src/routes/landing/Header.svelte b/src/routes/landing/Header.svelte
@@ -48,7 +48,7 @@
 	<div
 		class="h-full overflow-y-auto pt-64 min-h-screen pb-32 lg:py-16 flex flex-col justify-center 2xl:items-end items-center px-8 2xl:pr-16"
 	>
-		<h1 class="font-extrabold text-7xl lg:text-8xl text-center 2xl:text-right text-white mb-16">
+		<h1 class="font-extrabold text-5xl lg:text-8xl text-center 2xl:text-right text-white mb-16">
 			<span class="drop-shadow-lg">Svelte</span>
 			<strong class="block drop-shadow-lg text-indigo-950">Interactive</strong>
 			<span class="drop-shadow-lg text-indigo-950">Cursor</span>
@@ -63,7 +63,7 @@
 		<div class="flex flex-wrap justify-center gap-4 lg:max-w-lg max-w-md mt-8">
 			{#each itemsToCopy as { text }, idx (idx)}
 				<div class="flex w-full rounded-md shadow-sm">
-					<pre class="bg-gray-900 p-2 rounded-l-md text-sm flex w-full overflow-auto">
+					<pre class="bg-gray-900 p-2 rounded-l-md text-xs md:text-sm flex w-full overflow-auto">
 						<code>{@html text}</code>
 					</pre>
 					<button
diff --git a/src/routes/landing/Sections.svelte b/src/routes/landing/Sections.svelte
@@ -36,8 +36,7 @@
 >
 	<header class="mb-16">
 		<ShowCode
-			code={`
-				<script>
+			code={`<script>
 					import InteractiveCursor from '@lostisworld/svelte-interactive-cursor';
 
 					let activeDataValue = $state({ activeDataName: '', activeDataElement: null });
@@ -173,14 +172,14 @@
 			`}
 		/>
 		<h2
-			class="text-center 2xl:text-left text-indigo-600 text-4xl font-bold leading-relaxed text-balance mb-16"
+			class="text-center 2xl:text-left text-indigo-600 text-2xl md:text-4xl font-bold leading-relaxed text-balance mb-16"
 		>
 			Hover over the navigation and add items to the <strong>useDataElementRect</strong> to dynamically
 			obtain the element's dimensions.
 		</h2>
 	</header>
 	<ul
-		class="flex justify-center shadow-lg shadow-gray-400 rounded-md text-gray-700 p-6 border-t border-white"
+		class="flex flex-wrap justify-center shadow-lg shadow-gray-400 rounded-md text-gray-700 p-6 border-t border-white"
 	>
 		<li>
 			<button class="px-6 py-2 hover:text-indigo-600 uppercase" data-interactive-cursor="navitem"
@@ -210,12 +209,7 @@
 	</ul>
 </section>
 
-<section
-	class={[
-		'flex justify-center flex-col items-center 2xl:items-start px-6 lg:px-16',
-		sectionDefaultOptions
-	]}
->
+<section class={[ 'flex justify-center flex-col items-center 2xl:items-start px-6 lg:px-16', sectionDefaultOptions]}>
 	<ShowCode
 		code={`
 			<script>
@@ -242,9 +236,8 @@
 			/>
 		`}
 	/>
-	<h2
+	<h2 class="text-2xl text-center 2xl:text-left text-white font-extrabold lg:text-6xl lg:leading-tight text-pretty"
 		data-interactive-cursor="mixblend"
-		class="text-3xl text-center 2xl:text-left text-white font-extrabold lg:text-6xl lg:leading-tight text-pretty"
 	>
 		This package enhances user experience by providing a customizable and interactive cursor.<br
 		/>It is perfect for adding unique cursor effects to your Svelte applications, making them more
@@ -318,7 +311,7 @@
 			</InteractiveCursor>
 		`}
 	/>
-	<h2 class="text-4xl text-center 2xl:text-left text-white font-bold leading-relaxed mb-16">
+	<h2 class="text-2xl md:text-4xl text-center 2xl:text-left text-white font-bold leading-relaxed mb-16">
 		Creating a new way to interact with your elements!<br /> With Svelte Interactive Cursor
 	</h2>
 	<Slider images={cards} />
diff --git a/src/routes/landing/ShowCode.svelte b/src/routes/landing/ShowCode.svelte
@@ -8,7 +8,6 @@
 
 	let { code }: Props = $props();
 	let showCode = $state(false);
-	$inspect(showCode);
 </script>
 
 <div class="flex flex-col items-center 2xl:items-start">

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`</head>`
`9`	`9`	`<body`
`10`	`10`	`data-sveltekit-preload-data="hover"`
`11`		`- class="bg-gray-950 text-gray-300 grid grid-rows-[auto_1fr_auto] min-h-full antialiased text-base lg:text-lg"`
	`11`	`+ class="bg-gray-950 text-gray-300 min-h-full antialiased text-base lg:text-lg"`
`12`	`12`	`>`
`13`	`13`	`<div class="contents">%sveltekit.body%</div>`
`14`	`14`	`</body>`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`</script>`
`15`	`15`
`16`	`16`	`<div`
`17`		`- class="rounded-md border border-gray-800 overflow-clip bg-neutral-950 max-w-4xl {classes}"`
	`17`	`+ class="rounded-md border border-gray-800 overflow-clip bg-neutral-950 max-w-full lg:max-w-4xl {classes}"`
`18`	`18`	`data-interactive-cursor="hidden"`
`19`	`19`	`>`
`20`	`20`	`<div class="flex justify-between items-center px-3 py-2">`