Make fancier listing with images.

Author: Carreau

_sections/30-projects.md

@@ -1,20 +1,23 @@
 ---
 title: Projects
-bg: '#9850ea'
+bg: '#7ec4ea'
 fa-icon: group
-color: white
+color: black
 style: center
 ---
 
 # Participating Projects
 
-- [IPython](https://ipython.org)
-- [Jupyter notebook](https://jupyter.org)
-- [Matplotlib](http://matplotlib.org/)
-- [SymPy](http://www.sympy.org/)
+- [![](assets/ipython.png)IPython](https://ipython.org)
+- [![](assets/jupyter.png)Jupyter notebook](https://jupyter.org)
+- [![](assets/matplotlib.png)Matplotlib](http://matplotlib.org/)
+- [![](assets/sympy.png)SymPy](http://www.sympy.org/)
+- [![](assets/skbio.png)scikit-bio](http://scikit-bio.org)
+- [![](assets/pystan.png)PyStan](https://github.com/stan-dev/pystan)
+
+&nbsp; <!--break separating project with image from without -->
+
 - [xonsh](https://xon.sh)
-- [scikit-bio](http://scikit-bio.org)
-- [PyStan](https://github.com/stan-dev/pystan)
 - [An Introduction to Applied Bioinformatics](http://readiab.org)
 - [QIIME](http://qiime.org)
 - [gala](https://gala.readthedocs.io)

assets/ipython.png

@@ -54,6 +54,10 @@ div.vis-item.vis-selected {
     font-size: 80%;
 }
 
+#sections30-projects ul:nth-child(2) a {
+    text-decoration: none;
+}
+
 
 #sections30-projects li {
     display: inline-block;
@@ -62,9 +66,24 @@ div.vis-item.vis-selected {
     font-size: 19px;
 }
 
-#sections30-projects li > img{
+
+#sections30-projects li a > img{
     margin: auto;
+    margin-bottom:10px;
     display: block;
-    max-width: 100px;
-    max-height: 100px;
+    max-height: 80px;
+    max-width: 160px;
+    vertical-align: middle;
+    filter: grayscale(90%);
+    -webkit-filter: grayscale(90%);
+    ransition: 250ms filter linear;
+    -webkit-transition : -webkit-filter 250ms linear
 }
+
+#sections30-projects li a > img:hover{
+    
+    filter: none;
+    -webkit-filter: none;
+}
+
+