From 5828e93c043f5f1ceebc0400a4d2f66f3100f103 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Sun, 2 Oct 2022 15:59:11 -0400
Subject: [PATCH] Remove px and add Title
---
components/Title.tsx | 19 ++++++++++
pages/frontpage.module.css | 73 ++++++++++++++++++++++++--------------
pages/index.tsx | 8 +++--
3 files changed, 70 insertions(+), 30 deletions(-)
create mode 100644 components/Title.tsx
diff --git a/components/Title.tsx b/components/Title.tsx
new file mode 100644
index 0000000..d9fbf7e
--- /dev/null
+++ b/components/Title.tsx
@@ -0,0 +1,19 @@
+import Head from "next/head";
+import React from "react";
+
+interface Props {
+ children: string | string[];
+}
+
+export function Title(props: Props) {
+ const children =
+ typeof props.children === "string" ? [props.children] : props.children;
+
+ children.push("2022 CS Class Profile");
+
+ return (
+
+ {children.join(" - ")}
+
+ );
+}
diff --git a/pages/frontpage.module.css b/pages/frontpage.module.css
index 229bbfe..ca9a8a9 100644
--- a/pages/frontpage.module.css
+++ b/pages/frontpage.module.css
@@ -4,53 +4,72 @@
align-items: center;
}
+.main > * {
+ margin-top: calc(65rem / 16);
+ margin-bottom: calc(65rem / 16);
+}
+
.title {
position: relative;
width: 80vw;
height: 100vh;
- border: 1px solid orange;
}
.titleImage {
position: absolute;
- top: 80px;
- left: 150px;
+ top: 10vh;
+ left: 10vw;
}
-.bubble {
+.blurb {
position: absolute;
- bottom: 10px;
- right: 100px;
- width: 750px;
- height: 350px;
- background-color: var(--pink);
- opacity: 80%;
- border-radius: 50px;
+ bottom: 0vh;
+ right: 7vw;
+ width: 43vw;
+ height: 33vh;
+ padding: calc(30rem / 16);
+ background-color: var(--translucent-accent);
+ border: calc(2rem / 16) solid var(--primary-text);
+ box-shadow: 0 calc(1rem / 16) calc(10rem / 16) var(--primary-accent);
+ border-radius: calc(50rem / 16);
+ z-index: 1;
+}
+
+.blurb h1 {
+ margin-top: calc(0rem / 16);
+}
+
+.classYear {
+ color: var(--primary-text);
+}
+
+.classProfile {
+ color: var(--primary-heading)
+}
+
+.blurb h3 {
+ color: var(--primary-accent-light);
}
.decoratorSolid {
position: absolute;
- top: 20px;
- right: 250px;
- width: 250px;
- height: 180px;
- background-color: var(--primary-accent-light);
+ top: 2vh;
+ right: 13vw;
+ width: 16vw;
+ height: 24vh;
+ background-color: var(--primary-accent-lighter);
opacity: 50%;
- border-radius: 50px;
+ border-radius: calc(50rem / 16);
}
.decoratorDots {
position: absolute;
- top: 300px;
- right: 10px;
- width: 175px;
- height: 275px;
+ top: 40vh;
+ right: 0.8vw;
+ width: 11vw;
+ height: 36vh;
background-image: radial-gradient(var(--link) 35%, transparent 35%);
background-position: 0 0;
- background-size: 25px 25px;
+ background-size: calc(25rem / 16) calc(25rem / 16);
+ z-index: -1;
}
-
-.main > * {
- margin-top: 65px;
- margin-bottom: 65px;
-}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 4ff7200..b71c6a5 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,12 +8,14 @@ import { About } from "@/components/About";
import { CenterWrapper } from "@/components/CenterWrapper";
import { Sections } from "@/components/Sections";
import { Timeline } from "@/components/Timeline";
+import { Title } from "@/components/Title";
import styles from "./frontpage.module.css";
export default function Home() {
return (
+
Home
-
-
Computer Science 2022
-
Class Profile
+
+
Computer Science 2022
+ Class Profile
Welcome to UW Computer Science 2022 Class Profile.