Skip to content

Commit c008f4a

Browse files
DonatNathanDonatNathan
committed
fix: responsive header and themes problems
1 parent 6d516d1 commit c008f4a

5 files changed

Lines changed: 18 additions & 16 deletions

File tree

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/images/logo.png" />
5+
<link rel="icon" href="%PUBLIC_URL%/images/logo_white.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta

‎src/components/Introduction.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ const Introduction = () => {
4444
}, []);
4545

4646
return (
47-
<Box sx={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", backgroundColor: theme.BackgroundColor, minHeight: "100vh"}}>
48-
<Typography sx={{fontSize: 40, color: theme.BoldTextColor, textDecoration: 'underline', fontWeight: "bold", fontFamily: "'Magda Clean Mono', monospace"}}>{sentences[currentSentence]}</Typography>
47+
<Box id="home" sx={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", backgroundColor: theme.BackgroundColor, paddingTop: "120px", minHeight: "calc(100vh - 120px)"}}>
48+
<Typography sx={{fontSize: 40, color: theme.BoldTextColor, textDecoration: 'underline', textUnderlineOffset: '10px', marginBottom: "10px", fontWeight: "bold", fontFamily: "'Magda Clean Mono', monospace"}}>{sentences[currentSentence]}</Typography>
4949
<BlinkingTriangle color={theme.MainColor} />
5050
</Box>
5151
);

‎src/index.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ code {
1717
monospace;
1818
}
1919

20-
a:link {color: #01afe7;}
21-
a:visited {color: #004AAD}
22-
a:hover {color: #ced2d2}
23-
a:active {color: #C0F0FC}
20+
a:not(.MuiButton-root):link {color: #01afe7;}
21+
a:not(.MuiButton-root):visited {color: #004AAD}
22+
a:not(.MuiButton-root):hover {color: #ced2d2}
23+
a:not(.MuiButton-root):active {color: #C0F0FC}

‎src/modules/header/Header.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,23 @@ const Header = () => {
99
const {theme, toggleTheme} = useContext(ThemeContext);
1010

1111
return (
12-
<Box id="home" sx={{display: "flex", flexWrap: "wrap", flexDirection: "row", justifyContent: "space-around", alignItems: "center", textAlign: "center", backgroundColor: theme.BackgroundColor, paddingVertical: "50px"}}>
12+
<Box sx={{position: "fixed", top: 0, left: 0, width: "100%", zIndex: 1100, display: "flex", flexWrap: "wrap", flexDirection: "row", justifyContent: "space-around", alignItems: "center", textAlign: "center", backgroundColor: theme.BackgroundColor, py: "20px", borderBottom: `1px solid ${theme.SecondBackgroundColor}`}}>
1313
<Box component={Link} to="#home" sx={{display: "flex", flexDirection: "row", alignItems: "center", textDecoration: "none"}}>
14-
<Box component="img" sx={{width: 50}} alt="Black Logo Donat" src="/images/logo.png" />
14+
<Box component="img" sx={{width: 50}} alt="Donat logo" src={theme === themes.dark ? "/images/logo_white.png" : "/images/logo.png"} />
1515
<Typography sx={{fontSize: 30, fontWeight: "bold", color: theme.BoldTextColor}}>Donat</Typography>
1616
</Box>
1717
<Box sx={{display: "flex", flexWrap: "wrap", flexDirection: "row", alignItems: "center"}}>
18-
{/* <Link to={"#home"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "15px"}}>Home</Link> */}
19-
<Link to={"#home"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "10px"}}>About</Link>
20-
<Link to={"#process"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "10px"}}>Process</Link>
21-
<Link to={"#portfolio"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "10px"}}>Portfolio</Link>
22-
<Link to={"#services"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "10px"}}>Services</Link>
18+
<Box sx={{display: {xs: "none", md: "flex"}, flexWrap: "wrap", flexDirection: "row", alignItems: "center"}}>
19+
{/* <Link to={"#home"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "15px"}}>Home</Link> */}
20+
<Link to={"#home"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "10px"}}>About</Link>
21+
<Link to={"#process"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "10px"}}>Process</Link>
22+
<Link to={"#portfolio"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "10px"}}>Portfolio</Link>
23+
<Link to={"#services"} style={{color: theme.BoldTextColor, textDecoration: "none", margin: "10px"}}>Services</Link>
24+
</Box>
2325
<Button onClick={toggleTheme} style={{backgroundColor: "transparent", color: theme.BoldTextColor, textTransform: "none", fontSize: 15, margin: "10px", minWidth: "auto", padding: "8px"}}>
2426
{theme === themes.dark ? <IoMdSunny size={20} /> : <IoMdMoon size={20} />}
2527
</Button>
26-
<Button href="#contact" style={{width: "fit-content", backgroundColor: theme.MainColor, color: theme.BackgroundColor, textTransform: "none", fontSize: 15, margin: "15px"}}>Contact</Button>
28+
<Button href="#contact" sx={{display: {xs: "none", md: "inline-flex"}, width: "fit-content", backgroundColor: theme.MainColor, color: theme.BackgroundColor, textTransform: "none", fontSize: 15, margin: "15px", transition: "background-color 0.3s ease, color 0.3s ease", '&:hover': {backgroundColor: theme.SecondBackgroundColor, color: theme.BoldTextColor}}}>Contact</Button>
2729
</Box>
2830
</Box>
2931
)

‎src/utils/themes/ThemeProvider.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
22
import { ThemeContext, themes } from './ThemeContext';
33

44
const ThemeProvider = ({children}) => {
5-
const [theme, setTheme] = useState(themes.dark);
5+
const [theme, setTheme] = useState(themes.light);
66

77
const toggleTheme = () => {
88
setTheme(theme === themes.light ? themes.dark : themes.light);

0 commit comments

Comments
 (0)