pr 1

grunt/Gruntfile.js

@@ -10,6 +10,30 @@ module.exports = function(grunt) {
       }
     },
 
+    spriteGenerator: {
+      "sprite": {
+        src: [
+          'images/sprite/*.png'
+        ],
+        spritePath: 'images/sprite.png',
+        stylesheetPath: 'css/sprite.styl',
+        compositor:'gm',
+        stylesheet: 'stylus',
+        stylesheetOptions:{
+          prefix:'sprite_',
+          spritePath:'/image/sprite.png',
+          pixelRatio:2
+        },
+        layout:'packed',
+        layoutOptions:{
+          padding:8
+        },
+        compositorOptions:{
+          compressionLevel:9
+        }
+      }
+    },
+
     stylus: {
       compile: {
         options:{
@@ -28,8 +52,19 @@ module.exports = function(grunt) {
           '../public/css/style.css':'../public/css/style.raw.css'
         }
       }
+    },
 
+    imagemin: {
+      static: {
+        options: {
+          optimizationLevel: 7
+        },
+        files: {
+          '../public/image/sprite.png': 'images/sprite.png'
+        }
+      }
     }
+
   });
 
 
@@ -38,6 +73,8 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-internal');
   grunt.loadNpmTasks('grunt-contrib-uglify');
 
+  grunt.loadNpmTasks('node-sprite-generator');
+  grunt.loadNpmTasks('grunt-contrib-imagemin');
 
   grunt.loadNpmTasks('grunt-csso');
   grunt.loadNpmTasks('grunt-contrib-stylus');
@@ -46,5 +83,5 @@ module.exports = function(grunt) {
   grunt.registerTask('js',['uglify']);
 
   grunt.registerTask('default', ['css']);
-  grunt.registerTask('full',['css','js'])
+  grunt.registerTask('full',['spriteGenerator','css','imagemin','js'])
 };

grunt/css/sprite.styl

@@ -0,0 +1,37 @@
+sprite_account-x = -2px
+sprite_account-y = -2px
+sprite_account-width = 24px
+sprite_account-height = 24px
+sprite_account = sprite_account-x sprite_account-y sprite_account-width sprite_account-height
+sprite_calendar-x = -30px
+sprite_calendar-y = -2px
+sprite_calendar-width = 24px
+sprite_calendar-height = 24px
+sprite_calendar = sprite_calendar-x sprite_calendar-y sprite_calendar-width sprite_calendar-height
+sprite_email-x = -2px
+sprite_email-y = -30px
+sprite_email-width = 24px
+sprite_email-height = 24px
+sprite_email = sprite_email-x sprite_email-y sprite_email-width sprite_email-height
+sprite_web-x = -30px
+sprite_web-y = -30px
+sprite_web-width = 24px
+sprite_web-height = 24px
+sprite_web = sprite_web-x sprite_web-y sprite_web-width sprite_web-height
+
+sprite_sprite-image()
+    background-image url('/image/sprite.png')
+sprite_sprite-size()
+    background-size 56px 56px
+sprite_sprite-position($sprite)
+    background-position $sprite[0] $sprite[1]
+sprite_sprite-width($sprite)
+    width $sprite[2]
+sprite_sprite-height($sprite)
+    height $sprite[3]
+sprite_sprite($sprite)
+    sprite_sprite-image()
+    sprite_sprite-size()
+    sprite_sprite-position($sprite)
+    sprite_sprite-width($sprite)
+    sprite_sprite-height($sprite)

grunt/css/style.styl

@@ -1,11 +1,14 @@
 @import "ShortCSS/ShortCSS.styl"
 @import "normalize/normalize.styl"
 
+/** sprite */
+@import "sprite.styl"
 /** ptest css */
 
 body
   -ff _ffv
   -fs 16
+  -wmin 320
 
 $link_color = #0063ff
 $link_color_border = alpha($link_color,.3)
@@ -28,12 +31,30 @@ a
     -c $link_hover_color
     -brbc $link_hover_color_border
 
+  &.to-front
+    -brb 0 none
+    -d block
+    -mt -5
+    -mb 2em
+    line-height 1
+
+    &:visited
+      -c $link_color
+
+    &:hover
+    &:visited:hover
+      -c $link_hover_color
+
 .page
 
   &__container
     -wmax 800
     -m 0 auto
 
