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

Use bulma

Browse source
This commit is contained in:
Oliver Davies 2017-07-26 00:13:04 +01:00
parent 7d99c588e7
commit 96038c3286
13 changed files with 75 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/sass/_base.sass
View file

@ -1,9 +1,3 @@
.bg-red
background: red
body
padding-top: 60px
main main
a:link, a:link,
a:hover a:hover

21
assets/sass/main.sass
View file

@ -1,3 +1,21 @@
@import 'node_modules/bulma/sass/utilities/initial-variables'
$family-sans-serif: "Helvetica Neue", Arial, sans-serif
$body-size: 14px
$blue: #0678BE
$primary: $blue
.is-circle
border-radius: 50%
$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
@for $value from 1 through 5
.#{$key}-#{$value}
#{$property}: #{$value}em !important
@import 'node_modules/bulma/bulma' @import 'node_modules/bulma/bulma'
@import 'base' @import 'base'
@ -18,6 +36,3 @@
@import "pages/project" @import "pages/project"
@import "pages/talk" @import "pages/talk"
@import "pages/testimonials" @import "pages/testimonials"
body
background: red

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

@ -29,9 +29,7 @@ code[data-gist-id]
padding: 0 padding: 0
.about-author .about-author
+clearfix
img img
float: left // float: left
margin: 0 1em 1em 0 // margin: 0 1em 1em 0
width: 50px width: 50px

4
package.json
View file

@ -21,7 +21,7 @@
"js:watch": "onchange $npm_package_config_jsInputDir -v -- npm run js", "js:watch": "onchange $npm_package_config_jsInputDir -v -- npm run js",
"prod": "npm run production", "prod": "npm run production",
"production": "cross-env ENV=prod npm run build", "production": "cross-env ENV=prod npm run build",
"sass": "npm run sass:$ENV:compile && npm run sass:concat && npm run sass:$ENV:move", "sass": "npm run sass:concat && npm run sass:$ENV:compile && npm run sass:$ENV:move",
"sass:clean": "rm -rf $npm_package_config_cssOutputDir output_*/assets/css/", "sass:clean": "rm -rf $npm_package_config_cssOutputDir output_*/assets/css/",
"sass:concat": "mkdir -p $npm_package_config_cssOutputDir && concat node_modules/font-awesome/css/font-awesome.css node_modules/prismjs/themes/prism-twilight.css $npm_package_config_cssOutputFile -o $npm_package_config_cssOutputFile", "sass:concat": "mkdir -p $npm_package_config_cssOutputDir && concat node_modules/font-awesome/css/font-awesome.css node_modules/prismjs/themes/prism-twilight.css $npm_package_config_cssOutputFile -o $npm_package_config_cssOutputFile",
"sass:dev:compile": "node-sass assets/sass/main.sass $npm_package_config_cssOutputFile --source-map true", "sass:dev:compile": "node-sass assets/sass/main.sass $npm_package_config_cssOutputFile --source-map true",
@ -29,7 +29,7 @@
"sass:prod:compile": "node-sass assets/sass/main.sass $npm_package_config_cssOutputFile", "sass:prod:compile": "node-sass assets/sass/main.sass $npm_package_config_cssOutputFile",
"sass:prod:move": "mv $npm_package_config_cssOutputFile $npm_package_config_cssOutputDir && npm run sass:uglify", "sass:prod:move": "mv $npm_package_config_cssOutputFile $npm_package_config_cssOutputDir && npm run sass:uglify",
"sass:uglify": "uglifycss --ugly-comments $npm_package_config_cssOutputDir/$npm_package_config_cssOutputFile --output $npm_package_config_cssOutputDir/$npm_package_config_cssOutputFile", "sass:uglify": "uglifycss --ugly-comments $npm_package_config_cssOutputDir/$npm_package_config_cssOutputFile --output $npm_package_config_cssOutputDir/$npm_package_config_cssOutputFile",
"sass:watch": "onchange $npm_package_config_sassDir -v -- npm run sass" "sass:watch": "ENV=dev onchange $npm_package_config_sassDir -v -- npm run sass"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",

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

