on Refactoring...

browser/styles/main/containers/PlanetContainer.styl

@@ -1,6 +1,8 @@
+navigationWidth= 200px
+articleListWidth= 275px
+
 .PlanetContainer
-  absolute top bottom right
-  left 55px
+  absolute top bottom right left
   .tags
     white-space: nowrap;
     overflow-x: auto;
@@ -8,6 +10,7 @@
       margin 0 2px
       text-decoration underline
       cursor pointer
+      font-size 0.9em
       &.noTag
         color inactiveTextColor
         font-size 0.8em
@@ -26,7 +29,7 @@
     absolute top left bottom
     overflow hidden
     display inline-block
-    width 200px
+    width navigationWidth
     .userName
       position absolute
       left 15px
@@ -67,7 +70,7 @@
   .headerControl
     noSelect()
     absolute top bottom right
-    left 200px
+    left navigationWidth
     .searchInput
       display block
       position absolute
@@ -81,32 +84,36 @@
         top 8px
         left 12px
         color inactiveTextColor
-    .refreshButton, .settingButton
+    .refreshButton
       display block
       position absolute
       top 12px
-      font-size em
-      btnDefault()
-      box-sizing border-box
-      circle()
+      right 55px
       width 28px
       height 28px
+      btnDefault()
+      circle()
       text-align center
       cursor pointer
       transition 0.1s
       &:focus, &.focus
         outline none
-    .refreshButton
-      right 45px
-    .settingButton
+    .logo
+      display block
+      position absolute
+      top 4px
       right 10px
-
+      cursor pointer
+      transition 0.1s
+      opacity 0.9
+      &:hover, &.hover
+        opacity 1
 
 .PlanetNavigator
   absolute bottom left
   noSelect()
   top 55px
-  width 200px
+  width navigationWidth
   border-right solid 1px highlightenBorderColor
   padding 10px
   box-sizing border-box
@@ -127,44 +134,12 @@
       transition 0.1s
       btnDefault()
       border none
-  .usersLabel
-    margin-top 35px
-    margin-bottom 5px
-  .users
-    li
-      width 44px
-      height 44px
-      float left
-      margin 3px
-      line-height 44px
-      .userPhoto
-        circle()
-        width 44px
-        height 44px
-        box-shadow 1px 1px 4px 0px #C5C5C5
-      .userTooltip
-        position absolute
-        z-index 500
-        background-color transparentify(invBackgroundColor, 80%)
-        color invTextColor
-        padding 10px
-        line-height 1em
-        border-radius 5px
-        margin-top -15px
-        opacity 0
-        transition 0.1s
-        pointer-events none
-      &:hover .userTooltip
-        opacity 1
-      &.addUserButton
-        circle()
-
 
 .PlanetArticleList
   absolute bottom right
-  left 200px
+  left navigationWidth
   top 55px
-  width 250px
+  width articleListWidth
   border-right solid 1px highlightenBorderColor
 
   &>ul
@@ -177,22 +152,28 @@
         padding 10px
         cursor pointer
         transition 0.1s
-        .itemHeader
-          clearfix()
-          margin-bottom 15px
-        .callSign, .title
+        clearfix()
+        .itemLeft
           float left
-          font-weight 600
-          font-size 1.1em
-          line-height 140%
-        .updatedAt
-          float right
-          line-height 16px
-          color lighten(textColor, 25%)
-          font-size 0.8em
-        .description
-          line-height 120%
-          margin-bottom 15px
+          width 25px
+          text-align center
+          .profileImage
+            margin-bottom 5px
+          .fa
+            line-height 25px
+        .itemRight
+          float left
+          width 225px
+          overflow-x hidden
+          padding-left 10px
+          .updatedAt
+            margin-bottom 10px
+            color lighten(textColor, 25%)
+            font-size 0.7em
+          .description
+            line-height 120%
+            margin-bottom 15px
+            font-size 1em
         &:hover, &.hover
           background-color hoverBackgroundColor
           &:active, &.active
@@ -205,7 +186,7 @@
 .PlanetArticleDetail
   absolute right bottom
   top 55px
-  left 450px
+  left navigationWidth + articleListWidth
   &>.viewer-header
     height 44px
     line-height 44px
@@ -223,7 +204,7 @@
     absolute bottom right
     left 1px
     top 44px
-  &.snippetDetail>.viewer-body
+  &.codeDetail>.viewer-body
     .viewer-detail
       border-bottom solid 1px borderColor
       height 150px
@@ -243,7 +224,7 @@
         absolute left right
         top 155px
         bottom 5px
-  &.blueprintDetail>.viewer-body
+  &.noteDetail>.viewer-body
     .tags
       absolute top
       left 15px