/*
 * The TV frame picture. To use a different image:
 *
 *   1. Save it as a PNG (or SVG) with the screen cut out (transparent), and put it in
 *      site/img/.
 *   2. Run:  python3 tools/measure-tv-frame.py site/img/your-image.png
 *   3. Paste the printed values below, and point --tv-frame-image at it.
 *   4. Set --tv-panel-* to a spot on the set for the channel buttons.
 *
 * The video sits behind the picture, showing through the hole, so the hole
 * doesn't need to be a perfect rectangle. The video is made a little bigger
 * than the hole (--tv-overscan) so rough edges in the cutout are hidden.
 */
:root {
  --tv-frame-image: url("../img/tv.svg");

  /* site/img/tv.svg: viewBox 920x582 from 40,104; screen hole 530x398 at 135,195 (4:3).
     For an SVG, take these from the hole's coordinates instead of running the
     measuring script, which only reads PNGs. */
  --tv-frame-aspect: 920 / 582;
  --tv-screen-left: 10.326%;
  --tv-screen-top: 15.636%;
  --tv-screen-width: 57.609%;
  --tv-screen-height: 68.385%;

  /* Where the channel buttons sit on the frame. In tv.svg that's the recess
     at x 752-890, y 334-406. */
  --tv-panel-left: 77.391%;
  --tv-panel-top: 39.519%;
  --tv-panel-width: 15%;
  --tv-panel-height: 12.371%;

  /* Where the turnable channel dial sits: a square box around it. In tv.svg
     it's centred on 821,252 with a radius of 54 (box x 761-881, y 192-312). */
  --tv-dial-left: 78.370%;
  --tv-dial-top: 15.120%;
  --tv-dial-width: 13.043%;

  /* The photo version, site/img/tv.png:
  --tv-frame-image: url("../img/tv.png");
  --tv-frame-aspect: 614 / 427;
  --tv-screen-left: 8.14%;
  --tv-screen-top: 9.84%;
  --tv-screen-width: 64.82%;
  --tv-screen-height: 69.32%;
  */

  /* How far the video extends under the frame on each side. */
  --tv-overscan: 0.8%;

  /* Largest size the TV is drawn at. Low-resolution images look blurry when
     stretched, so raise this when using a bigger image. */
  --tv-max-width: 1500px;
}