From 28c6d4043adebda28c89aa4a5186f22ea0649717 Mon Sep 17 00:00:00 2001 From: Liam Arbuckle Date: Mon, 23 Oct 2023 22:47:57 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=91=F0=9F=8F=BC=E2=80=8D=F0=9F=A6=AF?= =?UTF-8?q?=F0=9F=8E=BE=20=E2=86=9D=20Adding=20some=20styling=20for=20a=20?= =?UTF-8?q?new=20&=20updated=20landing=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 16388 -> 16388 bytes components/ui/Typography.tsx | 148 +++++++++++++++++++++++++++++++ pages/index.tsx | 21 ++++- styles/Landing.module.scss | 113 +++++++++++++++++++++++ styles/ui/Typography.module.scss | 85 ++++++++++++++++++ 5 files changed, 365 insertions(+), 2 deletions(-) create mode 100644 components/ui/Typography.tsx create mode 100644 styles/Landing.module.scss create mode 100644 styles/ui/Typography.module.scss diff --git a/.DS_Store b/.DS_Store index 2e0a72eb94590c6374cd84da694d1028ab81c99d..0296b532cefa1dec358024689acad56e1bcd69c3 100644 GIT binary patch delta 76 zcmZo^U~Fk%oZ!!xvoXMsee!bSW*!Cx21XzT0uJuYf*fKjo7H%pDl^JX<}q-eJl}wI dbDe=Z+vfRd8H}6RE#9$gmNs3*2;` + {children} + + ) +} + +function Text(props: TextProps) { + const { + children, + className = "", + style, + type = "default", + mark, + code, + strong, + disabled = false, + small = false, + underline = false, + strikethrough = false, + weight, + lineHeight + } = props + + const Tag = + (mark && "mark") || (code && "code") || (strong && "strong") || "span" + + return ( + + {children} + + ) +} + +const Link = forwardRef(function Link( + props, + ref +) { + const { children, className, style, target, href, onClick } = props + + return ( + + {children} + + ) +}) + +export default function Typography(props: TypographyProps) { + const { children, className, style } = props + + return ( +
+ {children} +
+ ) +} + +Typography.Title = Title +Typography.Text = Text +Typography.Link = Link \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index ea22294e..8c9839c8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,6 +6,13 @@ import CardForum from "../components/Content/DiscussCard"; import { useRouter } from "next/router"; import Login from "./login"; +import styles from '../styles/Landing.module.css'; +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Star Sailors" +} + export default function Home() { const session = useSession(); const supabase = useSupabaseClient(); @@ -36,6 +43,16 @@ export default function Home() { } return ( - Hello - ) +
+
+
+
+
+

Test

+
+
+
+
+
+ ); } \ No newline at end of file diff --git a/styles/Landing.module.scss b/styles/Landing.module.scss new file mode 100644 index 00000000..152ee598 --- /dev/null +++ b/styles/Landing.module.scss @@ -0,0 +1,113 @@ +.container { + min-width: 300px; + background: linear-gradient(90deg, #eaeaea 1px, transparent 1px) 1px 0, #fff; + background-size: calc(100% / 4) 1px; + background-position: center; +} + +.header { + display: flex; + justify-content: space-between; + padding: 3rem 5rem; + + nav { + display: flex; + align-items: center; + gap: 20px; + } + + @media screen and (max-width: 550px) { + #logo { + display: none; + } + + justify-content: center; + } +} + +.hero { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 50px; + gap: 20px; + + .cover { + width: 90%; + @media screen and (max-width: 550px) { + width: 120%; + } + } +} + +.featureList { + display: flex; + flex-direction: column; + align-items: center; + gap: 100px; + margin: 100px 0; +} + +.feature { + display: flex; + gap: 50px; + max-width: 1100px; + width: 90%; + justify-content: center; + align-items: center; + min-height: 50px; + + flex-direction: row; + text-align: left; + + &.reverse { + flex-direction: row-reverse; + text-align: right; + } + + @media screen and (max-width: 768px) { + max-width: 500px; + width: 100%; + } + + + @media (max-width: 768px) { + flex-direction: column; + align-items: center; + gap: 10px; + } +} + +.featureImage { + width: 50%; + height: 300px; + background-color: #eeeeee; + background-size: cover; + background-position: left bottom; + flex-shrink: 0; + border: 15px solid #fff; + border-radius: 0.125rem; + box-shadow: 0px 0px 0px 1px #eaeaea; + + @media screen and (max-width: 768px) { + width: 80%; + } +} + +.featureDescription { + width: 50%; + + @media screen and (max-width: 768px) { + width: 80%; + } +} + +.footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 200px; + height: 150px; + background-color: #eaeaea; +} \ No newline at end of file diff --git a/styles/ui/Typography.module.scss b/styles/ui/Typography.module.scss new file mode 100644 index 00000000..f46e93bd --- /dev/null +++ b/styles/ui/Typography.module.scss @@ -0,0 +1,85 @@ +.title { + color: var(--color-n900); + margin: 1rem 0; + font-weight: 700; + &.h1 { font-size: 3rem; } + &.h2 { font-size: 2.25rem; } + &.h3 { font-size: 1.75rem; } + &.h4 { font-size: 1.125rem; } + &.h5 { font-size: 1rem; } +} + +.text { + font-size: 0.95rem; + line-height: 1.6rem; + text-align: left; + + &.small { + font-size: 0.8rem; + line-height: 1.4rem; + } + + &.default { + color: var(--color-n800); + } + + &.secondary { + color: var(--color-n600); + } + + &.success { + color: var(--color-green); + } + + &.warning { + color: var(--color-yellow); + } + + &.danger { + color: var(--color-red); + } + + &.disabled { + opacity: 0.5; + cursor: not-allowed; + } + + &.mark { + padding: 0; + background-color: rgb(251, 243, 219); + } + + &.code { + padding: 0.2em 0.4em 0.1em; + background: hsla(0, 0%, 58.8%, 0.1); + border: 1px solid hsla(0, 0%, 39.2%, 0.2); + border-radius: 3px; + font-weight: 500; + font-family: "JetBrains Mono", monospace; + } + + &.strong { + font-weight: 600; + } + + &.span { + font-weight: 400; + } +} + +.link { + font-size: 1rem; + line-height: 1.6rem; + color: var(--color-b400); + border-bottom: 1px solid var(--color-b200); + + &:hover { + color: var(--color-b500); + } +} + +.typography { + font-size: 1rem; + line-height: 1.6rem; + color: var(--color-n800); +} \ No newline at end of file