Revamp the documentation skin

.gitignore

@@ -1 +1,2 @@
-build/
+_build
+build

_themes/borg/guides.html

@@ -0,0 +1,35 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ docstitle }}{% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ pathto('_static/css/documentation.css', 1) }}">
+{% endblock %}
+
+{% block page %}
+   <section class="documentation">
+       <nav class="sidebar">
+            <div class="toc">
+                <h3>Chapters</h3>
+                {% set toctree = toctree(maxdepth=2, collapse=True, includehidden=True) %}
+                {% if toctree %}
+                    {{ toctree }}
+                {% else %}
+                    {{ toc }}
+                {% endif %}
+            </div>
+       </nav>
+
+       <section class="text">
+           {{ body }}
+
+           {% if prev %}
+           <dl class="prev"><dt>Previous chapter</dt><dd><a href="{{ prev.link|e }}">{{ prev.title }}</a></dd></dl>
+           {% endif %}
+
+           {% if next %}
+           <dl class="next"><dt>Next chapter</dt><dd><a href="{{ next.link|e }}">{{ next.title }}</a></dd></dl>
+           {% endif %}
+       </section>
+   </section>
+{% endblock %}

_themes/borg/index.html

@@ -0,0 +1,80 @@
+{% extends "layout.html" %}
+
+{% block title %}Behat — a php framework for autotesting your business expectations.{% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ pathto('_static/css/homepage.css', 1) }}">
+{% endblock %}
+
+{% block page %}
+   <div class="big-logo clearfix">
+       <img class="b" src="{{ pathto('_static/images/b@2x.png', 1)}}">
+       <img class="behat" src="{{ pathto('_static/images/behat@2x.png', 1) }}">
+   </div>
+
+   <span class="slogan">
+       A <strong>php</strong> framework for autotesting your <strong>business</strong> expectations.
+   </span>
+
+   <nav class="gates clearfix">
+       <a class="introduction" href="{{ pathto('quick_start') }}">
+           Read quick introduction
+       </a>
+       <a class="documentation" href="{{ pathto('guides') }}">
+           Read the documentation
+       </a>
+   </nav>
+
+    <section class="why clearfix">
+        <p>Behat is an open source <a href="http://en.wikipedia.org/wiki/Behavior-driven_development">Behavior-Driven Development</a> framework for
+            <strong>PHP</strong>.
+            It is a tool to support you in delivering <em>software that matters</em> through
+            continous communication, deliberate discovery and
+            test-automation.</p>
+
+        <div class="why-right communication clearfix">
+            <h4>Focused on communication</h4>
+
+            <p>Behat is like no other testing framework you have used. Instead of
+                proving that your system was built right, it helps you to build the right system in
+                the first place by facilitating and enriching requirements communication.</p>
+        </div>
+
+        <div class="why-left php clearfix">
+            <h4>Built from the ground up for the PHP community</h4>
+
+            <p>Behat was built from the ground up for PHP and it is a great PHP library to the core.
+                The codebase heavily uses Symfony2 components, religiously follows PSR standards
+                and has an incredibly high ratings according to major language static analysis tools.
+                This all basically means that as a PHP developer, with Behat you will always feel
+                like home.</p>
+        </div>
+
+        <div class="why-right extensions clearfix">
+            <h4>Extendable to the core</h4>
+
+            <p>Behat is very extensible. Almost every bit of the framework
+                functionality could be enhanced or even replaced through the powerful
+                extension system. There are plenty extensions already available.</p>
+        </div>
+    </section>
+
+    <section class="community clearfix">
+        <div class="community-links clearfix">
+            <h4>Join <strong>behat</strong> community</h4>
+
+            <div class="first clearfix">
+                <p>GitHub</p>
+                <a href="https://github.com/Behat">@Behat</a>
+            </div>
+            <div class="clearfix">
+                <p>Twitter</p>
+                <a href="https://twitter.com/BehatPHP">@BehatPHP</a>
+            </div>
+            <div class="clearfix">
+                <p>Google group</p>
+                <a href="https://groups.google.com/forum/#!forum/behat">#!forum/behat<br></a>
+            </div>
+        </div>
+    </section>
+{% endblock %}

