Merge pull request python3statement#32 from Carreau/fancier-listing

Compact list (wrap on 2 multiple lines) and prepare for images.

Author: takluyver

_includes/css/main.css

@@ -53,7 +53,7 @@ pre {
 /* ----- base elements ----- */
 
 img {
-  max-width:100%!important;
+  max-width:100%;
   height:auto;
   vertical-align:middle;
 }

_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/)
-- [xonsh](https://xon.sh)
-- [scikit-bio](http://scikit-bio.org)
-- [PyStan](https://github.com/stan-dev/pystan)
+- [![](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/xonsh.png)xonsh](http://xon.sh)
+- [![](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 -->
+
 - [An Introduction to Applied Bioinformatics](http://readiab.org)
 - [QIIME](http://qiime.org)
 - [gala](https://gala.readthedocs.io)

assets/ipython.png

@@ -50,12 +50,28 @@ div.vis-item.vis-selected {
     color: #868686;
 }
 
-/* enable that if too long, but seem to have some rendering issues.*/
-/*.p-sections20-projects ul {
-    column-count: 3;
-    list-style: none;
-}*/
-
 .subtlecircle .fa-stack-1x{
     font-size: 80%;
 }
+
+#sections30-projects ul:nth-child(2) a {
+    text-decoration: none;
+}
+
+
+#sections30-projects li {
+    display: inline-block;
+    margin: 10px;
+    padding: 20px;
+    font-size: 19px;
+}
+
+
+#sections30-projects li a > img{
+    margin: auto;
+    margin-bottom:10px;
+    display: block;
+    max-height: 80px;
+    max-width: 160px;
+    vertical-align: middle;
+}