@ -1,41 +1,31 @@
<nav class="navbar navbar-inverse navbar-fixed-top"> <nav class="navbar">
<div class="container"> <div class="container">
<div class="navbar-header"> <div id="navMenuExample" class="navbar-menu">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <div class="navbar-start">
<span class="sr-only">Toggle navigation</span> <a class="navbar-item {{ page.url == '/.' ? 'is-active' }}" href="/">{% spaceless %}
<span class="icon-bar"></span> About
<span class="icon-bar"></span> {% endspaceless %}</a>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ site.url }}/">{{ site.title }}</a>
</div>
<div id="navbar" class="collapse navbar-collapse" role="navigation"> <a class="navbar-item {{ page.url == '/experience' ? 'is-active' }}" href="/experience">{% spaceless %}
<ul class="nav navbar-nav"> Experience
<li class="{{ page.url == '/.' ? 'active' }}"> {% endspaceless %}</a>
<a href="/">About</a>
</li>
<li class="{{ page.url == '/experience' ? 'active' }}"> <a class="navbar-item {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">{% spaceless %}
<a href="/experience">Experience</a> Testimonials
</li> {% endspaceless %}</a>
<li class="{{ page.url == '/testimonials' ? 'active' }}"> <a class="navbar-item {{ page.url == '/talks' or '/talks/' in page.url }}" href="/talks">{% spaceless %}
<a href="/testimonials">Testimonials</a> Talks
</li> {% endspaceless %}</a>
<li class="{{ page.url == '/talks' or '/talks/' in page.url ? 'active' }}"> <a class="navbar-item {{ page.url == '/blog' or '/blog/' in page.url }}" href="/blog">{% spaceless %}
<a href="/talks">Talks</a> Blog
</li> {% endspaceless %}</a>
<li class="{{ page.url == '/blog' or '/blog/' in page.url ? 'active' }}"> <a class="navbar-item {{ page.url == '/contact' or '/contact/' in page.url }}" href="/contact">{% spaceless %}
<a href="/blog">Blog</a> Contact
</li> {% endspaceless %}</a>
<li class="{{ page.url == '/contact' or '/contact/' in page.url ? 'active' }}">
<a href="/contact">Contact</a>
</li>
</ul>
</div>{# .nav-collapse #}
</div> </div>
</div>
</div>
</nav> </nav>

4
source/_includes/post/about-author.html.twig
View file

@ -1,7 +1,7 @@
<div class="about-author"> <div class="about-author is-clearfix mt-2">
<h2>About the Author</h2> <h2>About the Author</h2>
<img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="img-circle"> <img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="is-circle is-pulled-left mr-1 mb-1">
<p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a {{ site.work.role }} at <a href="{{ site.companies[site.work.company].url }}">{{ site.companies[site.work.company].name }}</a> and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.</p> <p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a {{ site.work.role }} at <a href="{{ site.companies[site.work.company].url }}">{{ site.companies[site.work.company].name }}</a> and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.</p>
</div> </div>

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

@ -28,7 +28,7 @@
{{ row.date.date|date(row.date.fuzzy_date ? 'F Y' : 'j F Y') }} {{ row.date.date|date(row.date.fuzzy_date ? 'F Y' : 'j F Y') }}
{% if row.date.time %} {% if row.date.time %}
<small class="display-block">{{ row.date.time }}</small> <small class="is-block">{{ row.date.time }}</small>
{% endif %} {% endif %}
</td> </td>
@ -40,7 +40,7 @@
<a href="{{ talk.url }}">{{ talk.title }}</a> <a href="{{ talk.url }}">{{ talk.title }}</a>
{% endif %} {% endif %}
<small class="display-block"> <small class="is-block">
{{ row.date.talk.type ?: talk.type }} {{ row.date.talk.type ?: talk.type }}
</small> </small>
</td> </td>
@ -55,7 +55,7 @@
{{ row.event.name }} {{ row.event.name }}
{% endif %} {% endif %}
<small class="display-block"> <small class="is-block">
{{ row.event.location }} {{ row.event.location }}
</small> </small>
</td> </td>
@ -65,10 +65,10 @@
{% if row.date.feedback %} {% if row.date.feedback %}
<a <a
href="{{ row.date.feedback }}" href="{{ row.date.feedback }}"
class="btn btn-primary" class="button is-primary"
title="Read or leave feedback for this talk" title="Read or leave feedback for this talk"
> >
<i class="fa fa-comment-o"></i> joind.in <i class="fa fa-comment-o" style="margin-right: 8px"></i> joind.in
</a> </a>
{% endif %} {% endif %}
</td> </td>

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

@ -28,15 +28,15 @@
{% include 'nav' %} {% include 'nav' %}
<div class="container"> <div class="container">
<div class="row"> <div class="columns">
<main class="content col-md-9"> <main class="content column is-9">
{% block content_top %}{% endblock %} {% block content_top %}{% endblock %}
{% block content_wrapper %}{% block content %}{% endblock %}{% endblock %} {% block content_wrapper %}{% block content %}{% endblock %}{% endblock %}
{% block content_bottom %}{% endblock %} {% block content_bottom %}{% endblock %}
</main> </main>
{% block sidebar_wrapper %} {% block sidebar_wrapper %}
<div class="col-md-3"> <div class="column is-3">
{% block sidebar %} {% block sidebar %}
{% include 'badges' %} {% include 'badges' %}
{% include 'availability' %} {% include 'availability' %}
@ -48,7 +48,7 @@
</div>{# .row #} </div>{# .row #}
</div>{# .container #} </div>{# .container #}
<footer class="container"> <footer class="container content">
<p class="copyright"> <p class="copyright">
&copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>. &copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>.
</p> </p>

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

@ -12,7 +12,7 @@
</div> </div>
{% if page.slides.embed %} {% if page.slides.embed %}
<div class="talk-slides"> <div class="talk-slides mt-2">
<h2>Slides</h2> <h2>Slides</h2>
<div class="presentation"> <div class="presentation">
{{ page.slides.embed|raw }} {{ page.slides.embed|raw }}
@ -21,7 +21,7 @@
{% endif %} {% endif %}
{% if page.video.embed %} {% if page.video.embed %}
<div class="talk-video"> <div class="talk-video mt-2">
<h2>Video</h2> <h2>Video</h2>
<div class="embed-container"> <div class="embed-container">
{{ page.video.embed|raw }} {{ page.video.embed|raw }}
@ -29,7 +29,7 @@
</div>{# .talk-video #} </div>{# .talk-video #}
{% endif %} {% endif %}
<div class="talk-events"> <div class="talk-events mt-3">
<h2>Events</h2> <h2>Events</h2>
{% set events = [] %} {% set events = [] %}

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

@ -11,12 +11,13 @@ meta:
width: 451 width: 451
--- ---
{% block excerpt %} {% block excerpt %}
<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/experience.html.twig
View file

@ -12,7 +12,7 @@ redirect:
{% for experience in site.experiences|reverse %} {% for experience in site.experiences|reverse %}
{% set company = site.companies[experience.company] %} {% set company = site.companies[experience.company] %}
<div class="experience-item{% if company.logo %} has-logo{% endif %}"> <div class="experience-item{% if company.logo %} has-logo{% endif %} mb-3">
{% if company.logo %} {% if company.logo %}
<div class="experience-item-logo"> <div class="experience-item-logo">
<img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo"> <img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
@ -23,7 +23,7 @@ redirect:
<h2>{{ company.name }}</h2> <h2>{{ company.name }}</h2>
{% if company.url -%} {% if company.url -%}
<a class="experience-item-website display-inline-block" href="{{ company.url }}"> <a class="experience-item-website is-inline-block" href="{{ company.url }}">
{{- company.url -}} {{- company.url -}}
</a> </a>
{%- endif %} {%- endif %}

2
source/index.md
View file

@ -15,7 +15,7 @@ redirect:
{% block content %} {% block content %}
# About Me # About Me
<img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="me img-circle"> <img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="me is-circle is-marginless">
My name is Oliver Davies (aka [opdavies][1]) - a full-stack Web Developer and System Administrator based in Wales, UK. My name is Oliver Davies (aka [opdavies][1]) - a full-stack Web Developer and System Administrator based in Wales, UK.

10
source/testimonials.html.twig
View file

@ -5,12 +5,12 @@ use: [posts]
--- ---
{% block content %} {% block content %}
{% for testimonial in site.testimonials|reverse %} {% for testimonial in site.testimonials|reverse %}
<article class="testimonial"> <article class="testimonial mb-3">
<h2 class="testimonial__name">{{ testimonial.name }}</h2> <h2 class="testimonial__name is-marginless">{{ testimonial.name }}</h2>
{% if testimonial.image %} {% if testimonial.image %}
<img <img
class="testimonial__image pull-right img-circle" class="testimonial__image is-pulled-right is-circle"
src="{{ site.url }}/assets/images/testimonials/{{ testimonial.image }}" src="{{ site.url }}/assets/images/testimonials/{{ testimonial.image }}"
alt="{{ testimonial.name }}" alt="{{ testimonial.name }}"
/> />
@ -22,7 +22,9 @@ use: [posts]
</div> </div>
{% endif %} {% endif %}
{{ testimonial.text|markdown }} <div class="mt-1">
{{ testimonial.text|markdown }}
</div>
</article> </article>
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}