+    +media('max-width:829px')
+      -wmax auto
+      -w 100%
+
 .header
   -p 30
   -bg #ffcc56
@@ -46,6 +67,14 @@ a
   -mb 60
   -ta center
 
+  +media('max-width:829px')
+    bx-shadow none
+    -mt 0
+
+  +media('max-width:500px')
+    -p 20
+    -mb 36
+
   &__title
     line-height 1
     -m 0
@@ -54,18 +83,128 @@ a
     -ts 1 1 1 #a76f19
     -fs 52
 
+    +media('max-width:500px')
+      -fs 32
+
 .page-title
   -pb 35
 
+  +media('max-width:500px')
+    -fs 1.35em
+
 .content
   -pb 76
 
+  +media('max-width:829px')
+    -w 90%
+    -m auto
+
+
+  p
+    -m 26 0
+    -lh 24
+
+.sort
+  -d table-row
+  +media('max-width:424px')
+    -ml -9
+
+  &__cell
+    -d table-cell
+
+    &:first-child
+      +media('max-width:424px')
+        -d none
+
+    &:nth-child(2)
+      +media('max-width:424px')
+        -pl 0
+
+    &+&
+      -pl 9
+
+    &>a
+      -brb 0 none
+      line-height 1
+
+      &:visited
+        -c $link_color
+
+      &:hover
+      &:visited:hover
+        -c $link_hover_color
+
+article
+  &+article
+    -mt 64
+  header
+    h2+span
+      +media('max-width:500px')
+        -d block
+
+.pager
+  -mt 50
+  -ff _ffa
+  -lh 40
+  -fs 20
+
+  +media('max-width:559px')
+    -fs 16
+    -lh 36
+
+  &__page
+    -d inline-block
+
+    &--current
+      cursor default
+
+    &>a
+      -brb none
+      -c black
+      -p 8 12
+      b-radius 35
+      +media('max-width:559px')
+        -p 5 8
+
+      &:hover
+        -c black
+        -bgc $link_hover_color_border
+
+    &>span
+      -bgc alpha(#dead6f,.5)
+      -p 8 12
+      b-radius 35
+      +media('max-width:559px')
+        -p 5 8
+
+    &--string
+      &:first-child
+        -mr 10
+        +media('max-width:559px')
+          -mr 0
+
+      &:last-child
+        -ml 9
+        +media('max-width:559px')
+          -ml 0
+
+      &>a
+        -p 8 0
+        +media('max-width:559px')
+          -p 8 0
+
+        &:hover
+        //-c black
+          -bgc transparent
+
 .footer
   -brt 1 solid #dead6f
   -pt 24
   -fs 85%
   -c #232425
   -pb 40
+  +media('max-width:829px')
+    -pl 5%
 
 #CAPTCHA
   & > img
@@ -77,6 +216,9 @@ a
 form
   -w 320
 
+  +media('max-width:374px')
+   -w 100%
+
 .form-element
   -m 0 -8 10 -8
   -p 6 8
@@ -103,3 +245,35 @@ form
 
     &:focus
       -brb 2 solid $link_hover_color_border
+
+.i-user
+  sprite_sprite(sprite_account)
+  -mb -6
+  -d inline-block
+  -mr 5
+  -ml 1em
+
+  +media('max-width:500px')
+    -ml 0
+
+.i-homepage
+  sprite_sprite(sprite_web)
+  -mb -6
+  -d inline-block
+  -mr 5
+
+.i-date
+  sprite_sprite(sprite_calendar)
+  -mb -6
+  -d inline-block
+  -mr 5
+
+.i-email
+  sprite_sprite(sprite_email)
+  -mb -6
+  -d inline-block
+  -mr 5
+
+
+
+apply_media_cache()

grunt/package.json

@@ -7,6 +7,8 @@
     "grunt-contrib-stylus": "~1.2.0",
     "grunt-contrib-jshint": "~1.0.0",
     "grunt-contrib-internal": "~1.2.2",
-    "grunt-contrib-uglify": "~2.0.0"
+    "grunt-contrib-uglify": "~2.0.0",
+    "node-sprite-generator": "~0.10.2",
+    "grunt-contrib-imagemin": "~1.0.1"
   }
 }