diff --git a/conf.py b/conf.py
index bfecb208f6b4be307123c9d022961629570614c8..0e80898e8d37804d46a107343450f6ddf99f586f 100644
--- a/conf.py
+++ b/conf.py
@@ -132,7 +132,7 @@ NAVIGATION_LINKS = {
 }
 
 # Name of the theme to use.
-THEME = "bootstrap3-jinja"
+THEME = "kwant"
 
 # Below this point, everything is optional
 
@@ -653,7 +653,7 @@ LICENSE = ""
 
 # A small copyright notice for the page footer (in HTML).
 # (translatable)
-CONTENT_FOOTER = 'Contents &copy; {date}         <a href="mailto:{email}">{author}</a> - Powered by         <a href="https://getnikola.com" rel="nofollow">Nikola</a>         {license}'
+CONTENT_FOOTER = 'Contents &copy; 2013-{date}         <a href="mailto:{email}">{author}</a> - Powered by         <a href="https://getnikola.com" rel="nofollow">Nikola</a>         {license}'
 
 # Things that will be passed to CONTENT_FOOTER.format().  This is done
 # for translatability, as dicts are not formattable.  Nikola will
diff --git a/content/common/html4css1.css b/content/common/html4css1.css
deleted file mode 100644
index 816050614440183b34221665aa105dbd1a92fe7a..0000000000000000000000000000000000000000
--- a/content/common/html4css1.css
+++ /dev/null
@@ -1,303 +0,0 @@
-/*
-:Author: David Goodger (goodger@python.org)
-:Id: $Id: html4css1.css 7056 2011-06-17 10:50:48Z milde $
-:Copyright: This stylesheet has been placed in the public domain.
-
-Default cascading style sheet for the HTML output of Docutils.
-
-See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
-customize this style sheet.
-*/
-
-/* used to remove borders from tables and images */
-.borderless, table.borderless td, table.borderless th {
-  border: 0 }
-
-table.borderless td, table.borderless th {
-  /* Override padding for "table.docutils td" with "! important".
-     The right padding separates the table cells. */
-  padding: 0 0.5em 0 0 ! important }
-
-.first {
-  /* Override more specific margin styles with "! important". */
-  margin-top: 0 ! important }
-
-.last, .with-subtitle {
-  margin-bottom: 0 ! important }
-
-.hidden {
-  display: none }
-
-a.toc-backref {
-  text-decoration: none ;
-  color: black }
-
-blockquote.epigraph {
-  margin: 2em 5em ; }
-
-dl.docutils dd {
-  margin-bottom: 0.5em }
-
-object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
-  overflow: hidden;
-}
-
-/* Uncomment (and remove this text!) to get bold-faced definition list terms
-dl.docutils dt {
-  font-weight: bold }
-*/
-
-div.abstract {
-  margin: 2em 5em }
-
-div.abstract p.topic-title {
-  font-weight: bold ;
-  text-align: center }
-
-div.admonition, div.attention, div.caution, div.danger, div.error,
-div.hint, div.important, div.note, div.tip, div.warning {
-  margin: 2em ;
-  border: medium outset ;
-  padding: 1em }
-
-div.admonition p.admonition-title, div.hint p.admonition-title,
-div.important p.admonition-title, div.note p.admonition-title,
-div.tip p.admonition-title {
-  font-weight: bold ;
-  font-family: sans-serif }
-
-div.attention p.admonition-title, div.caution p.admonition-title,
-div.danger p.admonition-title, div.error p.admonition-title,
-div.warning p.admonition-title {
-  color: red ;
-  font-weight: bold ;
-  font-family: sans-serif }
-
-/* Uncomment (and remove this text!) to get reduced vertical space in
-   compound paragraphs.
-div.compound .compound-first, div.compound .compound-middle {
-  margin-bottom: 0.5em }
-
-div.compound .compound-last, div.compound .compound-middle {
-  margin-top: 0.5em }
-*/
-
-div.dedication {
-  margin: 2em 5em ;
-  text-align: center ;
-  font-style: italic }
-
-div.dedication p.topic-title {
-  font-weight: bold ;
-  font-style: normal }
-
-div.figure {
-  margin-left: 2em ;
-  margin-right: 2em }
-
-div.footer, div.header {
-  clear: both;
-  font-size: smaller }
-
-div.line-block {
-  display: block ;
-  margin-top: 1em ;
-  margin-bottom: 1em }
-
-div.line-block div.line-block {
-  margin-top: 0 ;
-  margin-bottom: 0 ;
-  margin-left: 1.5em }
-
-div.sidebar {
-  margin: 0 0 0.5em 1em ;
-  border: medium outset ;
-  padding: 1em ;
-  background-color: #ffffee ;
-  width: 40% ;
-  float: right ;
-  clear: right }
-
-div.sidebar p.rubric {
-  font-family: sans-serif ;
-  font-size: medium }
-
-div.system-messages {
-  margin: 5em }
-
-div.system-messages h1 {
-  color: red }
-
-div.system-message {
-  border: medium outset ;
-  padding: 1em }
-
-div.system-message p.system-message-title {
-  color: red ;
-  font-weight: bold }
-
-div.topic {
-  margin: 2em }
-
-h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
-h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
-  margin-top: 0.4em }
-
-h1.title {
-  text-align: center }
-
-h2.subtitle {
-  text-align: center }
-
-hr.docutils {
-  width: 75% }
-
-img.align-left, .figure.align-left, object.align-left {
-  clear: left ;
-  float: left ;
-  margin-right: 1em }
-
-img.align-right, .figure.align-right, object.align-right {
-  clear: right ;
-  float: right ;
-  margin-left: 1em }
-
-img.align-center, .figure.align-center, object.align-center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.align-left {
-  text-align: left }
-
-.align-center {
-  clear: both ;
-  text-align: center }
-
-.align-right {
-  text-align: right }
-
-/* reset inner alignment in figures */
-div.align-right {
-  text-align: inherit }
-
-/* div.align-center * { */
-/*   text-align: left } */
-
-ol.simple, ul.simple {
-  margin-bottom: 1em }
-
-ol.arabic {
-  list-style: decimal }
-
-ol.loweralpha {
-  list-style: lower-alpha }
-
-ol.upperalpha {
-  list-style: upper-alpha }
-
-ol.lowerroman {
-  list-style: lower-roman }
-
-ol.upperroman {
-  list-style: upper-roman }
-
-p.attribution {
-  text-align: right ;
-  margin-left: 50% }
-
-p.caption {
-  font-style: italic }
-
-p.credits {
-  font-style: italic ;
-  font-size: smaller }
-
-p.label {
-  white-space: nowrap }
-
-p.rubric {
-  font-weight: bold ;
-  font-size: larger ;
-  color: maroon ;
-  text-align: center }
-
-p.sidebar-title {
-  font-family: sans-serif ;
-  font-weight: bold ;
-  font-size: larger }
-
-p.sidebar-subtitle {
-  font-family: sans-serif ;
-  font-weight: bold }
-
-p.topic-title {
-  font-weight: bold }
-
-pre.address {
-  margin-bottom: 0 ;
-  margin-top: 0 ;
-  font: inherit }
-
-pre.literal-block, pre.doctest-block, pre.math {
-  margin-left: 2em ;
-  margin-right: 2em }
-
-span.classifier {
-  font-family: sans-serif ;
-  font-style: oblique }
-
-span.classifier-delimiter {
-  font-family: sans-serif ;
-  font-weight: bold }
-
-span.interpreted {
-  font-family: sans-serif }
-
-span.option {
-  white-space: nowrap }
-
-span.pre {
-  white-space: pre }
-
-span.problematic {
-  color: red }
-
-span.section-subtitle {
-  /* font-size relative to parent (h1..h6 element) */
-  font-size: 80% }
-
-table.citation {
-  border-left: solid 1px gray;
-  margin-left: 1px }
-
-table.docinfo {
-  margin: 2em 4em }
-
-table.docutils {
-  margin-top: 0.5em ;
-  margin-bottom: 0.5em }
-
-table.footnote {
-  border-left: solid 1px black;
-  margin-left: 1px }
-
-table.docutils td, table.docutils th,
-table.docinfo td, table.docinfo th {
-  padding-left: 0.5em ;
-  padding-right: 0.5em ;
-  vertical-align: top }
-
-table.docutils th.field-name, table.docinfo th.docinfo-name {
-  font-weight: bold ;
-  text-align: left ;
-  white-space: nowrap ;
-  padding-left: 0 }
-
-h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
-h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
-  font-size: 100% }
-
-ul.auto-toc {
-  list-style-type: none }
diff --git a/content/common/kwant.css b/content/common/kwant.css
deleted file mode 100644
index 1f43f6b2561a43a117504c2adf9e7a4cb8415842..0000000000000000000000000000000000000000
--- a/content/common/kwant.css
+++ /dev/null
@@ -1,115 +0,0 @@
-@import url(html4css1.css);
-
-/* Keeping a scrollbar always there to make centering work properly. */
-html {
-    overflow-y: scroll;
-}
-
-body {
-    min-width: 20em;
-    max-width: 55em;
-    margin: 0 auto;
-    font-family: "Bitstream Vera Serif",  Georgia, serif;
-}
-
-div.padding {
-    margin: 1em;
-}
-
-/* Enable hyphenation. */
-body {
-    text-align:justify;
-    -webkit-hyphens: auto;
-    -moz-hyphens: auto;
-    -ms-hyphens: auto;
-    -o-hyphens: auto;
-    hyphens: auto;
-}
-tt, pre {
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    -o-hyphens: none;
-    hyphens: none;
-}
-
-a {
-    color: #07c;
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-ul.navigation{
-    display: block;
-    text-align: center;
-    padding: 0.4em;
-    border-radius: 5px;
-    background-color: #eeeeee;
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    -o-hyphens: none;
-    hyphens: none;
-}
-
-ul.navigation li{
-    display: inline;
-    margin: 0 1em;
-}
-
-.hidden_structure {
-    display: none;
-}
-
-#header { margin-top: 0.5em; }
-#footer { margin: 2em 0; }
-#header, #header a, #footer {
-    color: black;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    font-family: "Bitstream Vera Sans",  Verdana, sans-serif;
-    font-weight: normal;
-}
-
-li {
-    margin-top: 0.3em;
-}
-
-li:first-child {
-    margin-top:0;
-}
-
-
-ol.simple, ul.simple {
-  margin-bottom: 0 }
-
-img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-pre, code { background-color: #eee; border: 1px solid #ccc; }
-pre.literal-block { overflow: hidden }
-pre { padding: 0.3em; }
-code { padding: 0 0.1em; }
-pre > code { border: none; padding: 0; }
-
-div.leftside {
-    float: left;
-    margin: 0 2em 0 0;
-}
-
-div.rightside {
-    float: right;
-    margin: 0 0 0 2em;
-}
-
-div.section{
-    height: auto;
-    overflow: auto;
-}
diff --git a/content/community.txt b/content/community.txt
index 183b4b2a02a472351a9adca3c4aeb51d624e95c2..bb657e440284507062bbebad2a3188f2ea5c0eee 100644
--- a/content/community.txt
+++ b/content/community.txt
@@ -11,18 +11,26 @@ bug reports, discussions, and announcements.  You can use it in various ways:
 
 - .. raw:: html
 
-      <p><form id="searchgmane" method="get" action="http://search.gmane.org/">
-      <input type="text" name="query" size=25 value="Your query" onblur="if (this.value == '') {this.value='Your query'}" onfocus="if (this.value == 'Your query') {this.value=''}" />
-      <input type="hidden" name="group" value="gmane.comp.science.kwant.user" />
-      <input type="submit" value="Search kwant-discuss" />
-      </form></p>
+    <form class="form-inline" id="searchgmane" method="get" action="http://search.gmane.org/">
+    <div class="input-group col-md-6">
+    <input type="text" class="form-control" placeholder="Search query" size=25 name="query" />
+    <input type="hidden" name="group" value="gmane.comp.science.kwant.user" />
+    <span class="input-group-btn">
+    <input class="btn btn-default" type="submit" value="Search kwant-discuss" />
+    </span>
+    </div>
+    </form>
 
 - .. raw:: html
 
-     <form method=post action="https://mailman-mail5.webfaction.com/subscribe/kwant-discuss">
-     <input type="text" name="email" size=25 value="Your email address" onblur="if (this.value == '') {this.value='Your email address'}" onfocus="if (this.value == 'Your email address') {this.value=''}" />
-     <input type="submit" name="email-button" value="Subscribe to kwant-discuss" />
-     </form>
+    <form class="form-inline" method=post action="https://mailman-mail5.webfaction.com/subscribe/kwant-discuss">
+    <div class="input-group col-md-6">
+    <input type="text" class="form-control" placeholder="Your email address" name="email" size=25 onblur="if (this.value == '') {this.value='Your email address'}" onfocus="if (this.value == 'Your email address') {this.value=''}" />
+    <span class="input-group-btn">
+    <input class="btn btn-default" type="submit" name="email-button" value="Subscribe to kwant-discuss" />
+    </span>
+    </div>
+    </form>
 
   … and receive new messages with your regular email.  (Use the `kwant-discuss options page <https://mailman-mail5.webfaction.com/options/kwant-discuss>`_ to unsubscribe.)
 
@@ -49,18 +57,26 @@ Kwant-devel works in the same way as kwant-discuss:
 
 - .. raw:: html
 
-      <p><form id="searchgmane" method="get" action="http://search.gmane.org/">
-      <input type="text" name="query" size=25 value="Your query" onblur="if (this.value == '') {this.value='Your query'}" onfocus="if (this.value == 'Your query') {this.value=''}" />
-      <input type="hidden" name="group" value="gmane.comp.science.kwant.devel" />
-      <input type="submit" value="Search kwant-devel" />
-      </form></p>
+    <form class="form-inline" id="searchgmane" method="get" action="http://search.gmane.org/">
+    <div class="input-group col-md-6">
+    <input type="text" class="form-control" placeholder="Search query" size=25 name="query" />
+    <input type="hidden" name="group" value="gmane.comp.science.kwant.devel" />
+    <span class="input-group-btn">
+    <input class="btn btn-default" type="submit" value="Search kwant-devel" />
+    </span>
+    </div>
+    </form>
 
 - .. raw:: html
 
-     <form method=post action="https://mailman-mail5.webfaction.com/subscribe/kwant-devel">
-     <input type="text" name="email" size=25 value="Your email address" onblur="if (this.value == '') {this.value='Your email address'}" onfocus="if (this.value == 'Your email address') {this.value=''}" />
-     <input type="submit" name="email-button" value="Subscribe to kwant-devel" />
-     </form>
+    <form class="form-inline" method=post action="https://mailman-mail5.webfaction.com/subscribe/kwant-devel">
+    <div class="input-group col-md-6">
+    <input type="text" class="form-control" placeholder="Your email address" name="email" size=25 onblur="if (this.value == '') {this.value='Your email address'}" onfocus="if (this.value == 'Your email address') {this.value=''}" />
+    <span class="input-group-btn">
+    <input class="btn btn-default" type="submit" name="email-button" value="Subscribe to kwant-devel" />
+    </span>
+    </div>
+    </form>
 
   (Use the `kwant-devel options page <https://mailman-mail5.webfaction.com/options/kwant-devel>`_ to unsubscribe.)
 
@@ -83,10 +99,14 @@ Kwant.  Only a few messages will be sent per year.  These announcements will be
 
 - .. raw:: html
 
-     <form method=post action="https://mailman-mail5.webfaction.com/subscribe/kwant-announce">
-     <input type="text" name="email" size=25 value="Your email address" onblur="if (this.value == '') {this.value='Your email address'}" onfocus="if (this.value == 'Your email address') {this.value=''}" />
-     <input type="submit" name="email-button" value="Subscribe to announcements" />
-     </form>
+    <form method=post class="form-inline" action="https://mailman-mail5.webfaction.com/subscribe/kwant-announce">
+    <div class="input-group col-md-6">
+    <input type="text" class="form-control" placeholder="Your email address" name="email" size=25 onblur="if (this.value == '') {this.value='Your email address'}" onfocus="if (this.value == 'Your email address') {this.value=''}" />
+    <span class="input-group-btn">
+    <input class="btn btn-default" type="submit" name="email-button" value="Subscribe to the announcements" />
+    </span>
+    </div>
+    </form>
 
   (Use the `kwant-announce options page <https://mailman-mail5.webfaction.com/options/kwant-announce>`_ to unsubscribe.)
 
diff --git a/content/harvard-only_trial/index.txt b/content/harvard-only_trial.txt
similarity index 100%
rename from content/harvard-only_trial/index.txt
rename to content/harvard-only_trial.txt
diff --git a/content/index.txt b/content/index.txt
index e6ef7088e9f72e60389baf87345f8f3669dd0d0b..1d5221ed89a282c7a542950efcaf4dead40e1e5d 100644
--- a/content/index.txt
+++ b/content/index.txt
@@ -1,6 +1,9 @@
 Quantum transport simulations made easy
 =======================================
 
+
+.. class:: alert alert-info
+
 **Update 2 June 2015**: Please fill out the `Kwant user survey </2015-survey>`_ and ask other Kwant users you know to do so.  Thank you for your feedback!
 
 Kwant is a `free (open source) <http://git.kwant-project.org/kwant>`_ Python
@@ -40,120 +43,134 @@ Kwant.  The tutorial section of `Kwant documentation <doc/1.0/>`_ and the
 explanations (`zipfile of all examples
 <http://downloads.kwant-project.org/examples/kwant-examples-1.0.0.zip>`_).
 
+.. class:: row
 
 Graphene flake
 ..............
 
-.. container:: rightside
+.. raw:: html
 
-   .. raw:: html
+       <object type="image/svg+xml" class="col-md-4 img-responsive" data="graphene-edgestate.svgz">graphene-edgestate.svgz</object>
+
+.. container:: col-md-8
 
-       <object type="image/svg+xml" data="graphene-edgestate.svgz" style="width: 15em;">graphene-edgestate.svgz</object>
+   The complete code that constructs the graphene flake shown on the right side is
 
-The complete code that constructs the graphene flake shown on the right side
-is::
+   .. code:: python
 
-    def disk(pos):
-        x, y = pos
-        return x**2 + y**2 < 8**2
+       def disk(pos):
+           x, y = pos
+           return x**2 + y**2 < 8**2
 
-    lat = kwant.lattice.honeycomb()
-    sys = kwant.Builder()
-    sys[lat.shape(disk, (0, 0))] = 0
-    sys[lat.neighbors()] = -1
+       lat = kwant.lattice.honeycomb()
+       sys = kwant.Builder()
+       sys[lat.shape(disk, (0, 0))] = 0
+       sys[lat.neighbors()] = -1
 
-In addition to the flake itself, the image also shows the wave function of a
-low energy eigenstate. The size of each circle is proportional to the wave
-function probability amplitude on that site.  It can be clearly seen that the
-wave function is peaked near the zigzag segments of the boundary, as `expected
-<http://arxiv.org/abs/1003.4602>`_ for graphene quantum dots.
+   In addition to the flake itself, the image also shows the wave function of a
+   low energy eigenstate. The size of each circle is proportional to the wave
+   function probability amplitude on that site.  It can be clearly seen that the
+   wave function is peaked near the zigzag segments of the boundary, as `expected
+   <http://arxiv.org/abs/1003.4602>`_ for graphene quantum dots.
 
-Taken from the Kwant `plotting tutorial <doc/1.0/tutorial/tutorial6.html>`_.
+   Taken from the Kwant `plotting tutorial <doc/1.0/tutorial/tutorial6.html>`_.
 
+.. class:: row
 
 Quantum Hall effect
 ...................
 
-.. container:: rightside
-
-   .. raw:: html
+.. raw:: html
 
-       <object type="image/svg+xml" data="qhe-edgestate.svgz" style="width: 15em;">qhe-edgestate.svgz</object>
+       <object type="image/svg+xml" class="col-md-4 img-responsive" data="qhe-edgestate.svgz">qhe-edgestate.svgz</object>
 
-.. container:: leftside
+.. container:: col-md-4
 
-   .. raw:: html
+   One of the most common applications of Kwant is to calculate the conductance of
+   a nanoelectronic system.  The plot on the left shows the conductance through a
+   2-d electron gas as a function of magnetic flux.  The quantization of
+   conductance that is visible (plateaus) is the hallmark of the quantum Hall
+   effect.  The third plateau does not develop due to a constriction in the system
+   that leads to backscattering.  The scattering wave function from the left lead
+   at magnetic field strength corresponding to the middle of the third QHE plateau
+   is shown on the right.
 
-       <object type="image/svg+xml" data="qhe-plateaus.svgz" style="width: 15em;">qhe-plateaus.svgz</object>
+   Taken from example 6 of the `Kwant paper
+   <http://downloads.kwant-project.org/doc/kwant-paper.pdf>`_.
 
-One of the most common applications of Kwant is to calculate the conductance of
-a nanoelectronic system.  The plot on the left shows the conductance through a
-2-d electron gas as a function of magnetic flux.  The quantization of
-conductance that is visible (plateaus) is the hallmark of the quantum Hall
-effect.  The third plateau does not develop due to a constriction in the system
-that leads to backscattering.  The scattering wave function from the left lead
-at magnetic field strength corresponding to the middle of the third QHE plateau
-is shown on the right.
+.. raw:: html
 
-Taken from example 6 of the `Kwant paper
-<http://downloads.kwant-project.org/doc/kwant-paper.pdf>`_.
+       <object type="image/svg+xml" class="col-md-4 img-responsive" data="qhe-plateaus.svgz">qhe-plateaus.svgz</object>
 
+.. class:: row
 
 3-d system: Majorana states
 ...........................
 
-.. container:: rightside
+.. class:: col-md-4
+
+.. class:: img-responsive
 
-   .. image:: quantum-wire.png
+.. image:: quantum-wire.png
 
-Kwant allows systems of any dimensionality, for example three-dimensional ones.
-This image shows a 3-d model of a semiconducting quantum wire (gray cylinder).
-The red region is a tunnel barrier, used to measure tunneling conductance, the
-blue region is a superconducting electrode.  In this simulated device, a
-Majorana bound state appears close to the superconducting-normal interface.
+.. container:: col-md-8
 
-Taken from an unpublished work by S. Mi, A. R. Akhmerov, and M. Wimmer.
+   Kwant allows systems of any dimensionality, for example three-dimensional ones.
+   This image shows a 3-d model of a semiconducting quantum wire (gray cylinder).
+   The red region is a tunnel barrier, used to measure tunneling conductance, the
+   blue region is a superconducting electrode.  In this simulated device, a
+   Majorana bound state appears close to the superconducting-normal interface.
 
+   Taken from an unpublished work by S. Mi, A. R. Akhmerov, and M. Wimmer.
+
+.. class:: row
 
 Numerical experiment: flying qubit
 ..................................
 
-.. container:: rightside
+.. container:: col-md-8
+
+   Numerical simulations and experimental results for a flying qubit sample made in
+   a GaAs/GaAlAs heterostrucutre. The Kwant simulations were performed with
+   particular attention to a realistic model of the confining potential seen by the
+   electrons.  This allows for rather subtle aspects of the experiment could be
+   reproduced.  Such "numerical experiments" can not only be used to interpret the
+   experimental data but also can help to design the sample geometry and in to
+   choose the right materials.
 
-   .. image:: flying-qubit.png
+   Taken from an unpublished work by T. Bautze et al.  See Yamamoto et al., `Nature
+   Nanotechnology 7, 247 (2012) <http://dx.doi.org/doi:10.1038/nnano.2012.28>`_ for
+   details about the experiment.
 
-Numerical simulations and experimental results for a flying qubit sample made in
-a GaAs/GaAlAs heterostrucutre. The Kwant simulations were performed with
-particular attention to a realistic model of the confining potential seen by the
-electrons.  This allows for rather subtle aspects of the experiment could be
-reproduced.  Such "numerical experiments" can not only be used to interpret the
-experimental data but also can help to design the sample geometry and in to
-choose the right materials.
+.. class:: col-md-3
 
-Taken from an unpublished work by T. Bautze et al.  See Yamamoto et al., `Nature
-Nanotechnology 7, 247 (2012) <http://dx.doi.org/doi:10.1038/nnano.2012.28>`_ for
-details about the experiment.
+.. class:: img-responsive
 
+.. image:: flying-qubit.png
+
+.. class:: row
 
 Conductance of a Corbino disk in a quantum Hall regime
 ......................................................
 
-.. container:: leftside
-
    .. raw:: html
 
-       <object type="image/svg+xml" data="corbino-layout.svgz" style="width: 15em;">corbino-layout.svgz</object>
+       <object type="image/svg+xml" class="col-md-3 img-responsive" data="corbino-layout.svgz">corbino-layout.svgz</object>
+
+.. container:: col-md-4
+
+   Transport properties of a Corbino disk across a quantum Hall transition. Left:
+   geometry of the sample consisting of a ring-shaped two-dimensional electron gas
+   (grey) in a perpendicular magnetic field.  Right: conductance across the
+   transition, showing quantized conductance peaks.
 
-.. container:: rightside
+   Taken from I. C. Fulga, F. Hassler, A. R. Akhmerov, C. W. J. Beenakker,
+   `Phys. Rev. B 84, 245447 (2011)
+   <http://link.aps.org/doi/10.1103/PhysRevB.84.245447>`_; `arXiv:1110.4280
+   <http://arxiv.org/abs/1110.4280>`_.
 
-   .. image:: corbino-conductance.png
+.. class:: col-md-3
 
-Transport properties of a Corbino disk across a quantum Hall transition. Left:
-geometry of the sample consisting of a ring-shaped two-dimensional electron gas
-(grey) in a perpendicular magnetic field.  Right: conductance across the
-transition, showing quantized conductance peaks.
+.. class:: img-responsive
 
-Taken from I. C. Fulga, F. Hassler, A. R. Akhmerov, C. W. J. Beenakker,
-`Phys. Rev. B 84, 245447 (2011)
-<http://link.aps.org/doi/10.1103/PhysRevB.84.245447>`_; `arXiv:1110.4280
-<http://arxiv.org/abs/1110.4280>`_.
+.. image:: corbino-conductance.png
diff --git a/themes/.keep b/themes/.keep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/themes/kwant/assets/css/custom.css b/themes/kwant/assets/css/custom.css
new file mode 100644
index 0000000000000000000000000000000000000000..e86d281956e3d35f7af68134e9fdc03cc7b6a357
--- /dev/null
+++ b/themes/kwant/assets/css/custom.css
@@ -0,0 +1,20 @@
+.navbar-header {
+    float: left;
+    padding: 15px;
+    text-align: center;
+    width: 100%;
+}
+
+.navbar-brand {float:none;}
+
+.navbar-nav {
+    margin: 0 auto;
+    display: table;
+    table-layout: auto;
+    float: none;
+}
+.navbar-nav>li {
+    display: table-cell;
+    float: none;
+    text-align: center;
+}
diff --git a/themes/kwant/parent b/themes/kwant/parent
new file mode 100644
index 0000000000000000000000000000000000000000..5ad7cd9d58576e35134ce263e202bdd68c182087
--- /dev/null
+++ b/themes/kwant/parent
@@ -0,0 +1 @@
+bootstrap3-jinja
diff --git a/themes/kwant/templates/base.tmpl b/themes/kwant/templates/base.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..3b18c73b7110ed71b18918d7e99217ffecfc57d0
--- /dev/null
+++ b/themes/kwant/templates/base.tmpl
@@ -0,0 +1,94 @@
+{#  -*- coding: utf-8 -*- #}
+{% import 'base_helper.tmpl' as base with context %}
+{% import 'annotation_helper.tmpl' as notes with context %}
+{{ set_locale(lang) }}
+{{ base.html_headstart() }}
+{% block extra_head %}
+{#  Leave this block alone. #}
+{% endblock %}
+{{ template_hooks['extra_head']() }}
+</head>
+<body>
+<a href="#content" class="sr-only sr-only-focusable">{{ messages("Skip to main content") }}</a>
+
+<!-- Menubar -->
+
+<nav class="navbar navbar-default navbar-static-top" role="navigation">
+    <div class="container"><!-- This keeps the margins nice -->
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="{{ abs_link(_link("root", None, lang)) }}">
+            {% if logo_url %}
+                <img src="{{ logo_url }}" alt="{{ blog_title }}" id="logo">
+            {% endif %}
+
+            {% if show_blog_title %}
+                <span id="blog-title">{{ blog_title }}</span>
+            {% endif %}
+            </a>
+        </div><!-- /.navbar-header -->
+        <div class="collapse navbar-collapse navbar-ex1-collapse">
+            <ul class="nav navbar-nav">
+                {{ base.html_navigation_links() }}
+                {{ template_hooks['menu']() }}
+            </ul>
+            {% if search_form %}
+                {{ search_form }}
+            {% endif %}
+
+            <ul class="nav navbar-nav navbar-right">
+                {% block belowtitle %}
+                {% if translations|length > 1 %}
+                    <li>{{ base.html_translations() }}</li>
+                {% endif %}
+                {% endblock %}
+                {% if show_sourcelink %}
+                    {% block sourcelink %}{% endblock %}
+                {% endif %}
+                {{ template_hooks['menu_alt']() }}
+            </ul>
+        </div><!-- /.navbar-collapse -->
+    </div><!-- /.container -->
+</nav>
+
+<!-- End of Menubar -->
+
+<div class="container" id="content" role="main">
+    <div class="body-content">
+        <!--Body content-->
+        <div class="row">
+            {{ template_hooks['page_header']() }}
+            {% block content %}{% endblock %}
+        </div>
+        <!--End of body content-->
+
+        <footer id="footer">
+            {{ content_footer }}
+            {{ template_hooks['page_footer']() }}
+        </footer>
+    </div>
+</div>
+
+{{ base.late_load_js() }}
+    <script>$('a.image-reference:not(.islink) img:not(.islink)').parent().colorbox({rel:"gal",maxWidth:"100%",maxHeight:"100%",scalePhotos:true});</script>
+    <!-- fancy dates -->
+    <script>
+    moment.locale("{{ momentjs_locales[lang] }}");
+    fancydates({{ date_fanciness }}, {{ js_date_format }});
+    </script>
+    <!-- end fancy dates -->
+    {% block extra_js %}{% endblock %}
+    {% if annotations and post and not post.meta('noannotations') %}
+        {{ notes.code() }}
+    {% elif not annotations and post and post.meta('annotations') %}
+        {{ notes.code() }}
+    {% endif %}
+{{ body_end }}
+{{ template_hooks['body_end']() }}
+</body>
+</html>