pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

moved styles outside the class and fixed react error #130 where site doesn't work on production mode

Browse source
This commit is contained in:
Kim, Jimin 2021-05-30 20:43:34 +09:00
parent cdbe754071
commit cd8cbba973
11 changed files with 431 additions and 438 deletions
Download patch file Download diff file Expand all files Collapse all files

94
source/src/components/Footer.tsx
View file

@ -4,72 +4,72 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"
import styled from "styled-components"
import theming from "../theming"
export default class Footer extends React.Component {
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",
})};
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",
})};
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "black",
dark: "white",
})};
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo {
color: gray;
}
`
const StyledLink = styled.a`
width: 30px;
font-size: 2rem;
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "lightgrey",
dark: "grey",
})};
&:hover {
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "black",
dark: "white",
})};
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo {
color: gray;
}
`
}
`
StyledLink = styled.a`
width: 30px;
font-size: 2rem;
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "lightgrey",
dark: "grey",
})};
&:hover {
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "black",
dark: "white",
})};
}
`
StyledStrong = styled.strong`
font-size: 1.1rem;
`
const StyledStrong = styled.strong`
font-size: 1.1rem;
`
export default class Footer extends React.Component {
render() {
return (
<this.StyledFooter>
<StyledFooter>
<div className="logo">
Copyright &copy; develo
<this.StyledStrong>p</this.StyledStrong>omp
<StyledStrong>p</StyledStrong>omp
</div>
<div className="icons">
<this.StyledLink
<StyledLink
href="https://github.com/developomp/developomp-site"
target="_blank"
>
<FontAwesomeIcon icon={faGithub} />
</this.StyledLink>
</StyledLink>
</div>
</this.StyledFooter>
</StyledFooter>
)
}
}