fix(web): centralized style and removed frivolous elements

Automattic · Dec 19, 2024 · bd8fb5e · bd8fb5e
1 parent 2825b89
commit bd8fb5e
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 35 deletions.
diff --git a/packages/web/src/app.css b/packages/web/src/app.css
@@ -2,6 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+	h1 {
+		@apply text-5xl;
+	}
+
+	h2 {
+		@apply text-3xl sm:text-3xl lg:text-4xl;
+	}
+
+	p {
+		@apply lg:text-base md:text-xl xl:text-xl;
+	}
+
+	* {
+		@apply dark:text-white;
+	}
+}
+
 * {
 	user-select: none;
 	font-family: Atkinson Hyperlegible;

diff --git a/packages/web/src/lib/Editor.svelte b/packages/web/src/lib/Editor.svelte
@@ -85,7 +85,7 @@
 							class="transition-all overflow-hidden flex flex-col justify-evenly"
 							style={`height: ${focused === i ? `calc(55px * ${lint.suggestion_count() + 1})` : '0px'}`}
 						>
-							<p style="height: 50px" class="text-left">{lint.message()}</p>
+							<p style="height: 50px" class="text-left text-sm">{lint.message()}</p>
 							{#each lint.suggestions() as suggestion}
 								<div class="w-full p-[4px]">
 									<Button

diff --git a/packages/web/src/lib/Section.svelte b/packages/web/src/lib/Section.svelte
@@ -13,10 +13,10 @@
 	{/if}
 
 	<div class={`justify-center space-y-2`}>
-		<h2 class="text-2xl font-bold sm:text-3xl lg:text-4xl">
+		<h2 class="font-bold">
 			<slot name="title" />
 		</h2>
-		<p class="text-gray-500 md:text-xl lg:text-base xl:text-xl dark:text-gray-400">
+		<p class="text-gray-500 dark:text-gray-400">
 			<slot name="subtitle" />
 		</p>
 	</div>

diff --git a/packages/web/src/lib/Underlines.svelte b/packages/web/src/lib/Underlines.svelte
@@ -99,16 +99,16 @@
 </script>
 
 <div class="grid">
-	<div class="p-0 m-0 text-nowrap indent-0 text-transparent" style="grid-row: 1; grid-column: 1">
+	<div class="p-0 m-0 text-nowrap indent-0" style="grid-row: 1; grid-column: 1">
 		{#each modified as chunk}
 			{#if chunk == null}
 				<br />
 			{:else if typeof chunk == 'string'}
-				<span class="whitespace-pre">{chunk}</span>
+				<span class="whitespace-pre text-transparent">{chunk}</span>
 			{:else}
-				<span class="pointer-events-auto" style={`margin-right: -4px;`}>
+				<span class="pointer-events-auto" style={`margin-right: -5px;`}>
 					<button
-						class={`underlinespecial transition-all rounded-sm ${chunk.focused ? 'animate-after-bigbounce text-white' : ''}`}
+						class={`underlinespecial transition-all rounded-sm ${chunk.focused ? 'animate-after-bigbounce text-white' : 'text-transparent'}`}
 						bind:this={lintHighlights[chunk.index]}
 						on:click={() =>
 							chunk != null && typeof chunk == 'object' && (focusLintIndex = chunk.index)}

diff --git a/packages/web/src/routes/+layout.svelte b/packages/web/src/routes/+layout.svelte
@@ -21,10 +21,10 @@
 
 <div class="w-full flex flex-row justify-center">
 	<a href="https://automattic.com/">
-		<h2 class="dark:text-white flex items-center">
+		<div class="flex items-center">
 			An
 			<div class="inline-block"><AutomatticLogo height="32px" width="140px" /></div>
 			{displayName}
-		</h2>
+		</div>
 	</a>
 </div>
diff --git a/packages/web/src/routes/+page.svelte b/packages/web/src/routes/+page.svelte
@@ -23,23 +23,21 @@
 <div class="w-full flex flex-col items-center">
 	<Logo width="200px" />
 </div>
-<h1 class="text-5xl font-bold text-center dark:text-white">Hi. I’m Harper.</h1>
-<h2 class="text-3xl text-center dark:text-white">The Grammar Checker for Developers</h2>
+<h1 class="font-bold text-center">Hi. I’m Harper.</h1>
+<h2 class="text-center">The Grammar Checker for Developers</h2>
 
 <div
 	class="md:flex md:flex-row grid grid-cols-2 items-center justify-evenly mt-5 transition-all place-items-center"
 >
 	<a
 		href="https://github.com/automattic/harper"
-		class="flex flex-row items-center [&>*]:m-2 dark:text-white hover:scale-105"
+		class="flex flex-row items-center [&>*]:m-2 hover:scale-105"
 		><GitHubLogo width="40px" height="40px" />GitHub</a
 	>
-	<a href="/obsidian" class="flex flex-row items-center [&>*]:m-2 dark:text-white hover:scale-105"
+	<a href="/obsidian" class="flex flex-row items-center [&>*]:m-2 hover:scale-105"
 		><ObsidianLogo width="40px" height="40px" />Obsidian Plugin</a
 	>
-	<a
-		href="https://elijahpotter.dev"
-		class="flex flex-row items-center [&>*]:m-2 dark:text-white hover:scale-105"
+	<a href="https://elijahpotter.dev" class="flex flex-row items-center [&>*]:m-2 hover:scale-105"
 		><img
 			width="40"
 			height="40"
@@ -50,7 +48,7 @@
 	>
 	<a
 		href="https://marketplace.visualstudio.com/items?itemName=elijah-potter.harper"
-		class="flex flex-row items-center [&>*]:m-2 dark:text-white hover:scale-105"
+		class="flex flex-row items-center [&>*]:m-2 hover:scale-105"
 		><CodeLogo width="40px" height="40px" />Code Plugin</a
 	>
 </div>

diff --git a/packages/web/src/routes/obsidian/+page.svelte b/packages/web/src/routes/obsidian/+page.svelte
@@ -1,36 +1,22 @@
 <script>
 	import GutterCenter from '$lib/GutterCenter.svelte';
 	import Section from '$lib/Section.svelte';
-	import Logo from '$lib/Logo.svelte';
-	import ObsidianLogo from '$lib/ObsidianLogo.svelte';
 	import GitHubLogo from '$lib/GitHubLogo.svelte';
 </script>
 
 <GutterCenter>
-	<div class="flex flex-row justify-center w-full p-8">
-		<div
-			class="flex flex-row items-center md:border-4 justify-evenly p-8 rounded-2xl hover:scale-105 transition-all"
-		>
-			<div class="w-1/3 md:w-64"><Logo /></div>
-			<div class="text-5xl md:m-8 dark:text-white">+</div>
-			<div class="w-1/3 md:w-64"><ObsidianLogo /></div>
-		</div>
-	</div>
-
-	<h1 class="text-5xl font-bold text-center dark:text-white">Harper in Obsidian</h1>
-	<h2 class="text-3xl text-center dark:text-white">
+	<h1 class="text-5xl font-bold text-center">Harper in Obsidian</h1>
+	<h2 class="text-3xl text-center">
 		A Grammar Checker, Now for <b>Everyone</b>
 	</h2>
 
 	<div class="flex flex-row justify-evenly mt-5">
 		<a
 			href="https://github.com/automattic/harper-obsidian-plugin"
-			class="flex flex-row items-center [&>*]:m-2 dark:text-white hover:scale-105 transition-all"
+			class="flex flex-row items-center [&>*]:m-2 hover:scale-105 transition-all"
 			><GitHubLogo width="40px" height="40px" />GitHub</a
 		>
-		<a
-			href="/"
-			class="flex flex-row items-center [&>*]:m-2 dark:text-white hover:scale-105 transition-all"
+		<a href="/" class="flex flex-row items-center [&>*]:m-2 hover:scale-105 transition-all"
 			><span class="text-4xl font-extrabold">?</span>What is Harper?</a
 		>
 	</div>