diff --git a/landing/keyservers.css b/landing/keyservers.css --- a/landing/keyservers.css +++ b/landing/keyservers.css @@ -7,42 +7,42 @@ padding-bottom: 24px; } -span.purple_gradient { +span.purpleGradient { background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } -.hero_section, -.servers_section, -.keyserver_company_section { +.heroSection, +.serversSection, +.keyserverCompanySection { display: flex; padding: 120px 32px; justify-content: center; } -.hero_section { +.heroSection { padding-top: 64px; } -.servers_section { +.serversSection { background-color: var(--light-dark-page-background); } -.hero_container, -.servers_container, -.keyserver_company_container { +.heroContainer, +.serversContainer, +.keyserverCompanyContainer { display: flex; width: 1376px; max-width: 90vw; } -.hero_container { +.heroContainer { flex-direction: column; } -.hero_image { +.heroImage { width: 100%; max-height: 376px; margin-bottom: 72px; @@ -52,19 +52,19 @@ text-align: center; } -.servers_image { +.serversImage { width: 100%; max-height: 480px; } -.servers_copy { +.serversCopy { display: flex; flex-direction: column; justify-content: center; padding-left: 72px; } -.read_the_docs { +.readTheDocs { width: 100%; align-self: flex-end; margin-bottom: 24px; @@ -72,21 +72,21 @@ } @media (max-width: 1440px) { - .servers_container, - .keyserver_company_container { + .serversContainer, + .keyserverCompanyContainer { flex-direction: column; } - .servers_copy { + .serversCopy { padding-left: 0; margin-top: 64px; } - .keyserver_company_copy { + .keyserverCompanyCopy { margin-bottom: 48px; } - .read_the_docs { + .readTheDocs { max-width: 504px; align-self: flex-start; margin: 0; diff --git a/landing/keyservers.react.js b/landing/keyservers.react.js --- a/landing/keyservers.react.js +++ b/landing/keyservers.react.js @@ -83,9 +83,9 @@ return ( <main> - <section className={css.hero_section}> - <div className={css.hero_container}> - <div className={css.hero_image}> + <section className={css.heroSection}> + <div className={css.heroContainer}> + <div className={css.heroImage}> <lottie-player id="eye-illustration" ref={setEyeNode} @@ -96,7 +96,7 @@ </div> <h1 className={heroHeadingClassName}> Reclaim your - <span className={css.purple_gradient}> digital identity</span> + <span className={css.purpleGradient}> digital identity</span> </h1> <p className={heroDescriptionClassName}> The Internet is broken today. Private user data is owned by @@ -108,9 +108,9 @@ </p> </div> </section> - <section className={css.servers_section}> - <div className={css.servers_container}> - <div className={css.servers_image}> + <section className={css.serversSection}> + <div className={css.serversContainer}> + <div className={css.serversImage}> <lottie-player id="cloud-illustration" ref={setCloudNode} @@ -119,7 +119,7 @@ speed={1} /> </div> - <div className={css.servers_copy}> + <div className={css.serversCopy}> <h1 className={headingClassName}>Apps need servers.</h1> <p className={descriptionClassName}> Sophisticated applications rely on servers to do things that your @@ -133,12 +133,12 @@ </div> </div> </section> - <section className={css.keyserver_company_section}> - <div className={css.keyserver_company_container}> - <div className={css.keyserver_company_copy}> + <section className={css.keyserverCompanySection}> + <div className={css.keyserverCompanyContainer}> + <div className={css.keyserverCompanyCopy}> <h1 className={headingClassName}> Comm is the - <span className={css.purple_gradient}> keyserver </span> + <span className={css.purpleGradient}> keyserver </span> company. </h1> <p className={descriptionClassName}> @@ -151,7 +151,7 @@ brain. </p> </div> - <div className={css.read_the_docs}> + <div className={css.readTheDocs}> <ReadDocsButton /> </div> </div>