[PYT-238] Update quickstart module (pytorch#70)

Author: patmellon

_includes/quick_start_local.html

@@ -89,7 +89,9 @@
       <div class="col-md-12 title-block command-mobile-heading">
         <div class="option-text">Run this Command:</div>
       </div>
-      <div class="col-md-12" id="command">conda install pytorch torchvision -c pytorch</div>
+      <div class="command-container">
+        <div class="col-md-12" id="command">conda install pytorch torchvision -c pytorch</div>
+      </div>
     </div>
   </div>
 </div>

_sass/quick-start-module.scss

@@ -1,5 +1,5 @@
 .quick-starts {
-  background: $medium_grey;
+  background: $light_grey;
 
   @include small-desktop {
     .start-locally-col {
@@ -50,7 +50,8 @@
   }
 
   .option-text {
-    margin-top: rem(10px);
+    display: table-cell;
+    vertical-align: middle;
   }
 
   .selected {
@@ -61,6 +62,7 @@
   .block {
     margin-bottom: rem(1px);
     height: rem(40px);
+    display: table;
   }
 
   .title-block {
@@ -89,6 +91,16 @@
     padding: rem(15px);
     border: 2px solid $light_grey;
     word-wrap: break-word;
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .command-container {
+    display: table;
+    width: 100%;
+    @include desktop {
+      min-height: rem(84px);
+    }
   }
 
   .command-block {
@@ -177,6 +189,7 @@
     color: #929292;
     font-size: 1.125em;
     letter-spacing: 0.25px;
+    padding-bottom: rem(15px);
   }
 
   h3 {
@@ -207,7 +220,7 @@
   position: relative;
   background-image: url($baseurl + "/assets/images/chevron-right-orange.svg");
   background-size: 6px 13px;
-  background-position: center right 12px;
+  background-position: center right 15px;
   background-repeat: no-repeat;
 
   @include desktop {
@@ -251,6 +264,7 @@
   font-size: rem(18px);
   letter-spacing: -0.25px;
   line-height: rem(30px);
+  color: $not_quite_black;
 
   @include small-desktop {
     font-size: rem(16px);