Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

post live updates #100

Merged
merged 2 commits into from
Nov 19, 2024
+52 −55
Merged

post live updates #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8d0eb7
update title, anchor tag padding, spacing, dev portal top image, clea…
claireolmstead Nov 19, 2024
9b17812
format & remove target blank from learn buttons
claireolmstead Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,7 @@

<meta property="og:title" content="Frequency" />
<meta property="og:url" content="" />
<meta
property="og:description"
content="Frequency fuels the Social Web, putting control & data privacy in your hands."
/>
<meta property="og:description" content="Welcome to the People's Internet." />
<!-- The og:images must be absolute. The assets are in /static -->
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.frequency.xyz/og-preview.png" />
Expand Down
13 changes: 4 additions & 9 deletions src/components/GetNotified/ContactThankYou.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
<script lang="ts">
import ThankYouWaves from '$lib/assets/ThankYouWaves.png';
import ThankYouWaves from '$lib/assets/ThankYouWave.svg';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking this would change to html for the text, but this works I guess? Smaller file for sure


let { onClick = async () => {}, classes = '' } = $props();
let { onClick = async () => {} } = $props();
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="flex items-center justify-center" onclick={onClick}>
<img
class="px-auto mx-auto block {classes}"
width="400"
src={ThankYouWaves}
alt="Frequency waves with 'Thank you!' caption"
/>
<div class="flex cursor-pointer items-center justify-center" onclick={onClick}>
<img src={ThankYouWaves} alt="Frequency waves with 'Thank you!' caption" />
</div>
16 changes: 10 additions & 6 deletions src/components/GetNotified/GetNotified.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { Input, Textarea } from '@frequency-chain/style-guide';
import { dev } from '$app/environment';
import ContactThankYou from '$components/GetNotified/ContactThankYou.svelte';
import { goto } from '$app/navigation';

const fieldMapping = {
name: 'entry.464666765',
Expand Down Expand Up @@ -73,12 +72,16 @@
}
};

