From f11002e59956e680eee25f2b339e6fc8bce01ca9 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Mon, 18 Mar 2019 16:59:53 -0300 Subject: [PATCH 1/5] Change landing --- src/app.js | 12 +- src/icons/chrome.svg | 19 ++++ src/icons/cli.svg | 7 ++ src/icons/firefox.svg | 201 ++++++++++++++++++++++++++++++++ src/icons/vscode.svg | 6 + src/landing.css | 137 ++++++++++++++++++++++ src/landing.js | 259 +++++++++++++++++++++++++++++++++--------- 7 files changed, 587 insertions(+), 54 deletions(-) create mode 100644 src/icons/chrome.svg create mode 100644 src/icons/cli.svg create mode 100644 src/icons/firefox.svg create mode 100644 src/icons/vscode.svg create mode 100644 src/landing.css diff --git a/src/app.js b/src/app.js index a2181e5..4982152 100644 --- a/src/app.js +++ b/src/app.js @@ -10,7 +10,17 @@ export default function App() { if (gitProvider.showLanding()) { return ; } else { - return ; + return ( + + + + + ); } } diff --git a/src/icons/chrome.svg b/src/icons/chrome.svg new file mode 100644 index 0000000..c36112c --- /dev/null +++ b/src/icons/chrome.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/cli.svg b/src/icons/cli.svg new file mode 100644 index 0000000..c06ba82 --- /dev/null +++ b/src/icons/cli.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/icons/firefox.svg b/src/icons/firefox.svg new file mode 100644 index 0000000..c52dd46 --- /dev/null +++ b/src/icons/firefox.svg @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/vscode.svg b/src/icons/vscode.svg new file mode 100644 index 0000000..b1b42d8 --- /dev/null +++ b/src/icons/vscode.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/landing.css b/src/landing.css new file mode 100644 index 0000000..b8121b9 --- /dev/null +++ b/src/landing.css @@ -0,0 +1,137 @@ +.extensions { + display: flex; + justify-content: center; + padding-bottom: 10px; +} + +.extensions > * { + padding: 4px 10px; +} + +.landing a { + color: inherit; +} + +.landing { + color: #222; + background: #fafafa; +} + +.landing > * { + background: linear-gradient(rgba(255, 255, 255), rgba(220, 220, 220)); +} + +.landing header { + display: flex; + padding: 100px 0px; +} +.landing h1 { + margin-top: 10px; +} + +.landing header a { + color: rgb(1, 22, 39); +} + +.landing header a.button { + background: rgb(1, 22, 39); + color: #fafafa; + padding: 9px 16px; + margin: 10px auto 15px; + width: 80px; + text-align: center; + border-radius: 4px; + text-decoration: none; + display: block; +} + +.landing header video { + margin-right: 115px; +} + +@media (max-width: 1130px) { + .landing header video { + margin-right: 0px; + margin-bottom: 20px; + max-width: 80%; + height: auto !important; + min-width: 350px; + } + .landing header { + flex-direction: column; + padding: 40px 0px 20px; + } + .landing header .summary { + width: 560px; + max-width: 80%; + } +} + +.landing .testimonies { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + display: grid; + width: 800px; + margin: 10px auto; + grid-template-columns: 400px 400px; + grid-template-rows: 180px 150px; + grid-column-gap: 14px; + grid-row-gap: 14px; +} + +@media (max-width: 900px) { + .landing .testimonies { + grid-template-columns: 400px; + grid-template-rows: 180px 180px 150px 150px; + width: 400px; + } +} +@media (max-width: 420px) { + .landing .testimonies { + grid-template-columns: auto; + grid-template-rows: auto; + width: 90%; + } +} + +.landing .testimonies > * { + border: 1px solid #e1e8ed; + display: inline-block; + text-decoration: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border-radius: 5px; +} + +.landing blockquote { + display: flex; + flex-direction: column; + height: 100%; + margin: 0; + padding: 19px; + box-sizing: border-box; +} + +.landing blockquote p { + flex: 1; + margin: 0 0 12px 0; +} + +.landing blockquote img { + height: 36px; + width: 36px; + border-radius: 50%; +} + +.landing .support > div { + width: 800px; +} + +@media (max-width: 900px) { + .landing .support > div { + width: 600px; + } +} +@media (max-width: 600px) { + .landing .support > div { + width: 350px; + } +} diff --git a/src/landing.js b/src/landing.js index 7f6325d..1eb28fa 100644 --- a/src/landing.js +++ b/src/landing.js @@ -1,55 +1,201 @@ import React from "react"; -import demo from "./demo.gif"; +import demo from "./demo.mp4"; +import { ReactComponent as ChromeLogo } from "./icons/chrome.svg"; +import { ReactComponent as FirefoxLogo } from "./icons/firefox.svg"; +import { ReactComponent as CliLogo } from "./icons/cli.svg"; +import { ReactComponent as VsCodeLogo } from "./icons/vscode.svg"; +import "./landing.css"; export default function Landing() { const url = `${window.location.protocol}//${ window.location.host }/babel/babel/blob/master/packages/babel-core/test/browserify.js`; return ( -
- demo -

Git History

-
-
- Quickly browse the history of any GitHub file (GitLab and Bitbucket{" "} - - coming soon - - ): +
+
+ +
+

Git History

+ Quickly browse the history of files in any git repo:
    +
  1. Go to a file in GitHub (or GitLab, or Bitbucket)
  2. - Replace github.com with{" "} - github.githistory.xyz in any file url + Replace github.com with github.githistory.xyz
    3. -
  3. There's no step two
    4. +
  4. There's no step three
- Try it + + Try it + +

Also available as extensions:

+ +
+