nickzuber/meteorite
1
1
Fork 0
mirror of https://github.com/nickzuber/meteorite.git synced 2024-11-29 09:31:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Steez'd up the home page

Browse Source
This commit is contained in:
Nicholas Zuber 2018-11-11 15:46:11 -05:00
parent 7c74ea1462
commit cdc8689732
2 changed files with 87 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/Home/Scene.js
View File

@ -331,12 +331,23 @@ function createImagePlaceholder (highlight) {
);
}
const Arrow = ({style}) => {
return (
<svg style={style} xmlns="http://www.w3.org/2000/svg" width="55" height="223" viewBox="0 0 55 223">
<g fill="none" fill-rule="evenodd" stroke="rgb(0, 158, 248)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 -2)">
<path stroke-dasharray="20 12 40" d="M51,8 C17,19.5689347 1.37247841e-11,46.42498 -5.70089572e-12,88.5681361 C-2.5121299e-11,130.711292 -2.32151849e-11,175.855247 1.74465369e-14,224"></path>
<polyline points="41.584 12.035 48.584 4.035 55.584 12.035" transform="rotate(65 48.584 8.035)"></polyline>
</g>
</svg>
);
}
const NotificationsRowExample = styled('div')({
position: 'relative',
height: 59,
width: 745,
borderRadius: 8,
margin: '58px auto 24px',
margin: '158px auto 124px',
background: `url(${rowExample}) center center no-repeat`,
backgroundSize: 'cover',
backgroundColor: '#fff',
@ -721,7 +732,56 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
</Item>
<Item style={{flex: '0 0 2.5%', padding: 0}} />
</WidthContainer>
<NotificationsRowExample />
<NotificationsRowExample>
<div style={{
position: 'absolute',
left: 0,
top: 0,
marginTop: -85,
marginLeft: 20,
display: 'block',
}}>
<Arrow style={{
position: 'absolute',
transform: 'rotate(90deg)',
marginTop: '-65px',
marginLeft: '480px',
left: 0,
top: 0,
}} />
<SmallText className="hover" style={{
fontWeight: 600,
borderRadius: 4,
padding: '12px 24px',
background: 'rgb(0, 158, 248)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.51)',
}}>Calculated score based on this issue's importance to you</SmallText>
</div>
<div style={{
position: 'absolute',
right: 0,
bottom: 0,
marginBottom: -80,
marginRight: 20,
display: 'block',
}}>
<Arrow style={{
position: 'absolute',
transform: 'rotate(270deg)',
marginBottom: '-70px',
marginLeft: '-160px',
left: 0,
bottom: 0,
}} />
<SmallText className="hover" style={{
fontWeight: 600,
borderRadius: 4,
padding: '12px 24px',
background: 'rgb(0, 158, 248)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.51)',
}}>The reason you just got this notification</SmallText>
</div>
</NotificationsRowExample>
<div className="button-container" style={{marginTop: 100 - 24}}>
<RouterLink to={routes.LOGIN}>sign in and try it out</RouterLink>
</div>
@ -753,6 +813,10 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
</a>
<br />
Home page inspiration from
<a target="_blank" href="https://robinpowered.com/">
Robin
</a>
and
<a target="_blank" href="https://getkap.co/">
Kap
</a>
@ -768,8 +832,8 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
</Item>
<Item style={{textAlign: 'right'}} className="footer-links">
<SmallLink target="_blank" href="https://github.com/nickzuber/meteorite/" style={{marginLeft: 28}}>Source code</SmallLink>
<SmallLink target="_blank" href="https://github.com/nickzuber/meteorite/issues" style={{marginLeft: 28}}>Bug reports</SmallLink>
<SmallLink target="_blank" href="https://github.com/nickzuber/meteorite/issues" style={{marginLeft: 28}}>Submit feedback</SmallLink>
<SmallLink target="_blank" href="https://github.com/nickzuber/meteorite/issues" style={{marginLeft: 28}}>Bug reports</SmallLink>
<SmallText style={{marginLeft: 28, opacity: .25}}>v{version}</SmallText>
</Item>
<Item style={{flex: '0 0 2.5%', padding: 0}} />

20
src/styles/gradient.css
View File

@ -109,6 +109,26 @@
background: rgba(190, 197, 208, 0.5)
}
.hover {
display: block;
animation: hover 5s ease-in-out infinite;
}
@-webkit-keyframes hover {
0% {transform: translateY(3px)}
50% {transform: translateY(-3px)}
100% {transform: translateY(3px)}
}
@-moz-keyframes hover {
0% {transform: translateY(3px)}
50% {transform: translateY(-3px)}
100% {transform: translateY(3px)}
}
@keyframes hover {
0% {transform: translateY(3px)}
50% {transform: translateY(-3px)}
100% {transform: translateY(3px)}
}
@-webkit-keyframes gradientTransition {
0% {background-position: 0% 50%}