fixed issue where the text is incorrectly aligned

added max width to footer content
removed bold p

source/src/components/Footer.tsx

@@ -6,33 +6,43 @@ import theming from "../theming"
 
 const StyledFooter = styled.footer`
 	display: flex;
-	justify-content: space-between;
+	justify-content: center;
-	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",
-		})};
 	color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
 			light: "black",
 			dark: "white",
 		})};
-	* {
+
-		margin: 0;
+	background-color: ${(props) =>
-		padding: 0;
+		theming.theme(props.theme.currentTheme, {
-		box-sizing: border-box;
+			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`
+const StyledALink = styled.a`
-	width: 30px;
 	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",
+				light: theming.light.color0,
-				dark: "white",
+				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">
+				<StyledFooterContainer>
-					Copyright &copy; develo
+					<div className="logo">Copyright &copy; developomp</div>
-					<StyledStrong>p</StyledStrong>omp
-				</div>
 
-				<div className="icons">
+					<StyledALink
-					<StyledLink
 						href="https://github.com/developomp/developomp-site"
 						target="_blank"
 					>
 						<FontAwesomeIcon icon={faGithub} />
-					</StyledLink>
+					</StyledALink>
-				</div>
+				</StyledFooterContainer>
 			</StyledFooter>
 		)
 	}