Layout Diagrams

These need updating to the new structures 11/10/2011.

1. Chrome
2. Login Block
3. Blurb
4. Work view
5. Work meta
6. Comments

Chrome

1. body
   1. div #outer .wrapper
      1. div #header
         1. #login-block diagram
         2. h1 a
         3. h3 .landmark
         4. ul .navigation
            1. li a
            2. li span .current
            3. li .search
               1. form .search #search
                  1. fieldset
                     1. legend
                     2. p input [text] #site_search input [submit]
            4. div .clear
         5. div #inner .wrapper
            1. div #dashboard
               1. h3
               2. ul .navigation
                  1. li a
            2. div #main .dashboard (when present)
               1. h2
               2. ul .navigation
                  1. li a
               3. individual page content
         6. div #footer
            1. h3 .landmark
            2. ul .navigation
               1. li entity — a

Login

1. div #login-block
   1. p #greeting a .login
   2. ul #login
      1. li a |

Blurb

The blurb is discussed in detail.

1. h3 .landmark
2. ol .work .index
   1. li .work .blurb
      1. div .header .module
         1. h4 a [title] by a .author
         2. h5 a .tag [fandom]
         3. ul .required-tags
            1. li a .symbol span .rating span
            2. li a .symbol span .rating span
            3. li a .symbol span .rating span
            4. li a .symbol span .rating span
         4. p .datetime
      2. h6 .landmark
      3. ul .tags
         1. li .warnings strong a .tag
         2. li a .tag
      4. h6 .landmark
      5. blockquote .summary .userstuff
      6. dl .stats
         1. dt
         2. dd
   2. li .work .blurb ...

Work view

The work view is pretty similiar to the post new work form.

1. #main .works-show
   1. h3 .landmark
   2. ul .navigation
      1. li a
   3. div .wrapper
      1. dl .work .meta
         1. .meta diagram
   4. div .preface
      1. h2 .title
      2. h3 .byline
      3. div .summary .module
         1. h3
         2. blockquote .userstuff
      4. div .notes .module
         1. h3
         2. blockquote .userstuff
   5. div #chapters .userstuff

      (This is where the work is shown.)

   6. div #feedback
      1. h3 .landmark
      2. ul .navigation
         1. li a
      3. div #comments_placeholder
         1. .comment diagram

Work meta

Work meta is a simple definition list. We've generalised to the design pattern meta. It's used at the start of a page and contains all the metadata we hold on that object (collection, series, work, user, etc).

1. div .wrapper
   1. dl .work .meta
      1. dt .rating
      2. dd .rating
         1. ul
            1. li a .tag
      3. dt .warning
      4. dd .warning
         1. ul
            1. li a .tag
      5. dt .category
      6. dd .category
         1. ul
            1. li a .tag
      7. dt .fandom
      8. dd .fandom
         1. ul
            1. li a .tag
      9. dt .relationship
      10. dd .relationship
          1. ul
             1. li a .tag
      11. dt .character
      12. dd .character
          1. ul
             1. li a .tag
      13. dt .freeform
      14. dd .freeform
          1. ul
             1. li a .tag
      15. dt .stats
      16. dd .stats
          1. dl
             1. dt
             2. dd
          2. div .clear