aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-25 17:50:09 +0800
committerGitHub <noreply@github.com>2018-10-25 17:50:09 +0800
commit1c8ea1336e9e0c018ceb38cba90943f1b50eb23a (patch)
treed7ff3a9279c207296baa0825aed7d7bcd782c251 /packages/dev-tools-pages
parenta4de585feb0f8e5ec99f0eb4a7b9aca8a24144f5 (diff)
downloaddexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.gz
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.bz2
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.lz
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.xz
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.zst
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.zip
Feature/animations (#6)
* test animation * test two part video * new video test * replace videos with gifs * rename videos folder to images * sol-cov gifs * renames variables * compiler gif * change in hero srcset * better positioning of hero image
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/assets/images/sol-compiler@1x.gifbin0 -> 828373 bytes
-rw-r--r--packages/dev-tools-pages/assets/images/sol-compiler@2x.gifbin0 -> 1978271 bytes
-rw-r--r--packages/dev-tools-pages/assets/images/sol-cov@1x.gifbin0 -> 584336 bytes
-rw-r--r--packages/dev-tools-pages/assets/images/sol-cov@2x.gifbin0 -> 1291405 bytes
-rw-r--r--packages/dev-tools-pages/assets/images/sol-profiler@1x.gifbin0 -> 314430 bytes
-rw-r--r--packages/dev-tools-pages/assets/images/sol-profiler@2x.gifbin0 -> 547401 bytes
-rw-r--r--packages/dev-tools-pages/assets/images/sol-trace@1x.gifbin0 -> 418963 bytes
-rw-r--r--packages/dev-tools-pages/assets/images/sol-trace@2x.gifbin0 -> 1006784 bytes
-rw-r--r--packages/dev-tools-pages/ts/components/Hero.tsx44
-rw-r--r--packages/dev-tools-pages/webpack.config.js6
10 files changed, 41 insertions, 9 deletions
diff --git a/packages/dev-tools-pages/assets/images/sol-compiler@1x.gif b/packages/dev-tools-pages/assets/images/sol-compiler@1x.gif
new file mode 100644
index 000000000..5d70994f4
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-compiler@1x.gif
Binary files differ
diff --git a/packages/dev-tools-pages/assets/images/sol-compiler@2x.gif b/packages/dev-tools-pages/assets/images/sol-compiler@2x.gif
new file mode 100644
index 000000000..e13e7399f
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-compiler@2x.gif
Binary files differ
diff --git a/packages/dev-tools-pages/assets/images/sol-cov@1x.gif b/packages/dev-tools-pages/assets/images/sol-cov@1x.gif
new file mode 100644
index 000000000..88b5ea55c
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-cov@1x.gif
Binary files differ
diff --git a/packages/dev-tools-pages/assets/images/sol-cov@2x.gif b/packages/dev-tools-pages/assets/images/sol-cov@2x.gif
new file mode 100644
index 000000000..1e0eb60d3
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-cov@2x.gif
Binary files differ
diff --git a/packages/dev-tools-pages/assets/images/sol-profiler@1x.gif b/packages/dev-tools-pages/assets/images/sol-profiler@1x.gif
new file mode 100644
index 000000000..f394cb59d
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-profiler@1x.gif
Binary files differ
diff --git a/packages/dev-tools-pages/assets/images/sol-profiler@2x.gif b/packages/dev-tools-pages/assets/images/sol-profiler@2x.gif
new file mode 100644
index 000000000..b9640ff17
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-profiler@2x.gif
Binary files differ
diff --git a/packages/dev-tools-pages/assets/images/sol-trace@1x.gif b/packages/dev-tools-pages/assets/images/sol-trace@1x.gif
new file mode 100644
index 000000000..a2b39b8e2
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-trace@1x.gif
Binary files differ
diff --git a/packages/dev-tools-pages/assets/images/sol-trace@2x.gif b/packages/dev-tools-pages/assets/images/sol-trace@2x.gif
new file mode 100644
index 000000000..d21a7d896
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-trace@2x.gif
Binary files differ
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index f52ce5bc9..e045a7ad4 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -6,16 +6,26 @@ import { withContext, Props } from './withContext';
import Button from './Button';
import { Beta } from './Typography';
+const IMAGE_WIDTH = 2560;
+const IMAGE_HEIGHT = 800;
+
function Hero(props: Props) {
- const { subtitle, tagline } = props;
+ const { subtitle, tagline, title } = props;
+
return (
- <StyledHero>
- <Subtitle>{subtitle}</Subtitle>
- <Tagline as="p">{tagline}</Tagline>
- <Button as="a" href="#" large>
- Read the Docs
- </Button>
- </StyledHero>
+ <React.Fragment>
+ <StyledHero>
+ <Subtitle>{subtitle}</Subtitle>
+ <Tagline as="p">{tagline}</Tagline>
+ <Button as="a" href="#" large>
+ Read the Docs
+ </Button>
+ </StyledHero>
+
+ <ImageContainer>
+ <Image src={`/images/${title}@1x.gif`} srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} />
+ </ImageContainer>
+ </React.Fragment>
);
}
@@ -51,4 +61,22 @@ const Tagline = styled(Beta)`
`};
`;
+const ImageContainer = styled.div`
+ width: 100%;
+ height: ${IMAGE_HEIGHT}px;
+ position: absolute;
+ top: 6.875rem;
+ left: 0;
+ overflow: hidden;
+ z-index: -1;
+`;
+
+const Image = styled.img`
+ width: ${IMAGE_WIDTH}px;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%);
+`;
+
export default withContext(Hero);
diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js
index d025737f7..33ad11498 100644
--- a/packages/dev-tools-pages/webpack.config.js
+++ b/packages/dev-tools-pages/webpack.config.js
@@ -84,7 +84,11 @@ module.exports = (_env, argv) => {
let plugins = [
new CleanWebpackPlugin('public'),
...pages.map(p => new HtmlWebpackPlugin(p)),
- new CopyWebpackPlugin([{ from: 'assets/crawl.html', to: 'index.html' }, { from: 'assets/fonts', to: 'fonts' }]),
+ new CopyWebpackPlugin([
+ { from: 'assets/crawl.html', to: 'index.html' },
+ { from: 'assets/fonts', to: 'fonts' },
+ { from: 'assets/images', to: 'images' },
+ ]),
];
if (argv.mode === 'development') {
config.mode = 'development';