Split stylesheets.

Fixes #32

assets/sass/base/_code.sass

@@ -1,18 +0,0 @@
-pre
-    display: block
-    overflow: auto
-    word-break: normal
-    word-wrap: no-wrap
-
-pre[class*="language-"]
-    border: 0
-    border-radius: 0
-    margin: 1.5em 0
-
-pre code
-    white-space: pre
-    word-break: normal
-
-code.hljs
-    background-color: inherit
-    padding: 0

assets/sass/blog-post.sass

@@ -0,0 +1,39 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix'
+
+.post-pager
+    clear: both
+    margin-top: 2em
+
+.post-pager div
+    flex: 1
+
+pre
+    display: block
+    overflow: auto
+    word-break: normal
+    word-wrap: no-wrap
+
+pre[class*="language-"]
+    border: 0
+    border-radius: 0
+    margin: 1.5em 0
+
+pre code
+    white-space: pre
+    word-break: normal
+
+code.hljs
+    background-color: inherit
+    padding: 0
+
+code[data-gist-id]
+    background: transparent
+    padding: 0
+
+.about-author
+    +clearfix
+
+    img
+        float: left
+        margin: 0 1em 1em 0
+        width: 50px

assets/sass/blog.sass

@@ -1,3 +1,5 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix'
+
 .page--blog__list
     ul.posts
         list-style: none

assets/sass/components/_about-author.sass

@@ -1,7 +0,0 @@
-.about-author
-    +clearfix
-
-    img
-        float: left
-        margin: 0 1em 1em 0
-        width: 50px

assets/sass/experience.sass

@@ -1,3 +1,7 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix'
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables'
+@import 'mixins'
+
 .experience-item
     margin-bottom: $padding-large-vertical * 3
     +clearfix

assets/sass/main.sass

@@ -0,0 +1,12 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap'
+
+@import 'base'
+@import 'mixins'
+
+@import 'base/layout'
+@import 'base/typography'
+
+@import 'components/availability'
+@import 'components/badges'
+@import 'components/footer'
+@import 'components/meetups'

assets/sass/project.sass

@@ -1,3 +1,6 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables'
+@import 'mixins'
+
 .project-company
     &.has-logo
         a:link,

assets/sass/site.sass

@@ -1,21 +0,0 @@
-@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap'
-
-@import 'base'
-@import 'mixins'
-
-@import 'base/layout'
-@import 'base/typography'
-@import 'base/code'
-
-@import 'components/about-author'
-@import 'components/availability'
-@import 'components/badges'
-@import 'components/blog-list'
-@import 'components/footer'
-@import 'components/meetups'
-@import 'components/page-about'
-@import 'components/page-post'
-@import 'components/page-experience'
-@import 'components/page-talk'
-@import 'components/project-company'
-@import 'components/testimonials'

assets/sass/talk.sass

@@ -0,0 +1,14 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables'
+@import 'mixins'
+
+.talk-full h1
+    margin-bottom: 25px
+
+.presentation
+    background: url('../images/loading.gif') no-repeat center
+    min-height: 275px
+    width: 100%
+    +tablet
+        min-height: 460px
+    +desktop
+        min-height: 540px

assets/sass/talks-table.sass

@@ -1,15 +1,3 @@
-.talk-full h1
-    margin-bottom: 25px
-
-.presentation
-    background: url('../images/loading.gif') no-repeat center
-    min-height: 275px
-    width: 100%
-    +tablet
-        min-height: 460px
-    +desktop
-        min-height: 540px
-
 .talk-event-table
     & > thead > tr > th,
     & > tbody > tr > td

assets/sass/testimonials.sass

@@ -1,3 +1,7 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix'
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables'
+@import 'mixins'
+
 .testimonial
     +clearfix
     margin-bottom: 10px

gulpfile.js

@@ -20,12 +20,10 @@ var config = {
     }
 };
 
