start re-marking up avatars in prep for charbox module. WILL DO A FEATURE BRANCH, PROMISE

styles/app/avatar.styl

@@ -13,11 +13,49 @@
         bottom: 0px
         right: 10px
 
+.character-sprites span
+    position: absolute
+
+
+// styling the "char-box"
+.char-box
+    margin: 0
+    border: 1px solid darkgrey;
+    background: #fafafa;
+    width: 107px;
+    
+    // .avatar
+
+.char-level, .char-name
+    margin-top: 6px;
+    border-top: 1px solid darkgrey;
+    text-align: center
+    line-height: 2
+    font-size: 12px
+
+    
+
 // main and party avatars
 .main-avatar, .party-avatar
   .character-sprites
     top: -15px
 
+.main-avatar-wrap
+  margin: 0 5px 0 0
+  float: left
+  
+.party-avatar-wrap
+  margin: 0
+  float: right
 
-.character-sprites span
-    position: absolute
+
+// customization avatars
+.customization-avatar-wrap
+    float: right
+
+@media (max-width: 480px) {
+  .customization-avatar-wrap {
+    float: none;
+    margin-bottom: 1em;
+  }
+}

styles/app/customizer.styl

@@ -1,18 +1,5 @@
 // $customizations-modal layout
 
-.avatar-window
-  margin: 0
-  border: 1px solid darkgrey;
-  width: 107px;
-  float: right;
-
-  .char-name
-    margin-top: 6px;
-    border-top: 1px solid darkgrey;
-    text-align: center
-    line-height: 2
-    
-
 menu
   padding: 0;
   margin: 0;
@@ -49,13 +36,7 @@ menu
 .customize-option:not(:last-of-type)
   margin-right: 10px
   
-
 @media (max-width: 480px) {
-  .avatar-window {
-    float: none;
-    margin-bottom: 1em
-  }
-
   .customize-menu {
     width: 100%;
   }

views/app/index.html

@@ -4,6 +4,7 @@ do a find for the string after "→"
 -----------------------------------
 → $modal-template
 → $customizations-modal
+→ $avatar
 → $avatar-template
 =================================== -->
 
@@ -139,7 +140,7 @@ do a find for the string after "→"
     {#with _user.preferences}
       
       <!-- user avatar preview -->
-      <figure class="avatar-window">
+      <figure class="customization-avatar-wrap char-box">
           <app:avatar profile={_user} minimal="true" />
           <figcaption class="char-name">{username(_user.auth)}</figcaption>
       </figure>
@@ -257,7 +258,7 @@ do a find for the string after "→"
     <div class="row-fluid">
       <div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
         
-        <!-- avatar -->
+        <!-- $avatar -->
         <figure class="main-avatar-wrap">
           <app:avatar profile={_user} main="true" />
         </figure>