190-added-in-link-to-index (#222)

* 190-added-in-link-to-index * 190-made-requested-changes-to-copy
mozilla · Oct 9, 2017 · 89c3eb4 · 89c3eb4
1 parent e50dffa
commit 89c3eb4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/src/css/first-run.css b/src/css/first-run.css
@@ -15,11 +15,11 @@ h1 {
 }
 
 .center { text-align: center; }
-img.center, button.center { display: block; margin: 0 auto; }
+img.center, button.center, a.center { display: block; margin: 0 auto; }
 
 img#lightbeam-logo { margin-bottom:-18px; }
 
-body > ol, body > ul { width: 578px; margin: 0 auto; }
+body > ol, body > ul, body > #start { width: 578px; margin: 0 auto; }
 
 ol#steps {
   /* unset default styles */
@@ -68,3 +68,25 @@ ul li {
 ul li:last-child {
   padding-bottom: 0;
 }
+
+div#start {
+  background: white;
+  border-radius: 0.5em;
+  transition: all 0.3s;
+}
+#start a {
+  text-decoration: none;
+  padding: 10px;
+  color: #5D667A;
+  font-weight: bold;
+  outline: none;
+  transition: all 0.3s;
+}
+
+#start:hover {
+  box-shadow: 5px 5px 5px #111111;
+  background: #4BC599;
+}
+#start a:hover {
+  color: white;
+}
diff --git a/src/first-run.html b/src/first-run.html
@@ -15,7 +15,9 @@ <h1 class="center">Thanks for downloading Lightbeam!</h1>
 
     <ol id="steps">
       <li>
-        <strong>Open the Lightbeam tab</strong> by clicking the <span class="platform-dependent" id="icon-placement"><img src="images/lightbeam_logo-only_16x16.png" /> logo in the browser toolbar.</span>
+        <strong>Open the Lightbeam tab</strong> by clicking the <span class="platform-dependent"
+          id="icon-placement"><img src="images/lightbeam_logo-only_16x16.png" /> logo in the browser
+          toolbar</span><br>or by using the 'Get Started' below.
       </li>
       <li>
         <ul>
@@ -34,6 +36,9 @@ <h1 class="center">Thanks for downloading Lightbeam!</h1>
         </ul>
       </li>
     </ol>
+    <div id="start">
+      <a class="center" href="index.html">Get Started</a>
+    </div>
 
   </body>
 </html>