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.