diff --git a/components/flag.js b/components/flag.js
index af2b218b..666ede0a 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -14,14 +14,14 @@ const waveFlag = keyframes`
const waveFlagScaled = keyframes`
from {
- transform: scale(.75) rotate(0deg);
+ transform: scale(.875) rotate(0deg);
}
to {
- transform: scale(.75) rotate(-5deg);
+ transform: scale(.875) rotate(-5deg);
}
`
-const scrolled = (props) =>
+const scrolled = props =>
props.scrolled &&
css`
transform: scale(0.875);
@@ -57,7 +57,7 @@ const Base = styled('a')`
${scrolled};
`
-const Flag = (props) => (
+const Flag = props => (
diff --git a/components/home/announcement.js b/components/home/announcement.js
index 4449dc36..490de172 100644
--- a/components/home/announcement.js
+++ b/components/home/announcement.js
@@ -10,7 +10,7 @@ const unfold = keyframes({
const Announcement = ({
caption,
copy,
- iconLeft = 'announcement',
+ iconLeft,
iconRight = 'info',
color = 'accent',
...props
@@ -19,22 +19,23 @@ const Announcement = ({
as={props.href ? 'a' : 'div'}
variant="interactive"
sx={{
+ variant: 'cards.translucent',
mx: 'auto',
maxWidth: 'narrow',
width: '100%',
- bg: 'rgba(255, 255, 255, 0.98)',
textAlign: 'left',
textDecoration: 'none',
lineHeight: 'caption',
display: 'flex',
alignItems: 'center',
- p: [2, 3],
+ p: [2, 2],
+ px: 3,
mb: [3, 4],
- mt: [null, -3, -5],
+ mt: [null, -3, -5, -84],
transform: 'scale(1)',
- willChange: 'transform',
- animation: `${unfold} 0.5s ease-out`,
- '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+ '@media (prefers-reduced-motion: no-preference)': {
+ animation: `${unfold} 0.5s ease-out`
+ },
svg: { flexShrink: 'none' }
}}
{...props}
diff --git a/components/home/join-form.js b/components/home/join-form.js
index 747d09a9..e005ac57 100644
--- a/components/home/join-form.js
+++ b/components/home/join-form.js
@@ -8,7 +8,7 @@ const JoinForm = () => {
return (
${opacity}
)`
-const unfixed = (props) =>
+const unfixed = props =>
!props.unfixed &&
css`
position: absolute;
@@ -31,7 +31,7 @@ const unfixed = (props) =>
// -webkit-backdrop-filter: saturate(180%) blur(20px);
// backdrop-filter: saturate(180%) blur(20px);
// `
-const fixed = (props) =>
+const fixed = props =>
(props.scrolled || props.toggled || props.fixed) &&
css`
position: fixed;
@@ -69,7 +69,7 @@ export const Content = styled(Container)`
}
`
-const hoverColor = (name) =>
+const hoverColor = name =>
({
white: 'smoke',
smoke: 'muted',
@@ -84,7 +84,7 @@ const slide = keyframes({
to: { transform: 'translateY(0)', opacity: 1 }
})
-const layout = (props) =>
+const layout = props =>
props.isMobile
? css`
display: ${props.toggled ? 'flex' : 'none'};
@@ -135,12 +135,12 @@ const NavBar = styled(Box)`
padding: ${theme.space[3]}px;
text-decoration: none;
@media (min-width: 56em) {
- color: ${(props) => theme.colors[props.color] || color};
+ color: ${props => theme.colors[props.color] || color};
}
}
`
-const Navigation = (props) => (
+const Navigation = props => (
@@ -188,7 +188,7 @@ class Header extends Component {
this.bindScroll(false)
}
- bindScroll = (add) => {
+ bindScroll = add => {
if (typeof window !== 'undefined' && !this.props.unfixed) {
window[add ? 'addEventListener' : 'removeEventListener'](
'scroll',
@@ -209,7 +209,7 @@ class Header extends Component {
}
handleToggleMenu = () => {
- this.setState((state) => ({
+ this.setState(state => ({
toggled: !state.toggled
}))
}
@@ -220,13 +220,13 @@ class Header extends Component {
const baseColor = dark
? color || 'white'
: color === 'white' && scrolled
- ? 'black'
- : color
+ ? 'black'
+ : color
const toggleColor = dark
? color || 'snow'
: toggled || (color === 'white' && scrolled)
- ? 'slate'
- : color
+ ? 'slate'
+ : color
return (
- `linear-gradient(${theme.colors.orange}, ${theme.colors.red})`
+ backgroundImage: t => t.util.gradient('orange', 'red')
}
theme.cards.translucent = {
diff --git a/pages/index.js b/pages/index.js
index 76d8ca43..fd073fc6 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -131,6 +131,7 @@ export default () => (
diff --git a/pages/ship.js b/pages/ship.js
index fccd5a81..c2f3230c 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -259,9 +259,9 @@ export default ({ ships, stats }) => (
Hack Club Slack, where 9k teenagers from around the world share
what they’re working on & help each other.
-
-