From 489ed6a915577eb87170d1c23cb4b87369b063a9 Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Wed, 30 May 2018 20:04:49 +0530
Subject: [PATCH] Improve presentation of screenshots

---
 docs/_static/custom.css        | 6 ++++++
 docs/index.rst                 | 3 +++
 docs/kittens/diff.rst          | 5 ++++-
 docs/kittens/hints.rst         | 8 ++++++--
 docs/kittens/unicode-input.rst | 6 +++++-
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index 440ba5ba0..474f6cf3c 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -27,6 +27,12 @@ pre {
 
 a[href], input[type="submit"] { cursor: pointer; }
 
+img[style] {
+    /* Used for :scale: images to have them render properly but still popup when clicked */
+    width: auto !important;
+    height: auto !important;
+}
+
 a { 
     text-decoration: none !important;
     border-bottom: none !important;
diff --git a/docs/index.rst b/docs/index.rst
index 5d58691e7..c6292e7f7 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -39,10 +39,13 @@ kitty - the fast, featureful, GPU based, terminal emulator
 .. figure:: screenshots/screenshot.png
     :alt: Screenshot, showing three programs in the 'Tall' layout
     :align: center
+    :scale: 100%
 
     Screenshot, showing vim, tig and git running in |kitty| with the 'Tall' layout
 
 
+.. _quickstart:
+
 Quickstart
 --------------
 
diff --git a/docs/kittens/diff.rst b/docs/kittens/diff.rst
index 93ec54c75..30fff6a5e 100644
--- a/docs/kittens/diff.rst
+++ b/docs/kittens/diff.rst
@@ -1,6 +1,8 @@
 kitty-diff - A side-by-side diff tool with syntax highlighting and images
 =============================================================================
 
+.. highlight:: sh
+
 Major Features
 -----------------
 
@@ -16,6 +18,7 @@ Major Features
 .. figure:: ../screenshots/diff.png
    :alt: Screenshot, showing a sample diff
    :align: center
+   :scale: 100%
 
    Screenshot, showing a sample diff
 
@@ -25,7 +28,7 @@ Major Features
 Installation
 ---------------
 
-Simply install `kitty <https://github.com/kovidgoyal/kitty>`_.  You also need
+Simply install :ref:`kitty <quickstart>`.  You also need
 to have either the `git <https://git-scm.com/>`_ program or the ``diff`` program
 installed. Additionally, for syntax highlighting to work,
 `pygments <http://pygments.org/>`_ must be installed (note that pygments is
diff --git a/docs/kittens/hints.rst b/docs/kittens/hints.rst
index 0e61be2c1..4ad7972d0 100644
--- a/docs/kittens/hints.rst
+++ b/docs/kittens/hints.rst
@@ -6,8 +6,12 @@ visible on the screen.  For example, you can press |sc_kitten_hints|
 to choose any URL visible on the screen and then open it using your system
 browser.
 
-.. image:: ../screenshots/hints_mode.png
-  :alt: URL hints mode
+.. figure:: ../screenshots/hints_mode.png
+    :alt: URL hints mode
+    :align: center
+    :scale: 100%
+
+    URL hints mode
 
 Similarly, you can press |sc_kitten_hints_type_path_program| to
 select anything that looks like a path or filename and then insert it into the
diff --git a/docs/kittens/unicode-input.rst b/docs/kittens/unicode-input.rst
index 0976e37f1..d21091cac 100644
--- a/docs/kittens/unicode-input.rst
+++ b/docs/kittens/unicode-input.rst
@@ -4,8 +4,12 @@ Unicode input
 You can input unicode characters by name, hex code, recently used and even an editable favorites list.
 Press |sc_input_unicode_character| to start the unicode input widget, shown below.
 
-.. image:: ../screenshots/unicode.png
+.. figure:: ../screenshots/unicode.png
     :alt: A screenshot of the unicode input widget
+    :align: center
+    :scale: 100%
+
+    A screenshot of the unicode input widget
 
 In *Code* mode, you enter a unicode character by typing in the hex code for the
 character and pressing enter, for example, type in ``2716`` and press enter to get