From 5f309d39b097a413ccaf104bffc24b3bb7a8caaa Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Tue, 12 Feb 2013 12:48:46 +0000 Subject: [PATCH] Move mobile styling to Julep. --- public/images/loader.gif | Bin 7825 -> 0 bytes public/javascripts/templates/footer.html | 7 +- public/stylesheets/_iconfont.scss | 6 +- public/stylesheets/julep | 1 + public/stylesheets/main.css | 320 ++++++++++++----------- public/stylesheets/main.scss | 92 +------ 6 files changed, 189 insertions(+), 237 deletions(-) delete mode 100644 public/images/loader.gif create mode 160000 public/stylesheets/julep diff --git a/public/images/loader.gif b/public/images/loader.gif deleted file mode 100644 index fd1a189c21fed1c7ba00c4bb4fad407bd6d1e5f9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7825 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 LHfkt@K(PD|Q{O_Y diff --git a/public/javascripts/templates/footer.html b/public/javascripts/templates/footer.html index 984f96c..63098a4 100644 --- a/public/javascripts/templates/footer.html +++ b/public/javascripts/templates/footer.html @@ -1,9 +1,6 @@ diff --git a/public/stylesheets/_iconfont.scss b/public/stylesheets/_iconfont.scss index 978fea9..9078264 100644 --- a/public/stylesheets/_iconfont.scss +++ b/public/stylesheets/_iconfont.scss @@ -2,9 +2,9 @@ font-family: 'fontawesome'; src:url('../fonts/fontawesome.eot'); src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'), - url('../fonts/fontawesome.svg#fontawesome') format('svg'), - url('../fonts/fontawesome.woff') format('woff'), - url('../fonts/fontawesome.ttf') format('truetype'); + url('../fonts/fontawesome.svg#fontawesome') format('svg'), + url('../fonts/fontawesome.woff') format('woff'), + url('../fonts/fontawesome.ttf') format('truetype'); font-weight: normal; font-style: normal; } diff --git a/public/stylesheets/julep b/public/stylesheets/julep new file mode 160000 index 0000000..e6d7874 --- /dev/null +++ b/public/stylesheets/julep @@ -0,0 +1 @@ +Subproject commit e6d78746a1356f47f198f7cf3f0594f3b44497ff diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css index 560cd21..eba895c 100644 --- a/public/stylesheets/main.css +++ b/public/stylesheets/main.css @@ -1,3 +1,129 @@ +* { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +body { + margin: 0; + font-family: "Helvetica Neue", "Arial", sans-serif; } + +#loader { + position: fixed; + top: 45%; + left: 50%; + width: 52px; + height: 52px; + margin: -26px 0 0 -26px; + background: black url(julep/images/loader.gif) center center no-repeat; + background-size: 36px; + border-radius: 26px; + opacity: 0.7; + display: none; } + +.header, header { + position: fixed; + width: 100%; + -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); + color: white; + height: 2.5em; + padding-top: 0.45em; } + .header h1, header h1 { + text-align: center; + font-size: 1.3em; + font-weight: normal; + text-shadow: 0 0 5px rgba(0, 0, 0, 0.4); } + +.tabbar, footer { + position: fixed; + bottom: 0; + width: 100%; + background: #111; + text-align: center; + height: 3.5em; + padding: 0.15em 0.2em; + border-top: 1px solid #222222; + background-color: #444444; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #333333)); + background-image: -webkit-linear-gradient(top, #444444, #333333); + background-image: -moz-linear-gradient(top, #444444, #333333); + background-image: -ms-linear-gradient(top, #444444, #333333); + background-image: -o-linear-gradient(top, #444444, #333333); + background-image: linear-gradient(top, #444444, #333333); + -webkit-box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); + box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); } + .tabbar ul, footer ul { + list-style: none; } + .tabbar li, footer li { + float: left; + padding: 0.1em; + height: 100%; } + .tabbar li:first-child a, footer li:first-child a { + margin-left: 0; } + .tabbar li a, footer li a { + border-radius: 0.3em; + font-size: 0.7em; + height: 100%; + padding: 0.5em 0.4em 0.3em; + color: rgba(255, 255, 255, 0.6); + display: block; + position: relative; + top: -0.1em; } + .tabbar li a.selected, footer li a.selected { + top: 0; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); + border: 1px solid black; + color: white; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 255, 255, 0.3); + background-color: #222222; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100%, #333333)); + background-image: -webkit-linear-gradient(top, #222222, #333333); + background-image: -moz-linear-gradient(top, #222222, #333333); + background-image: -ms-linear-gradient(top, #222222, #333333); + background-image: -o-linear-gradient(top, #222222, #333333); + background-image: linear-gradient(top, #222222, #333333); + -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); + box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); } + .tabbar li a:before, footer li a:before { + display: block; + font-size: 1.7em; + margin: 0.1em 0 0.2em; } + +.list, ul#line-list { + list-style: none; + padding: 0; } + .list li a, ul#line-list li a { + background: #ffffff; + /* Old browsers */ + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f1f1f1)); + background-image: -webkit-linear-gradient(top, white, #f1f1f1); + background-image: -moz-linear-gradient(top, white, #f1f1f1); + background-image: -ms-linear-gradient(top, white, #f1f1f1); + background-image: -o-linear-gradient(top, white, #f1f1f1); + background-image: linear-gradient(top, white, #f1f1f1); + text-shadow: 0 2px 2px white; + border-style: solid; + border-width: 1px 0; + border-color: white white #cccccc; + display: block; + padding: 0.7em 1em; + text-decoration: none; } + +.button, #refresh { + border-radius: 0.3em; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); + padding: 0.3em 0.7em 0.4em; + color: white; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } + .button:active, #refresh:active { + padding: 0.4em 0.7em 0.3em; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); } + @font-face { font-family: 'fontawesome'; src: url("../fonts/fontawesome.eot"); @@ -37,169 +163,69 @@ you can use the generic selector below, but it's slower: .icon-glass:before { content: "\e002"; } -* { - margin: 0; - padding: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - -#loader { - position: fixed; - top: 45%; - left: 50%; - width: 52px; - height: 52px; - margin: -26px 0 0 -26px; - background: black url(../images/loader.gif) center center no-repeat; - border-radius: 26px; - opacity: 0.7; - display: none; } - -.header, header { - position: fixed; - width: 100%; - -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); - color: white; - height: 2.5em; - padding-top: 0.45em; } - .header h1, header h1 { - text-align: center; - font-size: 1.3em; - font-weight: normal; - text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } - a { text-decoration: none; } -body { - margin: 0; - font-family: "Helvetica Neue", "Arial", sans-serif; } - header { background: #0019a8; - border-bottom: 1px solid #000e5b; - background-color: #758aff; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #758aff), color-stop(100%, #00158e)); - background-image: -webkit-linear-gradient(top, #758aff, #00158e); - background-image: -moz-linear-gradient(top, #758aff, #00158e); - background-image: -ms-linear-gradient(top, #758aff, #00158e); - background-image: -o-linear-gradient(top, #758aff, #00158e); - background-image: linear-gradient(top, #758aff, #00158e); } + background-color: #425eff; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #425eff), color-stop(100%, #00158e)); + background-image: -webkit-linear-gradient(top, #425eff, #00158e); + background-image: -moz-linear-gradient(top, #425eff, #00158e); + background-image: -ms-linear-gradient(top, #425eff, #00158e); + background-image: -o-linear-gradient(top, #425eff, #00158e); + background-image: linear-gradient(top, #425eff, #00158e); } #refresh { position: absolute; right: 1em; - top: 0.25em; - border-radius: 0.3em; - border: 1px solid rgba(0, 0, 0, 0.4); - background: rgba(255, 255, 255, 0.1); - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); - padding: 0.3em 0.7em 0.4em; - color: white; + top: 0.3em; font-family: "fontawesome"; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } + border-style: solid; + border-width: 1px; + border-color: #1836dc #112597 #091452; + background: #3e57ea; + background-color: #6c7fef; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6c7fef), color-stop(100%, #1836dc)); + background-image: -webkit-linear-gradient(top, #6c7fef, #1836dc); + background-image: -moz-linear-gradient(top, #6c7fef, #1836dc); + background-image: -ms-linear-gradient(top, #6c7fef, #1836dc); + background-image: -o-linear-gradient(top, #6c7fef, #1836dc); + background-image: linear-gradient(top, #6c7fef, #1836dc); } #refresh:hover, #refresh:focus { - background: rgba(255, 255, 255, 0.2); } + background-color: #8393f1; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8393f1), color-stop(100%, #2744e7)); + background-image: -webkit-linear-gradient(top, #8393f1, #2744e7); + background-image: -moz-linear-gradient(top, #8393f1, #2744e7); + background-image: -ms-linear-gradient(top, #8393f1, #2744e7); + background-image: -o-linear-gradient(top, #8393f1, #2744e7); + background-image: linear-gradient(top, #8393f1, #2744e7); } #refresh:active { - padding: 0.4em 0.7em 0.3em; - background-color: rgba(255, 255, 255, 0); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.15))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); } + background-color: #3e57ea; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e57ea), color-stop(100%, #1836dc)); + background-image: -webkit-linear-gradient(top, #3e57ea, #1836dc); + background-image: -moz-linear-gradient(top, #3e57ea, #1836dc); + background-image: -ms-linear-gradient(top, #3e57ea, #1836dc); + background-image: -o-linear-gradient(top, #3e57ea, #1836dc); + background-image: linear-gradient(top, #3e57ea, #1836dc); } -footer { - position: fixed; - bottom: 0; - width: 100%; - background: #111; - text-align: center; - height: 4em; - padding-top: 0.3em; - background-color: #333333; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #111111)); - background-image: -webkit-linear-gradient(top, #333333, #111111); - background-image: -moz-linear-gradient(top, #333333, #111111); - background-image: -ms-linear-gradient(top, #333333, #111111); - background-image: -o-linear-gradient(top, #333333, #111111); - background-image: linear-gradient(top, #333333, #111111); - -webkit-box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5); - box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5); } - footer li { - display: inline-block; - width: 49%; } - footer li:first-child a { - margin-left: 0; - border-radius: 0.3em 0 0 0.3em; } - footer li:last-child a { - border-radius: 0 0.3em 0.3em 0; } - footer li a { - font-size: 0.8em; - height: 4.2em; - padding: 0.4em; - color: rgba(255, 255, 255, 0.6); - display: block; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); - border: 1px solid black; - margin-left: -1px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); } - footer li a.selected { - color: white; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 255, 255, 0.3); - background-color: rgba(255, 255, 255, 0); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.15))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); } - footer li a:before { - display: block; - font-size: 1.5em; - margin: 0.1em 0 0.2em; } +footer li { + width: 50%; } .html5 section[role="main"] { - padding: 2.5em 0 4em; } + padding: 0; + padding-top: 2.5em; + padding-bottom: 3.5em; } -ul#line-list { - list-style: none; - padding: 0; } - ul#line-list li a { - background: #ffffff; - /* Old browsers */ - background-color: white; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f1f1f1)); - background-image: -webkit-linear-gradient(top, white, #f1f1f1); - background-image: -moz-linear-gradient(top, white, #f1f1f1); - background-image: -ms-linear-gradient(top, white, #f1f1f1); - background-image: -o-linear-gradient(top, white, #f1f1f1); - background-image: linear-gradient(top, white, #f1f1f1); - text-shadow: 0 2px 2px white; - border-style: solid; - border-width: 1px 0; - border-color: white white #cccccc; - display: block; - padding: 0.7em 1em; - text-decoration: none; } - ul#line-list li .messages { - padding: 1em 1.5em 0.5em; - font-size: 0.8em; - background: #222; - color: white; - -webkit-box-shadow: inset 0 2px 8px black; - box-shadow: inset 0 2px 8px black; } - ul#line-list li .messages p { - padding-bottom: 1em; } +ul#line-list li .messages { + padding: 1em 1.5em 0.5em; + font-size: 0.8em; + background: #222; + color: white; + -webkit-box-shadow: inset 0 2px 8px black; + box-shadow: inset 0 2px 8px black; } + ul#line-list li .messages p { + padding-bottom: 1em; } li .name { text-shadow: none; diff --git a/public/stylesheets/main.scss b/public/stylesheets/main.scss index 8e3588c..3eadab2 100644 --- a/public/stylesheets/main.scss +++ b/public/stylesheets/main.scss @@ -1,109 +1,37 @@ -@import "iconfont"; - $header-color: rgb(0, 25, 168); @import "bourbon/bourbon"; -@import "bourbon-mobile/bourbon-mobile"; +@import "julep/julep"; + +@import "iconfont"; + a { text-decoration: none; } -body { - margin: 0; - font-family: "Helvetica Neue", "Arial", sans-serif; -} header { - @include header(rgb(0, 25, 168)); + @include header($header-color); } #refresh { position: absolute; right: 1em; - top: 0.25em; - border-radius: 0.3em; - border: 1px solid rgba(0, 0, 0, 0.4); - background: rgba(255, 255, 255, 0.1); - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4)); - padding: 0.3em 0.7em 0.4em; - color: white; + top: 0.3em; font-family: "fontawesome"; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); - &:hover, &:focus { - background: rgba(255, 255, 255, 0.2); - } - &:active { - padding: 0.4em 0.7em 0.3em; - @include linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4)); - } + @include button(desaturate(lighten($header-color, 25%), 20%)); } footer { - position: fixed; - bottom: 0; - width: 100%; - background: #111; - text-align: center; - height: 4em; - padding-top: 0.3em; - @include linear-gradient(#333, #111); - @include box-shadow(0 -2px 3px rgba(0, 0, 0, 0.5)); - li { - display: inline-block; - width: 49%; - &:first-child a { - margin-left: 0; - border-radius: 0.3em 0 0 0.3em; - } - &:last-child a { - border-radius: 0 0.3em 0.3em 0; - } - a { - font-size: 0.8em; - height: 4.2em; - padding: 0.4em; - color: rgba(255, 255, 255, 0.6); - display: block; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); - border: 1px solid black; - margin-left: -1px; - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4)); - &.selected { - color: white; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 255, 255, 0.3); - @include linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)); - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4)); - } - &:before { - display: block; - font-size: 1.5em; - margin: 0.1em 0 0.2em; - } - } - } + @include tabbar(2); } .html5 section[role="main"] { - padding: 2.5em 0 4em; + @include content(header, tabbar); } ul#line-list { - list-style: none; - padding: 0; + @include list; li { - a { - background: #ffffff; /* Old browsers */ - @include linear-gradient(white, #f1f1f1); - text-shadow: 0 2px 2px white; - border: { - style: solid; - width: 1px 0; - color: #ffffff white #cccccc; - } - display: block; - padding: 0.7em 1em; - text-decoration: none; - } .messages { padding: 1em 1.5em 0.5em; font-size: 0.8em;