From a0aea05e00e32483605062122939d59d2c1f17f7 Mon Sep 17 00:00:00 2001
From: Ananth Venkatesh <46249765+quantum9Innovation@users.noreply.github.com>
Date: Wed, 14 Feb 2024 19:27:24 +0000
Subject: [PATCH] Fix main page layout

---
 src/app/components/News.tsx              | 17 +++++++++--------
 src/app/components/mobileMenu.module.css |  4 +++-
 src/app/page.tsx                         | 16 +++++++++-------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/app/components/News.tsx b/src/app/components/News.tsx
index b44ce7b..4d0f083 100644
--- a/src/app/components/News.tsx
+++ b/src/app/components/News.tsx
@@ -1,16 +1,17 @@
 import Link from 'next/link'
+import { Inter, Zilla_Slab } from 'next/font/google'
+
+const zillaSlab = Zilla_Slab({ weight: '600', subsets: ['latin'] })
+const inter = Inter({ weight: '400', subsets: ['latin'] })
 
 export default function News() {
   return (
-    <div className='bg-slate-800 rounded-lg p-6 w-full basis-full md:basis-2/5 my-4 lg:my-0 max-h-[250px] overflow-y-auto shadow-md shadow-slate-500'>
-      <span className='text-3xl text-slate-200'>eeXiv News</span>
-      <br className='my-2' />
-      <span className='text-lg text-slate-400'>
+    <div className={inter.className + ' mt-6 bg-slate-800 rounded-lg p-6 w-full basis-full md:basis-2/5 my-4 lg:my-0 max-h-[250px] overflow-y-auto shadow-md shadow-slate-500'}>
+      <div className={zillaSlab.className + ' font-serif text-3xl text-slate-200'}>eeXiv News</div>
+      <div className='text-lg text-slate-400 mb-4'>
         Stay up to date with what is happening at eeXiv.
-      </span>
-      <br className='my-2' />
-      <span className='text-lg text-slate-200'>Latest news</span>
-      <br className='my-4' />
+      </div>
+      <div className={zillaSlab.className + ' text-slate-200 text-2xl mb-2'}>Latest news</div>
       <ul className='text-slate-50 px-6 list-disc'>
         <li key={1}>
           eeXiv 2.1 has been released! Documents are now statically generated
diff --git a/src/app/components/mobileMenu.module.css b/src/app/components/mobileMenu.module.css
index fce92ec..06d7ef9 100644
--- a/src/app/components/mobileMenu.module.css
+++ b/src/app/components/mobileMenu.module.css
@@ -1,7 +1,8 @@
 .menu {
   @apply overflow-hidden left-[0] top-[235px] z-10 absolute bg-slate-200;
   @apply duration-300;
-  height: calc(200px);
+  height: fit-content;
+  padding-bottom: 10px;
   transition: height 0.2s ease-in-out;
   width: 100vw;
   right: 0;
@@ -17,4 +18,5 @@
 
 .menu-hidden {
   height: 0;
+  padding-bottom: 0;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3af3ee2..1132f39 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,7 +29,7 @@ export default function Home() {
     <div className='text-slate-800 flex flex-wrap md:flex-row justify-center'>
       <p className='font-serif text-lg basis-full md:basis-1/2 grow mr-1 text-balance'>
         eeXiv, like arXiv, is a free distribution service and an open-access
-        archive for nearly {Object.keys(documents).length} scholarly articles in
+        archive for over {Object.keys(documents).length} scholarly articles in
         the fields of physics, mathematics, computer science, quantitative
         biology, quantitative finance, statistics, electrical engineering and
         systems science, and economics, but mainly related to the{' '}
@@ -44,18 +44,20 @@ export default function Home() {
       </p>
       <News />
       <div className='grid grid-cols-1 space-y-2 mt-4 basis-full'>
-        <hr className='mx-auto w-full h-1 border-0 bg-slate-200 my-2 rounded-md' />
-        <span className='font-serif text-xl'>Recently released documents</span>
+        <br />
+        <div className='font-serif text-xl my-2'>Recently released documents</div>
         <RecentDocuments />
         <hr className='mx-auto w-full h-1 border-0 bg-slate-200 my-2 rounded-md' />
-        <span className='font-serif text-xl'>
+        <br />
+        <div className='font-serif text-xl my-2'>
           Selected documents in various disciplines
-        </span>
+        </div>
         <RandomDocs />
         <hr className='mx-auto w-full h-1 border-0 bg-slate-200 my-2 rounded-md' />
-        <span className='font-serif text-xl'>
+        <br />
+        <div className='font-serif text-xl'>
           Our esteemed faculty and alumni
-        </span>
+        </div>
         <AuthorDisplay />
       </div>
     </div>