-gulp.task('styles', function () {
+var app = {};
-    return gulp.src([
+
-        config.bowerDir + '/font-awesome/css/font-awesome.css',
+app.sass = function (sourceFiles, filename) {
-        config.bowerDir + '/prism/themes/prism-twilight.css',
+    return gulp.src(sourceFiles)
-        config.sass.sourceDir + config.sass.pattern
-    ])
         .pipe(plugins.plumber())
         .pipe(plugins.if(!config.production, plugins.sourcemaps.init()))
         .pipe(plugins.sassGlob())
@@ -34,7 +32,7 @@ gulp.task('styles', function () {
             browsers: ["last 2 versions", "> 5%"],
             cascade: false
         }))
-        .pipe(plugins.concat('site.css'))
+        .pipe(plugins.concat(filename))
         .pipe(plugins.if(config.production, plugins.purifycss([
             'source/**/*.html',
             'source/**/*.md',
@@ -44,6 +42,25 @@ gulp.task('styles', function () {
         .pipe(plugins.if(!config.production, plugins.sourcemaps.write('.')))
         .pipe(plugins.if(!config.production, plugins.refresh()))
         .pipe(gulp.dest(config.sass.outputDir));
+}
+
+gulp.task('styles', function () {
+    app.sass([
+        config.bowerDir + '/font-awesome/css/font-awesome.css',
+        config.sass.sourceDir + '/main.sass'
+    ], 'main.css');
+
+    app.sass(config.sass.sourceDir + '/about.sass', 'about.css');
+    app.sass(config.sass.sourceDir + '/blog.sass', 'blog.css');
+    app.sass([
+        config.bowerDir + '/prism/themes/prism-twilight.css',
+        config.sass.sourceDir + '/blog-post.sass'
+    ], 'blog-post.css');
+    app.sass(config.sass.sourceDir + '/experience.sass', 'experience.css');
+    app.sass(config.sass.sourceDir + '/project.sass', 'project.css');
+    app.sass(config.sass.sourceDir + '/talk.sass', 'talk.css');
+    app.sass(config.sass.sourceDir + '/talks-table.sass', 'talks-table.css');
+    app.sass(config.sass.sourceDir + '/testimonials.sass', 'testimonials.css');
 });
 
 gulp.task('scripts', function () {

source/_partials/head.twig

@@ -1,24 +0,0 @@
-<head>
-    {% include 'title' %}
-
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    {% if page.meta.description %}
-        <meta name="description" content="{{ page.meta.description|e('html') }}">
-    {% endif %}
-
-    {% include 'og' with { og: page.meta.og } %}
-
-    <link rel="stylesheet" href="{{ site.url }}/assets/css/site.css">
-    {% block styles %}{% endblock %}
-
-    {% for size in site.apple_touch_icon_sizes %}
-        <link rel="apple-touch-icon" href="{{ site.avatar.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
-    {% endfor %}
-
-    {% for size in site.favicon_sizes %}
-        <link rel="icon" href="{{ site.avatar.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
-    {% endfor %}
-</head>

source/_views/default.twig

@@ -1,6 +1,29 @@
 <!DOCTYPE html>
 <html class="no-js" lang="en-GB">
-    {% include 'head' %}
+    <head>
+    {% include 'title' %}
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {% if page.meta.description %}
+        <meta name="description" content="{{ page.meta.description|e('html') }}">
+    {% endif %}
+
+    {% include 'og' with { og: page.meta.og } %}
+
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
+    {% block stylesheets '' %}
+
+    {% for size in site.apple_touch_icon_sizes %}
+        <link rel="apple-touch-icon" href="{{ site.avatar.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
+    {% endfor %}
+
+    {% for size in site.favicon_sizes %}
+        <link rel="icon" href="{{ site.avatar.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
+    {% endfor %}
+</head>
 
     <body class="{{ page.blocks.body_classes }}">
         {% include 'nav' %}
@@ -9,9 +32,7 @@
             <div class="row">
                 <main class="col-md-9">
                     {% block content_top %}{% endblock %}
-                    {% block content_wrapper %}
+                    {% block content_wrapper %}{% block content %}{% endblock %}{% endblock %}
-                        {% block content %}{% endblock %}
-                    {% endblock %}
                     {% block content_bottom %}{% endblock %}
                 </main>
 
@@ -21,6 +42,6 @@
 
         {% include 'footer' %}
 
-        {% block scripts %}{% endblock %}
+        {% block scripts '' %}
     </body>
 </html>

source/_views/post.twig

@@ -11,3 +11,7 @@
     {% include 'post/pager' %}
     {% include 'post/about-author' %}
 {% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/blog-post.css">
+{% endblock %}

source/_views/project.twig

@@ -11,3 +11,7 @@
     {% include 'project/skills' %}
     {% include 'project/company' %}
 {% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/project.css">
+{% endblock %}

source/_views/talk.twig

@@ -15,3 +15,8 @@
     {% include 'talk/video' %}
     {% include 'talk/events' %}
 {% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/talk.css">
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/talks-table.css">
+{% endblock %}

source/blog.html

@@ -41,3 +41,7 @@ use: [posts]
 {% endblock %}
 
 {% block body_classes 'page--blog page--blog__list' %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/blog.css">
+{% endblock %}

source/experience.twig

@@ -99,11 +99,17 @@ experiences:
           Maintaining and adding new features to the Horse & Country TV website (Drupal 6).
 use: [posts]
 ---
-<h1>Experience</h1>
+{% block content %}
+    <h1>Experience</h1>
 
-{% for experience in page.experiences %}
+    {% for experience in page.experiences %}
-    {% include "experience/item" with {
+        {% include "experience/item" with {
-        experience: experience,
+            experience: experience,
-        company: site.companies[experience.company]
+            company: site.companies[experience.company]
-    } %}
+        } %}
-{% endfor %}
+    {% endfor %}
+{% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/experience.css">
+{% endblock %}

source/index.md

@@ -18,6 +18,7 @@ tools:
     - { title: Ansible, website: http://www.ansible.com }
 use: [posts, testimonials]
 ---
+{% block content %}
 # About Me
 
 <img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="me img-circle">
@@ -47,6 +48,11 @@ I’m a provisional member of the [Drupal Security team][14] and a webmaster and
 - [Stack Overflow][37]
 - [Disqus][38]
 - IRC (freenode) - {{ site.irc.name }}
+{% endblock %}
+
+{% block stylesheets %}
+<link rel="stylesheet" href="{{ site.url }}/assets/css/about.css">
+{% endblock %}
 
 [1]: https://www.google.com/#q=opdavies
 [2]: https://www.drupal.org

source/talks.twig

@@ -5,40 +5,46 @@ meta:
     description: 'Information about previous and upcoming talks that Oliver has presented at conferences and user groups'
 use: [talks, posts]
 ---
-<h1>Talks</h1>
+{% block content %}
+    <h1>Talks</h1>
 
-<p>I regularly speak at conferences and user groups about a range of subjects including Drupal, Sculpin and Git. If you would like to me to speak at your group or conference, please <a href="/contact/">get in touch</a>.</p>
+    <p>I regularly speak at conferences and user groups about a range of subjects including Drupal, Sculpin and Git. If you would like to me to speak at your group or conference, please <a href="/contact/">get in touch</a>.</p>
 
-<p>There is also information about events that I’ve attended and spoken at on my <a href="{{ site.lanyrd.url }}">Lanyrd</a> and <a href="{{ site.joindin.url }}">Joind.in</a> profiles.</p>
+    <p>There is also information about events that I’ve attended and spoken at on my <a href="{{ site.lanyrd.url }}">Lanyrd</a> and <a href="{{ site.joindin.url }}">Joind.in</a> profiles.</p>
 
-{% set upcoming_events = [] %}
+    {% set upcoming_events = [] %}
-{% set past_events = [] %}
+    {% set past_events = [] %}
 
-{% for talk in data.talks %}
+    {% for talk in data.talks %}
-    {% for event in talk.events if event.date >= 'today'|date('Y-m-d') %}
+        {% for event in talk.events if event.date >= 'today'|date('Y-m-d') %}
-        {% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
+            {% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
-        {% set upcoming_events = upcoming_events|merge([event]) %}
+            {% set upcoming_events = upcoming_events|merge([event]) %}
+        {% endfor %}
+
+        {% for event in talk.events if event.date < 'today'|date('Y-m-d') %}
+            {% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
+            {% set past_events = past_events|merge([event]) %}
+        {% endfor %}
     {% endfor %}
 
-    {% for event in talk.events if event.date < 'today'|date('Y-m-d') %}
+    {% if upcoming_events is not empty %}
-        {% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
+        <h2>Upcoming Talks</h2>
-        {% set past_events = past_events|merge([event]) %}
-    {% endfor %}
-{% endfor %}
 
-{% if upcoming_events is not empty %}
+        {% include "talks-table" with {
-    <h2>Upcoming Talks</h2>
+            events: upcoming_events|sortbyfield('date'),
+            hide_feedback: true,
+        } %}
+    {% endif %}
+
+    <h2>Last 5 Talks</h2>
 
     {% include "talks-table" with {
-        events: upcoming_events|sortbyfield('date'),
+        events: past_events|sortbyfield('date')|reverse[:5]
-        hide_feedback: true,
     } %}
-{% endif %}
 
-<h2>Last 5 Talks</h2>
+    <p>You can view more talks in the <a href="/talks/archive">talks archive</a>.</p>
+{% endblock %}
 
-{% include "talks-table" with {
+{% block stylesheets %}
-    events: past_events|sortbyfield('date')|reverse[:5]
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/talks-table.css">
-} %}
+{% endblock %}
-
-<p>You can view more talks in the <a href="/talks/archive">talks archive</a>.</p>

source/testimonials.twig

@@ -89,3 +89,7 @@ use: [posts]
 {% endblock %}
 
 {% block body_classes 'page--testimonials' %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/testimonials.css">
+{% endblock %}