Fix broken images, add some missing classes, mention preference for singular object classes

Author: sarken

basics/writing-a-skin.md

@@ -24,7 +24,7 @@ The skin system is also a great way to get familiar with CSS in general or the A
 
 Here we'll walk through a simple skin that modifies the Archive's default appearance by changing fonts and colors, adding images, and adjusting margins and borders.
 
-![A user dashboard with our skin: a bright diagonal striped background, translucent white main content, and translucent yellow dashboard sections](/images/writing_a_skin_preview.png)
+![A user dashboard with our skin: a bright diagonal striped background, translucent white main content, and translucent yellow dashboard sections](../images/writing_a_skin_preview.png)
 
 For our colors and images, we'll be using a stripe pattern called [sing together](https://www.colourlovers.com/pattern/850926/sing_together) and its color palette, [like fireflies](https://www.colourlovers.com/palette/1172215/like_fireflies), both of which are by [electroCUTE!](https://www.colourlovers.com/lover/electroCUTE%21). You'll need to save and upload the background image to an image host, but because you are the only one seeing your skin, you probably don't need to worry about running out of bandwidth.
 

classes-taxonomy.md

@@ -121,6 +121,8 @@ We can divide types into two abstract classes:
 
 The abstract class `.object` encompasses classes that correspond with database records. These are typically a *type* of record that corresponds with a model name, such as `.work` or `.user`, but sometimes they're *specific* records, such as the `.rating-teen` class that corresponds with the [Teen and Up Audiences rating tag](https://archiveofourown.org/tags/Teen%20And%20Up%20Audiences).
 
+These class names are almost always singular, with the exception of `tags`.
+
 * .user
 * .work
   * .chapter
@@ -160,6 +162,7 @@ The abstract class `.object` encompasses classes that correspond with database r
   * .prompt
   * .item
   * .signup
+  * .assignment
 
 ### data
 
@@ -181,6 +184,7 @@ The abstract class `.data` encompasses classes that describe the type or format
 * .notice
 * .error
 * .icon
+* .rss
 * .symbol
   * .help
   * .question

patterns/blurb.md

@@ -26,7 +26,7 @@ The styles for blurbs are located in [the stylesheet named 13-group-blurb.css](h
 
 The work blurb is the most used chunk of HTML code in the Archive, so we've revised it a lot. It has to contain lots of information and allow different ways of accessing its material. The blurb is flexible, accessible, and has multiple redundancies (says the same thing in different ways).
 
-![Work blurb in the default Archive style](/images/workblurb.png)
+![Work blurb in the default Archive style](../images/workblurb.png)
 
 Since we usually have many blurbs listed together, the index page that holds the blurbs is coded as an HTML list, and each blurb is coded as a list item. If a page will only ever contain one blurb (e.g., the adult content warning), the blurb can be coded as a different element, such as a `div`.
 
@@ -217,7 +217,7 @@ While the HTML structure of the blurb is incredibly important and should not be
 
 Here you see two different examples of the work blurb from the AO3, one using the default CSS and one using a skin, which have some of their fields mapped to the blurb diagram to help give you the idea.
 
-![work blurbs](/images/blurb_diagram_mapping.png)
+![work blurbs](../images/blurb_diagram_mapping.png)
 
 These blurbs use *the same HTML*. The only thing different is the CSS.
 

patterns/comments.md

@@ -80,7 +80,7 @@ An individual comment is always a `li` contained within an `ol`. These comment l
 
 To illustrate the HTML for threads, we'll diagram the following example. Each `li` with the `comment` class contains the HTML diagramed in the previous section.
 
-![Two top-level comments, with two direct reples to the second top-level comment. The second reply also has a reply.](/images/comment_thread_for_diagram.png)
+![Two top-level comments, with two direct reples to the second top-level comment. The second reply also has a reply.](../images/comment_thread_for_diagram.png)
 
 <div class="diagram">
   <ol>

patterns/indexes.md

@@ -32,6 +32,14 @@ An index can be any of the three kinds of HTML list.
 
 You can **never** have **any** other kind of index.
 
+#### HTML classes
+
+An index usually has an [object type class](../class-taxonomy#types): `work index group`, `assignment index group`, `reading index group`.
+
+These class names should almost always be singular. The main exception to this is tags: `tags index group`.
+
+If you find a plural other than `tags`, it's probably a mistake that needs to be corrected.
+
 ### dl.index
 
 `dl.index` is sometimes used to display simple paired data (e.g. on a [translated news post](https://archiveofourown.org/admin_posts/148)), but it more often functions as a sort of brief alternative to showing a full blurb (or a full list of blurbs).

patterns/listbox.md

@@ -101,6 +101,14 @@ The following diagram is taken from [an index of fandoms for a specific media ty
   </ol>
 </div>
 
+### HTML classes
+
+A listbox usually has an [object type class](../class-taxonomy#types): `work listbox group`, `assignment listbox group`, `reading listbox group`.
+
+These class names should almost always be singular. The main exception to this is tags: `tags index group`.
+
+If you find a plural other than `tags`, it's probably a mistake that needs to be corrected.
+
 ## Notes
 
 We call it listbox (instead of indexbox) because a listbox might be a dynamically inserted form or form component, and therefore would need managed focus. This seems most closely related to [the ARIA role listbox](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/listbox_role).