update news widget and styles

src/app/about/about.module.css

@@ -1,5 +0,0 @@
-.content {
-  margin-top: 40px;
-  padding: 35px;
-  border-radius: 15px;
-}

src/app/about/page.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 export default function Page() {
   return (
-    <div className='content text-slate-600'>
+    <div className='text-slate-600'>
       <h1 className='text-3xl text-slate-800 mt-4 mb-1 font-serif'>About Us</h1>
       <p>
         eeXiv<sup>2</sup>{' '}
@@ -17,7 +17,7 @@ export default function Page() {
         </Link>{' '}
         under the GNU General Public License (GPL).
       </p>
-      <h1 className='text-2xl text-slate-800 mt-6 mb-1 font-serif'>
+      <h1 className='text-3xl text-slate-800 mt-6 mb-1 font-serif'>
         Frequently Asked Questions
       </h1>
       <ul className='list-disc'>

src/app/components/News.tsx

@@ -0,0 +1,26 @@
+export default function News() {
+  return (
+    <div className='bg-slate-800 rounded-lg p-6 w-full lg:max-w-lg md:max-w-md my-4 lg:my-0'>
+      <span className='text-3xl md:text-4xl text-slate-200'>
+        eeXiv<sup>2</sup> News
+      </span>
+      <br className='my-2' />
+      <span className='text-xl text-slate-400'>
+        Stay up to date with what is happening at eeXiv<sup>2</sup>.
+      </span>
+      <br className='my-2' />
+      <span className='text-lg text-slate-200'>Latest news</span>
+      <br className='my-4' />
+      <ul className='text-slate-50 px-6 list-disc'>
+        <li key={1}>eeXiv is currently under active development!</li>
+        <li key={2}>
+          There may be major updates, breaking changes, or weird bugs. Report
+          bugs, suggest new features, or give us feedback at{' '}
+          <a href='https://github.com/team-1280/eexiv-2/issues' target='_blank'>
+            our issue tracker.
+          </a>
+        </li>
+      </ul>
+    </div>
+  )
+}

src/app/globals.css

@@ -20,12 +20,6 @@ a:hover {
   text-decoration: underline;
 }
 
-.content {
-  margin-top: 40px;
-  padding: 35px;
-  border-radius: 15px;
-}
-
 .button-default {
   @apply bg-blue-600 text-slate-100 hover:bg-blue-400 font-semibold rounded py-2 px-4 my-2;
 }

src/app/page.tsx

@@ -6,6 +6,7 @@ import {
   affiliations,
 } from './db/data'
 import { epoch2datestring } from './utils/epoch2datestring'
+import News from './components/News'
 
 export default function Home() {
   const RandomDocs = (): React.ReactNode[] => {
@@ -88,8 +89,8 @@ export default function Home() {
   }
 
   return (
-    <div className='content text-slate-800 flex flex-wrap'>
+    <div className='text-slate-800 flex flex-wrap'>
-      <p className='font-serif text-lg max-w-lg mr-1'>
+      <p className='font-serif text-lg max-w-lg mr-1 text-balance'>
         eeXiv<sup>2</sup>, like arXiv, is a free distribution service and an
         open-access archive for nearly 2.4 million scholarly articles in the
         fields of physics, mathematics, computer science, quantitative biology,
@@ -104,21 +105,7 @@ export default function Home() {
         . Materials on this site may be published independently through other
         channels. Read more about us <Link href='/about'>here</Link>.
       </p>
-      <div className='bg-slate-800 rounded-lg p-6 w-full lg:max-w-lg md:max-w-md my-4 lg:my-0'>
+      <News />
-        <span className='text-3xl md:text-4xl text-slate-200'>
-          eeXiv<sup>2</sup> News
-        </span>
-        <br className='my-2' />
-        <span className='text-xl text-slate-400'>
-          Stay up to date with what is happening at eeXiv<sup>2</sup>.
-        </span>
-        <br className='my-2' />
-        <span className='text-lg text-slate-200'>Latest news</span>
-        <br className='my-4' />
-        <div className='text-slate-50'>
-          - eeXiv is currently under active development!
-        </div>
-      </div>
       <div className='grid grid-cols-1 space-y-2 mt-4'>
         <hr className='mx-auto w-full h-1 border-0 bg-slate-200 my-2 rounded-md' />
         <span className='font-serif text-xl'>