Skip to content

Commit acb35d3

Browse files
wilwadewilwade
committed
Cleanup: Font sizes (#94)
# Description Various font sizes needed tweaking - Part of #78 - All fonts should be correctly (or extremely closely) sized to the design - All body fonts should be "body" instead of `text-*` - Everything should be responsive all the way from xs->xl
1 parent 195aadf commit acb35d3

17 files changed

+58
-60
lines changed

‎src/components/GetNotified/GetNotified.svelte

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484

8585
<div class="mx-auto w-full p-[36px] sm:max-w-[396px] md:p-0 md:py-[96px]">
8686
{#if !formSuccess}
87-
<h3 class="h3 font-bold">Contact</h3>
87+
<h3 class="title-h3">Contact</h3>
8888
<form
8989
on:submit|preventDefault={submit}
9090
novalidate
@@ -111,18 +111,18 @@
111111
class="required mb-f4 text-black"
112112
error={hasSubmittedFormAtLeastOnce && !email?.length ? errorText : undefined}
113113
/>
114-
<div class="mb-f4 flex">
114+
<div class="mb-f4 mt-f8 flex flex-col gap-f12 sm:flex-row sm:gap-f32">
115115
<label class="inline-flex items-center hover:cursor-pointer">
116116
<input type="checkbox" bind:checked={isDeveloper} class="text-white accent-tealBright hover:cursor-pointer" />
117-
<span class="ml-2 text-sm font-[300]">Development</span>
117+
<span class="ml-2 text-normal">Development</span>
118118
</label>
119-
<label class="leading ml-[56px] inline-flex items-center hover:cursor-pointer">
119+
<label class="leading inline-flex items-center hover:cursor-pointer">
120120
<input
121121
type="checkbox"
122122
bind:checked={isPartnership}
123123
class="form-checkbox text-white accent-tealBright hover:cursor-pointer"
124124
/>
125-
<span class="ml-2 text-sm font-[300]">Partnerships</span>
125+
<span class="ml-2 text-normal">Partnerships</span>
126126
</label>
127127
</div>
128128
<div class="w-full">

‎src/components/HAccordion.svelte

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,36 +36,33 @@
3636
<div
3737
id={`explore_${sectionNumber}`}
3838
onclick={toggle}
39-
class={`flex flex-col ${borderClasses} border-grayBorder px-f32 lg:pb-f96 lg:pt-f96 lg:transition-all ${isOpen ? 'lg:w-[316px]' : 'shrink-0 lg:w-[132px] lg:cursor-pointer'}`}
39+
class={`flex flex-col ${borderClasses} border-grayBorder px-f32 lg:pb-f96 lg:pt-f96 lg:transition-all ${isOpen ? 'lg:w-[316px] xl:w-[400px]' : 'shrink-0 lg:w-[140px] lg:cursor-pointer'}`}
4040
>
41-
<div class={`-mt-[9px] text-clip text-nowrap font-title text-h3 font-normal text-white ${textAlignClasses}`}>
41+
<div class={`-mt-[9px] text-clip text-nowrap font-title text-[40px] text-white sm:text-[44px] ${textAlignClasses}`}>
4242
.{parseInt(sectionNumber, 10).toString().padStart(2, '0')}
4343
</div>
4444
{#if iconSrc}
4545
<div
4646
id={`explore_${sectionNumber}_icon`}
4747
class={`flex w-full flex-row pt-[6px] lg:justify-normal ${contentAlignClasses} `}
4848
>
49-
<img src={iconSrc as string} alt="" class="h-[65px] w-[65px]" />
49+
<img src={iconSrc as string} alt="" class="h-[62px] w-[62px] md:h-[65px] md:w-[65px] lg:h-[74px] lg:w-[74px]" />
5050
</div>
5151
{/if}
52-
<div
53-
id={`explore_${sectionNumber}_label`}
54-
class={`text-clip text-wrap pt-6 font-title text-h6 font-normal text-white ${textAlignClasses}`}
55-
>
52+
<div id={`explore_${sectionNumber}_label`} class={`title-h6 text-clip text-wrap pt-6 text-white ${textAlignClasses}`}>
5653
{@render sectionLabel()}
5754
</div>
5855

5956
<div class={`lg:transition-all ${isOpen ? 'block' : 'block lg:hidden'}`}>
6057
<div
6158
id={`explore_${sectionNumber}_content`}
62-
class={`sm overflow-hidden pb-f12 pl-0 pr-f8 pt-4 text-white md:max-w-full ${textAlignClasses}`}
59+
class={`body overflow-hidden pb-f12 pl-0 pr-f8 pt-4 text-white md:max-w-full ${textAlignClasses}`}
6360
>
6461
{@render children()}
6562
</div>
6663
<div class={`flex flex-row ${contentAlignClasses}`}>
6764
<Button id={`explore_${sectionNumber}_button`} size="xs" type="primary" href={url} target="_blank">
68-
<span class=" text-xs text-black">Learn</span> <img src={Arrow} width="12px" height="12px" alt="" />
65+
Learn <img src={Arrow} width="12px" height="12px" alt="" />
6966
</Button>
7067
</div>
7168
</div>

‎src/components/JoinSocials.svelte

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/Sections/About.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<h2 class="title-70 pb-f24 pt-f12 text-primary">What is<br /> Frequency?</h2>
1818
</SlideIn>
1919

20-
<SectionParagraph class="text-sm md:max-w-[415px] lg:max-w-[415px]">
20+
<SectionParagraph class="body md:max-w-[415px] lg:max-w-[415px]">
2121
Frequency is a blockchain designed to support decentralized social networks to give people control over their
2222
online presence. With Frequency, users can freely choose and connect on social apps while retaining ownership of
2323
their data. Built on the Decentralized Social Networking Protocol (<a

‎src/components/Sections/DeveloperSteps.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
88
import { DeveloperStepsText } from '$lib/consts';
99
10-
const sectionParagraphClasses = 'text-sm mt-f8';
10+
const sectionParagraphClasses = 'body mt-f8';
1111
const sectionClasses = 'mt-[48px] ml-[30px] mr-[30px]';
12-
const stepTitleClasses = 'text-h3 font-bold text-primary leading-0';
12+
const stepTitleClasses = 'title-h3 text-primary leading-0';
1313
</script>
1414

1515
<div class="hidden lg:block">
@@ -26,7 +26,7 @@
2626
</div>
2727
</div>
2828
<!-- STEP TWO -->
29-
<div class="flex pt-[36px]" id="step-2">
29+
<div class="flex pt-[60px]" id="step-2">
3030
<CircleTwo />
3131
<div class={sectionClasses}>
3232
<h3 class={stepTitleClasses}>{DeveloperStepsText.two.title}</h3>
@@ -49,7 +49,7 @@
4949
</div>
5050
</div>
5151
<!-- STEP FOUR -->
52-
<div class="flex pt-[36px]" id="step-4">
52+
<div class="flex pt-[60px]" id="step-4">
5353
<CircleFour />
5454
<div class={sectionClasses}>
5555
<h3 class={stepTitleClasses}>{DeveloperStepsText.four.title}</h3>

‎src/components/Sections/DeveloperStepsMobile.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
88
import { DeveloperStepsText } from '$lib/consts';
99
10-
const sectionParagraphClasses = 'text-normal mt-f12 leading-[20px]';
11-
const stepTitleClasses = 'text-h3 font-bold text-primary';
10+
const sectionParagraphClasses = 'body mt-f12 leading-[20px]';
11+
const stepTitleClasses = 'title-h3 text-primary';
1212
const circleWidth = '60';
1313
const sectionClasses = 'flex flex-col';
1414
const stepClasses = 'py-[4px] flex flex-col';

‎src/components/Sections/DeveloperStepsTablet.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
88
import { DeveloperStepsText } from '$lib/consts';
99
10-
const sectionParagraphClasses = 'text-[12px] mt-[16px] min-h-[100px]';
10+
const sectionParagraphClasses = 'body mt-[16px] min-h-[100px]';
1111
const stepTextClasses = '';
12-
const stepTitleClasses = 'text-[40px] font-bold text-primary';
12+
const stepTitleClasses = 'text-[40px] font-title text-primary';
1313
const stepClasses = 'flex flex-col';
1414
const circleWidth = '60';
1515
</script>

‎src/components/Sections/Developers.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
<SectionWrapper id="developers" class="pt-[30px] md:pt-[38px] lg:pt-[34px]">
1515
<section class="mx-auto flex max-w-screen-xl flex-col lg:flex-row">
1616
<DeveloperAnimation class="mx-auto max-h-[260px] md:max-h-[300px] md:max-w-[800px] lg:max-h-none" />
17-
<div class="freq-container lg:mt-[36px]">
17+
<div class="freq-container-padding lg:mt-[36px]">
1818
<SlideIn class="lg:basis-1/3]">
19-
<h2 class="title-70 mx-0 w-full font-bold text-teal md:mt-[24px] md:max-w-[400px]">
19+
<h2 class="title-70 mx-0 w-full text-teal md:mt-[24px] md:max-w-[400px]">
2020
{DeveloperStepsText.header.title}
2121
</h2>
22-
<p class="mt-f24 text-[18px] font-bold md:text-[22px]">{DeveloperStepsText.header.text_html}</p>
22+
<p class="title-h5 mt-f24">{DeveloperStepsText.header.text_html}</p>
2323
</SlideIn>
2424
</div>
2525
</section>

‎src/components/Sections/Ecosystem.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<h1 class="title-70 relative z-10 font-title text-white">
2323
Growing into a better <br class="hidden md:inline" />Future Together
2424
</h1>
25-
<p class="my-6 text-white md:pr-20">
25+
<p class="body my-6 text-white md:pr-20">
2626
Frequency is leading a new era of social networking, empowering businesses and apps to help users unlock the
2727
value of their data and connections. Chosen as the core infrastructure for Project Liberty’s “People’s Bid” to
2828
acquire TikTok US, Frequency fosters a collaborative, decentralizing environment where communities can thrive

‎src/components/Sections/Mission/MissionHeader.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@
77
<h2 class="title-70 pb-f24 text-primary">Frequency’s Mission</h2>
88
</SlideIn>
99
<SlideIn>
10-
<h5
11-
class="pb-f64 text-h6 font-bold sm:max-w-[400px] sm:leading-default lg:max-w-[620px] lg:text-h5 lg:leading-[32px]"
12-
>
10+
<h5 class="title-h5 pb-f64 sm:max-w-[400px] sm:leading-default lg:max-w-[620px] lg:leading-[32px]">
1311
Frequency's Mission is to provide the infrastructure to empower people by:
1412
</h5>
1513
</SlideIn>

‎src/components/Sections/Mission/MissionItem.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<span class="absolute left-0 top-f24 w-f160 border-b-2 border-gray3"></span>
1313
</div>
1414
<!-- right column-->
15-
<div class="relative flex max-w-[calc(100%-48px)] flex-col pl-f24 pt-f48 text-sm">
15+
<div class="body relative flex max-w-[calc(100%-48px)] flex-col pl-f24 pt-f48">
1616
<!-- vertical border-->
1717
<span class="absolute left-0 top-f12 h-f120 border-l-2 border-gray3"></span>
1818
<!-- body-->

‎src/components/Sections/Mission/MissionStatement.svelte

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="bg-navy py-f24 text-white">
2-
<div class="freq-container flex items-center justify-center gap-f24">
3-
<h2 class="title-70 sm:text-h1 md:text-[70px]">Your:</h2>
2+
<div class="flex items-center justify-center gap-f12 md:gap-f24">
3+
<h2 class="title-70 text-[30px] sm:text-[46px] md:text-[70px]">Your:</h2>
44
<div class="flex flex-col">
5-
<span class="font-thin opacity-40 sm:text-[30px] md:text-[50px]">Followers</span>
6-
<span class="font-thin sm:text-[50px] md:text-[70px]">Network</span>
7-
<span class="font-thin opacity-40 sm:text-[30px] md:text-[50px]">Content</span>
5+
<span class="text-[20px] font-thin opacity-40 sm:text-[30px] md:text-[50px]">Followers</span>
6+
<span class="text-[30px] font-thin sm:text-[48px] md:text-[70px]">Network</span>
7+
<span class="text-[20px] font-thin opacity-40 sm:text-[30px] md:text-[50px]">Content</span>
88
</div>
99
</div>
1010
</div>

‎src/components/Sections/Users/UsersHeader.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<h2 class="title-70 pb-f24">User<br /> Advantages</h2>
1919
</SlideIn>
2020
</div>
21-
<p class="max-w-[900px] text-h6 font-bold leading-default lg:text-h5 lg:leading-[32px]">
21+
<p class="title-h5 max-w-[900px] leading-default lg:leading-[32px]">
2222
On most social media platforms, you get a stark choice: accept the platform as is, or leave the platform, your
2323
friends and your relationships behind. Frequency changes all of this by offering users control, community, and
2424
ownership over their online experience.

‎src/components/Sections/Users/UsersItem.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<div class="max-w-full md:max-w-[500px] lg:max-w-[370px]">
88
<div class="flex items-center gap-f16 pb-f16 md:gap-f32">
99
<img src={icon} alt={iconAlt} />
10-
<h3 class="title-44">{title}</h3>
10+
<h3 class="title-h3">{title}</h3>
1111
</div>
1212

13-
<div class="text-sm">
13+
<div class="body">
1414
<slot name="body" />
1515
</div>
1616
</div>

‎src/routes/docs/components/DocsMain.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<DevPortalAnimation />
88
</div>
99
<div class="flex flex-col gap-6 lg:w-1/2">
10-
<h2 class="title-70 text-h2 text-primary">Get Started with Frequency Development</h2>
11-
<p class="body text-h5 font-bold text-black sm:text-normal">
10+
<h1 class="title-70 text-primary">Get Started with Frequency Development</h1>
11+
<p class="title-h5 text-black">
1212
Frequency offers a variety of open source tools and documentation in the Developers Portal to help you rapidly get
1313
applications up and running on Frequency.
1414
</p>

‎src/routes/docs/components/Explore.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@
2626

2727
<div
2828
id="explore_section"
29-
class="freq-container mt-f96 flex w-full flex-col gap-f12 pb-f96 pt-f20 lg:flex-row lg:gap-0 lg:px-f128 lg:py-f96"
29+
class="freq-container mt-f96 flex w-full flex-col gap-f12 pb-f96 pt-f20 lg:flex-row lg:gap-0 lg:py-f96"
3030
>
3131
<div id="explore_description" class="relative flex w-full flex-row px-f32 text-teal lg:w-1/2 lg:pt-f96">
3232
<div class="flex flex-col gap-f32">
33-
<span class="h1 mt-f8 text-clip text-wrap font-title font-normal">Explore &amp; Build</span>
33+
<span class="title-h2 mt-f8 text-clip text-wrap">Explore &amp; Build</span>
3434

35-
<div class="pb-f64 text-sm text-white md:pb-f80">
35+
<div class="body pb-f64 text-white md:pb-f80">
3636
Frequency offers simple blockchain integration for your applications&mdash;bridging the gap between your app and
3737
the decentralized web. Frequency Developer Gateway offers a suite of self-hosted tools and services that make it
3838
easy to connect your applications to Frequency. This allows your developer team to focus on building outstanding
@@ -51,7 +51,7 @@
5151

5252
<!-- min width selected based on description section + 1 open accordion + 3 closed accordions -->
5353
<div class="w-full sm:px-f32 sm:py-f16">
54-
<div class="grid grid-cols-1 gap-x-f4 gap-y-f48 md:grid-cols-2 lg:flex lg:h-[615px]">
54+
<div class="grid grid-cols-1 gap-x-f4 gap-y-f48 md:grid-cols-2 lg:flex lg:h-[850px] xl:h-[700px]">
5555
<HAccordion
5656
sectionNumber="1"
5757
iconSrc={ProviderIcon}

‎src/style/app.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,28 @@
2626
.title-100 {
2727
@apply font-title text-[55px] leading-[1] tracking-wide md:text-[75px] lg:text-[100px];
2828
}
29+
30+
.title-h2 {
31+
@apply font-title text-[50px] leading-[1] tracking-wider md:text-[60px] lg:text-[64px];
32+
}
33+
34+
.title-h3 {
35+
@apply font-title text-[40px] leading-[1] tracking-wider md:text-[40px] lg:text-[44px];
36+
}
37+
38+
.title-h5 {
39+
@apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[26px];
40+
}
41+
42+
.title-h6 {
43+
@apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[22px];
44+
}
45+
2946
.subtitle {
3047
@apply text-lg font-semibold md:text-lg lg:text-xl;
3148
}
3249
.body {
33-
@apply text-xs md:text-sm lg:text-normal;
50+
@apply text-normal md:text-md;
3451
}
3552

3653
/* Layout */

0 commit comments

Comments
 (0)