fix(landing): downscale the desktop interface

vscubing · Aug 28, 2024 · 8ae8e67 · 8ae8e67
1 parent e1c44b8
commit 8ae8e67
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 28 deletions.
diff --git a/src/features/landing/LandingPage.lazy.tsx b/src/features/landing/LandingPage.lazy.tsx
@@ -22,7 +22,7 @@ const NAVIGATION_ANCHORS = {
 
 function LandingPage() {
   return (
-    <div className='bg-black-120 text-grey-40'>
+    <div className='bg-black-120 leading-[1.4] text-grey-40'>
       <Header navigationAnchors={Object.values(NAVIGATION_ANCHORS)} />
       <main className='space-y-40'>
         <HeroSection />

diff --git a/src/features/landing/sections/AboutSection.tsx b/src/features/landing/sections/AboutSection.tsx
@@ -8,9 +8,9 @@ import { LazyVideo } from '../shared/LazyVideo'
 export function AboutSection({ className, id }: { className: string; id: string }) {
   return (
     <Container className={className}>
-      <section className='landing-offset-anchor mx-auto max-w-[75rem] space-y-14' id={id}>
-        <h2 className='landing-h2 text-center'>What is virtual speedcubing?</h2>
-        <div className='flex justify-center gap-40'>
+      <section className='landing-offset-anchor mx-auto max-w-[75rem]' id={id}>
+        <h2 className='landing-h2 mb-14 text-center'>What is virtual speedcubing?</h2>
+        <div className='mb-12 flex justify-center gap-40'>
           <div className='flex items-center gap-2'>
             <CubeIcon className='flex-shrink-0' />
             <p>

diff --git a/src/features/landing/sections/FeaturesSection/LeaderboardsAnimation.tsx b/src/features/landing/sections/FeaturesSection/LeaderboardsAnimation.tsx
@@ -39,14 +39,14 @@ function Row({
       <AnimationItem
         block='leaderboards'
         style={{ '--delay': `${(place - 1) * 1.1}s` } as CSSProperties}
-        className='animate-landing-features-leaderboards flex h-[2.8rem] items-center rounded-lg bg-grey-100 pl-1 text-white-100 [clip-path:inset(0_0_100%)]'
+        className='flex h-[2.8rem] animate-landing-features-leaderboards items-center rounded-lg bg-grey-100 pl-1 text-white-100 [clip-path:inset(0_0_100%)]'
         shouldRegisterAnimationEnd={shouldRegisterAnimationEnd}
       >
         <div className='vertical-alignment-fix mr-2 flex h-8 w-8 items-center justify-center rounded-full border border-primary-80 text-[.75rem]'>
           {place}
         </div>
         <CubeIcon cube='3by3' className='mr-2 h-5 w-5' />
-        <span className='vertical-alignment-fix text-sm'>{nickname}</span>
+        <span className='vertical-alignment-fix text-[.625rem]'>{nickname}</span>
         <SolveTimeLabel timeMs={timeMs} className='ml-auto h-6 min-w-[4.5rem] text-[.75rem]' />
       </AnimationItem>
     </li>

diff --git a/src/features/landing/sections/FeaturesSection/ResultsAnimation.tsx b/src/features/landing/sections/FeaturesSection/ResultsAnimation.tsx
@@ -20,7 +20,7 @@ export function ResultsAnimation() {
       </ResultsAnimationItem>
       <ResultsAnimationItem
         fromRotation='-9.5deg'
-        fromLeft='32%'
+        fromLeft='35%'
         fromTop='-75%'
         transitionRotation='41.5deg'
         transitionLeft='38%'
@@ -59,13 +59,13 @@ export function ResultsAnimation() {
       </ResultsAnimationItem>
       <ResultsAnimationItem
         fromRotation='22deg'
-        fromLeft='60%'
+        fromLeft='65%'
         fromTop='-50%'
         transitionRotation='-20deg'
         transitionLeft='67%'
         transitionTop='55%'
         toRotation='16deg'
-        toLeft='67%'
+        toLeft='69%'
         toTop='74%'
       >
         Attempt 3
@@ -78,21 +78,21 @@ export function ResultsAnimation() {
         transitionLeft='42%'
         transitionTop='15%'
         toRotation='32deg'
-        toLeft='44.5%'
-        toTop='53.5%'
+        toLeft='45%'
+        toTop='53%'
       >
         Attempt 4
       </ResultsAnimationItem>
       <ResultsAnimationItem
         fromRotation='42deg'
-        fromLeft='66%'
-        fromTop='-85%'
+        fromLeft='69%'
+        fromTop='-88%'
         transitionRotation='-16.5deg'
         transitionLeft='68%'
         transitionTop='6%'
         toRotation='-16.5deg'
-        toLeft='67%'
-        toTop='41%'
+        toLeft='70%'
+        toTop='42%'
       >
         Attempt 5
       </ResultsAnimationItem>
@@ -133,7 +133,7 @@ function ResultsAnimationItem(
         } as CSSProperties
       }
       className={cn(
-        'animate-landing-features-results absolute whitespace-nowrap rounded-3xl border border-secondary-20 px-6 py-1 text-[0.875rem] text-grey-20',
+        'absolute animate-landing-features-results whitespace-nowrap rounded-3xl border border-secondary-20 px-6 py-2 text-[0.875rem] text-grey-20',
       )}
     >
       <div className='mb-[-.1em] pt-[.1em]'>{props.children}</div>

diff --git a/src/features/landing/sections/FeaturesSection/index.tsx b/src/features/landing/sections/FeaturesSection/index.tsx
@@ -14,7 +14,7 @@ export function FeaturesSection({ className, id }: { className: string; id: stri
       <section id={id} className='landing-offset-anchor'>
         <h2 className='landing-h2 mb-14 text-center'>The problem we solve</h2>
         <AnimationsController>
-          <ul className='grid grid-cols-2 grid-rows-[repeat(2,20rem)] gap-3'>
+          <ul className='grid grid-cols-2 grid-rows-[repeat(2,18.75rem)] gap-3'>
             <BlockIntersectionWrapper block='results'>
               <Feature
                 title='Automated results'

diff --git a/src/features/landing/sections/Footer.tsx b/src/features/landing/sections/Footer.tsx
@@ -73,7 +73,7 @@ export function Footer({
             </div>
             <div className='w-[21.125rem]'>
               <h2 className='landing-h3 mb-4'>Quick links</h2>
-              <nav className='flex flex-col gap-2'>
+              <nav className='flex flex-col gap-4'>
                 {navigationAnchors
                   .filter(({ id }) => id !== 'contacts') // we already have the contacts in the footer
                   .map(({ id, name }) => (

diff --git a/src/features/landing/sections/HeroSection.tsx b/src/features/landing/sections/HeroSection.tsx
@@ -25,8 +25,9 @@ export function HeroSection() {
                 speedcubing
               </span>
             </h1>
-            <p className='mb-6 flex items-center gap-2 text-white-100'>
-              <AlternatingText text1='Improve' text2='Compete' text3='Have fun' /> <span>with our online contests</span>
+            <p className='mb-6 flex items-center gap-2 text-white-100 '>
+              <AlternatingText text1='Improve' text2='Compete' text3='Have fun' />{' '}
+              <span className='text-[1.125rem]'>with our online contests</span>
             </p>
             <StaticLinkToApp className='h-[4.5rem] px-20' />
           </div>
@@ -54,7 +55,7 @@ export function HeroSection() {
 
 function AlternatingText({ text1, text2, text3 }: { text1: string; text2: string; text3: string }) {
   return (
-    <span className='relative inline-block h-9 w-[6.5rem] overflow-y-clip rounded-xl border border-secondary-20 text-center font-medium'>
+    <span className='relative inline-block h-9 w-[6.5rem] overflow-y-clip rounded-xl border border-secondary-20 text-center text-[1.125rem] font-medium'>
       <span className='vertical-alignment-fix absolute left-0 h-9 w-full animate-landing-alternating-text'>
         {text1}
       </span>

diff --git a/src/index.css b/src/index.css
@@ -108,13 +108,13 @@
   }
 
   .landing-h1 {
-    @apply font-kanit text-[4rem] leading-[1.1] tracking-[0.01em] text-white-100;
+    @apply font-kanit text-[3.625rem] leading-[1.1] tracking-[0.01em] text-white-100;
   }
   .landing-h2 {
-    @apply font-kanit text-[3rem] leading-[1.1] tracking-[0.01em] text-white-100;
+    @apply font-kanit text-[2.75rem] leading-[1.1] tracking-[0.01em] text-white-100;
   }
   .landing-h3 {
-    @apply font-kanit text-[1.75rem] leading-[1.4] tracking-normal text-white-100;
+    @apply font-kanit text-[1.625rem] leading-[1.4] tracking-normal text-white-100;
   }
 
   .landing-offset-anchor::before {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -96,10 +96,6 @@ export default {
             transform: 'rotate(var(--to-rotation))',
           },
         },
-        fake: {
-          from: { backgroundColor: 'white' },
-          to: { backgroundColor: 'black' },
-        },
         'landing-features-scrambles': {
           from: { clipPath: 'inset(0 100% 0 0)' },
           to: { clipPath: 'inset(0)' },