From 1c8ea1336e9e0c018ceb38cba90943f1b50eb23a Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 25 Oct 2018 10:50:09 +0100 Subject: 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 --- .../assets/images/sol-compiler@1x.gif | Bin 0 -> 828373 bytes .../assets/images/sol-compiler@2x.gif | Bin 0 -> 1978271 bytes .../dev-tools-pages/assets/images/sol-cov@1x.gif | Bin 0 -> 584336 bytes .../dev-tools-pages/assets/images/sol-cov@2x.gif | Bin 0 -> 1291405 bytes .../assets/images/sol-profiler@1x.gif | Bin 0 -> 314430 bytes .../assets/images/sol-profiler@2x.gif | Bin 0 -> 547401 bytes .../dev-tools-pages/assets/images/sol-trace@1x.gif | Bin 0 -> 418963 bytes .../dev-tools-pages/assets/images/sol-trace@2x.gif | Bin 0 -> 1006784 bytes packages/dev-tools-pages/ts/components/Hero.tsx | 44 +++++++++++++++++---- packages/dev-tools-pages/webpack.config.js | 6 ++- 10 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 packages/dev-tools-pages/assets/images/sol-compiler@1x.gif create mode 100644 packages/dev-tools-pages/assets/images/sol-compiler@2x.gif create mode 100644 packages/dev-tools-pages/assets/images/sol-cov@1x.gif create mode 100644 packages/dev-tools-pages/assets/images/sol-cov@2x.gif create mode 100644 packages/dev-tools-pages/assets/images/sol-profiler@1x.gif create mode 100644 packages/dev-tools-pages/assets/images/sol-profiler@2x.gif create mode 100644 packages/dev-tools-pages/assets/images/sol-trace@1x.gif create mode 100644 packages/dev-tools-pages/assets/images/sol-trace@2x.gif (limited to 'packages/dev-tools-pages') 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 Binary files /dev/null and b/packages/dev-tools-pages/assets/images/sol-compiler@1x.gif 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 Binary files /dev/null and b/packages/dev-tools-pages/assets/images/sol-compiler@2x.gif 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 Binary files /dev/null and b/packages/dev-tools-pages/assets/images/sol-cov@1x.gif 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 Binary files /dev/null and b/packages/dev-tools-pages/assets/images/sol-cov@2x.gif 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 Binary files /dev/null and b/packages/dev-tools-pages/assets/images/sol-profiler@1x.gif 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 Binary files /dev/null and b/packages/dev-tools-pages/assets/images/sol-profiler@2x.gif 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 Binary files /dev/null and b/packages/dev-tools-pages/assets/images/sol-trace@1x.gif 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 Binary files /dev/null and b/packages/dev-tools-pages/assets/images/sol-trace@2x.gif 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 ( - - {subtitle} - {tagline} - - + + + {subtitle} + {tagline} + + + + + + + ); } @@ -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'; -- cgit