Skip to content

Commit

Permalink
post live updates pt. 2 (#101)
Browse files Browse the repository at this point in the history
# Description
- remove unused image files
- refactor assets directory
- update static images
- implement mission statement animation

- Closes #99 

## Screenshot(s)


https://github.com/user-attachments/assets/94791c25-5270-41e7-9d51-aa93d568407a

## Type of change
- Post live updates

# How to Test?
- make sure the spinner looks good in all screen sizes
- make sure static images look good
- make sure we're not missing any icons

# Checklist:

- [x] I have performed a self-review of my code
- [x] I have commented my code & PR, particularly in hard-to-understand
areas
- [x] I have checked at all the breakpoints to make sure it works on all
screen sizes

---------

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>
  • Loading branch information
claireolmstead and claireolmstead authored Nov 21, 2024
1 parent cb2c78f commit 9d905b3
Show file tree
Hide file tree
Showing 32 changed files with 134 additions and 344 deletions.
2 changes: 1 addition & 1 deletion src/components/HAccordion.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher, type Snippet } from 'svelte';
import { Button } from '@frequency-chain/style-guide';
import Arrow from '../lib/assets/arrow-right.svg';
import Arrow from '$lib/assets/UIIcons/arrow-right.svg';
import { MAX_MOBILE_WIDTH } from '$lib/consts';
const dispatch = createEventDispatcher();
Expand Down
4 changes: 2 additions & 2 deletions src/components/Sections/Ecosystem.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import SectionWrapper from './SectionWrapper.svelte';
import TikTokTag from '../TikTokTag.svelte';
import WavesTwo from '$lib/assets/waves-two.svg';
import MeWeLogo from '$lib/assets/ecosystem/mewe.svg';
import SoarLogo from '$lib/assets/ecosystem/soar.svg';
import MeWeLogo from '$lib/assets/EcosystemIcons/mewe.svg';
import SoarLogo from '$lib/assets/EcosystemIcons/soar.svg';
import SlideIn from '../SlideIn.svelte';
const logoClasses = 'max-h-[120px] px-3 py-5 w-full sm:w-1/2 lg:w-1/4';
Expand Down
134 changes: 127 additions & 7 deletions src/components/Sections/Mission/MissionStatement.svelte
Original file line number Diff line number Diff line change
@@ -1,10 +1,130 @@
<div class="bg-navy py-f24 text-white">
<div class="flex items-center justify-center gap-f12 md:gap-f24">
<h2 class="title-70 text-[30px] sm:text-[46px] md:text-[70px]">Your:</h2>
<div class="flex flex-col">
<span class="text-[20px] font-thin opacity-40 sm:text-[30px] md:text-[50px]">Followers</span>
<span class="text-[30px] font-thin sm:text-[48px] md:text-[70px]">Network</span>
<span class="text-[20px] font-thin opacity-40 sm:text-[30px] md:text-[50px]">Content</span>
<div class="flex items-center justify-center gap-f12 bg-navy text-white md:gap-f24">
<h2 class="title-70 text-[48px] md:text-[70px]">Your:</h2>

<div class="h-[240px] overflow-hidden">
<div class="text-slider-container">
<span class="slider-item" id="first">Content</span>
<span class="slider-item" id="second">Followers</span>
<span class="slider-item" id="third">Network</span>
<span class="slider-item" id="fourth">Content</span>
<span class="slider-item" id="fifth">Followers</span>
<span class="slider-item" id="sixth">Network</span>
</div>
</div>
</div>

<style>
.text-slider-container {
@apply flex flex-col gap-0;
animation: text-slide 10s linear infinite;
}
.slider-item {
@apply flex h-[80px] origin-[center_left] items-center text-[48px] font-thin md:text-[70px];
}
/*Text Slider Items bold and scale animations*/
#first {
scale: 0.75;
opacity: 0.33;
}
#second {
animation: second 10s linear infinite -0.2s;
}
#third {
animation: third 10s linear infinite;
}
#fourth {
animation: fourth 10s linear infinite;
}
#fifth {
animation: fifth 10s linear infinite;
}
#sixth {
scale: 0.75;
opacity: 0.33;
}
/*Followers bold and scale animation*/
@keyframes second {
0%,
20% {
transform: scale(1);
opacity: 1;
}
33.33%,
100% {
transform: scale(0.75);
opacity: 0.33;
}
}
/*Network bold and scale animation*/
@keyframes third {
0%,
20% {
transform: scale(0.75);
opacity: 0.33;
}
33.33%,
53.33% {
transform: scale(1);
opacity: 1;
}
66.66%,
100% {
transform: scale(0.75);
opacity: 0.33;
}
}
/*Content bold and scale animation*/
@keyframes fourth {
0%,
53.33% {
transform: scale(0.75);
opacity: 0.33;
}
66.66%,
86.66% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.75);
opacity: 0.33;
}
}
/*Followers 2 bold and scale animation*/
@keyframes fifth {
0%,
86.66% {
transform: scale(0.75);
opacity: 0.33;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Animation to slide all text */
@keyframes text-slide {
0%,
20% {
transform: translateY(0);
}
33.33%,
53.33% {
transform: translateY(-80px);
}
66.66%,
86.66% {
transform: translateY(-160px);
}
100% {
transform: translateY(-240px);
}
}
</style>
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
31 changes: 0 additions & 31 deletions src/lib/assets/section1waves-bottom.svg

This file was deleted.

31 changes: 0 additions & 31 deletions src/lib/assets/section1waves-top.svg

This file was deleted.

33 changes: 0 additions & 33 deletions src/lib/assets/section1waves.svg

This file was deleted.

25 changes: 0 additions & 25 deletions src/lib/assets/section2mobile-bottom.svg

This file was deleted.

33 changes: 0 additions & 33 deletions src/lib/assets/section2mobile-top.svg

This file was deleted.

25 changes: 0 additions & 25 deletions src/lib/assets/section2waves-bottom.svg

This file was deleted.

Loading

0 comments on commit 9d905b3

Please sign in to comment.