 {
return (
- <div className='content'>
+ <div className='content text-slate-800'>
<p>
{`eeXiv is a project hosted by Team 1280 EECS ()
+
You can contact a team representative directly at{' '}
diff --git a/src/app/container/Container.tsx b/src/app/container/Container.tsx
new file mode 100644
index 0000000..3d9e374
--- /dev/null
+++ b/src/app/container/Container.tsx
@@ -0,0 +1,14 @@
+import styles from './container.module.css'
+
+/**
+ * Renders a container component with the provided children. It will restrict the
+ * width of the container to 90vw.
+ *
+ * @param {Readonly<{ children: React.ReactNode }>} children - The child components to be rendered within the container.
+ * @return {React.ReactElement} The container component with the provided children.
+ */
+export default function Container({
+ children,
+}: Readonly<{ children: React.ReactNode }>) {
+ return
- If you encounter any accessibility-related issues related to
- your use of our site, it is likely because of our jank code
- architecture. Unfortunately, our programming team is ill
- equipped to fix these issues, even if some of them may be
- pressing Diversity, Equity, and Inclusion (DEI) concerns. We
- recommend you add any accessibility fixes yourself by submitting
- a{' '}
-
- pull request
- {' '}
- on GitHub.
-
+ If you encounter any accessibility-related issues related to your use of
+ our site, it is likely because of our jank code architecture.
+ Unfortunately, our programming team is ill equipped to fix these issues,
+ even if some of them may be pressing Diversity, Equity, and Inclusion
+ (DEI) concerns. We recommend you add any accessibility fixes yourself by
+ submitting a{' '}
+ pull request{' '}
+ on GitHub.
+
We are always looking for contributors to help us improve eeXiv. If you
are interested in helping, whether as a peer reviewer, external
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 32c8590..b2f75da 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,8 +3,19 @@ import { Inter, Zilla_Slab } from 'next/font/google'
import './globals.css'
import styles from './home.module.css'
import Link from 'next/link'
-import SearchBar from './searchBar/searchBar'
+import SearchBar from './searchBar/SearchBar'
+import Container from './container/Container'
+/* The default font is Inter. If you want to use Zilla Slab (or any other Google Font,
+ which are pre-provided by Next.js in the 'next/font/google' module), you need to
+ import it, as is done here with Zilla Slab, and then execute a CSS exploit by assigning
+ the tag className={zillaSlab.className} to set the font family of an element to your desired font.
+ DO NOT directly set the font family in CSS using font-family. You will break EVERYTHING!
+
+ To set multiple classes, you can use an advanced exploit using an array of
+ your desired classNames (eg. [styles.title, zillaSlab.className]) and join them with a space
+ like so: className={[styles.title, zillaSlab.className].join(' ')}
+*/
const inter = Inter({ subsets: ['latin'] })
const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
@@ -43,7 +54,7 @@ export default function RootLayout({