feat(docs): clean up landing page

Improves readability of the homepage, especially on mobile.
hydro-project · Jan 3, 2024 · 968286e · 968286e
1 parent 2addaed
commit 968286e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -9,7 +9,7 @@ const katex = require('rehype-katex');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'Hydro - Build Software for Every Scale',
+  title: 'Hydro - Build for Every Scale',
   tagline: 'Dinosaurs are cool',
   favicon: 'img/favicon.ico',
 

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -9,10 +9,15 @@ export default function Home() {
     <Layout>
       <main>
         <div className={styles["jumbo"]}>
-          <h2 className={styles["indexTitle"]}>Build Software for <span className={styles["titleEveryScale"]}>Every Scale</span></h2>
+          <img src="/img/hydro-logo.svg" alt="Hydro Logo" style={{
+            width: "650px",
+            marginLeft: "auto",
+            marginRight: "auto",
+          }} />
+          <h2 className={styles["indexTitle"]}>build for <span className={styles["titleEveryScale"]}>every scale</span></h2>
 
           <div style={{ marginTop: "20px" }}>
-            <p className={styles["blurb"]}>The Hydro Project at UC Berkeley is developing <b>cloud-native</b> programming models that allow <b>anyone</b> to develop <b>scalable and resilient distributed applications</b> that take full advantage of cloud elasticity. Our research spans across <b>databases, distributed systems, and programming languages</b> to deliver a modern, end-to-end stack for cloud programming.</p>
+            <p className={styles["blurb"]}>The Hydro Project at UC Berkeley is developing <b>cloud-native</b> programming models that allow <b>anyone</b> to develop <b>scalable and resilient distributed applications</b>. Our research spans across <b>databases, distributed systems, and programming languages</b> to deliver a modern, end-to-end stack for cloud programming.</p>
             <div style={{
               display: "flex",
               flexDirection: "row",

diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
@@ -4,14 +4,14 @@
  */
 
 .jumbo {
-  max-width: calc(min(1100px, 100vw - 60px));
+  max-width: calc(min(1000px, 100vw - 60px));
   min-height: calc(100vh - 360px);
   margin-left: auto;
   margin-right: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-top: 80px;
+  margin-top: 50px;
   box-sizing: border-box;
   line-height: normal;
 }
@@ -26,9 +26,9 @@
 .indexTitle {
   text-align: center;
   font-family: 'Inter', sans-serif;
-  font-size: 120px;
+  font-size: 90px;
   font-weight: 800;
-  line-height: 105%;
+  line-height: 95%;
 
   color: #262626;
 
@@ -45,7 +45,7 @@
 
 @media screen and (max-width: 1000px) {
   .indexTitle {
-    font-size: 80px;
+    font-size: 60px;
   }
 }
 

diff --git a/docs/src/pages/research.js b/docs/src/pages/research.js
@@ -92,7 +92,7 @@ export default function Home() {
           marginBottom: "30px"
         }}>
           <h1 style={{
-            fontSize: "4rem",
+            fontSize: "3.8rem",
             textAlign: "center"
           }}>Latest Publications</h1>
           {papers.map((paper, i) => {