feat: scale fonts for low res

jih189 · May 21, 2024 · 17164ee · 17164ee
1 parent 714461a
commit 17164ee
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/components/Demo.js b/components/Demo.js
@@ -36,13 +36,13 @@ const Demo = () => {
     };
 
     return (
-        <div className="flex flex-col items-center justify-center mt-20">
+        <div className="flex flex-col items-center justify-center mt-12">
             <div className="flex">
                 {hasWindow && <ReactPlayer
                     ref={playerRef}
                     url="/demo.mp4"
-                    width="1280px"
-                    height="600px"
+                    width="800px"
+                    height="400px"
                     muted={true}
                     controls={false}
                     playing={playing}

diff --git a/components/Head.js b/components/Head.js
@@ -10,12 +10,12 @@ const PageHead = () => {
                 <title>Motion Planning in Foliated Manifolds using Repetition Roadmap</title>
             </Head>
             <div
-                className={`flex justify-center items-center bg-white min-h-screen transition-all duration-1000 ease-in-out`}>
+                className={`flex justify-center items-center bg-white min-h-screen max-h-screen transition-all duration-1000 ease-in-out`}>
                 <div className="text-center">
                     <h1 className="text-5xl font-bold text-gray-900">Motion Planning in Foliated Manifolds using
                         Repetition Roadmap</h1>
-                    <p className="text-3xl text-gray-700 mt-8">Robotics: Science and Systems (RSS) 2024</p>
-                    <p className="text-xl text-gray-600 mt-8">
+                    <p className="text-xl text-gray-700 mt-4">Robotics: Science and Systems (RSS) 2024</p>
+                    <p className="text-md text-gray-600 mt-4">
                         <a href="https://github.com/jih189" className="hover:underline">Jiaming Hu<sup>1*</sup></a>,
                         <span> </span>
                         <a href="https://github.com/ShrutheeshIR" className="hover:underline">Shrutheesh Raman
@@ -31,8 +31,8 @@ const PageHead = () => {
                     <Navbar/>
                     <Demo/>
                 </div>
-                <div className="w-full h-20 bg-gradient-to-t from-gray-300 to-transparent absolute bottom-0 flex justify-center">
-                    <FaChevronDown className="text-gray-400 text-3xl animate-bounce mt-8 opacity-60" />
+                <div className="w-full h-14 bg-gradient-to-t from-gray-300 to-transparent absolute bottom-0 flex justify-center">
+                    <FaChevronDown className="text-gray-400 text-2xl animate-bounce mt-6 opacity-60" />
                 </div>
             </div>
         </>

diff --git a/components/Navbar.js b/components/Navbar.js
@@ -3,7 +3,7 @@ import { FaFileAlt, FaArrowsAlt, FaVideo, FaCode } from 'react-icons/fa';
 
 const Navbar = () => {
     return (
-        <div className={`${styles.navContainer} flex justify-center space-x-6 mt-12`}>
+        <div className={`${styles.navContainer} flex justify-center space-x-6 mt-8`}>
             <a href="/paper" className={styles.btn}>
                 <FaFileAlt className={styles.icon} />Paper
             </a>

diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css
@@ -7,7 +7,7 @@
     background-color: #4A5568;
     color: white;
     text-decoration: none;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
     transition: background-color 0.3s, transform 0.2s;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -21,5 +21,5 @@
 
 .icon {
     margin-right: 10px;
-    font-size: 21px;
+    font-size: 20px;
 }