Redesign

.meteor/packages

@@ -4,7 +4,6 @@
 # but you can also edit it by hand.
 
 standard-app-packages
-bootstrap-3
 jquery
 iron-router
 less
@@ -14,3 +13,4 @@ accounts-entry
 insecure
 fast-render
 iron-router-progress
+bootstrap3-less

client/lib/bootstrap.less

@@ -0,0 +1,52 @@
+@import "/client/lib/variables.import.less";
+// because of the order less handles it's imports this variable needs to be redefined
+@bootstrap3-less-root: "/packages/bootstrap3-less";
+
+// Import Bootstrap
+// ---------------------------------------
+// (This is the full set of package files, include only what you need)
+
+// Reset
+@import "@{bootstrap3-less-root}/lib/less/normalize.import.less";
+@import "@{bootstrap3-less-root}/lib/less/print.import.less";
+
+// Core CSS
+@import "@{bootstrap3-less-root}/lib/less/scaffolding.import.less";
+@import "@{bootstrap3-less-root}/lib/less/type.import.less";
+@import "@{bootstrap3-less-root}/lib/less/code.import.less";
+@import "@{bootstrap3-less-root}/lib/less/grid.import.less";
+@import "@{bootstrap3-less-root}/lib/less/tables.import.less";
+@import "@{bootstrap3-less-root}/lib/less/forms.import.less";
+@import "@{bootstrap3-less-root}/lib/less/buttons.import.less";
+
+// Components
+@import "@{bootstrap3-less-root}/lib/less/component-animations.import.less";
+@import "@{bootstrap3-less-root}/lib/less/dropdowns.import.less";
+@import "@{bootstrap3-less-root}/lib/less/button-groups.import.less";
+@import "@{bootstrap3-less-root}/lib/less/input-groups.import.less";
+@import "@{bootstrap3-less-root}/lib/less/navs.import.less";
+@import "@{bootstrap3-less-root}/lib/less/navbar.import.less";
+@import "@{bootstrap3-less-root}/lib/less/breadcrumbs.import.less";
+@import "@{bootstrap3-less-root}/lib/less/pagination.import.less";
+@import "@{bootstrap3-less-root}/lib/less/pager.import.less";
+@import "@{bootstrap3-less-root}/lib/less/labels.import.less";
+@import "@{bootstrap3-less-root}/lib/less/badges.import.less";
+@import "@{bootstrap3-less-root}/lib/less/jumbotron.import.less";
+@import "@{bootstrap3-less-root}/lib/less/thumbnails.import.less";
+@import "@{bootstrap3-less-root}/lib/less/alerts.import.less";
+@import "@{bootstrap3-less-root}/lib/less/progress-bars.import.less";
+@import "@{bootstrap3-less-root}/lib/less/media.import.less";
+@import "@{bootstrap3-less-root}/lib/less/list-group.import.less";
+@import "@{bootstrap3-less-root}/lib/less/panels.import.less";
+@import "@{bootstrap3-less-root}/lib/less/wells.import.less";
+@import "@{bootstrap3-less-root}/lib/less/close.import.less";
+
+// Components w/ JavaScript
+@import "@{bootstrap3-less-root}/lib/less/modals.import.less";
+@import "@{bootstrap3-less-root}/lib/less/tooltip.import.less";
+@import "@{bootstrap3-less-root}/lib/less/popovers.import.less";
+@import "@{bootstrap3-less-root}/lib/less/carousel.import.less";
+
+// Utility classes
+@import "@{bootstrap3-less-root}/lib/less/utilities.import.less";
+@import "@{bootstrap3-less-root}/lib/less/responsive-utilities.import.less";

client/lib/style.less

