nav adjustments for mobile and 404 page

This commit is contained in:
tarafanlin 2020-10-21 21:10:38 -07:00
parent 1531e1628a
commit 506cad42a0
2 changed files with 10 additions and 11 deletions

View File

@ -7,15 +7,14 @@ const STYLES_ROOT = css`
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding: 8px 88px 8px 64px; padding: 8px 64px;
width: 100%; width: 100%;
height: 100%;
margin: 0 auto; margin: 0 auto;
z-index: ${Constants.zindex.header}; z-index: ${Constants.zindex.header};
background-color: ${Constants.system.foreground}; background-color: ${Constants.system.foreground};
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
padding: 16px 24px; padding: 8px 24px;
} }
`; `;
@ -25,11 +24,12 @@ const STYLES_CONTAINER = css`
font-family: ${Constants.font.text}; font-family: ${Constants.font.text};
font-weight: 400; font-weight: 400;
font-size: ${Constants.typescale.lvl0}; font-size: ${Constants.typescale.lvl0};
width: 100%; line-height: 150%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
display: flex; display: block;
justify-content: space-between; justify-content: space-between;
} }
`; `;
@ -46,16 +46,16 @@ const STYLES_LINK = css`
const STYLES_LEFT = css` const STYLES_LEFT = css`
flex-shrink: 0; flex-shrink: 0;
text-align: left;
`; `;
const STYLES_RIGHT = css` const STYLES_RIGHT = css`
min-width: 10%; min-width: 10%;
width: 100%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
justify-content: center; justify-content: flex-start;
} }
`; `;
@ -74,16 +74,16 @@ export const WebsitePrototypeFooter = (props) => {
</a> </a>
</p> </p>
<div css={STYLES_RIGHT}> <div css={STYLES_RIGHT}>
<a css={STYLES_LINK} href="https://twitter.com/_slate" style={{ marginRight: 24 }}> <a css={STYLES_LINK} href="https://twitter.com/_slate" style={{ marginRight: 12 }}>
Twitter Twitter
</a> </a>
<a css={STYLES_LINK} href="https://filecoin.io/slack" style={{ marginRight: 24 }}> <a css={STYLES_LINK} href="https://filecoin.io/slack" style={{ marginRight: 12 }}>
Slack Slack
</a> </a>
<a <a
css={STYLES_LINK} css={STYLES_LINK}
href="https://github.com/filecoin-project/slate/issues" href="https://github.com/filecoin-project/slate/issues"
style={{ marginRight: 24 }} style={{ marginRight: 12 }}
> >
Contribute Contribute
</a> </a>

View File

@ -10,7 +10,6 @@ const STYLES_ROOT = css`
top: 0; top: 0;
padding: 24px 88px 24px 64px; padding: 24px 88px 24px 64px;
width: 100%; width: 100%;
height: 100%;
margin: 0 auto; margin: 0 auto;
z-index: ${Constants.zindex.header}; z-index: ${Constants.zindex.header};