Fix broken images

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.
 

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>