_themes/borg/layout.html

@@ -1,52 +1,48 @@
-{%- extends "basic/layout.html" %}
-
-{% set script_files = script_files + [] %}
-{% set css_files = css_files + ['_static/css/normalize.css', '_static/css/borg.css', '_static/css/documentation.css', '_static/css/pygments.css', 'http://fonts.googleapis.com/css?family=Comfortaa'] %}
-
-{# do not display relbars #}
-{% block relbar1 %}{% endblock %}
-{% block relbar2 %}{% endblock %}
-
-{% block content %}
-    <header>
-        <a class="logo" href="http://behat.org">behat</a>
-
-        <nav>
-            <ul>
-                <li><a href="http://behat.org">About</a></li>
-                <li class="active"><a href="/">Docs</a></li>
-            </ul>
-        </nav>
-
-        <a class="fork" href="https://github.com/Behat/Behat">Fork us</a>
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0">
+    <title>{% block title %}{% endblock %}</title>
+    <link rel="stylesheet" href="{{ pathto('_static/css/standardize.css', 1) }}">
+    <link rel="stylesheet" href="{{ pathto('_static/css/layout.css', 1) }}">
+    <link rel="stylesheet" href="{{ pathto('_static/css/pygments.css', 1) }}">
+    {% block stylesheets %}{% endblock %}
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Comfortaa" />
+</head>
+<body class="body page-homepage clearfix">
+
+    <header class="clearfix">
+        <div class="header-center">
+            <a href="{{ pathto('index') }}"><img class="nav-logo" src="{{ pathto('_static/images/logo@2x.png', 1) }}"></a>
+            <nav class="clearfix">
+                    <a class="section {% if pagename == 'guides' %}active{% endif %}" href="{{
+                            pathto('guides') }}">
+                    Guides
+                </a>
+                <a class="section {% if pagename == 'community' %}active{% endif %}"
+                   href="{{ pathto('community') }}">
+                    Community
+                </a>
+                <a class="section" href="https://github.com/Behat/Behat/blob/master/CHANGELOG.md#change-log">
+                    Releases
+                </a>
+                <a class="fork-us" href="https://github.com/Behat/Behat">GitHub</a>
+            </nav>
+        </div>
     </header>
 
-    <section>
-
-        <nav class="toc">
-            <h3>Chapters</h3>
-            {% set toctree = toctree(maxdepth=2, collapse=True, includehidden=True) %}
-            {% if toctree %}
-                {{ toctree }}
-            {% else %}
-                <!-- Local TOC -->
-                <div class="local-toc">{{ toc }}</div>
-            {% endif %}
-        </nav>
-        <section class="text">
-            {% block body %}{% endblock %}
-            <footer>
-                {% if prev %}
-                <dl><dt>Previous</dt> <dd><a class="prev" href="{{ prev.link|e }}">{{ prev.title }}</a></dd></dl>
-                {% endif %}
-
-                {% if next %}
-                <dl><dt>Next</dt><dd><a class="next" href="{{ next.link|e }}">{{ next.title }}</a></dd></dl>
-                {% endif %}
-            </footer>
-        </section>
-
+    <section class="page clearfix">
+    {% block page %}{% endblock %}
     </section>
-{% endblock %}
 
-{% block footer %}{% endblock %}
+    <footer class="clearfix">
+        <div class="footer-center">
+            <span class="copyright">Copyright © 2011-2016 Konstantin Kudryashov.</span>
+            <a class="github" href="https://github.com/Behat"></a>
+            <a class="twitter" href="https://twitter.com/BehatPHP"></a>
+        </div>
+    </footer>
+
+</body>
+</html>

_themes/borg/page.html

@@ -0,0 +1,5 @@
+{% if pagename == 'index' %}
+    {% extends "index.html" %}
+{% else %}
+    {% extends "guides.html" %}
+{% endif %}