night0721/nyx-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

syntax changes

Browse source
This commit is contained in:
night0721 2022-01-09 05:38:17 +08:00
parent 3f27eb643e
commit a06dcd0453
18 changed files with 328 additions and 292 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/Card.js
View file

@ -2,9 +2,7 @@ import React from "react";
import Link from "next/link"; import Link from "next/link";
import { Text, Flex, Button } from "@chakra-ui/react"; import { Text, Flex, Button } from "@chakra-ui/react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
const MotionFlex = motion(Flex); const MotionFlex = motion(Flex);
const item = { const item = {
hidden: { y: 20, opacity: 0 }, hidden: { y: 20, opacity: 0 },
visible: { visible: {
@ -12,8 +10,7 @@ const item = {
opacity: 1, opacity: 1,
}, },
}; };
export default function Card({ title, desc, link }) {
function Card({ title, desc, link }) {
return ( return (
<Link href={link}> <Link href={link}>
<MotionFlex <MotionFlex
@ -36,5 +33,3 @@ function Card({ title, desc, link }) {
</Link> </Link>
); );
} }
export default Card;

20
components/Features/Feature.js
View file

@ -1,18 +1,20 @@
import { Box, Stack, Text, useColorModeValue as mode } from '@chakra-ui/react' import { Box, Stack, Text, useColorModeValue as mode } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
export const Feature = props => {
export const Feature = (props) => { const { title, children, icon } = props;
const { title, children, icon } = props
return ( return (
<Stack spacing={{ base: '3', md: '6' }} direction={{ base: 'column', md: 'row' }}> <Stack
spacing={{ base: "3", md: "6" }}
direction={{ base: "column", md: "row" }}
>
<Box fontSize="6xl">{icon}</Box> <Box fontSize="6xl">{icon}</Box>
<Stack spacing="1"> <Stack spacing="1">
<Text fontWeight="extrabold" fontSize="lg"> <Text fontWeight="extrabold" fontSize="lg">
{title} {title}
</Text> </Text>
<Box color={mode('gray.600', 'gray.400')}>{children}</Box> <Box color={mode("gray.600", "gray.400")}>{children}</Box>
</Stack> </Stack>
</Stack> </Stack>
) );
} };

32
components/Features/Features.js
View file

@ -1,23 +1,35 @@
import { Box, SimpleGrid } from '@chakra-ui/react' import { Box, SimpleGrid } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
import { FcDoughnutChart, FcMultipleDevices, FcPrivacy, FcTimeline } from 'react-icons/fc' import {
import { Feature } from './Feature' FcDoughnutChart,
FcMultipleDevices,
FcPrivacy,
FcTimeline,
} from "react-icons/fc";
import { Feature } from "./Feature";
export const Features = () => ( export const Features = () => (
<Box as="section" maxW="5xl" mx="auto" py="12" px={{ base: '6', md: '8' }}> <Box as="section" maxW="5xl" mx="auto" py="12" px={{ base: "6", md: "8" }}>
<SimpleGrid columns={{ base: 1, md: 2 }} spacingX="10" spacingY={{ base: '8', md: '14' }}> <SimpleGrid
columns={{ base: 1, md: 2 }}
spacingX="10"
spacingY={{ base: "8", md: "14" }}
>
<Feature title="Secure by default" icon={<FcPrivacy />}> <Feature title="Secure by default" icon={<FcPrivacy />}>
Cath will never leak any of your information. Ever. All your data is stored securely on our side. Cath will never leak any of your information. Ever. All your data is
stored securely on our side.
</Feature> </Feature>
<Feature title="Always up to date" icon={<FcTimeline />}> <Feature title="Always up to date" icon={<FcTimeline />}>
Cath is constantly being updated and worked on. Bugs and features, you name them, we do them. Cath is constantly being updated and worked on. Bugs and features, you
name them, we do them.
</Feature> </Feature>
<Feature title="Incredible statistics" icon={<FcDoughnutChart />}> <Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
Amazing server statistics that make tracking your server growth a breeze. Amazing server statistics that make tracking your server growth a
breeze.
</Feature> </Feature>
<Feature title="For everyone" icon={<FcMultipleDevices />}> <Feature title="For everyone" icon={<FcMultipleDevices />}>
No matter who you are, Cath is sure to have a purpose for you. No matter who you are, Cath is sure to have a purpose for you.
</Feature> </Feature>
</SimpleGrid> </SimpleGrid>
</Box> </Box>
) );

8
components/Footer/Copyright.js
View file

@ -1,8 +1,8 @@
import { Text, TextProps } from '@chakra-ui/layout' import { Text, TextProps } from "@chakra-ui/layout";
import * as React from 'react' import * as React from "react";
export const Copyright = (props) => ( export const Copyright = props => (
<Text fontSize="sm" {...props}> <Text fontSize="sm" {...props}>
&copy; {new Date().getFullYear()} Cath. All rights reserved. &copy; {new Date().getFullYear()} Cath. All rights reserved.
</Text> </Text>
) );

21
components/Footer/Footer.js
View file

@ -1,15 +1,22 @@
import { Box, Stack } from '@chakra-ui/react' import { Box, Stack } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
import { Copyright } from './Copyright' import { Copyright } from "./Copyright";
import { SocialMediaLinks } from './SocialMediaLinks' import { SocialMediaLinks } from "./SocialMediaLinks";
export const Footer = () => ( export const Footer = () => (
<Box as="footer" role="contentinfo" mx="auto" maxW="7xl" py="12" px={{ base: '4', md: '8' }}> <Box
as="footer"
role="contentinfo"
mx="auto"
maxW="7xl"
py="12"
px={{ base: "4", md: "8" }}
>
<Stack> <Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between"> <Stack direction="row" spacing="4" align="center" justify="space-between">
<SocialMediaLinks /> <SocialMediaLinks />
</Stack> </Stack>
<Copyright alignSelf={{ base: 'center', sm: 'start' }} /> <Copyright alignSelf={{ base: "center", sm: "start" }} />
</Stack> </Stack>
</Box> </Box>
) );

18
components/Footer/SocialMediaLinks.js
View file

@ -1,9 +1,15 @@
import { ButtonGroup, ButtonGroupProps, IconButton } from '@chakra-ui/react' import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
import { FaGithub } from 'react-icons/fa' import { FaGithub } from "react-icons/fa";
export const SocialMediaLinks = (props) => ( export const SocialMediaLinks = props => (
<ButtonGroup variant="ghost" color="gray.600" {...props}> <ButtonGroup variant="ghost" color="gray.600" {...props}>
<IconButton as="a" href="https://github.com/night0721/cath.gq" aria-label="GitHub" icon={<FaGithub fontSize="20px" />} target='_empty'/> <IconButton
as="a"
href="https://github.com/night0721/cath.gq"
aria-label="GitHub"
icon={<FaGithub fontSize="20px" />}
target="_empty"
/>
</ButtonGroup> </ButtonGroup>
) );

17
components/Hero/Hero.js
View file

@ -9,7 +9,7 @@ import {
Text, Text,
Icon, Icon,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { signIn } from 'next-auth/client' import { signIn } from "next-auth/client";
const Hero = () => { const Hero = () => {
return ( return (
@ -25,7 +25,7 @@ const Hero = () => {
fontWeight="bold" fontWeight="bold"
lineHeight="none" lineHeight="none"
letterSpacing={{ base: "normal", md: "tight" }} letterSpacing={{ base: "normal", md: "tight" }}
color={useColorModeValue("gray.900", 'gray.100')} color={useColorModeValue("gray.900", "gray.100")}
> >
Your favorite{" "} Your favorite{" "}
<Text <Text
@ -43,9 +43,10 @@ const Hero = () => {
px={{ base: 0, lg: 24 }} px={{ base: 0, lg: 24 }}
mb={6} mb={6}
fontSize={{ base: "lg", md: "xl" }} fontSize={{ base: "lg", md: "xl" }}
color={useColorModeValue("gray.600", 'gray.300')} color={useColorModeValue("gray.600", "gray.300")}
> >
Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM. Your favorite CODM bot. Cath.exe is packed to the brim with commands
for moderation, stats and of course, CODM.
</chakra.p> </chakra.p>
<Stack <Stack
direction={{ base: "column", sm: "row" }} direction={{ base: "column", sm: "row" }}
@ -62,7 +63,9 @@ const Hero = () => {
justifyContent="center" justifyContent="center"
w={{ base: "full", sm: "auto" }} w={{ base: "full", sm: "auto" }}
mb={{ base: 2, sm: 0 }} mb={{ base: 2, sm: 0 }}
href={"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"} href={
"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"
}
size="lg" size="lg"
> >
Invite Cath Invite Cath
@ -82,7 +85,9 @@ const Hero = () => {
justifyContent="center" justifyContent="center"
w={{ base: "full", sm: "auto" }} w={{ base: "full", sm: "auto" }}
mb={{ base: 2, sm: 0 }} mb={{ base: 2, sm: 0 }}
onClick={() => { signIn() }} onClick={() => {
signIn();
}}
size="lg" size="lg"
> >
Sign Up Sign Up

193
components/Nav/Header.js
View file

@ -14,70 +14,83 @@ import {
useColorModeValue, useColorModeValue,
useBreakpointValue, useBreakpointValue,
useDisclosure, useDisclosure,
} from '@chakra-ui/react'; } from "@chakra-ui/react";
import { import {
HamburgerIcon, HamburgerIcon,
CloseIcon, CloseIcon,
ChevronDownIcon, ChevronDownIcon,
ChevronRightIcon, ChevronRightIcon,
} from '@chakra-ui/icons'; } from "@chakra-ui/icons";
import AuthButton from '../AuthButton' import AuthButton from "../AuthButton";
import { signIn, signOut, useSession } from 'next-auth/client'; import { signIn, signOut, useSession } from "next-auth/client";
export default function WithSubnavigation() { export default function WithSubnavigation() {
const { isOpen, onToggle } = useDisclosure(); const { isOpen, onToggle } = useDisclosure();
const [session, loading] = useSession() const [session, loading] = useSession();
return ( return (
<Box> <Box>
<Flex <Flex
bg={useColorModeValue('white', 'gray.800')} bg={useColorModeValue("white", "gray.800")}
color={useColorModeValue('gray.600', 'white')} color={useColorModeValue("gray.600", "white")}
minH={'60px'} minH={"60px"}
py={{ base: 2 }} py={{ base: 2 }}
px={{ base: 4 }} px={{ base: 4 }}
borderBottom={1} borderBottom={1}
borderStyle={'solid'} borderStyle={"solid"}
borderColor={useColorModeValue('gray.200', 'gray.900')} borderColor={useColorModeValue("gray.200", "gray.900")}
align={'center'}> align={"center"}
>
<Flex <Flex
flex={{ base: 1, md: 'auto' }} flex={{ base: 1, md: "auto" }}
ml={{ base: -2 }} ml={{ base: -2 }}
display={{ base: 'flex', md: 'none' }}> display={{ base: "flex", md: "none" }}
>
<IconButton <IconButton
onClick={onToggle} onClick={onToggle}
icon={ icon={
isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} /> isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
} }
variant={'ghost'} variant={"ghost"}
aria-label={'Toggle Navigation'} aria-label={"Toggle Navigation"}
/> />
</Flex> </Flex>
<Flex flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}> <Flex flex={{ base: 1 }} justify={{ base: "center", md: "start" }}>
<Text <Text
textAlign={useBreakpointValue({ base: 'center', md: 'left' })} textAlign={useBreakpointValue({ base: "center", md: "left" })}
fontFamily={'heading'} fontFamily={"heading"}
color={useColorModeValue('gray.800', 'white')}> color={useColorModeValue("gray.800", "white")}
>
Cath.exe Cath.exe
</Text> </Text>
<Flex display={{ base: 'none', md: 'flex' }} ml={10}> <Flex display={{ base: "none", md: "flex" }} ml={10}>
<DesktopNav /> <DesktopNav />
</Flex> </Flex>
</Flex> </Flex>
<Stack <Stack
flex={{ base: 1, md: 0 }} flex={{ base: 1, md: 0 }}
justify={'flex-end'} justify={"flex-end"}
direction={'row'} direction={"row"}
spacing={6}> spacing={6}
>
<Button <Button
as={'a'} as={"a"}
fontSize={'sm'} fontSize={"sm"}
fontWeight={400} fontWeight={400}
variant={'link'} variant={"link"}
onClick={session ? ()=>{signOut()} : ()=>{signIn()}}> onClick={
{session ? 'Sign Out' : 'Sign In'} session
? () => {
signOut();
}
: () => {
signIn();
}
}
>
{session ? "Sign Out" : "Sign In"}
</Button> </Button>
</Stack> </Stack>
</Flex> </Flex>
@ -90,26 +103,27 @@ export default function WithSubnavigation() {
} }
const DesktopNav = () => { const DesktopNav = () => {
const linkColor = useColorModeValue('gray.600', 'gray.200'); const linkColor = useColorModeValue("gray.600", "gray.200");
const linkHoverColor = useColorModeValue('gray.800', 'white'); const linkHoverColor = useColorModeValue("gray.800", "white");
const popoverContentBgColor = useColorModeValue('white', 'gray.800'); const popoverContentBgColor = useColorModeValue("white", "gray.800");
return ( return (
<Stack direction={'row'} spacing={4}> <Stack direction={"row"} spacing={4}>
{NAV_ITEMS.map((navItem) => ( {NAV_ITEMS.map(navItem => (
<Box key={navItem.label}> <Box key={navItem.label}>
<Popover trigger={'hover'} placement={'bottom-start'}> <Popover trigger={"hover"} placement={"bottom-start"}>
<PopoverTrigger> <PopoverTrigger>
<Link <Link
p={2} p={2}
href={navItem.href ?? '#'} href={navItem.href ?? "#"}
fontSize={'sm'} fontSize={"sm"}
fontWeight={500} fontWeight={500}
color={linkColor} color={linkColor}
_hover={{ _hover={{
textDecoration: 'none', textDecoration: "none",
color: linkHoverColor, color: linkHoverColor,
}}> }}
>
{navItem.label} {navItem.label}
</Link> </Link>
</PopoverTrigger> </PopoverTrigger>
@ -117,13 +131,14 @@ const DesktopNav = () => {
{navItem.children && ( {navItem.children && (
<PopoverContent <PopoverContent
border={0} border={0}
boxShadow={'xl'} boxShadow={"xl"}
bg={popoverContentBgColor} bg={popoverContentBgColor}
p={4} p={4}
rounded={'xl'} rounded={"xl"}
minW={'sm'}> minW={"sm"}
>
<Stack> <Stack>
{navItem.children.map((child) => ( {navItem.children.map(child => (
<DesktopSubNav key={child.label} {...child} /> <DesktopSubNav key={child.label} {...child} />
))} ))}
</Stack> </Stack>
@ -140,30 +155,33 @@ const DesktopSubNav = ({ label, href, subLabel }) => {
return ( return (
<Link <Link
href={href} href={href}
role={'group'} role={"group"}
display={'block'} display={"block"}
p={2} p={2}
rounded={'md'} rounded={"md"}
_hover={{ bg: useColorModeValue('teal.50', 'gray.900') }}> _hover={{ bg: useColorModeValue("teal.50", "gray.900") }}
<Stack direction={'row'} align={'center'}> >
<Stack direction={"row"} align={"center"}>
<Box> <Box>
<Text <Text
transition={'all .3s ease'} transition={"all .3s ease"}
_groupHover={{ color: 'teal.200' }} _groupHover={{ color: "teal.200" }}
fontWeight={500}> fontWeight={500}
>
{label} {label}
</Text> </Text>
<Text fontSize={'sm'}>{subLabel}</Text> <Text fontSize={"sm"}>{subLabel}</Text>
</Box> </Box>
<Flex <Flex
transition={'all .3s ease'} transition={"all .3s ease"}
transform={'translateX(-10px)'} transform={"translateX(-10px)"}
opacity={0} opacity={0}
_groupHover={{ opacity: '100%', transform: 'translateX(0)' }} _groupHover={{ opacity: "100%", transform: "translateX(0)" }}
justify={'flex-end'} justify={"flex-end"}
align={'center'} align={"center"}
flex={1}> flex={1}
<Icon color={'teal.200'} w={5} h={5} as={ChevronRightIcon} /> >
<Icon color={"teal.200"} w={5} h={5} as={ChevronRightIcon} />
</Flex> </Flex>
</Stack> </Stack>
</Link> </Link>
@ -173,10 +191,11 @@ const DesktopSubNav = ({ label, href, subLabel }) => {
const MobileNav = () => { const MobileNav = () => {
return ( return (
<Stack <Stack
bg={useColorModeValue('white', 'gray.800')} bg={useColorModeValue("white", "gray.800")}
p={4} p={4}
display={{ md: 'none' }}> display={{ md: "none" }}
{NAV_ITEMS.map((navItem) => ( >
{NAV_ITEMS.map(navItem => (
<MobileNavItem key={navItem.label} {...navItem} /> <MobileNavItem key={navItem.label} {...navItem} />
))} ))}
</Stack> </Stack>
@ -191,38 +210,41 @@ const MobileNavItem = ({ label, children, href }) => {
<Flex <Flex
py={2} py={2}
as={Link} as={Link}
href={href ?? '#'} href={href ?? "#"}
justify={'space-between'} justify={"space-between"}
align={'center'} align={"center"}
_hover={{ _hover={{
textDecoration: 'none', textDecoration: "none",
}}> }}
>
<Text <Text
fontWeight={600} fontWeight={600}
color={useColorModeValue('gray.600', 'gray.200')}> color={useColorModeValue("gray.600", "gray.200")}
>
{label} {label}
</Text> </Text>
{children && ( {children && (
<Icon <Icon
as={ChevronDownIcon} as={ChevronDownIcon}
transition={'all .25s ease-in-out'} transition={"all .25s ease-in-out"}
transform={isOpen ? 'rotate(180deg)' : ''} transform={isOpen ? "rotate(180deg)" : ""}
w={6} w={6}
h={6} h={6}
/> />
)} )}
</Flex> </Flex>
<Collapse in={isOpen} animateOpacity style={{ marginTop: '0!important' }}> <Collapse in={isOpen} animateOpacity style={{ marginTop: "0!important" }}>
<Stack <Stack
mt={2} mt={2}
pl={4} pl={4}
borderLeft={1} borderLeft={1}
borderStyle={'solid'} borderStyle={"solid"}
borderColor={useColorModeValue('gray.200', 'gray.700')} borderColor={useColorModeValue("gray.200", "gray.700")}
align={'start'}> align={"start"}
>
{children && {children &&
children.map((child) => ( children.map(child => (
<Link key={child.label} py={2} href={child.href}> <Link key={child.label} py={2} href={child.href}>
{child.label} {child.label}
</Link> </Link>
@ -233,29 +255,28 @@ const MobileNavItem = ({ label, children, href }) => {
); );
}; };
const NAV_ITEMS = [ const NAV_ITEMS = [
{ {
label: 'Home', label: "Home",
href: '/', href: "/",
}, },
{ {
label: 'Control Panel', label: "Control Panel",
children: [ children: [
{ {
label: 'Main', label: "Main",
subLabel: 'Control Everything', subLabel: "Control Everything",
href: '/controlpanel', href: "/controlpanel",
}, },
{ {
label: 'Commands', label: "Commands",
subLabel: 'Control Caths commands', subLabel: "Control Caths commands",
href: '/controlpanel/commands', href: "/controlpanel/commands",
}, },
], ],
}, },
{ {
label: 'Coming soon...', label: "Coming soon...",
href: '#', href: "#",
}, },
]; ];

3
pages/404.js
View file

@ -1,12 +1,11 @@
import Head from "next/head"; import Head from "next/head";
export default function Custom404() { export default function Custom404() {
return ( return (
<> <>
<Head> <Head>
<title>404</title> <title>404</title>
</Head> </Head>
<h1>404 - Page Not Found</h1> <pre>404 - Page Not Found</pre>
</> </>
); );
} }

4
pages/_app.js
View file

@ -7,7 +7,7 @@ import theme from "../chakra_config/theme";
import { ColorModeScript } from "@chakra-ui/react"; import { ColorModeScript } from "@chakra-ui/react";
import Sidebar from "../components/Sidebar/Sidebar"; import Sidebar from "../components/Sidebar/Sidebar";
function MyApp({ Component, pageProps }) { export default function MyApp({ Component, pageProps }) {
const [session, loading] = useSession(); const [session, loading] = useSession();
return ( return (
@ -37,5 +37,3 @@ function MyApp({ Component, pageProps }) {
</Provider> </Provider>
); );
} }
export default MyApp;

12
pages/controlpanel/commands.js
View file

@ -33,15 +33,9 @@ function Controller({ initialState }) {
function processOnline(status) { function processOnline(status) {
console.log(status); console.log(status);
if (status == "online") { if (status == "online") return true;
return true; if (status == "offline") return false;
} if (status == "maintenance") return false;
if (status == "offline") {
return false;
}
if (status == "maintenance") {
return false;
}
} }
function Commands() { function Commands() {

1
pages/index.js
View file

@ -24,7 +24,6 @@ export default function Home() {
}; };
const [session, loading] = useSession(); const [session, loading] = useSession();
return ( return (
<> <>
{!session && ( {!session && (

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

4
public/vercel.svg
View file

@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

0
styles/Home.module.css
View file

6
styles/HomeCard.module.css
View file

@ -5,6 +5,8 @@
border: 1px solid blue; border: 1px solid blue;
} }
.title {} /* .title {
}
.desc {} .desc {
} */

6
styles/globals.css
View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap");
* { * {
color: #fff; color: #fff;
@ -8,8 +8,8 @@ html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: 'Epilogue',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, font-family: "Epilogue", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background: #1a202c; background: #1a202c;
} }