yjk: Add some images showing the colour bleed and screen 12 artwork.

Gulliver by Teruchan
House by windship, rearranged by FRS
おじいちゃんのほこりっぽい本が好き by 京典, rearranged by FRS
2 files changed, 28 insertions(+), 2 deletions(-)

M articles/yjk/index.php
M css/map.css
M articles/yjk/index.php +16 -0
@@ 135,6 135,12 @@ 
 </p>
 
 
+<figure class="floatright">
+  <a href="https://www.deviantart.com/teruchan/art/super-new-Gulliver-s-Travels-133313733"><img src="colorbleed.png" /></a>
+  <figcaption>Pure red and pure black is a difficult combination for YJK.<br />
+  Artwork: Gulliver by Teruchan</figcaption>
+</figure>
+
 <h2 id="encoding">The encoding of YJK</h2>
 
 <p>

          
@@ 468,6 474,16 @@ 
 </p>
 
 
+<figure class="floatright">
+  <a href="http://tomseditor.com/gallery/i/51671/house-by-windship"><img src="house.png" /></a>
+  <figcaption>House by windship, rearranged by FRS (SC12)</figcaption>
+</figure>
+
+<figure class="floatright">
+  <a href="http://tomseditor.com/gallery/i/40372/midnight-skyhigh-by"><img src="books.png" /></a>
+  <figcaption title="おじいちゃんのほこりっぽい本が好き">I like grandpa’s dusty books by 京典, rearranged by FRS (SC12)</figcaption>
+</figure>
+
 <h2 id="drawing">Drawing techniques</h2>
 
 <p>

          
M css/map.css +12 -2
@@ 209,7 209,14 @@ blockquote {
 	padding-left: 2em;
 }
 
+figure figcaption {
+	font-style: italic;
+	color: #556;
+}
 
+figure.floatright figcaption {
+	text-align: center;
+}
 
 q::before {				/* nice quotation marks... */
 	content: '“';

          
@@ 267,12 274,15 @@ q:lang(ja)::after {
 
 .floatleft {
 	float: left;
-	margin: .5em;
-	margin-top: 0;
 }
 
 .floatright {
 	float: right;
+}
+
+.floatleft,
+.floatright {
+	clear: both;
 	margin: .5em;
 	margin-top: 0;
 }