@@ -3,7 +3,7 @@ html, body, .container, .main {
   min-height: 100%;
 }
 html {
-  font-size: 14px;
+  font-size: 15px;
 }
 
 body {

client/lib/variables.import.less

@@ -0,0 +1,34 @@
+// defines where the package is
+@bootstrap3-less-root: "/packages/bootstrap3-less";
+
+// Import Bootstrap Config Defaults
+// ---------------------------------------
+// (you need these first, to get the default setup for bootstrap)
+
+
+@import "@{bootstrap3-less-root}/lib/less/variables.import.less";
+@import "@{bootstrap3-less-root}/lib/less/mixins.import.less";
+
+// Application Overrides (config)
+// ---------------------------------------
+// (Here you can override any variables defined in the default set above)
+
+/* ===============================
+    LESS VARIABLES
+   =============================== */
+
+// RESPONSIVE
+@xs: ~"(max-width: 767px)";
+@sm: ~"(min-width: 768px)";
+@md: ~"(min-width: 992px)";
+@lg: ~"(min-width: 1200px)";
+
+@upvote-color:   #4E86FE;
+@downvote-color: #FE8067;
+@success-color:  #93CB2A;
+@gray-color:     #B8C2CC;
+
+@upvote-bright:   #296DFE;
+@downvote-bright: #FE5635;
+@success-bright:  #8DCC16;
+@gray-bright:    #A1AAB2;

client/views/header/header.html

@@ -9,32 +9,29 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="/">F<span class="hidden-xs">raction</span></a>
-          <div class="current-view">{{currentView}}</div>
+          <a class="logo" href="/"><img src="/img/logo.svg" alt="Fraction Logo"></a>
+          <ol class="breadcrumb">
+            <li><a href="/">Fraction</a></li>
+            <li class="current-view">{{currentView}}</li>
+          </ol>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
           <ul class="nav navbar-nav navbar-right">
               {{#if currentUser}}
-                <li><a href="/new-post">Post</a></li>
                 {{#if isFeed}}
+                  <li class="highlight"><a href="/new-post">New Post</a></li>
                   <li class="dropdown">
-                    <a href="/" class="dropdown-toggle" data-toggle="dropdown">Sort<b class="caret"></b></a>
+                    <a href="/" class="dropdown-toggle" data-toggle="dropdown">{{sortType}}<b class="caret"></b></a>
                     <ul class="dropdown-menu" role="menu">
-                      {{#if sortPopular}}
-                        <li class="active"><a href="/">Popular</a></li>
-                      {{else}}
+                      {{#unless sortPopular}}
                         <li><a href="/">Popular</a></li>
-                      {{/if}}
-                      {{#if sortRecent}}
-                        <li class="active"><a href="/recent">Recent</a></li>
-                      {{else}}
+                      {{/unless}}
+                      {{#unless sortRecent}}
                         <li><a href="/recent">Recent</a></li>
-                      {{/if}}
-                      {{#if sortRandom}}
-                        <li class="active"><a href="/random">Random</a></li>
-                      {{else}}
+                      {{/unless}}
+                      {{#unless sortRandom}}
                         <li><a href="/random">Random</a></li>
-                      {{/if}}
+                      {{/unless}}
                     </ul>
                   </li>
                 {{/if}}
@@ -47,7 +44,7 @@
                   </li>
                   {{else}}
                   <li><a href="/sign-in">Sign In</a></li>
-                  <li><a href="/sign-in">Sign Up</a></li>
+                  <li class="highlight"><a href="/sign-in">Sign Up</a></li>
               {{/if}}
           </ul>
         </div>

client/views/header/header.less

@@ -1,44 +1,67 @@
-.header {
+@import "/client/lib/variables.import.less";
 
+.header {
   nav {
     border-radius: 0;
-    background-color: #303540;
     margin-bottom: 0;
   }
 
-  .navbar-brand {
-    color: #F9FAFB;
-    font-weight: bold;
+  .logo img {
+    margin-top: 11px;
+    margin-bottom: 11px;
+    @media @xs {
+      margin-left: 15px;
+    }
+    height: 26px;
   }
 
   .navbar > ul > li > a {
     color: #F9FAFB;
   }
 
-  .navbar-toggle {
-    background-color: #303540;
-    border: 0;
-    &:hover, &:active, &:focus {
-      background-color: #303540;
+  .navbar-inverse .navbar-nav > li > a {
+    color: hsla(0, 0%, 100%, 0.9);
+    &:hover {
+      color: white;
+    }
+  }
+
+  ul > li.highlight > a {
+    padding-top: 5px;
+    margin-top: 10px;
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+    border-radius: 2px;
+    margin-left: 5px;
+    margin-right: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: #93CB2A;
+    &:hover, &:active {
+      background-color: #8DCC16;
+    }
+  }
+
+  .breadcrumb {
+    margin-top: 0.25rem;
+    display: inline-block;
+    background: none;
+    padding-left: .25rem;
+    margin-bottom: 0;
+    a {
+      color: white;
     }
   }
 
   // todo: remove magic numbers
   .current-view {
-    position: absolute;
-    height: 50px;
-    width: 200px;
-    margin-left: -100px;
-    top: 1rem;
-    font-size: 1.2rem;
-    left: 50%;
-    color: #DDE0E6;
-    text-align: center;
-    overflow: hidden;
+    color: white;
   }
 
   .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
     color: hsl(0, 100%, 100%);
-    background-color: hsl(220, 15%, 16%);
+    background-color: #373737;
   }
+
+
 }

client/views/post/post.less

@@ -1,32 +1,36 @@
+@import "/client/lib/variables.import.less";
+
 .post {
-  padding: 22.5px;
+  padding: 15px;
   background-color: white;
   margin-bottom: 1px;
   border-left: 3px solid #F9FAFB;
 
   &.upvoted {
-    border-color: #4E86FE;
+    border-color: @upvote-color;
     .upvote {
-      color: #4E86FE;
+      color: @upvote-color;
     }
   }
 
   &.downvoted {
-    border-color: #FC6748;
+    border-color: @downvote-color;
     .downvote {
-      color: #FC6748;
+      color: @downvote-color;
     }
   }
 
   .title {
     display: inline-block;
-    margin-top: 3px;
-    font-size: 1.5rem;
+    margin-top: 0.5rem;
+    font-size: 1.25rem;
+    line-height: 1.3rem;
     color: #303540;
   }
 
   .caption {
-    margin-top: 3px;
-    color: #DDE0E6;
+    font-size: 1rem;
+    color: @gray-color;
+    margin-bottom: 0;
   }
 }

client/views/vote/vote.less

@@ -1,24 +1,23 @@
+@import "/client/lib/variables.import.less";
+
 .vote {
-  margin-left: -8px;
+  margin-left: -0.5rem;
 
   .upvote, .downvote {
     display: block;
-    padding: 8px;
-    color: #DDE0E6;
-    &:hover {
-      color: #DDE0E6;
-    }
+    padding: 0.5rem;
+    color: @gray-color;
   }
 
   .upvote {
     &.active, &:active, &:hover {
-      color: #4E86FE;
+      color: @upvote-bright;
     }
   }
 
   .downvote {
     &.active, &:active, &:hover {
-      color: #FC6748;
+      color: @downvote-bright;
     }
   }
 }

packages/.gitignore

@@ -5,3 +5,4 @@
 /accounts-t9n
 /fast-render
 /iron-router-progress
+/bootstrap3-less

shared/router.js

@@ -101,7 +101,7 @@ Router.map(function () {
     template: 'user',
     data: function () {
       var templateData = {
-        currentView: 'Profile',
+        currentView: 'User',
         username: this.params.username,
         posts: Posts.find({username : this.params.username})
       };

smart.json

@@ -1,9 +1,9 @@
 {
   "packages": {
-    "bootstrap-3": {},
     "iron-router": {},
     "accounts-entry": {},
     "fast-render": {},
-    "iron-router-progress": {}
+    "iron-router-progress": {},
+    "bootstrap3-less": {}
   }
 }