Begin porting essential pages

This commit is contained in:
Youwen Wu 2024-02-09 20:39:57 -08:00
parent 87ec3b4954
commit a92197c8a8
6 changed files with 113 additions and 98 deletions

View file

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

21
src/app/about/page.tsx Normal file
View file

@ -0,0 +1,21 @@
import Link from "next/link";
import styles from "./about.module.css";
export default function Page() {
return (
<div className={styles.content}>
<p className={styles.message}>
{`eeXiv is a project hosted by Team 1280 EECS ("Electrical Engineering and
Computer Science"), independent of the department of the same name at`}{" "}
<Link href="https://eecs.berkeley.edu">UC Berkeley</Link>. We aim to
rival arXiv as the single largest open-source and open-access research
paper repository. eeXiv is{" "}
<Link href="https://github.com/Team-1280/eeXiv">open-source</Link> and{" "}
<Link href="https://github.com/Team-1280/eeXiv/blob/main/LICENSE">
licensed
</Link>{" "}
under the GNU General Public License.
</p>
</div>
);
}

View file

@ -11,18 +11,3 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Zilla Slab", serif;
font-weight: 500;
}
p,
div {
font-family: "Inter", sans-serif;
}

View file

@ -1,6 +1,4 @@
/* main stylesheet for eeXiv */ /* stylesheet for the eexiv UI and the base layout (search, logo, header, footer) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Roboto:wght@700&family=Zilla+Slab:wght@400;500;700&display=swap");
.header { .header {
width: 100%; width: 100%;
@ -30,7 +28,7 @@
.search { .search {
position: absolute; position: absolute;
top: 200px; top: 175px;
left: 50%; left: 50%;
width: 40vw; width: 40vw;
} }
@ -44,6 +42,7 @@
height: 45px; height: 45px;
border: 3px solid #0c5198; border: 3px solid #0c5198;
border-radius: 10px; border-radius: 10px;
padding: 22px;
} }
.searchButton { .searchButton {
@ -52,6 +51,7 @@
border: 3px solid white; border: 3px solid white;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
margin-left: 10px;
} }
.searchButton:hover { .searchButton:hover {
@ -84,7 +84,6 @@
height: fit-content; height: fit-content;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
font-family: "Inter", sans-serif;
} }
.footerContent a { .footerContent a {

View file

@ -1,8 +1,11 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter, Zilla_Slab } from "next/font/google";
import "./globals.css"; import "./globals.css";
import styles from "./home.module.css";
import Link from "next/link";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
const zillaSlab = Zilla_Slab({ subsets: ["latin"], weight: ["500", "700"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Create Next App",
@ -16,7 +19,74 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}>{children}</body> <body className={inter.className}>
<div className={styles.header}>
<img className={styles.wordmark} src="/eecs-wordmark.png" />
<p className={styles.contributions}>
We gratefully acknowledge support from our volunteer peer reviewers,
member institutions, and all{" "}
<Link
href="https://github.com/Team-1280/eeXiv/graphs/contributors"
target="_blank"
>
open-source contributors
</Link>
.
</p>
</div>
<div className={styles.banner}>
<h1 className={[styles.title, zillaSlab.className].join(" ")}>
eeXiv<sup>2</sup>
</h1>
<div className={styles.search}>
<input
type="text"
className={styles.searchBox}
name="q"
placeholder="Search..."
/>
<button type="submit" className={styles.searchButton}>
Search
</button>
</div>
</div>
{children}
<footer>
<div className={styles.footerContent}>
<ul>
<li>
<Link href="/about">About</Link>
</li>
<li>
<Link href="/help">Help</Link>
</li>
<li>
<Link href="/contact">Contact</Link>
</li>
<li>
<Link href="/subscribe">Subscribe</Link>
</li>
<li>
<Link href="/legal/copyright">Copyright</Link>
</li>
<li>
<Link href="/legal/privacy">Privacy Policy</Link>
</li>
<li>
<Link href="/help/accessibility">Accessibility</Link>
</li>
<li>
<Link href="/status">eeXiv status</Link>
</li>
<li>
<Link href="/status/notifications">
Get status notifications
</Link>
</li>
</ul>
</div>
</footer>
</body>
</html> </html>
); );
} }

View file

@ -1,38 +1,7 @@
import styles from "./page.module.css"; import styles from "./home.module.css";
export default function Home() { export default function Home() {
return ( return (
<>
<div className={styles.header}>
<img
className={styles.wordmark}
src="https://raw.githubusercontent.com/Team-1280/identity/main/assets/img/eecs/eecs-wordmark.png"
/>
<p className={styles.contributions}>
We gratefully acknowledge support from our volunteer peer reviewers,
member institutions, and all{" "}
<a href="https://github.com/Team-1280/eeXiv/graphs/contributors">
open-source contributors
</a>
.
</p>
</div>
<div className={styles.banner}>
<h1 className={styles.title}>
eeXiv<sup>2</sup>
</h1>
<div className={styles.search}>
<input
type="text"
className={styles.searchBox}
name="q"
placeholder="Search..."
/>
<button type="submit" className={styles.searchButton}>
Search
</button>
</div>
</div>
<div className={styles.content}> <div className={styles.content}>
<p className={styles.message}> <p className={styles.message}>
eeXiv<sup>2</sup> is a free distribution service and an open-access eeXiv<sup>2</sup> is a free distribution service and an open-access
@ -43,39 +12,5 @@ export default function Home() {
independently through other channels. independently through other channels.
</p> </p>
</div> </div>
<footer>
<div className={styles.footerContent}>
<ul>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/help">Help</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
<li>
<a href="/subscribe">Subscribe</a>
</li>
<li>
<a href="/legal/copyright">Copyright</a>
</li>
<li>
<a href="/legal/privacy">Privacy Policy</a>
</li>
<li>
<a href="/help/accessibility">Accessibility</a>
</li>
<li>
<a href="/status">eeXiv status</a>
</li>
<li>
<a href="/status/notifications">Get status notifications</a>
</li>
</ul>
</div>
</footer>
</>
); );
} }