diff --git a/services/web/frontend/js/pages/marketing/homepage.js b/services/web/frontend/js/pages/marketing/homepage.js index 7df570be7a..0c5c1a8cd8 100644 --- a/services/web/frontend/js/pages/marketing/homepage.js +++ b/services/web/frontend/js/pages/marketing/homepage.js @@ -28,3 +28,56 @@ function realTimeEditsDemo() { nextFrame() } realTimeEditsDemo() + +function homepageAnimation() { + function createFrames(word, { buildTime, holdTime, breakTime }) { + const frames = [] + let current = '' + + // Build up the word + for (const char of word) { + current += char + frames.push({ before: current, time: buildTime }) + } + + // Hold the complete word + frames.push({ before: current, time: holdTime }) + + // Break down the word + for (let i = word.length - 1; i > 0; i--) { + current = word.substring(0, i) + frames.push({ before: current, time: breakTime }) + } + + // Add the final frame with an empty string + frames.push({ before: '', time: holdTime }) + + return frames + } + + const opts = { + buildTime: 100, + holdTime: 1000, + breakTime: 100, + } + + const frames = [ + ...createFrames('article', opts), + ...createFrames('theses', opts), + ...createFrames('reports', opts), + ...createFrames('presentations', opts), + ...createFrames('anything', opts), + ] + + let index = 0 + function nextFrame() { + const frame = frames[index] + index = (index + 1) % frames.length + + $('#home-animation-text').html(frame.before) + setTimeout(nextFrame, frame.time) + } + + nextFrame() +} +homepageAnimation() diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less index 0c5c9cc7c3..2cfbe4f7ec 100644 --- a/services/web/frontend/stylesheets/app/homepage.less +++ b/services/web/frontend/stylesheets/app/homepage.less @@ -346,24 +346,32 @@ .home-top-begin-text { display: flex; color: #5f5ff0; - font-size: 65px; - line-height: 80px; + font-size: 4rem; + line-height: 1.25; font-family: 'DM Mono', monospace; align-self: flex-start; width: 100%; margin-top: 0; + font-weight: 400; @media (max-width: @screen-sm-max) { text-align: center; flex-direction: column; align-items: center; + font-size: 2.25rem; } } .home-top-parenthesis-text { color: #bbdbb8; - font-size: 65px; - line-height: 80px; + font-size: 4rem; + line-height: 1.25; + font-family: 'DM Mono', monospace; + display: inherit; + + @media (max-width: @screen-sm-max) { + font-size: 2.25rem; + } } } } @@ -454,7 +462,7 @@ } .tos-agreement-notice { - font-size: 12px; + font-size: 0.75rem; a { color: @green-60; @@ -465,7 +473,7 @@ } .home-register-newsletter-checkbox { - font-size: 12px; + font-size: 0.75rem; margin-top: 10px; text-align: center;