Add Korean edition image (#1457)

* Add korean edition image

* none

* Tweaks to make the text look good at all screen sizes

---------

Co-authored-by: Pavel Panchekha <me@pavpanchekha.com>

Author: chrishtr

book/index.md

@@ -14,14 +14,20 @@ JavaScript, in a couple thousand lines of Python.
 ::: {.description}
 # Buy _Web Browser Engineering_
 
-Please support us by buying _Web Browser Engineering_ from a reseller like
+_Web Browser Engineering_ is available in English
+for about $50 from
 [Bookshop.org](https://bookshop.org/p/books/web-browser-engineering-chris-harrelson/21588966),
 [B&N](https://www.barnesandnoble.com/w/web-browser-engineering-pavel-panchekha/1146050176),
-and [Amazon](https://amzn.to/4hFTkC2).
-It's currently $50 in the US and £40 in the UK, with similar prices in
-many other countries. Translations are coming soon!
+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.
 :::
 
+![here](im/wbe-korean.jpeg)
+
 :::::
 
 Follow this book's [blog][blog], [Mastodon][mastodon], or [Twitter][twitter] for updates.

www/book.css

@@ -332,15 +332,16 @@ 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: 1em; outline: 2px solid #59b6ce; align-items: top; }
+.wide-ad { display: flex; gap: 1em; padding: .5em; outline: 2px solid #59b6ce; align-items: top; }
 .wide-ad h1:hover::after { content: none; }
 .wide-ad figure { margin: 0; }
 .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: 1em; }
+.wide-ad .description { display: flex; flex-direction: column; gap: .5em; justify-content: space-between; }
 .wide-ad .description * { margin: 0; }
 @media only screen and (max-width: 520px) {
   .wide-ad { padding: .5em; gap: .5em; }
+  .wide-ad figure { display: none; }
 }
 
 aside.ad .wide { display: none; }