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

Replace bootstrap with Bulma

Browse source
This commit is contained in:
Oliver Davies 2017-08-06 19:01:22 +01:00
parent 4e851429d8
commit fbec98acaf
20 changed files with 126 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
assets/js/main.js
View file

@ -1,4 +1,9 @@
(function ($) { (function ($) {
// Update the HTML classes. $('html.no-js').addClass('js').removeClass('no-js');
$('html.no-js').removeClass('no-js').addClass('js');
$('.nav-toggle').on('click', function (e) {
e.preventDefault();
$(this).siblings('.nav-right').toggleClass('is-active');
})
})(jQuery); })(jQuery);

14
assets/sass/base/_layout.sass
View file

@ -11,15 +11,15 @@
flex-wrap: wrap flex-wrap: wrap
.list-style-none .list-style-none
list-style: none list-style: none !important
.align-items-center .align-items-center
align-items: center align-items: center
@each $value in 'block', 'inline', 'inline-block', 'flex' //@each $value in 'block', 'inline', 'inline-block', 'flex'
.display-#{$value}, // .display-#{$value},
.is-#{$value}, // .is-#{$value},
display: #{$value} // display: #{$value}
@each $value in 'top', 'middle', 'bottom' @each $value in 'top', 'middle', 'bottom'
.table .table
@ -32,10 +32,6 @@
&.vertical-#{$value} &.vertical-#{$value}
vertical-align: #{$value} vertical-align: #{$value}
@for $value from 2 through 5
.is-#{$value}
width: calc(100% / #{$value})
$properties: ( mb: 'margin-bottom', ml: 'margin-left', mr: 'margin-right', mt: 'margin-top', pb: 'padding-bottom', pl: 'padding-left', pr: 'padding-right', pt: 'padding-top' ) $properties: ( mb: 'margin-bottom', ml: 'margin-left', mr: 'margin-right', mt: 'margin-top', pb: 'padding-bottom', pl: 'padding-left', pr: 'padding-right', pt: 'padding-top' )
@each $key, $property in $properties @each $key, $property in $properties
@for $value from 1 through 5 @for $value from 1 through 5

3
assets/sass/base/_utilities.sass
View file

@ -1,2 +1,5 @@
.is-borderless
border: none !important
.is-circle .is-circle
border-radius: 50% border-radius: 50%

9
assets/sass/pages/_blog.sass
View file

@ -1,11 +1,10 @@
.page--blog__list .page--blog__list
ul.posts ul.posts
list-style: none //list-style: none
margin-bottom: 2em margin-bottom: 2em
padding-left: 0 margin-left: 0
margin-top: 0
//padding-left: 0
.post .post
+clearfix
border-bottom: 1px solid #CCC border-bottom: 1px solid #CCC
margin-bottom: 1em
padding-bottom: 2em

15
assets/sass/pages/_post.sass
View file

@ -1,10 +1,3 @@
.post-pager
clear: both
margin-top: 2em
.post-pager div
flex: 1
pre pre
display: block display: block
overflow: auto overflow: auto
@ -14,7 +7,6 @@ pre
pre[class*="language-"] pre[class*="language-"]
border: 0 border: 0
border-radius: 0 border-radius: 0
margin: 1.5em 0
pre code pre code
white-space: pre white-space: pre
@ -28,8 +20,5 @@ code[data-gist-id]
background: transparent background: transparent
padding: 0 padding: 0
.about-author .about-author img
img width: 50px
// float: left
// margin: 0 1em 1em 0
width: 50px

7
assets/sass/pages/_talk.sass
View file

@ -1,9 +1,4 @@
@import '../mixins' .talk-slides
.talk-full h1
margin-bottom: 25px
.presentation
background: url('../images/loading.gif') no-repeat center background: url('../images/loading.gif') no-repeat center
min-height: 275px min-height: 275px
width: 100% width: 100%

13
assets/sass/pages/_testimonials.sass
View file

@ -1,10 +1,3 @@
@import '../mixins' .testimonial-image
height: 75px
.testimonial width: 75px
+clearfix
margin-bottom: 10px
&__image
height: 75px
margin: 0 0 10px 10px
width: 75px

5
gulpfile.js
View file

@ -31,10 +31,9 @@ gulp.task('styles',
gulp.task('scripts', gulp.task('scripts',
addScript([ addScript([
'node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap-sass/assets/javascripts/bootstrap.js',
'node_modules/prismjs/prism.js', 'node_modules/prismjs/prism.js',
'node_modules/prismjs/components/prism-{apacheconf,bash,css,diff,ini,json,nginx,php,sass,scss,sql,less,twig,xml,yaml}.js', 'node_modules/prismjs/components/prism-{apacheconf,bsash,css,diff,ini,json,nginx,php,sass,scss,sql,less,twig,xml,yaml}.js',
config.js.sourceDir + config.js.pattern config.js.sourceDir + '/**/*.js'
], 'site.js') ], 'site.js')
); );

1
package.json
View file

@ -1,6 +1,5 @@
{ {
"dependencies": { "dependencies": {
"bootstrap-sass": "^3.3.7",
"bulma": "^0.5.0", "bulma": "^0.5.0",
"del": "^3.0.0", "del": "^3.0.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",

58
source/_includes/nav.html.twig
View file

@ -1,31 +1,41 @@
<nav class="navbar"> <nav class="nav has-shadow" id="top">
<div class="container"> <div class="container">
<div id="navMenuExample" class="navbar-menu"> <div class="nav-left">
<div class="navbar-start"> <a class="nav-item">
<a class="navbar-item {{ page.url == '/.' ? 'is-active' }}" href="/"> <div class="nav-item">{{ site.title }}</div>
About </a>
</a> </div>
<a class="navbar-item {{ page.url == '/experience' ? 'is-active' }}" href="/experience"> <span class="nav-toggle">
Experience <span></span>
</a> <span></span>
<span></span>
</span>
<a class="navbar-item {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials"> <div class="nav-right nav-menu">
Testimonials <a class="nav-item is-tab {{ page.url == '/.' ? 'is-active' }}" href="/">
</a> About
</a>
<a class="navbar-item {{ page.url == '/talks' or '/talks/' in page.url }}" href="/talks"> <a class="nav-item is-tab {{ page.url == '/experience' ? 'is-active' }}" href="/experience">
Talks Experience
</a> </a>
<a class="navbar-item {{ page.url == '/blog' or '/blog/' in page.url }}" href="/blog"> <a class="nav-item is-tab {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">
Blog Testimonials
</a> </a>
<a class="navbar-item {{ page.url == '/contact' or '/contact/' in page.url }}" href="/contact"> <a class="nav-item is-tab {{ page.url == '/talks' or '/talks/' in page.url ? 'is-active' }}" href="/talks">
Contact Talks
</a> </a>
</div>
</div> <a class="nav-item is-tab {{ page.url == '/blog' or '/blog/' in page.url ? 'is-active' }}" href="/blog">
Blog
</a>
<a class="nav-item is-tab {{ page.url == '/contact' or '/contact/' in page.url ? 'is-active' }}" href="/contact">
Contact
</a>
</div>
</div> </div>
</nav> </nav>

6
source/_includes/post/pager.html.twig
View file

@ -1,6 +1,6 @@
<div class="post-pager is-flex"> <div class="post-pager is-clearfix is-flex mt-2">
{% if page.previous_post %} {% if page.previous_post %}
<div class="is-half"> <div class="is-half flex">
<a href="{{ page.previous_post.url }}"> <a href="{{ page.previous_post.url }}">
&laquo; {{ page.previous_post.title }} &laquo; {{ page.previous_post.title }}
</a> </a>
@ -8,7 +8,7 @@
{% endif %} {% endif %}
{% if page.next_post %} {% if page.next_post %}
<div class="is-half text-right"> <div class="is-half flex has-text-right">
<a href="{{ page.next_post.url }}"> <a href="{{ page.next_post.url }}">
{{ page.next_post.title }} &raquo; {{ page.next_post.title }} &raquo;
</a> </a>

9
source/_includes/post/tags.html.twig
View file

@ -1,8 +1,9 @@
{% if page.tags %} {% if page.tags %}
<p class="tags"> <div class="tags">
Tags:
{% for tag in page.tags %} {% for tag in page.tags %}
<a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}">{{ tag }}</a>{% if not loop.last %}, {% endif %} <a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}" class="tag is-light is-borderless">
{{- tag -}}
</a>
{% endfor %} {% endfor %}
</p> </div>
{% endif %} {% endif %}

2
source/_includes/talks-table.html.twig
View file

@ -1,5 +1,5 @@
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped talks-table"> <table class="talks-table table is-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 20%">Date</th> <th style="width: 20%">Date</th>

54
source/_layouts/default.html.twig
View file

@ -27,34 +27,38 @@
<body class="{{ page.blocks.body_classes }}"> <body class="{{ page.blocks.body_classes }}">
{% include 'nav' %} {% include 'nav' %}
<div class="container"> <section class="section">
<div class="columns"> <div class="container">
<main class="content column is-9"> <div class="columns">
{% block content_top %}{% endblock %} <main class="content column is-9">
{% block content_wrapper %}{% block content %}{% endblock %}{% endblock %} {% block content_top %}{% endblock %}
{% block content_bottom %}{% endblock %} {% block content_wrapper %}{% block content %}{% endblock %}{% endblock %}
</main> {% block content_bottom %}{% endblock %}
</main>
{% block sidebar_wrapper %} {% block sidebar_wrapper %}
<div class="column is-3"> <div class="column is-3">
{% block sidebar %} {% block sidebar %}
{% include 'badges' %} {% include 'badges' %}
{% include 'availability' %} {% include 'availability' %}
{% include 'posts/latest' %} {% include 'posts/latest' %}
{% endblock %} {% endblock %}
</div> </div>
{% endblock %} {% endblock %}
</div>{# .row #} </div>{# .row #}
</div>{# .container #} </div>{# .container #}
</section>
<footer class="container content"> <section class="section">
<p class="copyright"> <footer class="container content">
&copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>. <p class="copyright">
</p> &copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>, <a href="http://bulma.io">Bulma</a> and <a href="https://gulpjs.com">Gulp</a>.
</p>
{% include 'meetups' %} {% include 'meetups' %}
</footer> </footer>
</section>
<script src="{{ site.url }}/assets/js/site.js"></script> <script src="{{ site.url }}/assets/js/site.js"></script>
@ -62,6 +66,6 @@
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script>
{% endif %} {% endif %}
{% block scripts '' %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>

24
source/_layouts/talk.html.twig
View file

@ -1,35 +1,31 @@
{% extends 'default' %} {% extends 'page' %}
{% block body_classes 'talk talk-full' %} {% block body_classes 'talk talk-full' %}
{% block content_top %}
<h1>{{ page.title }}</h1>
{% endblock %}
{% block content_wrapper %} {% block content_wrapper %}
<div class="talk-description"> <div>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
{% if page.slides.embed %} {% if page.slides.embed %}
<div class="talk-slides mt-2"> <div class="mt-2">
<h2>Slides</h2> <h2>Slides</h2>
<div class="presentation"> <div class="talk-slides">
{{ page.slides.embed|raw }} {{ page.slides.embed|raw }}
</div>{# .presentation #} </div>
</div>{# .talk-slides #} </div>
{% endif %} {% endif %}
{% if page.video.embed %} {% if page.video.embed %}
<div class="talk-video mt-2"> <div class="mt-2">
<h2>Video</h2> <h2>Video</h2>
<div class="embed-container"> <div class="embed-container">
{{ page.video.embed|raw }} {{ page.video.embed|raw }}
</div> </div>
</div>{# .talk-video #} </div>
{% endif %} {% endif %}
<div class="talk-events mt-3"> <div class="mt-3">
<h2>Events</h2> <h2>Events</h2>
{% set events = [] %} {% set events = [] %}
@ -48,5 +44,5 @@
events: events, events: events,
talk_page: true, talk_page: true,
} %} } %}
</div>{# .talk-events #} </div>
{% endblock %} {% endblock %}

4
source/_posts/2017-05-15-drupalcamp-bristol-tickets-sessions-sponsors.md
View file

@ -16,7 +16,9 @@ meta:
slug: drupalcamp-bristol-early-bird-tickets-sessions-sponsors slug: drupalcamp-bristol-early-bird-tickets-sessions-sponsors
--- ---
{% block excerpt %} {% block excerpt %}
<img src="/assets/images/blog/drupalcamp-bristol-17-logo.jpg" alt="DrupalCamp Bristol 2017 logo" class="is-centered"> <div class="has-text-centered">
<img src="/assets/images/blog/drupalcamp-bristol-17-logo.jpg" alt="DrupalCamp Bristol 2017 logo">
</div>
In less than two months time, [DrupalCamp Bristol][0] will be back for our third year! (July seems to come around quicker each year). This is this year’s schedule and venues: In less than two months time, [DrupalCamp Bristol][0] will be back for our third year! (July seems to come around quicker each year). This is this year’s schedule and venues:

13
source/_posts/2017-07-13-publishing-sculpin-sites-with-github-pages.md
View file

@ -25,12 +25,13 @@ This made sense as I already kept the source code in [on GitHub][1], the issue w
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<img <div class="has-text-centered">
src="/assets/images/blog/jackson-octocat.png" <img
alt="" src="/assets/images/blog/jackson-octocat.png"
class="is-centered" alt=""
style="margin-bottom: 20px" style="margin-bottom: 20px"
> >
</div>
Earlier this week I moved this site from my personal Linode server to [GitHub Pages][0]. Earlier this week I moved this site from my personal Linode server to [GitHub Pages][0].

4
source/blog.html
View file

@ -9,9 +9,9 @@ use: [posts]
{% block content %} {% block content %}
<h1>Blog</h1> <h1>Blog</h1>
<ul class="posts"> <ul class="posts list-style-none">
{% for post in page.pagination.items %} {% for post in page.pagination.items %}
<li class="post"> <li class="post is-clearfix mb-2 pb-3">
{{ include('post/header', { {{ include('post/header', {
page: post, page: post,
title_tag: 'h2' title_tag: 'h2'

10
source/testimonials.html.twig
View file

@ -5,19 +5,19 @@ use: [posts]
--- ---
{% block content %} {% block content %}
{% for testimonial in site.testimonials|reverse %} {% for testimonial in site.testimonials|reverse %}
<article class="testimonial mb-3"> <article class="is-clearfix mb-3">
<h2 class="testimonial__name is-marginless">{{ testimonial.name }}</h2> <h2 class="is-marginless">{{ testimonial.name }}</h2>
{% if testimonial.image %} {% if testimonial.image %}
<img <img
class="testimonial__image is-pulled-right is-circle"
src="{{ site.url }}/assets/images/testimonials/{{ testimonial.image }}" src="{{ site.url }}/assets/images/testimonials/{{ testimonial.image }}"
class="testimonial-image is-pulled-right is-circle ml-2 mb-1"
alt="{{ testimonial.name }}" alt="{{ testimonial.name }}"
/> >
{% endif %} {% endif %}
{% if testimonial.role %} {% if testimonial.role %}
<div class="testimonial__role text-light"> <div class="text-light">
{{ testimonial.role|markdown }} {{ testimonial.role|markdown }}
</div> </div>
{% endif %} {% endif %}

4
yarn.lock
View file

@ -216,10 +216,6 @@ boom@2.x.x:
dependencies: dependencies:
hoek "2.x.x" hoek "2.x.x"
bootstrap-sass@^3.3.7:
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
brace-expansion@^1.0.0: brace-expansion@^1.0.0:
version "1.1.6" version "1.1.6"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"