From 5a00f231e79d4551bfda90cc1e162ca89e14331d Mon Sep 17 00:00:00 2001
From: Dean Sallinen <7519573+deansallinen@users.noreply.github.com>
Date: Fri, 25 Oct 2024 14:46:19 -0700
Subject: [PATCH] style: increase font sizing

---
 src/lib/components/footer.svelte              |  8 +++---
 src/lib/components/input/search.svelte        |  7 +++--
 .../navigation/mobilenavigation.svelte        |  6 ++---
 src/lib/components/select/account.svelte      | 13 +++++-----
 src/routes/[network]/(homepage)/+page.svelte  | 19 +++++++-------
 .../(homepage)/components/tlvhex.svelte       | 16 ++++++------
 src/routes/[network]/+layout.svelte           |  2 ++
 tailwind.config.js                            | 26 +++++++++----------
 8 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte
index 44015d8a3..ef347e07c 100644
--- a/src/lib/components/footer.svelte
+++ b/src/lib/components/footer.svelte
@@ -78,17 +78,19 @@
 	];
 </script>
 
-<footer class="col-span-full mt-20 grid grid-cols-subgrid border-t border-white/10 py-8">
+<footer
+	class="col-span-full mt-20 grid grid-cols-subgrid border-t border-white/10 py-8 md:col-start-3 md:col-end-12"
+>
 	<nav class="col-span-full grid grid-cols-subgrid gap-y-8">
 		<UnicoveLogo wordmark class="justify-self-start md:col-span-2 xl:col-span-1" />
 		<menu class="contents">
 			{#each data as { title, links }}
 				<li class="space-y-2 md:col-span-2 xl:col-span-1">
-					<h3 class="text-base font-semibold text-white/60">{title}</h3>
+					<h3 class="text-sm font-semibold text-white/60">{title}</h3>
 					<ul class="space-y-1">
 						{#each links as { name, href }}
 							<li>
-								<a {href} class=" text-base hover:underline">{name}</a>
+								<a {href} class="text-sm hover:underline">{name}</a>
 							</li>
 						{/each}
 					</ul>
diff --git a/src/lib/components/input/search.svelte b/src/lib/components/input/search.svelte
index 78fdd2998..d76a1cda2 100644
--- a/src/lib/components/input/search.svelte
+++ b/src/lib/components/input/search.svelte
@@ -170,6 +170,7 @@
 	items-center
 	justify-end
 	text-nowrap
+	rounded-lg
 	bg-transparent
 	py-3.5
 	text-base
@@ -178,9 +179,7 @@
 	text-neutral-400
 	focus:outline-none
 	focus-visible:border-solar-500
-	md:h-7
 	md:justify-between
-	md:rounded-lg
 	md:border
 	md:border-white/20
 	md:px-2
@@ -188,8 +187,8 @@
 	{className}
 	"
 >
-	<span>Search<span class="hidden md:inline">...</span> </span>
-	<SearchIcon class="ml-2 size-4 text-inherit" />
+	<span class="hidden md:inline">Search... </span>
+	<SearchIcon class="ml-2 size-6 text-inherit md:size-5" />
 </button>
 
 {#if $open}
diff --git a/src/lib/components/navigation/mobilenavigation.svelte b/src/lib/components/navigation/mobilenavigation.svelte
index e640097a4..d56f2e78f 100644
--- a/src/lib/components/navigation/mobilenavigation.svelte
+++ b/src/lib/components/navigation/mobilenavigation.svelte
@@ -48,7 +48,7 @@
 	flex
 	h-10
 	items-center
-	gap-1
+	gap-2
 	text-nowrap
 	rounded-lg
 	py-3.5
@@ -69,8 +69,8 @@
 	id="menu-open"
 	data-session={!!context.wharf.session}
 >
-	<UnicoveLogo small href="/{network}" class="size-6 w-min place-self-center" />
-	<Menu class="size-6 text-inherit" />
+	<UnicoveLogo small href="/{network}" class="size-8 w-min place-self-center" />
+	<Menu class="size-8 text-inherit" />
 	<!-- <span>Menu</span> -->
 </button>
 
diff --git a/src/lib/components/select/account.svelte b/src/lib/components/select/account.svelte
index 7b8bb7cc4..2e14a8b51 100644
--- a/src/lib/components/select/account.svelte
+++ b/src/lib/components/select/account.svelte
@@ -79,7 +79,6 @@
 	focus-visible:ring-2
 	focus-visible:ring-inset
 	focus-visible:ring-solar-500
-	md:h-7
 	{className}
 	"
 	use:melt={$trigger}
@@ -89,11 +88,13 @@
 >
 	{#if context.wharf.session}
 		<div class="flex items-center gap-2 pl-3.5 pr-4">
-			<img
-				src={String(logo)}
-				alt={context.wharf.session.chain.name}
-				class="size-5 object-contain md:size-4"
-			/>
+			<picture class="size-5">
+				<img
+					src={String(logo)}
+					alt={context.wharf.session.chain.name}
+					class="size-full object-contain"
+				/>
+			</picture>
 			<span class="pointer-events-none z-10 text-base text-white/90"
 				>{context.wharf.session.actor}</span
 			>
diff --git a/src/routes/[network]/(homepage)/+page.svelte b/src/routes/[network]/(homepage)/+page.svelte
index 25337d742..f921eb5a2 100644
--- a/src/routes/[network]/(homepage)/+page.svelte
+++ b/src/routes/[network]/(homepage)/+page.svelte
@@ -5,7 +5,6 @@
 	import Button from '$lib/components/button/button.svelte';
 	import EOS from '$lib/assets/EOS@2x.svg';
 	import Metamask from '$lib/assets/metamask.svg';
-	import Footer from '$lib/components/footer.svelte';
 
 	import TLVHex from './components/tlvhex.svelte';
 	import { type Snippet } from 'svelte';
@@ -27,8 +26,8 @@
 	children?: Snippet;
 	button?: { text: string; href: string };
 })}
-	<Stack class="max-w-sm items-start">
-		<h3 class="h3">{props.title}</h3>
+	<Stack class="max-w-md items-start">
+		<h3 class="h3 leading-tight">{props.title}</h3>
 		<p>{props.text}</p>
 		{#if props.button && props.button.href}
 			<Button href={props.button.href}>{props.button.text}</Button>
@@ -47,12 +46,14 @@
 	>
 		<!-- Text block -->
 		<Stack
-			class="z-10 col-span-full col-start-1 row-start-1 items-start xs:col-span-3 xs:col-start-1 sm:col-span-3 sm:col-start-1 sm:row-start-1 sm:max-w-sm sm:place-self-center md:col-span-6 md:col-start-1 md:max-w-lg md:place-self-auto  xl:col-start-2 "
+			class="z-10 col-span-full col-start-1 row-start-1 items-start xs:col-span-3 xs:col-start-1 sm:col-span-3 sm:col-start-1 sm:row-start-1 sm:max-w-sm sm:place-self-center md:col-span-6 md:col-start-1 md:max-w-xl md:place-self-auto"
 		>
-			<h1 class="text-balance text-4xl font-bold leading-tight md:text-6xl">
+			<h1 class="text-balance text-4xl font-bold leading-tight md:text-5xl md:leading-tight">
 				Unicove is your gateway to the EOS Network
 			</h1>
-			<p class="text-balance text-2xl text-white/60 md:text-3xl">
+			<p
+				class="mb-2 text-balance text-2xl leading-tight text-white/60 md:text-3xl md:leading-tight"
+			>
 				Stake, Send, Manage Tokens, and Explore EOS – all with ease
 			</p>
 			<Button href={`/${data.network}/signup`}>Create your EOS account now</Button>
@@ -139,10 +140,10 @@
 		</div>
 	</section>
 
-	<section class="col-span-full grid grid-cols-subgrid gap-4 xl:col-start-2 xl:col-end-9">
+	<section class="col-span-full grid grid-cols-subgrid gap-8">
 		<!-- Text -->
 		<div
-			class="z-20 col-span-full row-start-1 max-w-xs place-self-center justify-self-start text-balance xs:col-span-1 sm:col-span-full sm:justify-self-auto md:row-span-2 md:row-start-1 lg:col-span-4 lg:row-auto lg:content-center"
+			class="z-20 col-span-full row-start-1 max-w-md place-self-center justify-self-start text-balance xs:col-span-1 sm:col-span-full sm:justify-self-auto md:row-span-2 md:row-start-1 md:max-w-md lg:col-span-4 lg:row-auto lg:content-center"
 		>
 			{@render textblock({
 				title: `Stake your tokens for ${APY}% APY`,
@@ -239,8 +240,6 @@
 			</Card>
 		</div>
 	</section>
-
-	<Footer />
 </Subgrid>
 
 <style>
diff --git a/src/routes/[network]/(homepage)/components/tlvhex.svelte b/src/routes/[network]/(homepage)/components/tlvhex.svelte
index e4894f5bd..f8be48f62 100644
--- a/src/routes/[network]/(homepage)/components/tlvhex.svelte
+++ b/src/routes/[network]/(homepage)/components/tlvhex.svelte
@@ -8,7 +8,7 @@
 	<!-- Big hex -->
 	<div class="grid place-items-center *:col-start-1 *:row-start-1">
 		<svg
-			class="size-56 object-contain md:size-full"
+			class="size-64 object-contain md:size-full"
 			width="296"
 			height="342"
 			viewBox="0 0 296 342"
@@ -20,18 +20,18 @@
 				fill="#202429"
 			/>
 		</svg>
-		<div class="grid gap-2 text-center uppercase">
-			<img class="mb-3 h-10 place-self-center md:h-20" src={EOS} alt="eos" />
-			<span class="text-base text-white/60 md:text-lg">Total locked value</span>
+		<div class="grid text-center uppercase">
+			<img class="mb-4 h-12 place-self-center md:h-20" src={EOS} alt="eos" />
+			<span class="text-sm text-white/60 md:text-lg">Total locked value</span>
 			<!-- TODO: add eos formatter -->
-			<span class="text-lg font-semibold md:text-2xl">{TLV} EOS</span>
+			<span class="text-md font-semibold md:text-2xl">{TLV} EOS</span>
 		</div>
 	</div>
 
 	<!-- Small hex -->
 	<div class="absolute -bottom-4 -right-2 grid place-items-center *:col-start-1 *:row-start-1">
 		<svg
-			class="size-20 object-contain md:size-full"
+			class="size-24 object-contain md:size-full"
 			width="95"
 			height="110"
 			viewBox="0 0 95 110"
@@ -44,8 +44,8 @@
 			/>
 		</svg>
 		<div class="grid text-center uppercase">
-			<span class="text-base text-white/60 md:text-lg">APY</span>
-			<span class="text-lg font-semibold md:text-2xl">{APY}%</span>
+			<span class="text-sm text-white/60 md:text-lg">APY</span>
+			<span class="text-md font-semibold md:text-2xl">{APY}%</span>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/[network]/+layout.svelte b/src/routes/[network]/+layout.svelte
index 23a39eb3e..56c8f584d 100644
--- a/src/routes/[network]/+layout.svelte
+++ b/src/routes/[network]/+layout.svelte
@@ -7,6 +7,7 @@
 	import AccountSwitcher from '$lib/components/select/account.svelte';
 	import UnicoveLogo from '$lib/assets/unicovelogo.svelte';
 	import Search from '$lib/components/input/search.svelte';
+	import Footer from '$lib/components/footer.svelte';
 
 	let { children, data } = $props();
 
@@ -121,6 +122,7 @@
 	>
 		{@render children()}
 	</main>
+	<Footer />
 </div>
 
 <!-- This wrapper sets up the bottom menu on mobile, becomes hidden on desktop -->
diff --git a/tailwind.config.js b/tailwind.config.js
index 1692ea322..753dc4466 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,19 +5,19 @@ import containerQueries from '@tailwindcss/container-queries';
 export default {
 	content: ['./src/**/*.{svelte,html,js,ts}'],
 	theme: {
-		fontSize: {
-			xs: ['8px', '0.75rem'], // 8px
-			sm: ['0.625rem', '1rem'], // 10px
-			base: ['0.75rem', '1rem'], // 12px
-			lg: ['0.875rem', '1.25rem'], // 14px
-			xl: ['1rem', '1.5rem'], // 16px
-			'2xl': ['1.125rem', '1.75rem'], // 18px
-			'3xl': ['1.25rem', '1.75rem'], // 20px
-			'4xl': ['1.5rem', '2rem'], // 24px
-			'5xl': ['1.875rem', '2.25rem'], // 30px
-			'6xl': ['2.25rem', '2.5rem'], // 36px
-			'7xl': ['3rem', '1'] // 48px
-		},
+		// fontSize: {
+		// 	xs: ['8px', '0.75rem'], // 8px
+		// 	sm: ['0.625rem', '1rem'], // 10px
+		// 	base: ['0.75rem', '1rem'], // 12px
+		// 	lg: ['0.875rem', '1.25rem'], // 14px
+		// 	xl: ['1rem', '1.5rem'], // 16px
+		// 	'2xl': ['1.125rem', '1.75rem'], // 18px
+		// 	'3xl': ['1.25rem', '1.75rem'], // 20px
+		// 	'4xl': ['1.5rem', '2rem'], // 24px
+		// 	'5xl': ['1.875rem', '2.25rem'], // 30px
+		// 	'6xl': ['2.25rem', '2.5rem'], // 36px
+		// 	'7xl': ['3rem', '1'] // 48px
+		// },
 		extend: {
 			screens: {
 				xs: '480px'