Refactor admin CSS

Should make it scale better.

app/assets/stylesheets/admin/admin.sass

@@ -8,8 +8,8 @@ body
   background-color: #999
   color: #333
   font-family: "Helvetica Neue", "Arial", sans-serif
-  font-size: 14px
+  font-size: 16px
-  line-height: 18px
+  line-height: 1.3
   margin: 0
   padding: 0
 
@@ -17,7 +17,7 @@ body
   background: #fafafa
   padding: 1em 2em 3em
   border-bottom: 1px solid #666
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3)
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3)
 
 #login
   width: 40em
@@ -38,12 +38,11 @@ header
     font-size: 2em
     margin-bottom: 0em
     a
-      width: 263px
-      height: 24px
       display: inline-block
       padding: 1em 1em
-      text-indent: -1000em
+      line-height: 0
-      background: asset-url('admin/logo.svg') 1em 0.75em no-repeat
+      img
+        height: 3rem
       &:hover
         background-color: inherit
 
@@ -84,7 +83,7 @@ table
   border: 1px solid #bbb
   border-spacing: 0
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2)
-  border-radius: 5px
+  border-radius: 0.25rem
   td, th
     border-bottom: 1px solid #bbb
   tr:nth-child(even) td
@@ -105,28 +104,28 @@ table
   margin: 0.5em 0
 
 #error_explanation
-  width: 450px
+  width: 32rem
   border: 2px solid red
-  padding: 7px
+  padding: 0.5rem
   padding-bottom: 0
-  margin-bottom: 20px
+  margin-bottom: 1.5rem
   background-color: #f0f0f0
   h2
     text-align: left
     font-weight: bold
-    padding: 5px 5px 5px 15px
+    padding: 0.5rem 0.5rem 0.5rem 1rem
-    font-size: 12px
+    font-size: 0.85rem
-    margin: -7px
+    margin: -0.5rem
-    margin-bottom: 0px
+    margin-bottom: 0
     background-color: #c00
     color: #fff
   ul li
-    font-size: 12px
+    font-size: 0.85rem
     list-style: square
 
 form ul.taxonomies
   border: 1px solid #ccc
-  border-radius: 3px
+  border-radius: 0.35rem
   box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1)
   margin-top: 1em
   padding: 1em

app/assets/stylesheets/admin/menu.sass

@@ -12,7 +12,7 @@ header
       margin: 0 0 1em
       padding: 0 1em
       list-style: none
-      height: 35px
+      height: 2.5em
       position: relative
       z-index: 100
       li a
@@ -22,9 +22,9 @@ header
         color: #444
         text-decoration: none
         display: block
-        height: 21px
+        height: 1.5em
         float: left
-        padding: 7px 1em 7px
+        padding: 0.5em 1em
         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
         @include transition(background 0.15s 0s ease)
         &:hover, &:focus

app/assets/stylesheets/admin/photos.sass

@@ -11,7 +11,7 @@
 ul.categories
   list-style: none
   border: 1px solid #ccc
-  border-radius: 3px
+  border-radius: 0.25rem
   box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1)
   margin-top: 1em
   padding: 1em

app/assets/stylesheets/admin/simple_form.sass

@@ -21,7 +21,8 @@ form.simple_form
     label
       display: block
       float: left
-      line-height: 1.8
+      padding: 0.5em 0
+      font-weight: bold
       width: 13em
   input
     @include placeholder
@@ -31,11 +32,11 @@ form.simple_form
   input, textarea
     font-family: "Helvetica Neue", "Arial", sans-serif
     font-size: 1em
-    margin: 0 5px 0 0
+    margin: 0 0.5rem 0 0
     border-width: 1px
     border-style: solid
     border-color: #999 #DDD #DDD #999
-    padding: 0.3em
+    padding: 0.5em
     border-radius: 2px
     box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1)
     &:focus

app/views/admin/shared/_header.html.haml

@@ -1,3 +1,3 @@
-%h1= link_to APP_CONFIG['name'], admin_dashboard_path
+%h1= link_to image_tag(asset_url('admin/logo.svg'), alt: APP_CONFIG['name']), admin_dashboard_path
 = render 'admin/shared/user'
 = render 'admin/shared/menu'

app/views/admin/shared/_login_header.html.haml

@@ -1 +1 @@
-%h1= link_to APP_CONFIG['name'], admin_dashboard_path
+%h1= link_to image_tag(asset_url('admin/logo.svg'), alt: APP_CONFIG['name']), admin_dashboard_path