-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
# 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
1 parent
cb2c78f
commit 9d905b3
Showing
32 changed files
with
134 additions
and
344 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
134 changes: 127 additions & 7 deletions
134
src/components/Sections/Mission/MissionStatement.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.