diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.tsx | 5 | ||||
| -rw-r--r-- | src/components/FormListing.tsx | 8 | ||||
| -rw-r--r-- | src/components/HeaderBar/header_2.svg | 2 | ||||
| -rw-r--r-- | src/components/HeaderBar/index.tsx | 13 | ||||
| -rw-r--r-- | src/pages/LandingPage.tsx | 21 |
5 files changed, 30 insertions, 19 deletions
diff --git a/src/App.tsx b/src/App.tsx index 3505dc1..d372e2f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,11 @@ import colors from "./colors"; const globalStyles = css` @import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&display=swap'); +@font-face { + font-family: 'Uni Sans'; + src: url(fonts/unisans.otf) format('opentype'); +} + body { background-color: ${colors.notQuiteBlack}; color: white; diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx index 66860da..055c624 100644 --- a/src/components/FormListing.tsx +++ b/src/components/FormListing.tsx @@ -17,15 +17,15 @@ interface FormListingProps { function FormListing(props: FormListingProps) { const listingStyle = css` background-color: ${props.open ? colors.success : colors.darkButNotBlack}; - width: 80%; + width: 60%; padding: 20px; margin-top: 20px; margin-bottom: 20px; - border-radius: 20px; - transition: filter 100ms; + border-radius: 10px; + transition: transform 100ms; &:hover { - filter: brightness(110%); + transform: scale(1.01); } `; diff --git a/src/components/HeaderBar/header_2.svg b/src/components/HeaderBar/header_2.svg index 692cc7c..e17b3e6 100644 --- a/src/components/HeaderBar/header_2.svg +++ b/src/components/HeaderBar/header_2.svg @@ -1,3 +1,3 @@ <svg width="1440" height="293" viewBox="0 0 1440 293" fill="none" id="header_2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> -<path opacity="0.49063" d="M1447.27 -6.18774V132.565C1428.83 231.124 1378.94 292.543 1114.48 292.543C775.159 292.543 477.003 5.74973 -6.39087 232.513V-6.18713L1447.27 -6.18774Z" fill="#687AE3"/> +<path opacity="1" d="M1447.27 -6.18774V132.565C1428.83 231.124 1378.94 292.543 1114.48 292.543C775.159 292.543 477.003 5.74973 -6.39087 232.513V-6.18713L1447.27 -6.18774Z" fill="#7289DA"/> </svg> diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index 97dbb8c..0569e3d 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -12,7 +12,11 @@ position: absolute; width: 100%; transition: height 1s; -@media (max-width: 660px) { +@media (max-width: 770px) { + height: 180px; +} + +@media (max-width: 580px) { height: 140px; } `; @@ -26,18 +30,19 @@ function HeaderBar() { <h1 css={css` font-size: 4em; margin: 0; - margin-top: 10px; + margin-top: 30px; margin-left: 30px; margin-bottom: 200px; transition-property: font-size, margin-bottom; transition-duration: 1s; + font-family: "Uni Sans", "Hind", "Arial", sans-serif; - @media (max-width: 660px) { + @media (max-width: 770px) { margin-bottom: 100px; font-size: 3em; } - @media (max-width: 510px) { + @media (max-width: 580px) { font-size: 2em; } `}> diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 16d40c4..4a6e157 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -1,22 +1,23 @@ /** @jsx jsx */ -import { jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/core"; import HeaderBar from "../components/HeaderBar"; import FormListing from "../components/FormListing"; -import OAuth2Button from "../components/OAuth2Button"; function LandingPage() { return <div> <HeaderBar/> - <div css={{marginLeft: "20px"}}> - <h1>Welcome to Python Discord Forms</h1> + <div> - <OAuth2Button/> - - <h3>Available forms</h3> - - <FormListing title="Ban Appeals" description="Appealing bans from the Discord server" open={true}/> - <FormListing title="Insights 2020" description="Insights about the Python Discord community" open={false}/> + <div css={css` + display: flex; + align-items: center; + flex-direction: column; + `}> + <h1>Available Forms</h1> + <FormListing title="Ban Appeals" description="Appealing bans from the Discord server" open={true}/> + <FormListing title="Insights 2020" description="Insights about the Python Discord community" open={false}/> + </div> </div> </div> } |
