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

prevent github icon and page title overlap

Browse source
This commit is contained in:
Kim, Jimin 2022-01-09 11:48:55 +09:00
parent 489cfbe543
commit d6653d2136
1 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
source/src/pages/Page/index.tsx
View file

@ -23,8 +23,16 @@ import { useEffect } from "react"
const map: Map = _map const map: Map = _map
const StyledTitle = styled.h1` const StyledTitle = styled.h1<{ pageType: PageType }>`
margin-bottom: 1rem; margin-bottom: 1rem;
word-wrap: break-word;
${(props) => {
if (props.pageType == PageType.PORTFOLIO_PROJECT) {
return "margin-right: 3rem;"
}
}}
` `
const PortfolioGithubLinkContainer = styled.div` const PortfolioGithubLinkContainer = styled.div`
@ -249,7 +257,9 @@ const Page = () => {
<GithubLinkIcon link={pageData.repo} /> <GithubLinkIcon link={pageData.repo} />
</PortfolioGithubLinkContainer> </PortfolioGithubLinkContainer>
)} )}
<StyledTitle>{pageData.title}</StyledTitle> <StyledTitle pageType={PageType.PORTFOLIO_PROJECT}>
{pageData.title}
</StyledTitle>
{pageType == PageType.PORTFOLIO_PROJECT && {pageType == PageType.PORTFOLIO_PROJECT &&
pageData.badges.map((badge) => ( pageData.badges.map((badge) => (