diff --git a/.drone.yml b/.drone.yml index a5becb8b..beafe344 100644 --- a/.drone.yml +++ b/.drone.yml @@ -30,6 +30,19 @@ steps: commands: - npm run export +- name: deploy (staging) + image: node:16 + depends_on: + - export + environment: + TOKEN: + from_secret: STAGING_TOKEN + commands: + - 'curl -XPOST -H "Authorization: $TOKEN" "https://csclub.uwaterloo.ca/~a3thakra/update-csc/"' + when: + branch: + - main + trigger: event: exclude: diff --git a/.vscode/settings.json b/.vscode/settings.json index 68d9b3b3..4867b9a0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,9 +4,7 @@ "eslint.codeActionsOnSave.mode": "all", "[css]": { "editor.suggest.insertMode": "replace", - "gitlens.codeLens.scopes": [ - "document" - ], + "gitlens.codeLens.scopes": ["document"], "editor.formatOnSave": true }, "[javascript]": { @@ -38,5 +36,10 @@ "files.exclude": { "node_modules": true }, - "editor.tabSize": 2 -} \ No newline at end of file + "editor.tabSize": 2, + "files.eol": "\n", + "[markdown]": { + "editor.wordWrap": "on", + "editor.quickSuggestions": false + } +} diff --git a/components/Bubble.module.css b/components/Bubble.module.css index a7f3b645..638c93b7 100644 --- a/components/Bubble.module.css +++ b/components/Bubble.module.css @@ -1,7 +1,71 @@ -.bubble { +.container { + position: relative; padding: calc(36rem / 16) 0; + overflow-x: clip; } -.bubble:nth-child(odd) { +.bubble { + --border-radius: calc(5000rem / 16); + + display: flex; + flex-direction: row; + position: absolute; + top: 0; + height: 100%; + width: 100%; + justify-content: center; + align-items: flex-start; +} + +.bar { + height: 100%; + width: 100%; +} + +.decoration { + display: none; + width: calc(128rem / 16); +} + +.margin { + display: none; +} + +.content { + position: relative; + z-index: 1; +} + +.container:nth-child(odd) .bar { background-color: var(--primary-accent-light); } + +@media only screen and (min-width: calc(1350rem / 16)) { + .container:nth-child(odd) .decoration { + display: block; + position: absolute; + } + + .container:nth-child(4n + 1) .bar { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + transform: translateX(-12.5vw); + } + + .container:nth-child(4n + 1) .decoration { + top: calc(-50rem / 16); + right: 8vw; + } + + .container:nth-child(4n + 3) .bar { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + transform: translateX(12.5vw); + } + + .container:nth-child(4n + 3) .decoration { + top: calc(-50rem / 16); + left: 8vw; + transform: rotateY(180deg); + } +} diff --git a/components/Bubble.tsx b/components/Bubble.tsx index 746ee896..54691079 100644 --- a/components/Bubble.tsx +++ b/components/Bubble.tsx @@ -1,13 +1,24 @@ import React from "react"; +import { Image } from "@/components/Image"; + import { DefaultLayout } from "./DefaultLayout"; import styles from "./Bubble.module.css"; -export default function Bubble(props: { children: React.ReactNode }) { +export function Bubble(props: { children: React.ReactNode }) { return ( -
- {props.children} +
+
+
+ +
+
+ {props.children} +
); } diff --git a/components/HorizontalLine.module.css b/components/HorizontalLine.module.css new file mode 100644 index 00000000..16f3ab85 --- /dev/null +++ b/components/HorizontalLine.module.css @@ -0,0 +1,7 @@ +.line { + display: block; + margin: calc(1rem / 16) 0 calc(34rem / 16); + height: calc(1rem / 16); + border: none; + background-color: var(--primary-heading); +} diff --git a/components/HorizontalLine.tsx b/components/HorizontalLine.tsx new file mode 100644 index 00000000..598f196c --- /dev/null +++ b/components/HorizontalLine.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +import styles from "./HorizontalLine.module.css"; + +export function HorizontalLine() { + return
; +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 3d83bc18..e3967cb0 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -70,6 +70,14 @@ const menu: Menu = [ name: "CS Club Wiki", route: "https://wiki.csclub.uwaterloo.ca", }, + { + name: "Advice", + route: "/resources/advice/coop", + }, + { + name: "Internships", + route: "https://github.com/uwcsc/winter2022-internships", + }, ], }, ]; diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css index 8c5dc5bb..b7bbe06f 100644 --- a/components/OrganizedContent.module.css +++ b/components/OrganizedContent.module.css @@ -2,20 +2,28 @@ display: flex; } -.wrapper h1 { - margin: 1rem 0; - font-size: calc(24rem / 16); - font-weight: 600; - color: var(--primary-accent); -} - .content { display: flex; flex-direction: column; width: 100%; } +.content h1 { + font-size: calc(24rem / 16); + color: var(--primary-accent); +} + +.content h2, +.content h3 { + font-size: calc(18rem / 16); + margin-top: calc(24rem / 16); + margin-bottom: calc(16rem / 16); +} + .nav { + top: calc(20rem / 16); + position: sticky; + height: 100%; margin: calc(8rem / 16) calc(32rem / 16) 0 0; color: var(--primary-heading); font-weight: 500; @@ -29,7 +37,7 @@ border-bottom: calc(1rem / 16) solid var(--primary-accent-light); align-items: center; height: calc(40rem / 16); - width: calc(284rem / 16); + width: calc(200rem / 16); padding: 0 calc(14rem / 16); cursor: pointer; } @@ -110,7 +118,25 @@ padding-left: calc(8rem / 16); } +.link, +.link:visited { + color: inherit; + text-decoration: none; +} + @media only screen and (max-width: calc(768rem / 16)) { + .content h1 { + font-size: calc(18rem / 16); + } + + .content h2, + .content h3, + .content h4 { + font-size: calc(18rem / 16); + margin-top: calc(24rem / 16); + margin-bottom: calc(8rem / 16); + } + .nav { display: none; } diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx index 6d18db4c..2a490397 100644 --- a/components/OrganizedContent.tsx +++ b/components/OrganizedContent.tsx @@ -1,19 +1,13 @@ +import NextLink from "next/link"; import React, { ReactNode, ComponentType } from "react"; import styles from "./OrganizedContent.module.css"; -export interface LinkProps { - className?: string; - id: string; - children: ReactNode; -} - type Link = ComponentType; interface Section { id: string; title: string; - Content: ComponentType; } const READ_ALL_TITLE = "Read All"; @@ -21,16 +15,23 @@ export const READ_ALL_ID = "read-all"; interface Props { sections: Section[]; - currentId: string; + id: string; + children: ReactNode; link: Link; } -export function OrganizedContent(props: Props) { - const sections = createSections(props.sections); - const currentIndex = sections.findIndex(({ id }) => id === props.currentId); +export function OrganizedContent({ + sections, + id, + children, + link: Link, +}: Props) { + const currentIndex = sections.findIndex( + ({ id: sectionId }) => sectionId === id + ); if (currentIndex < 0) { - throw new Error(`Section with ID ${props.currentId} was not found`); + throw new Error(`Section with ID ${id} was not found`); } const section = sections[currentIndex]; @@ -38,20 +39,20 @@ export function OrganizedContent(props: Props) { return (
-