Adding Getting Started page

css/getting-started.css

@@ -0,0 +1,78 @@
+.gs-masthead {
+    text-align: center;
+    color: var(--color-white);
+    background-image: linear-gradient(to bottom, #009cff, #3f5dff);
+    padding: 120px 0px 80px 0px;
+    z-index: 5;
+    position: relative;
+    overflow: hidden;
+}
+
+.gs-masthead .container-fluid {
+    position: absolute;
+    background-color: var(--color-blue);
+    background: linear-gradient(to top, transparent, #3f5dff), url('../img/getting-started/dot-pattern-2x.png');
+
+    /*background: url('../img/getting-started/dot-pattern-2x.png');*/
+    opacity: 0.2;
+    z-index: -1;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: center center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    width: 100%;
+    padding: 350px;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}
+
+.gs-masthead .header-space {
+    height:80px;
+}
+
+/* tag for steps */
+.steptag {
+    background-color: var(--color-blue-d);
+    text-align: center;
+    border-radius: 5px;
+    color: var(--color-white);
+    border: none;
+    margin-bottom: 16px;
+    padding-left: 14px;
+    padding-right: 14px;
+    float: left;
+}
+
+code {
+    color: black;
+    background-color: var(--color-white-xd);
+    padding: 5px;
+}
+
+code-blue {
+    color: var(--color-blue-d);
+}
+
+p.large.step {
+    padding-top: 10px;
+}
+
+.link {
+    color: var(--color-blue-d);
+}
+.link:hover {
+    color: var(--color-blue-xd);
+    text-decoration: none;
+}
+
+section.odd-section {
+    background-color: var(--color-white-xd);
+}
+section.even-section {
+    background-color: var(--color-white-d);
+}

css/loopback.css

@@ -128,12 +128,14 @@ p.centered-regular {
   text-align: center;
   padding: 16px;
   border-radius: 5px;
-  border: none;
+  border-color: var(--color-blue-d);
+  border: solid;
   vertical-align: middle;
   color: var(--color-blue-d);
   font-size: 16px;
-  font-weight: bold;
   line-height: 16px;
+  position: relative;
+  top: 50%;
 }
 
 .btn-primary:active,
@@ -148,19 +150,24 @@ p.centered-regular {
 .btn-secondary:hover {
   background-color: var(--color-blue-d);
   color: var(--color-white);
+  border-color: var(--color-blue-d);
 }
 
 /* navbar */
 nav {
   padding-top: 10px;
   background-color: white;
+  border-bottom: solid 1px var(--color-gray);
 }
 .navbar-light .navbar-nav .nav-link:hover {
   color: var(--color-blue-d);
 }
 .navbar-light .navbar-nav .nav-link:active {
   color: var(--color-blue-xd);
 }
+.navbar-light .navbar-nav .nav-link.highlighted {
+  color: var(--color-gray-xd);
+}
 
 /* Header alert */
 .header-alert {
@@ -186,7 +193,7 @@ nav {
 .masthead .container-fluid {
   position: absolute;
   background-color: var(--color-blue);
-  background: url('../img/homepage/hero-illustration.svg');
+  background: linear-gradient(to top, transparent, #3f5dff), url('../img/homepage/hero-illustration.svg');
   opacity: 0.4;
   z-index: -1;
   background-repeat: no-repeat;
@@ -266,7 +273,7 @@ section {
   padding: 80px 0 56px 0;
 }
 .container {
-  padding: 0px 0 112px 0;
+  padding: 0px 0 50px 0;
 }
 
 /* Action */
@@ -289,13 +296,19 @@ section {
 .hairline {
   stroke-width: 1px;
   background-color: var(--color-gray);
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 /* Footer */
 footer {
   padding: 25px 0;
   text-align: center;
   background-color: var(--color-gray-xd);
 }
+.hairline-footer {
+  stroke-width: 1px;
+  background-color: var(--color-gray);
+}
 
 footer a {
   color: white;
@@ -320,3 +333,17 @@ footer a:hover {
   color: var(--color-gray);
   text-decoration: none;
 }
+
+.code-snippet {
+  color: var(--color-gray-xd);
+  text-align: left;
+  background-color: var(--color-white-xd);
+  border-radius: 5px;
+  border-color: var(--color-gray-xd);
+  border: 1px solid;
+  padding: 22px 30px 0px 30px;
+  width: 100%;
+  position: relative;
+  top: 30%;
+  white-space: pre-wrap;
+}