diff --git a/basics/writing-a-skin.md b/basics/writing-a-skin.md index 26ad350..ab310f0 100644 --- a/basics/writing-a-skin.md +++ b/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. diff --git a/classes-taxonomy.md b/classes-taxonomy.md index 3ba5951..0cde16b 100644 --- a/classes-taxonomy.md +++ b/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 diff --git a/patterns/blurb.md b/patterns/blurb.md index 41177db..330fa80 100644 --- a/patterns/blurb.md +++ b/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. diff --git a/patterns/comments.md b/patterns/comments.md index 5930ff1..c310cb4 100644 --- a/patterns/comments.md +++ b/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)
    diff --git a/patterns/indexes.md b/patterns/indexes.md index 53e0701..4e9bc1f 100644 --- a/patterns/indexes.md +++ b/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). diff --git a/patterns/listbox.md b/patterns/listbox.md index 73133bb..002e8b8 100644 --- a/patterns/listbox.md +++ b/patterns/listbox.md @@ -101,6 +101,14 @@ The following diagram is taken from [an index of fandoms for a specific media ty
+### 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).