style guide

v0.1 | 11.03.2008

Home Pg
fade left/right edges to 9EAA3E when browser window is >1900 wide in general, 30px padding above and below content

TakePart.com | Style Guide | 11.03.2008 | pg.2

img 221x173px img 420x236px

img 227x86px

fade left/right edges to 414B0E when browser window is >1900 wide

bkgd img height 1200px

bottom edge of bkgd img fades to black

site width 927px bkgd img width 1900px

Landing Pg, Issue

TakePart.com | Style Guide | 11.03.2008 | pg.3

TBD

thumbnail 48x48px icon 16x16px

Content View Pg

TakePart.com | Style Guide | 11.03.2008 | pg.4

thumbnail 48x48px

hero/main content width = 640px height = variable

related/supporting media

list width = 927px height = variable

Content Type / Video

TakePart player

TakePart.com | Style Guide | 11.03.2008 | pg.5

video player 16:9 ratio 640x360px

column width 640px

Content Type / Audio

TakePart player

TakePart.com | Style Guide | 11.03.2008 | pg.6

img 4:3 ratio 640x480px only appears if img is uploaded with audio; Play Audio bug is added to img; entire img is clickable to play audio

column width 640px

Content Type / Photo Gallery - Multiple Photos

TakePart.com | Style Guide | 11.03.2008 | pg.7

thumbnail 48x48px

column width 640px

Content Type / Photo Gallery - Enlarged Photo

TakePart.com | Style Guide | 11.03.2008 | pg.8

img 4:3 ratio max 640px wide max 480px tall

base 987x700px landscape

column width 640px

lightbox

portrait

Content Type / Photo Gallery - Single Photo

TakePart.com | Style Guide | 11.03.2008 | pg.9

img 4:3 ratio max 640px wide max 480px tall see previous pg for treatment of landscape vs. portrait imgs

column width 640px

Content Type / Text

TakePart.com | Style Guide | 11.03.2008 | pg.10

img 4:3 ratio max 360px wide max 270px tall

when text has no related/supporting content, column width = 927px

Content Type / Video

TakePart player

TakePart.com | Style Guide | 11.03.2008 | pg.11

video player 16:9 ratio 640x360px

column width 640px

Content List, default

content bar minimized width = 927px height = 52px thumbnail 48x48px icon 16x16px

TakePart.com | Style Guide | 11.03.2008 | pg.12

numbered list

non-numbered list

Content List, expanded bar

TakePart.com | Style Guide | 11.03.2008 | pg.13

all content types fit here and follow the specs on previous pgs

expanded panel width 987px

Profile - Person Pg

TakePart.com | Style Guide | 11.03.2008 | pg.14

avatar 115x115px

img 234x95px

thumbnail 48x48px icon 16x16px prioritized content bar see content bar states

no background img as in home, landing pg, etc.

Dashboard Home Pg

TakePart.com | Style Guide | 11.03.2008 | pg.15

img 234x95px prioritized content bar see content bar states

no background img as in home, landing pg, etc.