Add example image

public/index.md

@@ -84,6 +84,8 @@ All are optional.
 
 ## Content
 
+![Example image with caption.](/example-image.jpg#right;w=40%;my-class)
+
 Content is provided as simple static  markdown files, with optional YAML
 [frontmatter](#yaml-frontmatter). It should be present on the webserver at the
 request path, with a `.md` file extension.
@@ -103,7 +105,7 @@ discarded.
 
     ![Image caption](/url/of/image.jpg#right;w=50%;my-class)
 
-The above example will display a right-floated figure, 50% wide, with the class
+The above example will display a right-floated figure, 40% wide, with the class
 `my-class`.
 
 | Key     | Description             |

public/template/main.css

@@ -115,3 +115,31 @@ td:first-child, th:first-child {
 tr:nth-child(2n+1) td {
     background: #EEE;
 }
+
+p {
+    margin: 0 0 10px 0;
+}
+
+p::before {
+    content: "";
+    display: block;
+    overflow: hidden;
+    width: 200px;
+}
+
+figure.my-class {
+    margin: 0 0 10px 20px;
+}
+
+figcaption {
+    font-style: italic;
+}
+
+@media(max-width: 500px) {
+    figure.my-class { min-width: 190px; }
+    p::before { width: 150px; }
+}
+
+@media(max-width: 400px) {
+    figure.my-class { min-width: 150px; }
+}