example code for scaling spritesheets

[wfpl-cms.git] / style.styl

diff --git a/style.styl b/style.styl
index 2a4ee1f..a758cd5 100644 (file)
--- a/style.styl
+++ b/style.styl
@@ -25,7 +25,6 @@ columns = wfpl_columns({
        name: 'centerer'
        margin: 15px
        width: centerer_width
-       position: relative
        child: {
                type: 'alternatives'
                full: {
@@ -90,10 +89,52 @@ content_bg = #fff
 content_fg = #000
 window_bg = #fff
 
+// sprites
+wfpl_spritesheets({
+       main: {
+               image: sha1['images/sprites.min.svg']
+               y_origin: 'bottom' // inkscape rulers are backwards
+               w: 200
+               h: 408
+               sprites: {
+                       ".icon": {
+                               y: 408
+                               w: 50
+                               h: 50
+                               gap: 1
+                               hover: 'right'
+                               column: 'three' 'four' 'five' 'six' 'seven'
+                       }
+                       ".top_button": {
+                               y: 153
+                               w: 25
+                               h: 25
+                               gap: 1
+                               row: '0' '1' '2' '3' '4'
+                               hover: 'down'
+                       }
+                       ".main_logo": {
+                               y: 101
+                               w: 200
+                               h: 50
+                               gap: 1
+                               hover: 'down'
+                       }
+               }
+       }
+})
+
+
 ////////////////////
 // } END SETTINGS //
 ////////////////////
 
+.icon
+       display: inline-block
+       width: 40%
+.top_button
+       display: inline-block
+       width: 30%
 
 
 // always show vertical scrollbar, so content doesn't shift around when
@@ -244,23 +285,22 @@ ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths'
 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain'])
 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])
 
+body > .centerer
+       position: relative
+
 header#site_header
        margin-bottom: 15px
 
 body > .centerer > .nav
+       margin-bottom: 15px
        ul
                li_reset()
                space_evenly(line_height)
 
-footer
+footer#site_footer
        clear: both
        padding-top: 40px
-       ul
-               li_reset()
-               li
-                       li_reset()
-                       display: inline-block
-                       margin-right: 10px
+       font-size: font_size_small
 
 #wfpl_messages
        background: #ffd
@@ -284,13 +324,12 @@ footer
 
 #admin_links
        font-size: font_size_small
-       background: #fdd
+       background: rgba(255, 244, 244, 0.5)
+       border: 1px dotted #000
        padding: 3px
-       margin-bottom: 15px
-
-
-
-
+       position: absolute
+       top: 0
+       right: 0
 
 // obsolete floating images (from pastable example code on admin_images)
 span.wfpl_ifl
@@ -543,7 +582,7 @@ for selector, css in columns.css
 
        body > .centerer > .nav ul > li, #mobile_menu_button
                display: block
-               padding: 3px 10px 4px 17px
+               padding: 0px 10px 0px 17px
                font-size: font_size_large
 #admin_images_body .th_toggle_buttons
        font-weight: normal