Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-04-24 15:37:12 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

styles: clean up animation, now with way less jank

Browse Source
This commit is contained in:
Ash Monty 2022-01-23 16:29:47 +01:00
parent 352f433eaa
commit 9be9e5d373
No known key found for this signature in database
GPG Key ID: 61F589C2778CE60D
2 changed files with 20 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
public/assets/css/main.css
View File

@ -498,6 +498,26 @@ section.team-helpers .team-helpers-cards {
color: var(--text-secondary);
width: max-content;
}
section.team-helpers .row.second .team-helpers-cards {
grid-template-columns: repeat(12, 1fr);
}
section.team-helpers .row {
width: fit-content;
}
section.team-helpers .row.first {
animation: infiniteScrollRow1 15s linear infinite; /* Set the duration to 5s times the number of cards */
}
section.team-helpers .row.second {
animation: infiniteScrollRow2 20s linear infinite; /* Set the duration to 5s times the number of cards */
}
@keyframes infiniteScrollRow1 {
0% { transform: translate3d(0); }
100% { transform: translate3d(calc(100% / -3), 0, 0); }
}
@keyframes infiniteScrollRow2 {
0% { transform: translate3d(calc(100% / -3), 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}
section.team-helpers .animation-wrapper {
transform: rotate(-5deg);
overflow-x: hidden;
@ -530,32 +550,12 @@ section.team-helpers .helper-card {
padding: 14px 24px;
background: #16192D;
border-radius: 12px;
animation: scrollHelpersRTL 45s linear infinite;
min-width: 480px;
}
section.team-helpers .row.second .helper-card {
animation: scrollHelpersLTR 45s linear infinite;
}
section.team-helpers .helper-card:hover {
background: #252A51;
transition: 200ms;
}
@keyframes scrollHelpersRTL {
0% {
transform: translatex(0%);
}
100% {
transform: translateX(calc( ( ( 100% + 20px ) * -9 ) + -7px)); /* Don't question this, it just works. */
}
}
@keyframes scrollHelpersLTR {
0% {
transform: translateX(calc( ( ( 100% + 20px ) * -9 ) + -7px));
}
100% {
transform: translatex(0%);
}
}
section.team-helpers .helper-card.special {
position: relative;
box-shadow: 0px 0px 0px 2px rgba(211, 225, 87, 0.6) inset;
@ -1064,32 +1064,9 @@ footer div.discord-server-card svg {
section.team-helpers .animation-wrapper .helper-card {
padding: 7px 18px;
}
section.team-helpers .animation-wrapper .row.second {
margin-top: 12px;
}
section.team-helpers .helper-card {
animation: scrollHelpersRTLMobile 45s linear infinite;
}
section.team-helpers .row.second .helper-card {
animation: scrollHelpersLTRMobile 45s linear infinite;
}
@keyframes scrollHelpersRTLMobile {
0% {
transform: translatex(0%);
}
100% {
transform: translateX(calc( ( ( 100% + 12px ) * -9 ) + -6px));
}
}
@keyframes scrollHelpersLTRMobile {
0% {
transform: translateX(calc( ( ( 100% + 12px ) * -9 ) + -6px));
}
100% {
transform: translatex(0%);
}
}
section.update-signup .floating-serverjoin {
width: calc(100% - 36px);

22
views/home.handlebars
View File

@ -176,17 +176,6 @@
</a>
{{/each}}
</div>
<div class="team-helpers-cards repeat first">
{{#each specialThanksPeople.first}}
<a {{#if github}}href="{{ github }}"{{/if}} class="helper-card{{#if special}} special{{/if}}">
<div class="img-wrapper">
<img src="{{ picture }}" class="pfp">
</div>
<span>{{ name }}</span>
<p>{{ caption }}</p>
</a>
{{/each}}
</div>
</div>
<div class="row second">
<div class="team-helpers-cards">
@ -200,17 +189,6 @@
</a>
{{/each}}
</div>
<div class="team-helpers-cards repeat first">
{{#each specialThanksPeople.second}}
<a {{#if github}}href="{{ github }}"{{/if}} class="helper-card{{#if special}} special{{/if}}">
<div class="img-wrapper">
<img src="{{ picture }}" class="pfp">
</div>
<span>{{ name }}</span>
<p>{{ caption }}</p>
</a>
{{/each}}
</div>
</div>
</div>
</section>