Merge branch 'master' of https://github.com/reg-viz/reg-suit-lp

reg-viz · Nov 2, 2019 · 4e0171a · 4e0171a
2 parents 01996f4 + 3c0baba
commit 4e0171a
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 27 deletions.
diff --git a/bs-config.js b/bs-config.js
@@ -16,7 +16,7 @@ module.exports = {
     "ui": {
         "port": 3001
     },
-    "files": ["src/**/*'],
+    "files": ["src/**/*"],
     "watchEvents": [
         "change"
     ],

diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/images/apple-touch-icon.png b/src/images/apple-touch-icon.png
diff --git a/src/index.html b/src/index.html
@@ -1,15 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/websaite#">
     <meta charset="UTF-8">
     <title>reg-suit</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="CLI for visual regression testing">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="reg-suit">
+    <meta property="og:site_name" content="reg-suit">
+    <meta property="og:description" content="CLI for visual regression testing">
+    <meta property="og:url" content="https://reg-viz.github.io/reg-suit/">
+    <meta property="og:image" content="https://raw.githubusercontent.com/reg-viz/artwork/master/logo/horizontal-dark.png">
     <link href="https://fonts.googleapis.com/css?family=Work+Sans:500,600&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
     <link href="main.css" rel="stylesheet">
     <link rel="shortcut icon" href="favicon.ico">
+    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
   </head>
   <body>
     <main>
@@ -25,7 +32,7 @@
         <div class="inner two-up">
           <div>
             <h1>VISUAL<br /><strong>REG</strong>RESSION<br/>TESTING<br /><strong>SUIT</strong></h1>
-            <p class="mt-3">reg-viz provides regression testing tools.</p>
+            <p class="mt-2">reg-viz provides regression testing tools.</p>
             <a class="mt-5 ghost-button white large" href="https://github.com/reg-viz/reg-suit#getting-started">Getting Started</a>
           </div>
           <div>
@@ -127,24 +134,15 @@ <h2>EXAMPLES</h2>
           </div>
           <div>
             <ul>
-              <li>
-                <a href="https://github.com/reg-viz/reg-simple-demo">
-                  <span class="title">reg-viz/reg-simple-demo</span>
-                  <span class="detail">Simple image files project includes various CI services' script.</span>
-                </a>
-              </li>
-              <li>
-                <a href="https://github.com/reg-viz/reg-simple-demo">
-                  <span class="title">reg-viz/reg-simple-demo</span>
-                  <span class="detail">Simple image files project includes various CI services' script.</span>
-                </a>
-              </li>
-              <li>
-                <a href="https://github.com/reg-viz/reg-simple-demo">
-                  <span class="title">reg-viz/reg-simple-demo</span>
-                  <span class="detail">Simple image files project includes various CI services' script.</span>
-                </a>
-              </li>
+              <li><a href="https://github.com/reg-viz/reg-simple-demo"><span class="title">reg-viz/reg-simple-demo</span><span class="detail">Simple image files project includes various CI services' script.</span></a></li>
+              <li><a href="https://github.com/reg-viz/reg-puppeteer-demo"><span class="title">reg-viz/reg-puppeteer-demo</span><span class="detail">Simple HTML project using Puppeteer for capturing screenshot.</span></a></li>
+              <li><a href="https://github.com/bokuweb/react-avaron-reg-sample"><span class="title">bokuweb/react-avaron-reg-sample</span><span class="detail">React project using avaron(= Ava + Electron) for capturing screenshot.</span></a></li>
+              <li><a href="https://github.com/Quramy/angular-puppeteer-demo"><span class="title">quramy/angular-puppeteer-demo</span><span class="detail">Angular project using Puppeteer for capturing screenshot.</span></a></li>
+              <li><a href="https://github.com/tadashi-aikawa/owlora"><span class="title">tadashi-aikawa/owlora</span><span class="detail">React project using storybook and LOKI for capturing screenshot.</span></a></li>
+              <li><a href="https://github.com/tsuchikazu/vue-reg-suit-demo"><span class="title">tsuchikazu/vue-reg-suit-demo</span><span class="detail">Vue.js project using karma-nightmare for capturing screenshot.</span></a></li>
+              <li><a href="https://github.com/reg-viz/preview-sketch-demo"><span class="title">reg-viz/preview-sketch-demo</span><span class="detail">Sketch file project. reg-suit compares their preview images.</span></a></li>
+              <li><a href="https://github.com/Quramy/angular-sss-demo"><span class="title">quramy/angular-sss-demo</span><span class="detail">Angular project using Storybook and storybook-chrome-screenshot.</span></a></li>
+              <li><a href="https://github.com/tsuyoshiwada/scs-with-reg-viz"><span class="title">tsuyoshiwada/scs-with-reg-viz</span><span class="detail">React project using Storybook and storybook-chrome-screenshot.</span></a></li>
             </ul>
             <p>If you use reg-suit, let us know your repository. We'll list it at the above :)</p>
           </div>

diff --git a/src/main.css b/src/main.css
@@ -171,6 +171,8 @@ a.text-link:hover, a.text-link:active {
   font-weight: 600;
 }
 .round-button.large, .ghost-button.large {
+  height: 56px;
+  line-height: 56px;
   font-size: 18px;
 }
 
@@ -198,6 +200,9 @@ a.text-link:hover, a.text-link:active {
   line-height: 36px;
   border: 4px solid currentColor;
 }
+.ghost-button.large {
+  line-height: 48px;
+}
 
 .ghost-button.white {
   color: #fff;
@@ -330,6 +335,15 @@ a.text-link:hover, a.text-link:active {
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.12), 0px 2px 6px rgba(0, 0, 0, 0.06);
 }
 
+.hero h1 + p {
+  font-size: 18px;
+}
+@media screen and (max-width: 425px) {
+  .hero h1 + p {
+    font-size: 14px;
+  }
+}
+
 /* what */
 
 .what {
@@ -575,21 +589,21 @@ a.text-link:hover, a.text-link:active {
 /* Getting Started */
 
 .getting-started {
-  margin-top: 72px;
-  padding: 40px 0;
+  margin-top: 80px;
+  padding: 80px 0;
   position: relative;
   color: #fff;
   text-align: center;
 }
 @media screen and (min-width: 426px) {
   .getting-started {
-    padding: 64px 0;
-    margin-top: 100px;
+    margin-top: 120px;
   }
 }
 @media screen and (min-width: 1025px) {
   .getting-started {
-    margin-top: 240px;
+    padding: 144px 0;
+    margin-top: 256px;
   }
 }
 
@@ -669,7 +683,7 @@ a.text-link:hover, a.text-link:active {
 /* examples */
 
 .examples {
-  margin-top: 80px;
+  margin-top: 100px;
 }
 
 .examples h2 {