www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Remove px and add Title
continuous-integration/drone/push Build is failing Details

This commit is contained in:
Jared He 2022-10-02 15:59:11 -04:00
parent 11c4c2d187
commit 5828e93c04
3 changed files with 70 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/Title.tsx Normal file
View File

@ -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 (
<Head>
<title>{children.join(" - ")}</title>
</Head>
);
}

73
pages/frontpage.module.css
View File

@ -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;
}
.main > * {
margin-top: 65px;
margin-bottom: 65px;
background-size: calc(25rem / 16) calc(25rem / 16);
z-index: -1;
}

8
pages/index.tsx
View File

@ -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 (
<div className={styles.main}>
<Title>Home</Title>
<div className={styles.title}>
<div className={styles.titleImage}>
<Image
@ -23,9 +25,9 @@ export default function Home() {
height={480}
/>
</div>
<div className={styles.bubble}>
<h1>Computer Science 2022</h1>
<h1>Class Profile</h1>
<div className={styles.blurb}>
<h1 className={styles.classYear}>Computer Science 2022</h1>
<h1 className={styles.classProfile}>Class Profile</h1>
<h3>Welcome to UW Computer Science 2022 Class Profile.</h3>
</div>
<div className={styles.decoratorSolid} />