diff options
| author | Michal Sapka <michal@sapka.me> | 2022-09-07 21:59:21 +0200 |
|---|---|---|
| committer | Michal Sapka <michal@sapka.me> | 2022-09-07 21:59:21 +0200 |
| commit | 35f65bb23e56f5b01f5b2efc0c0859da66108061 (patch) | |
| tree | 0773ff807ebe93ea2befd5f73d079e19f0c5c508 | |
| parent | 656639d9caac54db1a2160e529e06077829fa447 (diff) | |
feat: add brightness to topnav
| -rw-r--r-- | components/topnav.tsx | 4 | ||||
| -rw-r--r-- | lib/theme.tsx | 4 | ||||
| -rw-r--r-- | pages/index.tsx | 4 |
3 files changed, 9 insertions, 3 deletions
diff --git a/components/topnav.tsx b/components/topnav.tsx index 80a6ce3..e1cdb71 100644 --- a/components/topnav.tsx +++ b/components/topnav.tsx @@ -9,8 +9,9 @@ import { MenuButton, MenuList, MenuItem, + Container, useMediaQuery, - Container + useColorModeValue } from '@chakra-ui/react' import { GiHamburgerMenu } from "react-icons/gi" import { DiGithubBadge } from "react-icons/di" @@ -45,6 +46,7 @@ export default function Navbar() { position="fixed" backdropFilter="auto" backdropBlur="6px" + backdropBrightness={useColorModeValue("1.1", "1")} width="100%" pt="5px" > diff --git a/lib/theme.tsx b/lib/theme.tsx index 2d24742..e374a88 100644 --- a/lib/theme.tsx +++ b/lib/theme.tsx @@ -22,6 +22,10 @@ const components = { 'topnav-link': (props : StyleFunctionProps) => ({ color: mode('#282a36', '#f8f8f2')(props), textDecoration: "none" + }), + 'list-link': (props : StyleFunctionProps) => ({ + color: mode('#282a36', '#f8f8f2')(props), + textDecoration: "none" }) } }, diff --git a/pages/index.tsx b/pages/index.tsx index f6a0754..990e34b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -97,10 +97,10 @@ const Home: NextPage = () => { <Heading variant="section-title" as="h3">On the web</Heading> <VStack spacing="1" alignItems="start"> <Box> - <Link href="https://github.com/michalsapka" isExternal><Icon as={AiFillGithub}/> Github</Link> + <Link variant="list-link" href="https://github.com/michalsapka" isExternal><Icon as={AiFillGithub}/> Github</Link> </Box> <Box> - <Link href="https://medium.com/@msapka" isExternal><Icon as={AiFillMediumCircle}/> Medium</Link> + <Link variant="list-link" href="https://medium.com/@msapka" isExternal><Icon as={AiFillMediumCircle}/> Medium</Link> </Box> </VStack> |