Clean up Shapes Backgrounds on some mobile pages (#307)

Addresses some of the shapes shenanigans that I noticed here: www/www-new#236

- Removed shapes from mobile /events/\[year\]/\[term\]/\[event\] page. (I left the default shapes on the mobile /events/\[year\]/\[term\] page, since with the vertical nav header they now fit, but I'd love to hear others' opinions on this!)
- Adjusted top margins on mobile Meet the Team, Our Supporters, and Tech Talks/Tech Talk pages to accommodate the shapes.
- Changed shapes on mobile Home page to accommodate the expanded Social Links.

Co-authored-by: Amy <a258wang@uwaterloo.ca>
Reviewed-on: www/www-new#307
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-committed-by: Amy <a258wang@csclub.uwaterloo.ca>
fix-md-font
Amy Wang 1 year ago
parent 2f2c032bd7
commit 623e1bd52d
  1. 2
      pages/about/our-supporters.module.css
  2. 1
      pages/about/team.module.css
  3. 11
      pages/events/[year]/[term]/[event].tsx
  4. 17
      pages/index.tsx
  5. 3
      pages/resources/tech-talks/index.module.css

@ -23,7 +23,7 @@
@media only screen and (max-width: calc(768rem / 16)) {
.page {
margin-bottom: calc(30rem / 16);
margin: calc(30rem / 16) 0;
}
.headerContainer {

@ -64,6 +64,7 @@
.headerContainer {
flex-direction: column-reverse;
padding-bottom: 1rem;
margin-top: calc(30rem / 16);
}
.nav {

@ -5,6 +5,11 @@ import { MDXRemote } from "next-mdx-remote";
import React from "react";
import { EventCard } from "@/components/EventCard";
import {
ShapesConfig,
defaultGetShapesConfig,
GetShapesConfig,
} from "@/components/ShapesBackground";
import { Title } from "@/components/Title";
import {
Event,
@ -30,6 +35,12 @@ export default function EventInfoPage({ year, term, event }: Props) {
);
}
EventInfoPage.getShapesConfig = ((width, height) => {
return window.innerWidth <= 768
? ({} as ShapesConfig)
: defaultGetShapesConfig(width, height);
}) as GetShapesConfig;
interface Props {
year: string;
term: string;

@ -264,20 +264,13 @@ Home.getShapesConfig = (() => {
],
hash: [
{
top: "calc(190rem / 16)",
right: "87vw",
width: "calc(60rem / 16)",
height: "calc(60rem / 16)",
},
],
triangle: [
{
top: "calc(266rem / 16)",
right: "78vw",
top: "calc(250rem / 16)",
right: "80vw",
width: "calc(45rem / 16)",
height: "calc(45rem / 16)",
transform: "rotate(-26deg)",
},
],
triangle: [
{
top: "calc(4rem / 16)",
right: "3vw",
@ -288,7 +281,7 @@ Home.getShapesConfig = (() => {
],
waves: [
{
top: "calc(168rem / 16)",
top: "calc(230rem / 16)",
left: "86vw",
width: "calc(102rem / 16)",
height: "calc(50rem / 16)",

@ -36,8 +36,7 @@
@media only screen and (max-width: calc(768rem / 16)) {
.page {
margin-top: 0;
margin-bottom: calc(20rem / 16);
margin: calc(30rem / 16) 0;
}
.headerContainer {

Loading…
Cancel
Save