Site Design
===========

I chose the colors on this site based on two considerations: tropical birds and color blindness. The diversity of tropical birds is astounding. Evolution often produces wild and unexpected variety, but rarely as exuberantly as in these creatures. Whenever possible, I've taken color codes directly from pictures of some of my favorite birds.

To make the figures interpretable to as many people as possible, I then used guidelines from Masataka Okabe and Kei Ito's `Color Universal Design <https://jfly.uni-koeln.de/color/>`_ to optimize legibility for protanopia and deuteranopia, the most common forms of color blindness. As an example, the RNA library prep figure is reproduced below, recolored to imitate the two conditions.

.. figure:: ../images/23.08.16_rnacolorblind.jpg
   :width: 800
   :alt: RNA library prep colorblind filters
   :align: center

   *RNA library prep figure with two forms of colorblindness*

The exact color codes used on the site, and the birds that inspired them, are detailed below. Please feel free to use them, but do credit me if you use the exact same codes to indicate these molecules.

.. list-table::
   :widths: 25 25 25 150
   :align: center
   :header-rows: 1

   * - Signifies
     - Color
     - Hex Code
     - Bird 
   * - RNA
     - .. image:: colors/rnatile.jpg
          :width: 50
          :align: center
     - #BD7DAC
     - .. figure:: colors/luciferhummingbird.jpeg
          :width: 200
          :alt: Lucifer Hummingbird

          `Lucifer Hummingbird <https://ebird.org/species/luchum>`_ 
   * - DNA
     - .. image:: colors/dnatile.jpg
          :width: 50
          :align: center
     - #1B76B7
     - .. figure:: colors/spixmacaw.jpeg
          :width: 200
          :alt: Spix's Macaw
          
          `Spix's Macaw <https://www.science.org/content/article/two-decades-vanished-stunning-spixs-macaw-returns-forest-home>`_
   * - i5 Illumina Sequence
     - .. image:: colors/i5tile.jpg
          :width: 50
          :align: center
     - #4AA177
     - .. figure:: colors/resplendentquetzal.jpg
          :width: 200
          :alt: Resplendent quetzal
          
          `Resplendent Quetzal <https://unsplash.com/photos/YDTWwJAhy0Y>`_
   * - i7 Illumina Sequence
     - .. image:: colors/i7tile.jpg
          :width: 50
          :align: center
     - #F58817
     - .. figure:: colors/cockoftherock.jpg
          :width: 200
          :alt: Guianan Cock-of-the-Rock

          `Guianan Cock-of-the-Rock <https://en.wikipedia.org/wiki/Guianan_cock-of-the-rock#/media/File:Guianan_Cock-of-the-rock_(Rupicola_rupicola).jpg>`_-