Adjust look of page blurbs

website/public/css/options.styl

@@ -3,27 +3,33 @@
   @media screen and (min-width:768px)
     border: 1px solid darken($color-options-menu, 12%)
     padding-bottom: 1.618em
-.options-menu, .options-submenu, .options-blurbmenu
+.options-menu, .options-submenu
   @extend $hrpg-submenu
   border-bottom: 1px solid darken($color-options-menu, 12%)
 .options-menu
   @media screen and (min-width:768px)
     background-color: $color-options-menu
+
   li
     @extend $hrpg-button
     hrpg-button-color-mixin($color-options-menu)  
+
 .options-submenu
   margin-top: -1.618em
   background-color: $color-options-submenu
+
   li
     @extend $hrpg-button
     hrpg-button-color-mixin($color-options-submenu)
+
 .options-blurbmenu
-  margin-top: -1.618em
-  background-color: $color-options-blurb
+  margin: -1.618em 0 1.618em
+  border-bottom: 1px solid darken($color-options-menu, 12%)
+  padding: .5em
+
   @media screen and (max-width:768px)
     padding: 1em 0.618em 0 0.618em
     border: 1px solid darken($color-options-menu, 12%)
     border-top: none
     
-  
+  

website/views/options/social/challenges.jade

@@ -65,8 +65,8 @@ script(type='text/ng-template', id='partials/options.social.challenges.detail.ht
           div(ui-view)
 
 script(type='text/ng-template', id='partials/options.social.challenges.html')
- ul.options-blurbmenu
-   li=env.t('blurbChallenges')
+  .options-blurbmenu
+    small.muted=env.t('blurbChallenges')
 
   .container-fluid
     .row

website/views/options/social/hall.jade

@@ -6,9 +6,10 @@ script(type='text/ng-template', id='partials/options.social.hall.html')
     li(ng-class="{ active: $state.includes('options.social.hall.patrons') }")
       a(ui-sref='options.social.hall.patrons')
         =env.t('hallPatrons')
-    ul.options-blurbmenu
-      li(ng-if="$state.includes('options.social.hall.heroes')")!=env.t('blurbHallHeroes')
-      li(ng-if="$state.includes('options.social.hall.patrons')")=env.t('blurbHallPatrons')
+
+  .options-blurbmenu
+    small.muted(ng-if="$state.includes('options.social.hall.heroes')")!=env.t('blurbHallHeroes')
+    small.muted(ng-if="$state.includes('options.social.hall.patrons')")=env.t('blurbHallPatrons')
 
   .tab-content
     .tab-pane.active

website/views/options/social/index.jade

@@ -7,8 +7,8 @@ include ./quests/index
 include ./chat-message
 
 script(type='text/ng-template', id='partials/options.social.inbox.html')
- ul.options-blurbmenu    
-   li=env.t('blurbInbox')
+  .options-blurbmenu
+    small.muted=env.t('blurbInbox')
 
   .container-fluid
     .row
@@ -44,8 +44,8 @@ script(type='text/ng-template', id='partials/options.social.party.html')
       include ./create-group
 
 script(type='text/ng-template', id='partials/options.social.guilds.public.html')
- ul.options-blurbmenu    
-   li=env.t('blurbGuildsPage')
+  .options-blurbmenu
+    small.muted=env.t('blurbGuildsPage')
 
   div.col-xs-12(ng-repeat='invitation in user.invitations.guilds' style='margin-bottom: 1.5em')
     h3=env.t('invitedTo', {name: '{{invitation.name}}'})