diff --git a/base.twig b/base.twig
new file mode 100644
index 0000000000000000000000000000000000000000..1bc5632523d370c6e2d0fb99b07e812b56707c5e
--- /dev/null
+++ b/base.twig
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html class="no-js">
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+
+ <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
+ {% if meta.description %}
+ <meta name="description" content="{{ meta.description|striptags }}" />
+ {% endif %}
+ {% if meta.robots %}
+ <meta name="robots" content="{{ meta.robots }}" />
+ {% endif %}
+
+ {% if current_page %}
+ <link rel="canonical" href="{{ current_page.url }}" />
+ {% endif %}
+
+ <link rel="stylesheet" href="{{ theme_url }}/css/style.css" type="text/css" />
+ <link rel="stylesheet" href="{{ theme_url }}/css/droidsans.css" type="text/css" />
+ <link rel="stylesheet" href="{{ theme_url }}/css/fontello.css" type="text/css" />
+ {% block head %}
+ {% endblock %}
+</head>
+<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
+
+ <div id="header" role="banner">
+ <div class="container">
+ <a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1">
+ <span class="icon-menu" aria-hidden="true"></span>
+ <span class="sr-only">Toggle Menu</span>
+ </a>
+ {% if pages["_meta"].meta.logo %}
+ <div id="logo" aria-hidden="true">
+ <a href="{{ "index"|link }}">
+ <img src="{{ pages["_meta"].meta.logo|url }}" alt="" />
+ </a>
+ </div>
+ {% endif %}
+ <div id="title"{{ pages["_meta"].meta.tagline ? ' class="tagline"' }}>
+ <a href="{{ "index"|link }}">
+ <h1>{{ site_title }}</h1>
+ {{ pages["_meta"].meta.tagline|markdown }}
+ </a>
+ </div>
+ <div id="nav" role="navigation" tabindex="-1">
+ <ul>
+ {% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
+ <li{% if page.id == current_page.id %} class="active"{% endif %}>
+ <a href="{{ page.url }}">{{ page.title }}</a>
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div id="main" role="main">
+ <div class="container">
+ {% block head %}
+ {{ content }}
+ {% endblock %}
+ </div>
+ </div>
+
+ <div id="footer">
+ <div class="container">
+ <p>
+ {{ pages["_meta"].meta.license }}
+ </p>
+ <div class="social">
+ {% for social in pages["_meta"].meta.social %}
+ <a href="{{ social.url }}" title="{{ social.title }}" role="button">
+ <span class="icon-{{ social.icon }}" aria-hidden="true"></span>
+ <span class="sr-only">{{ social.title }}</span>
+ </a>
+ {% endfor %}
+ </div>
+ </div>
+ </div>
+
+ <script src="{{ theme_url }}/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
+ <script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
+ <script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>
+
+</body>
+</html>
diff --git a/index.twig b/index.twig
index 41d0055e40a2e4e3f9f6d8fdcb6fd1ee1e31ac98..41272993e26983529e7147e0e8c2dbd2b031798e 100644
--- a/index.twig
+++ b/index.twig
@@ -1,85 +1,4 @@
-<!DOCTYPE html>
-<html class="no-js">
-<head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-
- <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
- {% if meta.description %}
- <meta name="description" content="{{ meta.description|striptags }}" />
- {% endif %}
- {% if meta.robots %}
- <meta name="robots" content="{{ meta.robots }}" />
- {% endif %}
-
- {% if current_page %}
- <link rel="canonical" href="{{ current_page.url }}" />
- {% endif %}
-
- <link rel="stylesheet" href="{{ theme_url }}/css/style.css" type="text/css" />
- <link rel="stylesheet" href="{{ theme_url }}/css/droidsans.css" type="text/css" />
- <link rel="stylesheet" href="{{ theme_url }}/css/fontello.css" type="text/css" />
-</head>
-<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
-
- <div id="header" role="banner">
- <div class="container">
- <a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1">
- <span class="icon-menu" aria-hidden="true"></span>
- <span class="sr-only">Toggle Menu</span>
- </a>
- {% if pages["_meta"].meta.logo %}
- <div id="logo" aria-hidden="true">
- <a href="{{ "index"|link }}">
- <img src="{{ pages["_meta"].meta.logo|url }}" alt="" />
- </a>
- </div>
- {% endif %}
- <div id="title"{{ pages["_meta"].meta.tagline ? ' class="tagline"' }}>
- <a href="{{ "index"|link }}">
- <h1>{{ site_title }}</h1>
- {{ pages["_meta"].meta.tagline|markdown }}
- </a>
- </div>
- <div id="nav" role="navigation" tabindex="-1">
- <ul>
- {% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
- <li{% if page.id == current_page.id %} class="active"{% endif %}>
- <a href="{{ page.url }}">{{ page.title }}</a>
- </li>
- {% endfor %}
- </ul>
- </div>
- </div>
- </div>
-
- <div id="main" role="main">
- <div class="container">
- {{ content }}
- </div>
- </div>
-
- <div id="footer">
- <div class="container">
- <div class="social">
- {% for social in pages["_meta"].meta.social %}
- <a href="{{ social.url }}" title="{{ social.title }}" role="button">
- <span class="icon-{{ social.icon }}" aria-hidden="true"></span>
- <span class="sr-only">{{ social.title }}</span>
- </a>
- {% endfor %}
- </div>
- <p>
- <a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
- and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
- Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
- </p>
- </div>
- </div>
-
- <script src="{{ theme_url }}/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
- <script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
- <script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>
-
-</body>
-</html>
+{% extends base %}
+{% block content %}
+ {{ content }}
+{% endblock %}