Make jumbotron mo responsive

2 files changed, 27 insertions, 14 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b5cea261d..b9865ee09 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4589,9 +4589,9 @@ a.badge:hover {
 }
 
 .jumbotron {
-  padding: 60px;
+  padding: 30px;
   margin-bottom: 30px;
-  font-size: 18px;
+  font-size: 21px;
   font-weight: 200;
   line-height: 30px;
   color: inherit;
@@ -4600,15 +4600,21 @@ a.badge:hover {
 }
 
 .jumbotron h1 {
-  margin-bottom: 0;
-  font-size: 60px;
   line-height: 1;
-  letter-spacing: -1px;
   color: inherit;
 }
 
-.jumbotron li {
-  line-height: 30px;
+.jumbotron p {
+  line-height: 1.4;
+}
+
+@media screen and (min-width: 768px) {
+  .jumbotron {
+    padding: 50px 60px;
+  }
+  .jumbotron h1 {
+    font-size: 60px;
+  }
 }
 
 .clearfix:before,
diff --git a/less/jumbotron.less b/less/jumbotron.less
index add431969..18de623fd 100644
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -4,22 +4,29 @@
 
 
 .jumbotron {
-  padding: 60px;
+  padding: 30px;
   margin-bottom: 30px;
-  font-size: 18px;
+  font-size: 21px;
   font-weight: 200;
   line-height: @line-height-base * 1.5;
   color: @jumbotron-lead-color;
   background-color: @jumbotron-background;
   border-radius: 6px;
   h1 {
-    margin-bottom: 0;
-    font-size: 60px;
     line-height: 1;
     color: @jumbotron-heading-color;
-    letter-spacing: -1px;
   }
-  li {
-    line-height: @line-height-base * 1.5; // Reset since we specify in type.less
+  p {
+    line-height: 1.4;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .jumbotron {
+    padding: 50px 60px;
+
+    h1 {
+      font-size: 60px;
+    }
   }
 }