Skip to content

Commit

Permalink
style: increase font sizing
Browse files Browse the repository at this point in the history
  • Loading branch information
@deansallinen
deansallinen committed Oct 25, 2024
1 parent 7df72a3 commit 5a00f23
Show file tree
Hide file tree
Showing 8 changed files with 50 additions and 47 deletions.
8 changes: 5 additions & 3 deletions src/lib/components/footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 3 additions & 4 deletions src/lib/components/input/search.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@
items-center
justify-end
text-nowrap
rounded-lg
bg-transparent
py-3.5
text-base
Expand All @@ -178,18 +179,16 @@
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
md:py-2
{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}
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/navigation/mobilenavigation.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
flex
h-10
items-center
gap-1
gap-2
text-nowrap
rounded-lg
py-3.5
Expand All @@ -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>

Expand Down
13 changes: 7 additions & 6 deletions src/lib/components/select/account.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@
focus-visible:ring-2
focus-visible:ring-inset
focus-visible:ring-solar-500
md:h-7
{className}
"
use:melt={$trigger}
Expand All @@ -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
>
Expand Down
19 changes: 9 additions & 10 deletions src/routes/[network]/(homepage)/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
import Button from '$lib/components/button/button.svelte';
import EOS from '$lib/assets/[email protected]';
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';
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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`,
Expand Down Expand Up @@ -239,8 +240,6 @@
</Card>
</div>
</section>

<Footer />
</Subgrid>

<style>
Expand Down
16 changes: 8 additions & 8 deletions src/routes/[network]/(homepage)/components/tlvhex.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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>
2 changes: 2 additions & 0 deletions src/routes/[network]/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -121,6 +122,7 @@
>
{@render children()}
</main>
<Footer />
</div>

<!-- This wrapper sets up the bottom menu on mobile, becomes hidden on desktop -->
Expand Down
26 changes: 13 additions & 13 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down

0 comments on commit 5a00f23

Please sign in to comment.