fix styling stuff

README.md

@@ -10,3 +10,19 @@ However, this repository is open for anyone—in Team 1280, in another FRC team,
 eeXiv borrows from a pioneer in digital open access, arXiv.org, and hosts the most FRC-specific scholarly articles in numerous subject areas, curated by our strong community of volunteer moderators.
 
 [^1]: Whichever idiot decided "arXiv" should be pronounced like "archive" can cope; eeXiv is not changing its name or pronunciation.
+
+---
+
+## For Maintainers
+
+The dummies guide to maintaining a Next.js project:
+
+- This is not HTML
+  - Do not treat it as HTML, although it shares many common elements. Consult the documentation at least once before attempting anything for the first time, including common tasks.
+- General semantics
+  - Use `<Link>` components when linking to a local path (like /status) and use a normal `<a>` component when linking to an external site (like github.com).
+  - Try not to use global CSS classes when possible
+    - You can see a globals.css file in the root directory. Add classes to this file sparingly, only when you actually have a common class that will be shared across many components (however, also consider using a tailwind CSS extension class for this)
+    - Try to use CSS modules for your components. You can access them from your modules by importing them (`import styles from './path-to-css-module` and using them in your components with `className={styles.class_name}`). This will allow you to use the same class names in different parts of the website without any conflicts, as Post CSS will generate unique classes from the CSS modules.
+- Important: THIS IS NOT JAVASCRIPT! You CANNOT use global variables, window variables, etc, or even stateful variables that are meant to persist beyond a single refresh cycle (which can happen many times per second). Use the STATE for this (see [the module we are using for state management](https://github.com/pmndrs/zustand))
+- Try to define modules for your components instead of putting everything in one file to avoid JANK

src/app/about/page.tsx

@@ -1,9 +1,8 @@
 import Link from 'next/link'
-import standardStyles from '../styles/standard.module.css'
 
 export default function Page() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p>
         {`eeXiv is a project hosted by Team 1280 EECS ("Electrical Engineering and
         Computer Science"), independent of the department of the same name at`}{' '}

src/app/contact/page.tsx

@@ -1,8 +1,6 @@
-import standardStyles from '../styles/standard.module.css'
-
 export default function Page() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p>
         You can contact a team representative directly at{' '}
         <a href='mailto:sanramonvalleyrobotics@gmail.com'>

src/app/globals.css

@@ -11,3 +11,17 @@
 * {
   box-sizing: border-box;
 }
+
+a {
+  color: #2563eb; /* Tailwind's blue-600 */
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.content {
+  margin-top: 40px;
+  padding: 35px;
+  border-radius: 15px;
+}

src/app/help/page.tsx

@@ -1,8 +1,6 @@
-import standardStyles from '../styles/standard.module.css'
-
 export default function Page() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p>
         We are always looking for contributors to help us improve eeXiv. If you
         are interested in helping, whether as a peer reviewer, external

src/app/home.module.css

@@ -26,39 +26,6 @@
   cursor: pointer;
 }
 
-.search {
-  position: absolute;
-  top: 175px;
-  left: 50%;
-  width: 40vw;
-}
-
-.searchBox,
-.searchButton {
-  display: inline;
-}
-
-.searchBox {
-  height: 45px;
-  border: 3px solid #0c5198;
-  border-radius: 10px;
-  padding: 22px;
-}
-
-.searchButton {
-  background-color: #0c5198;
-  color: white;
-  border: 3px solid white;
-  padding: 10px;
-  border-radius: 10px;
-  margin-left: 10px;
-}
-
-.searchButton:hover {
-  background-color: white;
-  color: #0c5198;
-}
-
 .wordmark {
   float: left;
   height: 100px;

src/app/layout.tsx

@@ -3,6 +3,7 @@ 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'
 
 const inter = Inter({ subsets: ['latin'] })
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
@@ -25,32 +26,22 @@ export default function RootLayout({
           <p className={styles.contributions}>
             We gratefully acknowledge support from our volunteer peer reviewers,
             member institutions, and all{' '}
-            <Link
+            <a
               href='https://github.com/Team-1280/eeXiv/graphs/contributors'
               target='_blank'
             >
               open-source contributors
-            </Link>
+            </a>
             .
           </p>
         </div>
         <div className={styles.banner}>
           <h1 className={[styles.title, zillaSlab.className].join(' ')}>
-            <Link href='./'>
+            <Link href='/' className='no-link-style'>
               eeXiv<sup>2</sup>
             </Link>
           </h1>
-          <div className={styles.search}>
-            <input
-              type='text'
-              className={styles.searchBox}
-              name='q'
-              placeholder='Search...'
-            />
-            <button type='submit' className={styles.searchButton}>
-              Search
-            </button>
-          </div>
+          <SearchBar />
         </div>
         {children}
         <footer>

src/app/legal/copyright/page.tsx

@@ -1,9 +1,7 @@
 import Link from 'next/link'
-import standardStyles from '../../styles/standard.module.css'
-
 export default function Page() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p>
         All content on this site is licensed under the{' '}
         <a href='https://creativecommons.org/licenses/by-sa/4.0/'>

src/app/legal/privacy/page.tsx

@@ -1,8 +1,6 @@
-import standardStyles from '../../styles/standard.module.css'
-
 export default function Page() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p>
         User privacy is important to us. Just kidding. We don't collect any
         personal information. We only use it to help us improve eeXiv. Your

src/app/page.tsx

@@ -1,9 +1,8 @@
 import styles from './home.module.css'
-import standardStyles from './styles/standard.module.css'
 
 export default function Home() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p className={styles.message}>
         eeXiv<sup>2</sup> is a free distribution service and an open-access
         archive for nearly 2.4 million scholarly articles in the fields of

src/app/searchBar/searchBar.module.css

@@ -0,0 +1,33 @@
+.searchBox,
+.searchButton {
+  display: inline;
+}
+
+.search {
+  position: absolute;
+  top: 175px;
+  left: 50%;
+  width: 40vw;
+}
+
+.searchBox {
+  height: 45px;
+  border: 3px solid #0c5198;
+  border-radius: 10px;
+  padding: 22px;
+  color: inherit;
+}
+
+.searchButton {
+  background-color: #0c5198;
+  color: white;
+  border: 3px solid white;
+  padding: 10px;
+  border-radius: 10px;
+  margin-left: 10px;
+}
+
+.searchButton:hover {
+  background-color: white;
+  color: #0c5198;
+}

src/app/searchBar/searchBar.tsx

@@ -0,0 +1,17 @@
+import styles from './searchBar.module.css'
+
+export default function SearchBar() {
+  return (
+    <div className={styles.search}>
+      <input
+        type='text'
+        className={styles.searchBox}
+        name='q'
+        placeholder='Search...'
+      />
+      <button type='submit' className={styles.searchButton}>
+        Search
+      </button>
+    </div>
+  )
+}

src/app/status/notifications/page.tsx

@@ -1,8 +1,6 @@
-import standardStyles from '../../styles/standard.module.css'
-
 export default function Page() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p>
         We currently do not have the technical support to implement mailing
         lists in eeXiv. Check <a href='../'>status</a> frequently for updates.

src/app/status/page.tsx

@@ -1,8 +1,6 @@
-import standardStyles from '../styles/standard.module.css'
-
 export default function Page() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p>
         eeXiv is <strong>online</strong>. All systems{' '}
         <strong>operational</strong>.

src/app/styles/standard.module.css

@@ -1,8 +0,0 @@
-/* In this file, add standard styles that will be widely imported throughout
-the site */
-
-.content {
-  margin-top: 40px;
-  padding: 35px;
-  border-radius: 15px;
-}

src/app/subscribe/page.tsx

@@ -1,8 +1,6 @@
-import standardStyles from '../styles/standard.module.css'
-
 export default function Page() {
   return (
-    <div className={standardStyles.content}>
+    <div className='content'>
       <p>
         We currently do not have the technical support to implement mailing
         lists in eeXiv. Check back later for updates. The best way to stay

tailwind.config.ts

@@ -1,20 +1,33 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss'
 
 const config: Config = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
     },
   },
-  plugins: [],
-};
-export default config;
+  plugins: [
+    function ({ addUtilities }: any) {
+      const newUtilities = {
+        '.no-link-style': {
+          color: 'inherit',
+          '&:hover': {
+            textDecoration: 'none',
+          },
+        },
+        // Add more custom utilities here
+      }
+      addUtilities(newUtilities, ['responsive', 'hover'])
+    },
+  ],
+}
+export default config