Permalink
Browse files

add footer branding and fixed header

  • Loading branch information...
1 parent cd45d59 commit d906a7970ad4e51a2d92a9928b33938bdd8c7e7e @roblafeve roblafeve committed Sep 14, 2012
Showing with 128 additions and 87 deletions.
  1. +118 −84 assets/css/app.styl
  2. +10 −3 views/layout.jade
View
@@ -3,107 +3,141 @@
*
- margin 0
- padding 0
- font-family 'Helvetica', 'Arial', 'Verdana'
+ margin 0
+ padding 0
+ font-family 'Helvetica', 'Arial', 'Verdana'
pre
- font-size 13px
- font-family 'Courier', 'Monospace'
- font-weight bold
- display inline
+ font-size 13px
+ font-family 'Courier', 'Monospace'
+ font-weight bold
+ display inline
header
- background-color #3B5998
- border-bottom 2px solid #133783
- color #fff
- padding 10px
-
- h1
- color #fff
- font-size 200%
- margin-bottom 0
- pre
- float right
- margin-right 20px
- color black
+
+ header-color = #3B5998
+
+ position fixed
+ top 0
+ width 100%
+ background-color header-color
+ border-top 1px solid lighten(header-color, 10)
+ border-bottom 1px solid darken(header-color, 20)
+ color #fff
+ box-shadow 0 2px 1px 0 rgba(#000, 0.2)
+ .content
+ padding 10px 30px
+ overflow hidden
+ h1
+ color #fff
+ font-size 200%
+ margin-bottom 0
+ float left
+ pre
+ float right
+ margin 0
+ color black
section.info
- margin 20px 30px 10px
- overflow hidden
- line-height 22px
- h2
- margin-bottom 20px
- line-height 28px
- font-size 20px
- font-weight normal
- h3
- margin-bottom 10px
- font-size 18px
- div.content
- float left
- width 45.25%
- padding 2%
- background-color rgba(0,0,0,.1)
- overflow hidden
- margin-bottom -80px
- padding-bottom 100px
- div.second
- float right
- div.mobile_info
- display none
- float none
- width 100%
- p
- margin-bottom 15px
- pre
- font-size 85%
- padding 5px
+ margin 80px 30px 10px
+ overflow hidden
+ line-height 22px
+ h2
+ margin-bottom 20px
+ line-height 28px
+ font-size 20px
+ font-weight normal
+ h3
+ margin-bottom 10px
+ font-size 18px
+ div.content
+ float left
+ width 45.25%
+ padding 2%
+ background-color rgba(0,0,0,.1)
+ overflow hidden
+ margin-bottom -80px
+ padding-bottom 100px
+ div.second
+ float right
+ div.mobile_info
+ display none
+ float none
+ width 100%
+ p
+ margin-bottom 15px
+ pre
+ font-size 85%
+ padding 5px
#photos
- margin 0 30px
- line-height 0
+ margin 0 30px
+ line-height 0
- column-count 5
- column-gap 10px
-
- a
- display block
- overflow hidden
- margin 0 0 10px
-
- img
- width 100% !important
- height auto !important
+ column-count 5
+ column-gap 10px
+
+ a
+ display block
+ overflow hidden
+ margin 0 0 10px
+
+ img
+ width 100% !important
+ height auto !important
@media (max-width: 1200px)
- #photos
- column-count 4
+ #photos
+ column-count 4
@media (max-width: 1000px)
- #photos
- column-count 3
+ #photos
+ column-count 3
@media (max-width: 800px)
- #photos
- column-count 2
+ #photos
+ column-count 2
@media (max-width: 520px)
- #photos
- margin 0 15px
- column-count 1
- header
- h1
- text-align center
- pre
- display none
- section.info
- margin 20px 15px 10px
- div.content
- display none
- div.mobile_info
- display block
- display block
+ #photos
+ margin 0 15px
+ column-count 1
+ header
+ h1
+ text-align center
+ pre
+ display none
+ section.info
+ margin 20px 15px 10px
+ div.content
+ display none
+ div.mobile_info
+ display block
+ display block
+
+footer
+ position fixed
+ bottom 0
+ width 100%
+ padding 0
+ margin 0
+ background rgba(#fafafa, 0.9)
+ border-top 1px solid #ccc
+ box-shadow 0 0 2px 0 rgba(#000, 0.4), 0 1px 0 0 #fff inset
+ .content
+ padding 10px 30px
+ text-align center
+ small
+ line-height 20px
+ color #999
+ #cremalab-logo
+ display inline-block
+ overflow hidden
+ width 120px
+ height 20px
+ margin 0 0 0 .75em
+ text-indent -100%
+ background url('/assets/img/cremalab-footer-branding.svg') no-repeat
View
@@ -8,9 +8,10 @@ html
body
header
- pre
- <img src='http://facehold.it/pic' />
- h1 Facehold.it
+ section.content
+ h1 Facehold.it
+ pre
+ <img src='http://facehold.it/pic' />
section.info
@@ -35,6 +36,12 @@ html
pre
<img src='http://facehold.it/pic' />
='anywhere on your site to generate a placeholder image.'
+ footer
+ section.content
+ small
+ = 'Created by'
+ a#cremalab-logo(href='http://cremalab.com', target='_blank') Cremalab
+
!= body
include _analytics.html

0 comments on commit d906a79

Please sign in to comment.