michal-sapka-me

commit 595eb4abb305b0b383fac1e882dcd3db3cca9322
parent 5bff8f1e81d441b04882d11fbe3edbee6071fa3c
Author: Michal Sapka <michal@sapka.me>
Date:   Wed,  7 Sep 2022 21:48:34 +0200

feat: dracula light theme

Diffstat:
M
components/topnav.tsx
 | 
5
+++--
M
lib/theme.tsx
 | 
24
++++++++++++++++++++----
M
pages/index.tsx
 | 
2
+-

3 files changed, 24 insertions(+), 7 deletions(-)
diff --git a/components/topnav.tsx b/components/topnav.tsx
@@ -2,6 +2,7 @@ import {
   Link,
   Box, 
   HStack, 
+  Icon,
   IconButton,
   Menu,
   Heading,
@@ -31,7 +32,7 @@ function MobileNav() {
 function DesktopNav() {
   return <HStack>
     <Box flex="1">
-      <Link href="https://github.com/michalsapka/michal-sapka-pl">Source code</Link>
+      <Link variant="topnav-link" href="https://github.com/michalsapka/michal-sapka-pl"> <Icon as={DiGithubBadge}/> Source code</Link>
     </Box>
   </HStack>
 }
@@ -53,7 +54,7 @@ export default function Navbar() {
       mb="1"
     >
       <HStack>
-        <Heading flex="0">Michal </Heading>
+        <Heading flex="0" mr="20px">Michal </Heading>
         <Box flex="1">
           {isMobile ? null : <DesktopNav/>}
         </Box>
diff --git a/lib/theme.tsx b/lib/theme.tsx
@@ -5,8 +5,8 @@ import type { StyleFunctionProps } from '@chakra-ui/styled-system'
 const styles = {
   global: (props : StyleFunctionProps) => ({
     body: {
-      bg: mode('#d5d6db', '#282a36')(props),
-      color: mode('#0f4b6e', '#f8f8f2')(props),
+      bg: mode('#f8f8f2', '#282a36')(props),
+      color: mode('#282a36', '#f8f8f2')(props),
     }
   })
 }
@@ -14,14 +14,30 @@ const styles = {
 const components = {
   Link: {
     baseStyle: (props : StyleFunctionProps)  => ({
-      color: mode('#3d7aed', '#bd93f9')(props),
+      color: mode('#ff5555', '#bd93f9')(props),
+
       textUnderlineOffset: 3
-    })
+    }),
+    variants: {
+      'topnav-link': (props : StyleFunctionProps) => ({
+        color: mode('#282a36', '#f8f8f2')(props),
+        textDecoration: "none"
+      })
+    }
   },
   Text: {
     baseStyle: (_props : StyleFunctionProps)  => ({
       textAlign: "justify",
     })
+  },
+  Heading: {
+    variants: {
+      "section-title": {
+        pt: "10px",
+        pb: "10px",
+        fontSize: "1.5rem"
+      }
+    }
   }
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -52,7 +52,7 @@ const Home: NextPage = () => {
                 borderRadius="full"
                 borderWidth = "3px"
                 borderStyle = "solid"
-                borderColor = {useColorModeValue("#FFFFFF", "#6272a4")}
+                borderColor = {useColorModeValue("#eee8d5", "#6272a4")}
                 />
             </Box>
           </Stack>