Skip to content

Commit

Permalink
Black Lives Matter.
Browse files Browse the repository at this point in the history
  • Loading branch information
@emmatown
emmatown committed Jun 2, 2020
1 parent e09fb21 commit 214fb17
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 94 deletions.
6 changes: 4 additions & 2 deletions site/src/components/DocWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,8 @@ export default ({
'none',
'none',
`1px solid ${colors.lighten(0.25, colors.border)}`
]
],
filter: 'grayscale(100%)'
})}
>
<Search />
Expand Down Expand Up @@ -208,7 +209,8 @@ export default ({
],
gridRow: 2,
gridColumn: ['1 / span 2', '1 / span 2', '1 / span 1'],
paddingRight: [0, 0, 0]
paddingRight: [0, 0, 0],
filter: 'grayscale(100%)'
})}
>
{children}
Expand Down
208 changes: 122 additions & 86 deletions site/src/components/SiteHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,103 +28,139 @@ export default function SiteHeader() {
return (
<header
css={mq({
gridColumn: '1 /span 2',
display: 'flex',
alignItems: 'center',
paddingBottom: space[2]
gridColumn: '1 /span 2'
})}
>
<Link
to="/"
<a href="https://support.eji.org/give/153413/#!/donation/checkout">
<div
css={{
position: 'absolute',
top: 0,
left: 0,
display: 'flex',
justifyContent: 'center',
backgroundColor: 'black',
width: '100vw'
}}
>
<span
style={{
textAlign: 'center',
fontWeight: 'bold',
textDecoration: 'none',
color: '#fff',
fontSize: 28,
paddingBottom: 4
}}
>
Black Lives Matter.
</span>
</div>
</a>

<div
css={{
paddingTop: 24,
display: 'flex',
alignItems: 'center',
color: '#D36AC2',
textDecoration: 'none',
marginRight: space[2],
'&:hover': { color: colors.border }
paddingBottom: space[2],
filter: 'grayscale(100%)'
}}
>
<HeaderLogoImage />
<span
css={mq({
display: ['none', 'none', 'inline-block'],
margin: 0,
marginLeft: space[2],
padding: 0,
fontSize: constants.fontSizes[4],
fontWeight: 'bold'
})}
>
Emotion
</span>
</Link>
<nav
css={{
marginLeft: 'auto',
overflowX: 'auto',
WebkitOverflowScrolling: 'touch'
}}
>
<ul
<Link
to="/"
css={{
display: 'grid',
gridAutoFlow: ['column dense', undefined, 'column'],
gridColumn: ['2 / span 1', undefined, 'auto'],
gridRow: ['1', '1', 'auto'],
display: 'flex',
alignItems: 'center',
justifyItems: 'center',
gap: space[2],
padding: 0,
margin: '0 0 0 auto',
overflow: 'auto',
listStyle: 'none',
'li a': {
display: 'inline-block',
paddingTop: space[1],
paddingBottom: space[1],
whiteSpace: 'nowrap'
}
color: '#D36AC2',
textDecoration: 'none',
marginRight: space[2],
'&:hover': { color: colors.border }
}}
>
<HeaderLogoImage />
<span
css={mq({
display: ['none', 'none', 'inline-block'],
margin: 0,
marginLeft: space[2],
padding: 0,
fontSize: constants.fontSizes[4],
fontWeight: 'bold'
})}
>
Emotion
</span>
</Link>
<nav
css={{
marginLeft: 'auto',
overflowX: 'auto',
WebkitOverflowScrolling: 'touch'
}}
>
<li>
<Match path="/docs/:docName">
{({ match }: { match?: { docName: string } }) => {
return (
<HeaderLink
className={match ? 'active' : ''}
activeClassName="active"
to="/docs"
>
Docs
</HeaderLink>
)
}}
</Match>
</li>
<li>
<HeaderLink activeClassName="active" to="/community">
Community
</HeaderLink>
</li>
<li>
<HeaderLink to="https://github.com/emotion-js/emotion">
GitHub
</HeaderLink>
</li>
<li>
<HeaderLink to="https://emotion-slack.now.sh/">Slack</HeaderLink>
</li>
<li>
<HeaderLink to="https://spectrum.chat/emotion">Spectrum</HeaderLink>
</li>
<li>
<HeaderLink to="https://5bb1495273f2cf57a2cf39cc--emotion.netlify.com">
v9 Docs
</HeaderLink>
</li>
</ul>
</nav>
<ul
css={{
display: 'grid',
gridAutoFlow: ['column dense', undefined, 'column'],
gridColumn: ['2 / span 1', undefined, 'auto'],
gridRow: ['1', '1', 'auto'],
alignItems: 'center',
justifyItems: 'center',
gap: space[2],
padding: 0,
margin: '0 0 0 auto',
overflow: 'auto',
listStyle: 'none',
'li a': {
display: 'inline-block',
paddingTop: space[1],
paddingBottom: space[1],
whiteSpace: 'nowrap'
}
}}
>
<li>
<Match path="/docs/:docName">
{({ match }: { match?: { docName: string } }) => {
return (
<HeaderLink
className={match ? 'active' : ''}
activeClassName="active"
to="/docs"
>
Docs
</HeaderLink>
)
}}
</Match>
</li>
<li>
<HeaderLink activeClassName="active" to="/community">
Community
</HeaderLink>
</li>
<li>
<HeaderLink to="https://github.com/emotion-js/emotion">
GitHub
</HeaderLink>
</li>
<li>
<HeaderLink to="https://emotion-slack.now.sh/">Slack</HeaderLink>
</li>
<li>
<HeaderLink to="https://spectrum.chat/emotion">
Spectrum
</HeaderLink>
</li>
<li>
<HeaderLink to="https://5bb1495273f2cf57a2cf39cc--emotion.netlify.com">
v9 Docs
</HeaderLink>
</li>
</ul>
</nav>
</div>
</header>
)
}
1 change: 1 addition & 0 deletions site/src/layouts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const TemplateWrapper = ({
<React.Fragment>
<Global styles={globalStyles} />
<Helmet title={['Emotion', title].join(' - ')} />

<div
css={mq({
display: 'grid',
Expand Down
13 changes: 10 additions & 3 deletions site/src/pages/404.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
// @flow
import React from 'react'
/** @jsx jsx */
import { jsx } from '@emotion/core'
import Layout from '../layouts'

const NotFoundPage = () => {
const title = 'NOT FOUND'
return (
<Layout title={title}>
<h1>{title}</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.😢</p>
<div
css={{
filter: 'grayscale(100%)'
}}
>
<h1>{title}</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.😢</p>
</div>
</Layout>
)
}
Expand Down
3 changes: 2 additions & 1 deletion site/src/pages/community.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ const Community = (props: *) => {
<Layout title={title}>
<div
css={mq({
gridColumn: '1 / span 2'
gridColumn: '1 / span 2',
filter: 'grayscale(100%)'
})}
>
<div>
Expand Down
4 changes: 2 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8793,7 +8793,7 @@ expand-template@^2.0.3:
resolved "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==

expand-tilde@^2.0.0:
expand-tilde@^2.0.0, expand-tilde@^2.0.2:
version "2.0.2"
resolved "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=
Expand Down Expand Up @@ -24033,7 +24033,7 @@ which-pm-runs@^1.0.0:
resolved "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=

which@1, which@^1.2.10, which@^1.2.12, which@^1.2.9, which@^1.3.0, which@^1.3.1:
which@1, which@^1.2.10, which@^1.2.12, which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
version "1.3.1"
resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
Expand Down

2 comments on commit 214fb17

@ifiokjr
Copy link

@ifiokjr ifiokjr commented on 214fb17 Jun 3, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

@Nurou
Copy link

@Nurou Nurou commented on 214fb17 Jun 3, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✊🏿 ✊🏽 ✊🏾

Please sign in to comment.