change link style for documentation

content/doc/index.rst

 Documentation
 =============
 
-Screencast
-----------
+Tutorial and reference manual
+-----------------------------
 
-.. raw:: html
+.. class:: docs-list, button-links
 
-   A brief video introduction of Kwant:
-   <a href="kwant-screencast-2014.html">watch</a>,
-   <a href="http://downloads.kwant-project.org/doc/kwant-screencast-2014.mp4" download>download</a>.
+* **Online**:
 
-Tutorial and reference manual
------------------------------
+  + `stable version </doc/1/>`_
+  + `development version </doc/dev/>`_
+
+* **Downloads**:
 
-* Browse online: `stable version </doc/1/>`_, `development version </doc/dev/>`_,
-* `download PDF <http://downloads.kwant-project.org/doc/latest.pdf>`_,
-* `download zipped HTML
-  <http://downloads.kwant-project.org/doc/latest.zip>`_ (for reading
-  without web access).
+  + `PDF <http://downloads.kwant-project.org/doc/latest.pdf>`_
+  + `zipped HTML <http://downloads.kwant-project.org/doc/latest.zip>`_
 
 Interactive online course
 -------------------------
 The APS March meeting 2016 tutorial “Introduction to Computational Quantum Nanoelectronics” focuses on the physics, but also serves as a crash course on Kwant.  `All the materials are available online </mm16.html>`_ and can be run directly in a web browser, without installing Kwant locally.
 
+Screencast
+----------
+
+.. raw:: html
+
+   A brief video introduction of Kwant:
+
+   <ul class="button-links inline-list">
+       <li> <a href="kwant-screencast-2014.html">watch</a> </li>
+       <li> <a href="http://downloads.kwant-project.org/doc/kwant-screencast-2014.mp4" download>download</a> </li>
+   </ul>
+
 Article
 -------
 

themes/kwant/assets/css/custom.css

@@ -98,3 +98,66 @@ li.post-list-item .post-item-title {
     border-bottom: 1px solid #caccce;
     margin-bottom: .5em;
 }
+
+/* documentation links */
+
+ul.docs-list {
+    padding-left: 0 ;
+    line-height: 2.5em ;
+}
+
+ul.docs-list ul {
+    padding-left: 20px;
+}
+
+ul.docs-list > li {
+    display: flex ;
+}
+
+ul.docs-list > li li {
+    display:inline ;
+}
+
+
+
+ul.inline-list {
+    display: inline ;
+    padding-left: 10px ;
+}
+
+ul.inline-list li{
+    display: inline ;
+}
+
+
+
+/* give button-like appearance to links, adapted from python.org */
+
+.button-links a{
+    display: inline ;
+    vertical-align: baseline ;
+    width: auto ;
+    cursor: pointer ;
+    margin-bottom: .5em ;
+    padding: .4em .75em .35em ;
+    text-align: left ;
+    white-space: nowrap ;
+    border-radius: 6px ;
+    background-color: #eeeeee ;
+    text-decoration: none ;
+}
+
+.button-links a:hover {
+    background-color: #dddddd ;
+}
+
+/* target the "stable version" link. This is a massive hack, but we're
+   not web developers */
+ul.docs-list > li:first-child > ul:nth-child(2) > li:first-child > a {
+    background-color: #0077cc ;
+    color: #eeeeee ;
+}
+
+ul.docs-list > li:first-child > ul:nth-child(2) > li:first-child > a:hover {
+    background-color: #0055aa ;
+}