mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-22 14:22:33 +01:00
Code Issues Projects Releases Wiki Activity

chore: home svg

Browse source
This commit is contained in:
AP 2020-02-06 08:58:53 +01:00
parent cbfd12d5b6
commit eebd3faac8
2 changed files with 1155 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1129
src/assets/images/ThunderHub.svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

28
src/views/entry/homepage/HomePage.styled.ts
View file

@ -1,5 +1,5 @@
import styled from 'styled-components'; import styled, { keyframes } from 'styled-components';
import { ReactComponent as HeadlineImage } from '../../../assets/images/MoshingDoodle.svg'; import { ReactComponent as HeadlineImage } from '../../../assets/images/ThunderHub.svg';
import { fontColors, mediaWidths } from 'styles/Themes'; import { fontColors, mediaWidths } from 'styles/Themes';
export const Headline = styled.div` export const Headline = styled.div`
@ -24,9 +24,33 @@ export const LeftHeadline = styled.div`
} }
`; `;
const flicker = keyframes`
0% { opacity: 1; }
3% { opacity: 0.4; }
6% { opacity: 1; }
7% { opacity: 0.4; }
8% { opacity: 1; }
9% { opacity: 0.4; }
10% { opacity: 0; }
100% { opacity: 0; }
`;
export const StyledImage = styled(HeadlineImage)` export const StyledImage = styled(HeadlineImage)`
width: 500px; width: 500px;
& .glowEffect {
animation: ${flicker} 3s infinite step-end;
}
& .glowEffectTwo {
animation: ${flicker} 5s infinite step-end;
}
& .glowEffectThree {
animation: ${flicker} 7s infinite step-end;
}
& .glowEffectFour {
animation: ${flicker} 3.5s infinite step-end;
}
@media (${mediaWidths.mobile}) { @media (${mediaWidths.mobile}) {
width: unset; width: unset;
} }