pr 1

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()