settings view rabbit hole

app/styles/app/app.sass

@@ -1,12 +1,6 @@
 
 html, body
-  font-family: 'Source Sans Pro', Helvetica, sans-serif
-  font-size: $font-size-small
-  line-height: $line-height
-  margin: 0
-  padding: 0
   height: 100%
-  color: $color-text
 
 a
   color: $color-link

app/styles/app/foundation/scss/foundation/_settings.scss

@@ -63,10 +63,10 @@
 // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
 // If you want your base font-size to be different and not have it affect the grid breakpoints,
 // set $rem-base to $base-font-size and make sure $base-font-size is a px value.
-$base-font-size: 13px;
+$base-font-size: $font-size-small;
 
 // The $base-font-size is 100% while $base-line-height is 150%
-// $base-line-height: 150%;
+$base-line-height: $line-height;
 
 // We use this to control whether or not CSS classes come through in the gem files.
 $include-html-classes: true;
@@ -125,7 +125,7 @@ $font-weight-normal: normal !default;
 
 // We use these to control various global styles
 // $body-bg: $white;
-// $body-font-color: $jet;
+$body-font-color: $color-text;
 // $body-font-family: $font-family-sans-serif;
 // $body-font-weight: $font-weight-normal;
 // $body-font-style: normal;

app/styles/app/left.sass

@@ -2,7 +2,7 @@
 #left
   #search_box
     height: 87px
-    padding: 30px 20px 90px 20px
+    padding: 35px 20px 90px 20px
     background-color: $left-bg
 
     input[type=text]

app/styles/app/main.sass

@@ -1,8 +1,9 @@
 
 #main
   h3
-    margin: 0 5px 0 0
+    margin: 13px 5px 0 0
     font-size: $font-size-huge
+    line-height: 1
     a
       color: $main-repo-link-color
       text-decoration: none

app/styles/app/main/repository.sass

@@ -81,13 +81,14 @@
       padding-right: 16px
 
 
-  @media #{$medium-up}
+  @media #{$large-up}
     h3
       display: inline-block
     .github-icon
       display: inline-block
-      top: 12px
+      top: 17px
       margin-right: 1em
     .status-image
-      top: 12px
+      top: 18px
+
 

app/styles/app/main/summary.sass

@@ -1,23 +1,19 @@
 
+.build-status
+  background-size: 14px 14px
+  background-position: 12px 12px
+
 .green .build-status
   background: #549e54 inline-image('icons/state-passed-white.svg') no-repeat
-  background-size: 14px 14px
-  background-position: 12px 12px
 
 .yellow .build-status
   background: #bcaf39 inline-image('icons/state-pending-white.svg') no-repeat
-  background-size: 14px 14px
-  background-position: 12px 12px
 
 .red .build-status
   background: #b54223 inline-image('icons/state-failed-white.svg') no-repeat
-  background-size: 14px 14px
-  background-position: 12px 12px
 
 .gray .build-status
   background: #a8a8a9 inline-image('icons/state-errored-white.svg') no-repeat
-  background-size: 14px 14px
-  background-position: 12px 12px
 
 #new-summary
   @include clearfix

app/styles/app/main/tools.sass

@@ -8,7 +8,7 @@
     text-align: left
     color: #fff
     font-size: 13px
-    padding: 4px 24px 3px 25px
+    padding: 3px 24px 3px 25px
     background-image: inline-image('icons/settings.svg'), inline-image('icons/dropdown-arrow-white.svg')
     background-size: 14px 14px, 8px 8px
     background-position: 6px 7px, right 9px center
@@ -52,7 +52,7 @@
       float: right
     .menu
       right: 0
-      top: -9px
+      top: -8px
       margin-top: 0
 
 #code-climate
@@ -80,7 +80,7 @@
     position: relative
     top: 1.8em
     ul
-      margin-top: -27px
+      margin-top: -21px
 
   li.restart-build a, li.restart-job a
     background-image: inline-image('icons/repeat.svg')

app/styles/app/settings.sass

@@ -1,5 +1,7 @@
 #settings
-  min-width: 830px
+  ul
+    @include resetul
+
   .settings-form
     margin: 30px 0 30px 0
 
@@ -37,6 +39,9 @@
 
     .field
       padding-bottom: 10px
+      clear: left
+      @media screen and (min-width: 47em)
+        clear: none
     .field:after
       visibility: hidden
       display: block
@@ -45,6 +50,10 @@
       clear: both
       height: 0
 
+    .travis-switch
+      display: block
+      margin-top: 3px
+
     label
       display: inline-block
 
@@ -111,10 +120,9 @@
     background-repeat: no-repeat
     background-size: 0.5em
     padding-left: 26px
-    width: 142px
 
   .add-env-var, .add-ssh-key
-    color: #ffffff
+    color: $white
     background-color: #97a3aa
     border-radius: 4px
     padding: 8px 12px 8px 12px
@@ -240,9 +248,6 @@
     margin: 10px 40px 0 0
     padding-bottom: 10px
     overflow: auto
-    display: flex
-    align-items: center
-    justify-content: left
     border-bottom: 1px solid #F1F1F1
     width: 100%
 
@@ -263,28 +268,29 @@
         margin-top: 4px
         height: 20px
 
-    span.name, span.value
+    .name,
-      display: inline-block
+    .value
       line-height: 20px
       position: relative
       font-size: 15px
-      word-wrap: break-word
 
     .equals
       margin: 0 10px 0 14px
 
-    span.name
+    .name
       width: 250px
       margin: 0 10px 0 20px
       text-align: left
 
-    span.value
+    .value
+      display: block
       width: auto
       text-align: left
-      min-width: 158px
       max-width: 390px
       min-height: 25px
-      display: flex
-      align-items: center
-      justify-content: left
       padding: 8px 12px
+
+    @media #{$medium-up}
+      .value,
+      .name
+        display: inline-block

app/styles/app/tabs.sass

@@ -17,7 +17,6 @@
     cursor: pointer
   @media #{$medium-up}
     height: 29px
-    display: inline-block
     li
       display: inline-block
       &:hover
@@ -77,7 +76,6 @@
 #main
   .tabs
     border-bottom: 3px solid #f5f5f6
-
     li
       height: 29px
       background-color: #f5f5f6
@@ -103,21 +101,21 @@
     margin-top: 15px
     ul.navigation
       @include resetul
-      height: 40px
-      line-height: 40px
       border-bottom: 1px solid #EAEAEA
-
       li
-        display: inline-block
         margin-right: 10px
-
         a
           color: #ACACAC
           font-weight: 600
           font-size: 14px
-
         a.active
           color: #55888E
+      @media #{$small-up}
+        li
+          display: inline-block
+      @media #{$medium-up}
+        height: 40px
+        line-height: 40px
 
   #builds
     a

app/styles/app/top.sass

@@ -180,7 +180,7 @@
   border-radius: 100px
   @media #{$medium-up}
     float  : right
-    margin : 12px 0 0 10px
+    margin : 10px 0 0 10px
 
 // #user ul
 //   text-align : left