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; align-items: center;
} }
.main > * {
margin-top: calc(65rem / 16);
margin-bottom: calc(65rem / 16);
}
.title { .title {
position: relative; position: relative;
width: 80vw; width: 80vw;
height: 100vh; height: 100vh;
border: 1px solid orange;
} }
.titleImage { .titleImage {
position: absolute; position: absolute;
top: 80px; top: 10vh;
left: 150px; left: 10vw;
} }
.bubble { .blurb {
position: absolute; position: absolute;
bottom: 10px; bottom: 0vh;
right: 100px; right: 7vw;
width: 750px; width: 43vw;
height: 350px; height: 33vh;
background-color: var(--pink); padding: calc(30rem / 16);
opacity: 80%; background-color: var(--translucent-accent);
border-radius: 50px; 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 { .decoratorSolid {
position: absolute; position: absolute;
top: 20px; top: 2vh;
right: 250px; right: 13vw;
width: 250px; width: 16vw;
height: 180px; height: 24vh;
background-color: var(--primary-accent-light); background-color: var(--primary-accent-lighter);
opacity: 50%; opacity: 50%;
border-radius: 50px; border-radius: calc(50rem / 16);
} }
.decoratorDots { .decoratorDots {
position: absolute; position: absolute;
top: 300px; top: 40vh;
right: 10px; right: 0.8vw;
width: 175px; width: 11vw;
height: 275px; height: 36vh;
background-image: radial-gradient(var(--link) 35%, transparent 35%); background-image: radial-gradient(var(--link) 35%, transparent 35%);
background-position: 0 0; 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;
}

8
pages/index.tsx
View File

@ -8,12 +8,14 @@ import { About } from "@/components/About";
import { CenterWrapper } from "@/components/CenterWrapper"; import { CenterWrapper } from "@/components/CenterWrapper";
import { Sections } from "@/components/Sections"; import { Sections } from "@/components/Sections";
import { Timeline } from "@/components/Timeline"; import { Timeline } from "@/components/Timeline";
import { Title } from "@/components/Title";
import styles from "./frontpage.module.css"; import styles from "./frontpage.module.css";
export default function Home() { export default function Home() {
return ( return (
<div className={styles.main}> <div className={styles.main}>
<Title>Home</Title>
<div className={styles.title}> <div className={styles.title}>
<div className={styles.titleImage}> <div className={styles.titleImage}>
<Image <Image
@ -23,9 +25,9 @@ export default function Home() {
height={480} height={480}
/> />
</div> </div>
<div className={styles.bubble}> <div className={styles.blurb}>
<h1>Computer Science 2022</h1> <h1 className={styles.classYear}>Computer Science 2022</h1>
<h1>Class Profile</h1> <h1 className={styles.classProfile}>Class Profile</h1>
<h3>Welcome to UW Computer Science 2022 Class Profile.</h3> <h3>Welcome to UW Computer Science 2022 Class Profile.</h3>
</div> </div>
<div className={styles.decoratorSolid} /> <div className={styles.decoratorSolid} />