Add Japanese and Korean edition images (#1477)

* Add Jp/Kr covers and text to the main page

* Woops, add Jp picture

Author: pavpanchekha

book/index.md

@@ -9,24 +9,24 @@ building a basic but complete web browser, from networking to
 JavaScript, in a couple thousand lines of Python.
 
 ::::: {.wide-ad}
+
 ![The cover for Web Browser Engineering, from Oxford University Press](im/cover.jpg)
 
 ::: {.description}
 # Buy _Web Browser Engineering_
 
-_Web Browser Engineering_ is available in English
-for about $50 from
-[Bookshop.org](https://bookshop.org/p/books/web-browser-engineering-chris-harrelson/21588966),
+_Web Browser Engineering_ is available from
+[Bookshop](https://bookshop.org/p/books/web-browser-engineering-chris-harrelson/21588966),
 [B&N](https://www.barnesandnoble.com/w/web-browser-engineering-pavel-panchekha/1146050176),
-or [Amazon](https://amzn.to/4hFTkC2),
-and in Korean from
-[Yes24](https://www.yes24.com/product/goods/153499985)
-or directly from
-[Hanbit](https://www.hanbit.co.kr/store/books/look.php?p_code=B6818199506).
-More translations coming soon.
+and [Amazon](https://amzn.to/4hFTkC2),
+or in translation
+in Korean (from [Hanbit](https://www.hanbit.co.kr/store/books/look.php?p_code=B6818199506))
+and Japanese (from [O'Reilly](https://www.oreilly.co.jp/books/9784814401574/)).
 :::
 
-![here](im/wbe-korean.jpeg)
+![The cover for Web Browser Engineering in Korean, from Hanbit](im/wbe-korean.jpeg)
+
+![The cover for Web Browser Engineering in Japanese, from O'Reilly](im/wbe-japanese.jpeg)
 
 :::::
 

www/book.css

@@ -332,13 +332,19 @@ form .checkoff, form button[type=submit] { margin-top: 1em; }
 #signup-close:active { color: red; }
 #signup-close::before { font-size: 24px; content: "❌︎"; }
 
-.wide-ad { display: flex; gap: 1em; padding: .5em; outline: 2px solid #59b6ce; align-items: top; }
+.wide-ad { display: flex; gap: .25em; padding: .5em; outline: 2px solid #59b6ce; align-items: top; }
 .wide-ad h1:hover::after { content: none; }
-.wide-ad figure { margin: 0; }
+.wide-ad figure { margin: 0; display: flex; flex-direction: row; gap: .25em; }
 .wide-ad figure figcaption { display: none; }
 .wide-ad figure img { height: 7em; max-width: none; display: block; }
-.wide-ad .description { display: flex; flex-direction: column; gap: .5em; justify-content: space-between; }
+.wide-ad .description {
+    display: flex; flex-direction: column; gap: .5em; justify-content: space-between;
+    padding: 0 .5em;
+}
 .wide-ad .description * { margin: 0; }
+@media ((max-width: 950px) and (min-width: 801px)) or (max-width: 700px) {
+    .wide-ad figure ~ figure { display: none; }
+}
 @media only screen and (max-width: 520px) {
   .wide-ad { padding: .5em; gap: .5em; }
   .wide-ad figure { display: none; }