const goToTop = async (_e: Event) => {
const resetForm = async (_e: Event) => {
formSuccess = false;
hasSubmittedFormAtLeastOnce = false;
await goto('/');
const form = document.getElementsByTagName('form')[0] as HTMLFormElement;
form.reset();
name = '';
email = '';
isDeveloper = false;
isPartnership = false;
comment = '';
const form = document.getElementById('contact-form') as HTMLFormElement;
if (form) form.reset();
};
</script>

Expand All @@ -90,6 +93,7 @@
novalidate
class="mx-auto mt-f24 justify-center gap-f24"
data-testid="contact-form"
id="contact-form"
>
<Input
label="Name"
Expand Down Expand Up @@ -145,6 +149,6 @@
</button>
</form>
{:else}
<ContactThankYou onClick={goToTop} />
<ContactThankYou onClick={resetForm} />
{/if}
</div>
4 changes: 2 additions & 2 deletions src/components/HAccordion.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@
{@render children()}
</div>
<div class={`flex flex-row ${contentAlignClasses}`}>
<Button id={`explore_${sectionNumber}_button`} size="xs" type="primary" href={url} target="_blank">
Learn <img src={Arrow} width="12px" height="12px" alt="" />
<Button id={`explore_${sectionNumber}_button`} size="xs" type="primary" href={url}>
Learn<img src={Arrow} alt="" class="h-[14px]" />
</Button>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Sections/Ecosystem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
></div>
</div>
</div>
<div class="relative mt-[-100px] bg-navy pb-f64 md:pb-f120">
<div class="relative mt-[-100px] bg-navy pb-f64 md:pb-f96">
<section class="freq-container flex items-center md:px-52">
<div class="flex w-full flex-col gap-f24 lg:w-2/3">
<div class="z-10 flex w-full flex-col gap-f24 lg:w-2/3">
<SlideIn>
<h1 class="title-70 relative z-10 font-title text-white">
Growing into a better <br class="hidden md:inline" />Future Together
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sections/Mission/Mission.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</script>

<SectionWrapper id="mission">
<section class="freq-container mb-f64">
<section class="freq-container pb-f96 pt-f64">
<MissionHeader />
<MissionItems />
</section>
Expand Down
41 changes: 16 additions & 25 deletions src/components/Sections/Top/Top.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,33 @@
// That's to be able to responsively handle the movement of the animation
</script>

<SectionWrapper class="freq-container flex flex-col pb-f64 md:flex-row md:items-center md:justify-center">
<SectionWrapper class="freq-container flex flex-col md:flex-row md:items-center md:justify-center">
<div
class="mb:h-[500px] relative mb-f56 flex h-[300px] w-full self-stretch sm:h-[380px] md:mb-0 md:w-1/2 lg:h-[700px]"
class="mb:h-[500px] relative mb-f56 flex h-[300px] w-full self-stretch xs:h-[380px] md:-ml-f24 md:mb-0 md:w-1/2 lg:h-[700px]"
>
<HomeAnimation />
<div
class="math absolute left-[20px] top-[25%] sm:left-[18%] md:left-[23%] md:top-[calc(85px-((100vw-1300px)*0.075))] lg:top-[calc(250px-((100vw-1300px)*0.075))] xl:top-[220px]"
class="math absolute left-[20px] top-[25%] xs:left-[18%] md:left-[23%] md:top-[calc(85px-((100vw-1300px)*0.075))] lg:top-[calc(250px-((100vw-1300px)*0.075))] xl:top-[220px]"
>
<SlideIn>
<MsaCounter />
</SlideIn>
</div>
</div>
<div class="mx-auto w-full sm:max-w-[360px] md:w-1/2 md:max-w-[300px] md:pl-0 lg:max-w-[380px]">
<SlideIn>
<div
class="font-title text-[44px] leading-[1] tracking-wide text-primary sm:text-left sm:text-[55px] md:text-[55px] lg:text-[70px]"
>
Bringing
</div>
<div
class="relative font-title text-[44px] leading-[1] tracking-wide text-primary sm:text-right sm:text-[55px] md:text-[55px] lg:text-[70px]"
>
Humanity
</div>
<div class="italic text-teal sm:text-[28px] lg:text-[32px]">to the</div>
<div
class="font-title text-[44px] leading-[1] tracking-wide text-primary sm:text-left sm:text-[55px] md:text-[55px] lg:text-[70px]"
>
People's
</div>
<div
class="font-title text-[44px] leading-[1] tracking-wide text-primary sm:text-right sm:text-[55px] md:text-[55px] lg:text-[70px]"
>
Internet
<div class="mx-auto w-auto xs:max-w-[400px] md:w-1/2 md:max-w-[400px] md:pl-0 lg:w-full lg:max-w-[500px]">
<SlideIn class="md:-ml-f16">
<div class="top-title pl-f24 xs:text-left">Welcome</div>
<div class="flex flex-wrap items-center gap-f16">
<div class="whitespace-nowrap italic text-teal xs:text-normal sm:text-lg lg:text-[32px]">to the</div>
<div class="top-title xs:text-left">People's</div>
</div>
<div class="top-title pl-f48">Internet</div>
</SlideIn>
</div>
</SectionWrapper>

<style>
.top-title {
@apply font-title leading-[1] tracking-wide text-primary xs:text-[50px] sm:text-[60px] md:text-[75px] lg:text-[90px];
}
</style>
2 changes: 1 addition & 1 deletion src/components/Sections/Users/Users.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import UsersHeader from './UsersHeader.svelte';
</script>

<SectionWrapper id="users" class="relative bg-navy pb-f128 pt-0 text-white lg:py-f128">
<SectionWrapper id="users" class="relative bg-navy pb-f96 pt-0 text-white lg:py-f128">
<SectionContent class="flex flex-col gap-f56">
<UsersHeader />
<div class="freq-container">
Expand Down
8 changes: 8 additions & 0 deletions src/lib/assets/ThankYouWave.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/lib/assets/ThankYouWaves.png
View file
Open in desktop
Binary file not shown.
6 changes: 4 additions & 2 deletions src/routes/docs/components/DocsMain.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
import SlideIn from '$components/SlideIn.svelte';
</script>

<section class="freq-container flex flex-col lg:flex-row lg:items-center lg:justify-center">
<div class="flex max-h-[500px] w-full self-center lg:h-[700px] lg:w-1/2">
<section
class="freq-container flex flex-col xs:pb-f56 md:pb-f96 lg:flex-row lg:items-center lg:justify-center lg:pb-f24"
>
<div class="flex h-[100vw] w-full self-center xs:max-h-[500px] lg:h-[700px] lg:w-1/2">
<DevPortalAnimation />
</div>
<div class="flex flex-col gap-6 lg:w-1/2">
Expand Down
6 changes: 3 additions & 3 deletions src/routes/docs/components/Explore.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@

<div
id="explore_section"
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"
class="freq-container flex w-full flex-col gap-f12 pb-f96 pt-f56 lg:flex-row lg:gap-0 lg:py-f96"
>
<div id="explore_description" class="relative flex w-full flex-row px-f32 text-teal lg:w-1/2 lg:pt-f96">
<div id="explore_description" class="relative flex w-full flex-row text-teal md:px-f32 lg:w-1/2 lg:pt-f96">
<div class="flex flex-col gap-f32">
<SlideIn>
<span class="title-h2 mt-f8 text-clip text-wrap">Explore &amp; Build</span>
</SlideIn>
<div class="body pb-f64 text-white md:pb-f80">
<div class="body pb-f64 text-white xs:pb-f32 md:pb-f80">
Frequency offers simple blockchain integration for your applications&mdash;bridging the gap between your app and
the decentralized web. Frequency Developer Gateway offers a suite of self-hosted tools and services that make it
easy to connect your applications to Frequency. This allows your developer team to focus on building outstanding
Expand Down
Loading