Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-08-24 17:47:10 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: animation jumping

Browse Source
This commit is contained in:
Ash Monty
2021-12-12 20:51:59 +01:00
parent 135ba1064d
commit 1beba945c3
3 changed files with 12 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -492,7 +492,7 @@ section.team-helpers .text {
}
section.team-helpers .team-helpers-cards {
display: inline-grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: repeat(9, 1fr);
grid-gap: 20px;
margin-right: 20px;
color: var(--text-secondary);
@@ -530,11 +530,11 @@ section.team-helpers .helper-card {
padding: 14px 24px;
background: #16192D;
border-radius: 12px;
animation: scrollHelpersRTL 30s linear infinite;
animation: scrollHelpersRTL 45s linear infinite;
min-width: 480px;
}
section.team-helpers .row.second .helper-card {
animation: scrollHelpersLTR 30s linear infinite;
animation: scrollHelpersLTR 45s linear infinite;
}
section.team-helpers .helper-card:hover {
background: #252A51;
@@ -545,12 +545,12 @@ section.team-helpers .helper-card:hover {
transform: translatex(0%);
}
100% {
transform: translateX(calc( ( ( 100% + 20px ) * -6 ) + -7px)); /* Don't question this, it just works. */
transform: translateX(calc( ( ( 100% + 20px ) * -9 ) + -7px)); /* Don't question this, it just works. */
}
}
@keyframes scrollHelpersLTR {
0% {
transform: translateX(calc( ( ( 100% + 20px ) * -6 ) + -7px));
transform: translateX(calc( ( ( 100% + 20px ) * -9 ) + -7px));
}
100% {
transform: translatex(0%);
@@ -592,11 +592,6 @@ section.team-helpers .helper-card span {
section.team-helpers .helper-card p {
color: var(--text-secondary);
}
/* These two fix the spacing being inconsistent on some card, thus "jumping" on repeat. I'm fairly certain it isn't my fault */
section.team-helpers .row.first .team-helpers-cards.repeat.first a:nth-child(3){
position: relative;
left: 5px;
}
section.update-signup {
position: relative;
@@ -1074,22 +1069,22 @@ footer div.discord-server-card svg {
margin-top: 12px;
}
section.team-helpers .helper-card {
animation: scrollHelpersRTLMobile 25s linear infinite;
animation: scrollHelpersRTLMobile 45s linear infinite;
}
section.team-helpers .row.second .helper-card {
animation: scrollHelpersLTRMobile 25s linear infinite;
animation: scrollHelpersLTRMobile 45s linear infinite;
}
@keyframes scrollHelpersRTLMobile {
0% {
transform: translatex(0%);
}
100% {
transform: translateX(calc( ( ( 100% + 12px ) * -6 ) + -6px));
transform: translateX(calc( ( ( 100% + 12px ) * -9 ) + -6px));
}
}
@keyframes scrollHelpersLTRMobile {
0% {
transform: translateX(calc( ( ( 100% + 12px ) * -6 ) + -6px));
transform: translateX(calc( ( ( 100% + 12px ) * -9 ) + -6px));
}
100% {
transform: translatex(0%);

6
src/routers/home.js
View File

@@ -28,10 +28,10 @@ router.get('/', async (request, response) => {
const specialThanksFirstRow = specialThanksPeople.slice(0, 3);
const specialThanksSecondRow = specialThanksPeople.slice(3, 6);
// Builds the final array to be sent to the view, and duplicates each row.
// Builds the final array to be sent to the view, and triples each row.
specialThanksPeople = {
first: specialThanksFirstRow.concat(specialThanksFirstRow),
second: specialThanksSecondRow.concat(specialThanksSecondRow)
first: specialThanksFirstRow.concat(specialThanksFirstRow).concat(specialThanksFirstRow),
second: specialThanksSecondRow.concat(specialThanksSecondRow).concat(specialThanksFirstRow)
};
response.render('home', {

11
views/home.handlebars
View File

@@ -211,17 +211,6 @@
</a>
{{/each}}
</div>
<div class="team-helpers-cards repeat second">
{{#each specialThanksPeople.second}}
<a href="{{ github }}" 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>