From 5dbd90be5d899a5888f7bb06964eaebf04936f5b Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Fri, 6 Feb 2015 15:00:18 +0100 Subject: [PATCH] rewrite layout rules --- .../foundation/scss/foundation/_settings.scss | 2 +- app/styles/app/layout.sass | 77 ++----------------- app/styles/app/layouts/footer.sass | 13 ++-- app/styles/app/left.sass | 1 - app/styles/app/profile.sass | 3 +- app/styles/app/profile/hooks.sass | 3 + app/templates/layouts/home.hbs | 8 +- app/templates/layouts/profile.hbs | 8 +- 8 files changed, 29 insertions(+), 86 deletions(-) diff --git a/app/styles/app/foundation/scss/foundation/_settings.scss b/app/styles/app/foundation/scss/foundation/_settings.scss index 60100a8a..23463ba6 100644 --- a/app/styles/app/foundation/scss/foundation/_settings.scss +++ b/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%; diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index 21c4a6a1..030afad8 100644 --- a/app/styles/app/layout.sass +++ b/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 diff --git a/app/styles/app/layouts/footer.sass b/app/styles/app/layouts/footer.sass index b059d606..3d28b0cf 100644 --- a/app/styles/app/layouts/footer.sass +++ b/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 diff --git a/app/styles/app/left.sass b/app/styles/app/left.sass index 96a30a12..afc9797e 100644 --- a/app/styles/app/left.sass +++ b/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% diff --git a/app/styles/app/profile.sass b/app/styles/app/profile.sass index 645d9146..7545fcb7 100644 --- a/app/styles/app/profile.sass +++ b/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 diff --git a/app/styles/app/profile/hooks.sass b/app/styles/app/profile/hooks.sass index 1dfc70ad..6a144aa4 100644 --- a/app/styles/app/profile/hooks.sass +++ b/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 diff --git a/app/templates/layouts/home.hbs b/app/templates/layouts/home.hbs index b36de3c8..b2977b03 100644 --- a/app/templates/layouts/home.hbs +++ b/app/templates/layouts/home.hbs @@ -5,14 +5,14 @@
-
+
{{render "flash"}} {{yield}} -
+
{{#if config.pro}} - + {{/if}} diff --git a/app/templates/layouts/profile.hbs b/app/templates/layouts/profile.hbs index 759822fb..8aa1ac64 100644 --- a/app/templates/layouts/profile.hbs +++ b/app/templates/layouts/profile.hbs @@ -4,12 +4,12 @@
-
+
{{render "flash"}} {{yield}} -
+
- +