Improve presentation of screenshots

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;

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
 --------------
 

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

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

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