updated font-size for ftux large devices

gitcoinco · Jun 13, 2018 · 64f6d55 · 64f6d55
1 parent f1a94f1
commit 64f6d55
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/app/assets/v2/css/onboard.css b/app/assets/v2/css/onboard.css
@@ -1,6 +1,6 @@
 body {
-  background-color: #FFFFFF;
-  font-family: 'Muli', sans-serif;
+  background-color: #fff;
+  font-family: Muli, sans-serif;
 }
 
 h2, h3 {
@@ -28,6 +28,9 @@ h3 {
   margin-top: 1em;
   padding: 30px 10px 0;
   border-radius: 2px;
+  max-width: 44rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .show {
@@ -65,8 +68,9 @@ h3 {
 
 #onboarding .controls {
   float: right;
-  margin-right: 15px;
+  margin-right: 4rem;
   overflow: auto;
+  position: relative;
 }
 
 .step i {
@@ -169,6 +173,7 @@ h3 {
   border-radius: 50%;
   width: 50px;
   height: 50px;
+  border: 0.1rem solid #1AB56D;
 }
 
 .fa-check-circle {
@@ -374,8 +379,38 @@ h3 {
     text-align: center;
   }
 
-  #step-3 div.pl-0 {
+  #skills div.pl-0 {
     padding-left: 15px !important;
     padding-right: 15px !important;
   }
+
+  #skills {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1rem;
+  }
+
+  .step .label {
+    font-size: 0.8rem;
+  }
+
+  .step a {
+    font-size: 0.9rem;
+  }
+
+  #onboarding .controls p {
+    font-size: 0.8rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .suggested-tag .text,
+  .step .filter-tag {
+    font-size: 0.8rem;
+  }
 }
diff --git a/app/dashboard/templates/ftux/onboard.html b/app/dashboard/templates/ftux/onboard.html
@@ -29,7 +29,7 @@
       {% include 'shared/nav.html' %}
     </div>
     <div class="row">
-      <div class="col-12 offset-lg-2 col-lg-8 offset-xl-3 col-xl-6">
+      <div class="col-12 offset-sm-1 col-sm-10 offset-lg-2 col-lg-8 offset-xl-3 col-xl-6">
         <form id="onboarding">
           <div class="state">
             {% for step in steps %}