diff --git a/public/assets/css/main.css b/public/assets/css/main.css index c81191e..a1244b3 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -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%); diff --git a/src/routers/home.js b/src/routers/home.js index 3985122..b244b52 100644 --- a/src/routers/home.js +++ b/src/routers/home.js @@ -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', { diff --git a/views/home.handlebars b/views/home.handlebars index 81bbfec..07c56eb 100644 --- a/views/home.handlebars +++ b/views/home.handlebars @@ -211,17 +211,6 @@ {{/each}} -
- {{#each specialThanksPeople.second}} - -
- -
- {{ name }} -

{{ caption }}

-
- {{/each}} -