From 411c61440878f104df1a1bcc4bbec2fe6a7f3ce7 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 19:33:30 -0400 Subject: [PATCH] fix the 1px gap --- src/app/browser.coffee | 2 +- styles/app/color-vars.styl | 9 +++ styles/app/header.styl | 130 +++++++++++++++++-------------------- styles/app/tasks.styl | 9 +-- views/app/header.html | 36 +++++----- views/app/index.html | 4 +- 6 files changed, 89 insertions(+), 101 deletions(-) create mode 100644 styles/app/color-vars.styl diff --git a/src/app/browser.coffee b/src/app/browser.coffee index 7ae4958a3e..1d9e2d0eaf 100644 --- a/src/app/browser.coffee +++ b/src/app/browser.coffee @@ -124,7 +124,7 @@ setupTour = (model) -> # jquery sticky header on scroll, no need for position fixed initStickyHeader = (model) -> - $('.site-header').sticky({topSpacing:1}) + $('.header-wrap').sticky({topSpacing:1}) ### Sets up "+1 Exp", "Level Up", etc notifications diff --git a/styles/app/color-vars.styl b/styles/app/color-vars.styl new file mode 100644 index 0000000000..2b2250be6f --- /dev/null +++ b/styles/app/color-vars.styl @@ -0,0 +1,9 @@ +// color variables +$worst = rgb(230, 184, 175) +$worse = rgb(244, 204, 204) +$bad = rgb(252, 229, 205) +$neutral = rgb(255, 242, 204) +$good = rgb(217, 234, 211) +$better = rgb(208, 224, 227) +$best = rgb(201, 218, 248) +$completed = rgb(217, 217, 217) \ No newline at end of file diff --git a/styles/app/header.styl b/styles/app/header.styl index 96f55240ba..75f7273c01 100644 --- a/styles/app/header.styl +++ b/styles/app/header.styl @@ -1,13 +1,14 @@ /* site header -------------------- */ -.site-header +.header-wrap width: 100% // this is for the sticky height: 10em - padding: 2.5em 1.5em 2em + padding: 2.25em 1.5em 2em z-index: 1 background: #f5f5f5 border-bottom: 1px solid #ccc + margin-top: -1px .user-menu position: absolute @@ -29,6 +30,9 @@ content: '▾' float: right + +/* flyout navigation pattern +----------------------------- */ .stacked > li display:list-item > a @@ -62,89 +66,71 @@ border-top: 0 } +/* hero box +-------------------- */ +.site-header + display: table + margin: 0 auto + width: 100% -.progress - position: relative - height: 2em -.bar - border: 1px solid black -.progress-text - color: #111 - float: right - margin-right: 1em - line-height: 2 +.hero-avatar, .party-member-avatar + display: table-cell -@media (max-width: 600px) { - .main-avatar-wrap { - border-right: 1px solid grey; - padding-right: 20px - } - .party-avatar-wrap { - float: left; - } - .progress-bars { - clear: both - } -} +@media (min-width: 37.5em) + .site-header + width: 80% +@media (min-width: 60em) + .site-header + width: 60% -$worse = rgb(244, 204, 204) -$neutral = rgb(255, 242, 204) - -.progress-bars +.hero-avatar, .party-member-avatar padding: 0 margin: 0 - .progress + vertical-align: top + +.hero-avatar + width: 90px + +.party-member-avatar + width: 90px + + +/* progress bars +-------------------- */ +.hero-stats + padding: 0 0.5em + display: table-cell + vertical-align: middle + + .meter, .bar + box-shadow: none border-radius: 0 + + .meter + position: relative background: white opacity: 1 outline: 1px solid rgba(0,0,0,0.2) outline-offset: -1px - overflow: hidden - box-shadow: none - margin-bottom: 1em + overflow: visible // firefox outline fix + margin-bottom: 1.5em + height: 2em + .bar - background-image: none + background: none border: 1px solid rgba(0,0,0,0.2) - border: 0 - box-shadow: none + height: 100% - .progress-danger .bar + + .health .bar background-color: darken($worse, 38%) - - .progress-warning .bar + .experience .bar background-color: darken($neutral, 30%) - -/* hero box --------------------- */ -.hero-box - display: table - margin: 0 auto - -.hero-box > [class^="hero-"] - display: table-cell - vertical-align: top - -@media (min-width: 37.5em) - .hero-box - width: 70% -@media (min-width: 60em) - .hero-box - width: 70% - -.main-avatar-wrap, .party-avatar-wrap - display: inline-block - padding: 0 - margin: 0 - -.main-avatar-wrap - width: 105px - -.party-avatar-wrap - -.hero-progress - padding: 0 - margin: 0 - -.hero-party-member - width: 105px \ No newline at end of file + .meter-text + position: absolute + top: 0 + right: 1em + z-index: 1 + color: #111 + line-height: 2 \ No newline at end of file diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl index 1d40d39f45..0ac6d138ab 100644 --- a/styles/app/tasks.styl +++ b/styles/app/tasks.styl @@ -2,14 +2,7 @@ // ======================== // color variables -$worst = rgb(230, 184, 175) -$worse = rgb(244, 204, 204) -$bad = rgb(252, 229, 205) -$neutral = rgb(255, 242, 204) -$good = rgb(217, 234, 211) -$better = rgb(208, 224, 227) -$best = rgb(201, 218, 248) -$completed = rgb(217, 217, 217) +@import "./color-vars.styl"; // array of keywords and their associated color vars $stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $good) (better $better) (best $best) diff --git a/views/app/header.html b/views/app/header.html index 3a177b94eb..396542bae0 100644 --- a/views/app/header.html +++ b/views/app/header.html @@ -1,34 +1,35 @@ {#unless equal(_user.preferences.hideHeader,true)} -
+ +