rewrite layout rules

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

@@ -63,7 +63,7 @@
 // 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: 100%;
+$base-font-size: 13px;
 
 // The $base-font-size is 100% while $base-line-height is 150%
 // $base-line-height: 150%;

app/styles/app/layout.sass

@@ -48,50 +48,18 @@
 
 @media #{$medium-up}
 
+
+  // layout magic http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
   .wrapper-main
-    width: grid-calc(22, 24)
-    margin: auto
-
-  #auth
-    #main
-      float: none
-
-  #profile
-    #main
+    overflow: hidden
+    & > div:first-child:nth-last-child(2)
       width: grid-calc(18, 24)
       float: left
-    #left
-      width: grid-calc(24, 24)
-    #right
+
+    & > div:first-child:nth-last-child(2) ~ div
       width: grid-calc(6, 24)
       float: right
 
-  .pro,
-  #profile.pro
-    .wrapper-main
-      overflow: auto
-      width: grid-calc(24, 24)
-      clear: both
-    #main
-      width: grid-calc(18, 24)
-      float: left
-      overflow: hidden
-    #right
-      width: grid-calc(6, 24)
-      float: right
-
-  .pro.maximized,
-  #profile.pro.maximized
-    .wrapper-main
-      width: grid-calc(24, 24)
-      clear: both
-    #main
-      width: grid-calc(24, 24)
-      float: none
-      overflow: hidden
-    #right
-      width: 0
-
 
 @media #{$large-up}
   #left
@@ -103,39 +71,8 @@
     width: grid-calc(19, 24)
     float: left
     margin-left: grid-calc(5, 24)
+    overflow: visible
 
-  #profile
-    #left
-      width: grid-calc(5, 24)
-    #main
-      width: grid-calc(15, 24)
-      float: left
-    #right
-      width: grid-calc(4, 24)
-
-  .pro,
-  #profile.pro
-    .wrapper-main
-      width: grid-calc(19, 24)
-      float: right
-    #main
-      width: grid-calc(19, 24)
-      float: left
-    #right
-      width: grid-calc(5, 24)
-      float: right
-
-  .pro.maximized,
-  #profile.pro.maximized
-    .wrapper-main
-      overflow: auto
-      width: grid-calc(19, 24)
-      float: right
-    #main
-      width: grid-calc(24, 24)
-      float: none
-    #right
-      width: 0
 
 .travis-lint
   background-color: $travis-lint-bg

app/styles/app/layouts/footer.sass

@@ -2,6 +2,10 @@
  * Footer on the dashboard
  */
 
+a
+  color           : $color-link
+  text-decoration : none
+
 footer
   padding          : 20px 0
   background-color : $footer-bg-color
@@ -10,6 +14,10 @@ footer
   line-height      : 22px
   margin-top      : -334px /* sticky footer */
 
+  a
+    display         : block
+    color           : $footer-color
+
 .wrapper
   padding-bottom: 334px
   min-height: 100%
@@ -53,11 +61,6 @@ footer a:hover,
 footer a:active
   text-decoration : underline
 
-a
-  text-decoration : none
-  display         : block
-  color           : $footer-color
-
 .status-circle
   background   : $pass-color
   display      : inline-block

app/styles/app/left.sass

@@ -11,7 +11,6 @@
       padding: 0 0 0 10px
       color: $color-text
       font-size: $font-size-small
-      // @include box-sizing(border-box)
       border: 0
       background: $color-bg-input inline-image('ui/search.svg') no-repeat 95%
       background-size: 3%

app/styles/app/profile.sass

@@ -5,8 +5,9 @@
 
     h3
       height: 19px
-      padding-bottom: 35px
+      padding-bottom: 50px
       line-height: 19px
+      color: $color-text
 
     img
       float: left

app/styles/app/profile/hooks.sass

@@ -8,6 +8,9 @@
       margin-top: 5px
 
 #hooks, #unadministerable-hooks
+  
+  @include resetul
+
   .travis-switch
     font-size: 10px
   margin-top: 10px

app/templates/layouts/home.hbs

@@ -5,14 +5,14 @@
   </header>
 
   <div class="wrapper-main">
-    <main id="main" role="main">
+    <div id="main" role="main">
       {{render "flash"}}
       {{yield}}
-    </main>
+    </div>
     {{#if config.pro}}
-      <aside id="right">
+      <div id="right">
         {{render "sidebar"}}
-      </aside>
+      </div>
     {{/if}}
   </div>
 

app/templates/layouts/profile.hbs

@@ -4,12 +4,12 @@
   </header>
 
   <div class="wrapper-main">
-    <main id="main" role="main">
+    <div id="main" role="main">
       {{render "flash"}}
       {{yield}}
-    </main>
+    </div>
 
-    <aside id="right">
+    <div id="right">
       <div id="slider" {{action "toggle" target=slider}}>
         <div class='icon'></div>&nbsp;
       </div>
@@ -27,7 +27,7 @@
           If you need help <a href="http://stackoverflow.com/questions/ask?tags=travis-ci">ask a question</a> or hop on <a href="irc://irc.freenode.net/#travis">#travis</a> on irc.freenode.net
         </p>
       </div>
-    </aside>
+    </div>
   </div>
 
   <aside id="left">