opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Split stylesheets.

Browse source 
Fixes #32
This commit is contained in:
Oliver Davies 2017-05-21 22:04:57 +01:00
parent a89c270c84
commit 12aae75578
23 changed files with 199 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
assets/sass/components/_page-about.sass → assets/sass/about.sass
View file

18
assets/sass/base/_code.sass
View file

@ -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

39
assets/sass/blog-post.sass Normal file
View file

@ -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

2
assets/sass/components/_blog-list.sass → assets/sass/blog.sass
View file

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

7
assets/sass/components/_about-author.sass
View file

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

4
assets/sass/components/_page-experience.sass → assets/sass/experience.sass
View file

@ -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

12
assets/sass/main.sass Normal file
View file

@ -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'

3
assets/sass/components/_project-company.sass → assets/sass/project.sass
View file

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

21
assets/sass/site.sass
View file

@ -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'

14
assets/sass/talk.sass Normal file
View file

@ -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

12
assets/sass/components/_page-talk.sass → assets/sass/talks-table.sass
View file

@ -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

4
assets/sass/components/_testimonials.sass → assets/sass/testimonials.sass
View file

@ -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

31
gulpfile.js
View file

@ -20,12 +20,10 @@ var config = {
}
};
gulp.task('styles', function () {
return gulp.src([
config.bowerDir + '/font-awesome/css/font-awesome.css',
config.bowerDir + '/prism/themes/prism-twilight.css',
config.sass.sourceDir + config.sass.pattern
])
var app = {};
app.sass = function (sourceFiles, filename) {
return gulp.src(sourceFiles)
.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 () {

24
source/_partials/head.twig
View file

@ -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>

31
source/_views/default.twig
View file

@ -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 %}{% endblock %}
{% endblock %}
{% block content_wrapper %}{% block content %}{% endblock %}{% endblock %}
{% block content_bottom %}{% endblock %}
</main>
@ -21,6 +42,6 @@
{% include 'footer' %}
{% block scripts %}{% endblock %}
{% block scripts '' %}
</body>
</html>

4
source/_views/post.twig
View file

@ -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 %}

4
source/_views/project.twig
View file

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

5
source/_views/talk.twig
View file

@ -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 %}

4
source/blog.html
View file

@ -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 %}

20
source/experience.twig
View file

@ -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 %}
{% include "experience/item" with {
experience: experience,
company: site.companies[experience.company]
} %}
{% endfor %}
{% for experience in page.experiences %}
{% include "experience/item" with {
experience: experience,
company: site.companies[experience.company]
} %}
{% endfor %}
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ site.url }}/assets/css/experience.css">
{% endblock %}

6
source/index.md
View file

@ -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

56
source/talks.twig
View file

@ -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 past_events = [] %}
{% set upcoming_events = [] %}
{% set past_events = [] %}
{% for talk in data.talks %}
{% 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 upcoming_events = upcoming_events|merge([event]) %}
{% for talk in data.talks %}
{% 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 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') %}
{% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
{% set past_events = past_events|merge([event]) %}
{% endfor %}
{% endfor %}
{% if upcoming_events is not empty %}
<h2>Upcoming Talks</h2>
{% if upcoming_events is not empty %}
<h2>Upcoming Talks</h2>
{% include "talks-table" with {
events: upcoming_events|sortbyfield('date'),
hide_feedback: true,
} %}
{% endif %}
<h2>Last 5 Talks</h2>
{% include "talks-table" with {
events: upcoming_events|sortbyfield('date'),
hide_feedback: true,
events: past_events|sortbyfield('date')|reverse[:5]
} %}
{% 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 {
events: past_events|sortbyfield('date')|reverse[:5]
} %}
<p>You can view more talks in the <a href="/talks/archive">talks archive</a>.</p>
{% block stylesheets %}
<link rel="stylesheet" href="{{ site.url }}/assets/css/talks-table.css">
{% endblock %}

4
source/testimonials.twig
View file

@ -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 %}