From 39079e4cad24dc5edf372f31d49117b27ec51e86 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sat, 31 Jul 2021 08:49:47 +0900
Subject: [PATCH] fixed issue where the text is incorrectly aligned added max
 width to footer content removed bold p

---
 source/src/components/Footer.tsx | 63 +++++++++++++++++---------------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/source/src/components/Footer.tsx b/source/src/components/Footer.tsx
index 9137098..56fd376 100644
--- a/source/src/components/Footer.tsx
+++ b/source/src/components/Footer.tsx
@@ -6,33 +6,43 @@ import theming from "../theming"
 
 const StyledFooter = styled.footer`
 	display: flex;
-	justify-content: space-between;
-	margin-bottom: 1px; /* footer goes outside the page by 1 px for some reason */
-	padding: 50px 10px;
-	background-color: white;
-	background-color: ${(props) =>
-		theming.theme(props.theme.currentTheme, {
-			light: "white",
-			dark: "black",
-		})};
+	justify-content: center;
+
 	color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
 			light: "black",
 			dark: "white",
 		})};
-	* {
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
-	}
+
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: "white",
+			dark: "black",
+		})};
+`
+
+const StyledFooterContainer = styled.div`
+	display: flex;
+	justify-content: space-between;
+
+	margin-bottom: 1px; /* a hacky solution for footer going outside the page by 1px */
+	padding: 0 1rem 0 1rem;
+
+	height: 100px;
+	width: 100%;
+	line-height: 100px;
+	text-align: center;
+
+	max-width: ${theming.size.screen_size2};
+
 	.logo {
 		color: gray;
 	}
 `
 
-const StyledLink = styled.a`
-	width: 30px;
+const StyledALink = styled.a`
 	font-size: 2rem;
+
 	color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
 			light: "lightgrey",
@@ -42,33 +52,26 @@ const StyledLink = styled.a`
 	&:hover {
 		color: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
-				light: "black",
-				dark: "white",
+				light: theming.light.color0,
+				dark: theming.dark.color0,
 			})};
 	}
 `
 
-const StyledStrong = styled.strong`
-	font-size: 1.1rem;
-`
-
 export default class Footer extends React.Component {
 	render() {
 		return (
 			<StyledFooter>
-				<div className="logo">
-					Copyright &copy; develo
-					<StyledStrong>p</StyledStrong>omp
-				</div>
+				<StyledFooterContainer>
+					<div className="logo">Copyright &copy; developomp</div>
 
-				<div className="icons">
-					<StyledLink
+					<StyledALink
 						href="https://github.com/developomp/developomp-site"
 						target="_blank"
 					>
 						<FontAwesomeIcon icon={faGithub} />
-					</StyledLink>
-				</div>
+					</StyledALink>
+				</StyledFooterContainer>
 			</StyledFooter>
 		)
 	}