From 7a08e0c3310804ed2f14461a2247ec4081189888 Mon Sep 17 00:00:00 2001 From: Linhui Luo Date: Sun, 13 Jun 2021 23:55:25 +0000 Subject: [PATCH] Footer --- components/Footer.module.css | 36 ++++++ components/Footer.tsx | 16 +++ components/SocialLinks.module.css | 15 +++ components/SocialLinks.tsx | 186 ++++++++++++++++++++++++++++++ components/playground.tsx | 1 + pages/_app.css | 2 +- pages/_app.module.css | 12 ++ pages/_app.tsx | 15 ++- 8 files changed, 279 insertions(+), 4 deletions(-) create mode 100644 components/Footer.module.css create mode 100644 components/Footer.tsx create mode 100644 components/SocialLinks.module.css create mode 100644 components/SocialLinks.tsx create mode 100644 pages/_app.module.css diff --git a/components/Footer.module.css b/components/Footer.module.css new file mode 100644 index 00000000..4d70b0ba --- /dev/null +++ b/components/Footer.module.css @@ -0,0 +1,36 @@ +.footer { + box-sizing: border-box; + background: var(--purple-2); + height: calc(66rem / 16); + padding: calc(14rem / 16) 0; + width: 100%; +} + +.container { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + max-width: calc(1440rem / 16); + padding: 0 calc(48rem / 16); + margin: 0 auto; + height: 100%; +} + +.text { + color: white; + font-style: normal; + text-align: center; +} + +@media only screen and (max-width: calc(768rem / 16)) { + .footer { + height: calc(120rem / 16); + } + + .container { + flex-direction: column-reverse; + justify-content: space-around; + padding: 0 calc(24rem / 16); + } +} diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 00000000..0ce6c715 --- /dev/null +++ b/components/Footer.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import styles from "./Footer.module.css"; +import { SocialLinks } from "./SocialLinks"; + +export function Footer() { + return ( + + ); +} diff --git a/components/SocialLinks.module.css b/components/SocialLinks.module.css new file mode 100644 index 00000000..99ca6366 --- /dev/null +++ b/components/SocialLinks.module.css @@ -0,0 +1,15 @@ +.link, +.links { + display: flex; + align-items: center; + justify-content: center; +} + +.links > * { + margin: 0 calc(10rem / 16); +} + +.big > * { + width: calc(40rem / 16); + height: calc(40rem / 16); +} diff --git a/components/SocialLinks.tsx b/components/SocialLinks.tsx new file mode 100644 index 00000000..7f8714d3 --- /dev/null +++ b/components/SocialLinks.tsx @@ -0,0 +1,186 @@ +import React from "react"; +import styles from "./SocialLinks.module.css"; + +interface Props { + color: "white" | "gradient"; + size: "small" | "big"; +} + +export const SocialLinks: React.FC = (props) => { + return ( +
+ {links.map((Link, index) => ( + + ))} +
+ ); +}; + +const iconList = [ + { + name: "Facebook", + image: FacebookSvg, + link: "https://www.facebook.com/uw.computerscienceclub", + }, + { + name: "Instagram", + image: InstagramSvg, + link: "https://www.instagram.com/uwcsclub/", + }, + { + name: "Twitch", + image: TwitchSvg, + link: "https://www.twitch.tv/uwcsclub", + }, + { + name: "Discord", + image: DiscordSvg, + link: "https://discord.gg/pHfYBCg", + }, +]; + +const links = iconList.map((icon) => { + function SocialLink({ size, color }: Props) { + return ( + + {icon.image(color)} + + ); + } + + SocialLink.displayName = icon.name; + + return SocialLink; +}); + +export const [Facebook, Instagram, Twitch, Discord] = links; + +function InstagramSvg(color: string) { + return ( + + + + + + + + ); +} + +function DiscordSvg(color: string) { + return ( + + + + + + + + + + + + + + + + + ); +} + +function TwitchSvg(color: string) { + return ( + + + + + + + + + + + + + + + + + ); +} + +function FacebookSvg(color: string) { + return ( + + + + + + + + ); +} diff --git a/components/playground.tsx b/components/playground.tsx index 347a8f08..68478ad1 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -47,6 +47,7 @@ import { TeamMember } from "./TeamMember"; import { TeamMemberCard } from "./TeamMemberCard"; import { OrganizedContent, LinkProps } from "./OrganizedContent"; import { Button } from "./Button"; +import { Footer } from "./Footer"; const events = [ { Content: OOTBReact, metadata: OOTBReactEventMetadata }, diff --git a/pages/_app.css b/pages/_app.css index 514fe1b8..46c08410 100644 --- a/pages/_app.css +++ b/pages/_app.css @@ -41,7 +41,7 @@ body { ); } -@media only screen and (max-width: calc(375rem / 16)) { +@media only screen and (max-width: calc(425rem / 16)) { body { font-size: calc(14rem / 16); } diff --git a/pages/_app.module.css b/pages/_app.module.css new file mode 100644 index 00000000..a9bb4d65 --- /dev/null +++ b/pages/_app.module.css @@ -0,0 +1,12 @@ +.appContainer { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* This makes the footer stay at the bottom, even if there's not much content + * on the screen. + */ +.contentContainer { + flex-grow: 1; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index cbb41c98..892f09dd 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,16 +3,25 @@ import { AppProps } from "next/app"; import { MDXProvider } from "@mdx-js/react"; import { ThemeProvider } from "../components/theme"; import { Navbar } from "../components/Navbar"; +import { Footer } from "../components/Footer"; +import { Link } from "../components/Link"; +import styles from "./_app.module.css"; + import "./_app.css"; import "./font.css"; -import { Link } from "../components/Link"; export default function App({ Component, pageProps }: AppProps): JSX.Element { return ( - - +
+ + {/* Wrapping content with a div to allow for a display: block parent */} +
+ +
+
);