Use bulma
This commit is contained in:
parent
7d99c588e7
commit
96038c3286
|
|
@ -1,9 +1,3 @@
|
|||
.bg-red
|
||||
background: red
|
||||
|
||||
body
|
||||
padding-top: 60px
|
||||
|
||||
main
|
||||
a:link,
|
||||
a:hover
|
||||
|
|
|
|||
|
|
@ -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 'base'
|
||||
|
|
@ -18,6 +36,3 @@
|
|||
@import "pages/project"
|
||||
@import "pages/talk"
|
||||
@import "pages/testimonials"
|
||||
|
||||
body
|
||||
background: red
|
||||
|
|
|
|||
|
|
@ -29,9 +29,7 @@ code[data-gist-id]
|
|||
padding: 0
|
||||
|
||||
.about-author
|
||||
+clearfix
|
||||
|
||||
img
|
||||
float: left
|
||||
margin: 0 1em 1em 0
|
||||
// float: left
|
||||
// margin: 0 1em 1em 0
|
||||
width: 50px
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
"js:watch": "onchange $npm_package_config_jsInputDir -v -- npm run js",
|
||||
"prod": "npm run production",
|
||||
"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: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",
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
"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: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": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
|
|
|
|||
|
|
@ -1,41 +1,31 @@
|
|||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{{ site.url }}/">{{ site.title }}</a>
|
||||
</div>
|
||||
<div id="navMenuExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item {{ page.url == '/.' ? 'is-active' }}" href="/">{% spaceless %}
|
||||
About
|
||||
{% endspaceless %}</a>
|
||||
|
||||
<div id="navbar" class="collapse navbar-collapse" role="navigation">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="{{ page.url == '/.' ? 'active' }}">
|
||||
<a href="/">About</a>
|
||||
</li>
|
||||
<a class="navbar-item {{ page.url == '/experience' ? 'is-active' }}" href="/experience">{% spaceless %}
|
||||
Experience
|
||||
{% endspaceless %}</a>
|
||||
|
||||
<li class="{{ page.url == '/experience' ? 'active' }}">
|
||||
<a href="/experience">Experience</a>
|
||||
</li>
|
||||
<a class="navbar-item {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">{% spaceless %}
|
||||
Testimonials
|
||||
{% endspaceless %}</a>
|
||||
|
||||
<li class="{{ page.url == '/testimonials' ? 'active' }}">
|
||||
<a href="/testimonials">Testimonials</a>
|
||||
</li>
|
||||
<a class="navbar-item {{ page.url == '/talks' or '/talks/' in page.url }}" href="/talks">{% spaceless %}
|
||||
Talks
|
||||
{% endspaceless %}</a>
|
||||
|
||||
<li class="{{ page.url == '/talks' or '/talks/' in page.url ? 'active' }}">
|
||||
<a href="/talks">Talks</a>
|
||||
</li>
|
||||
<a class="navbar-item {{ page.url == '/blog' or '/blog/' in page.url }}" href="/blog">{% spaceless %}
|
||||
Blog
|
||||
{% endspaceless %}</a>
|
||||
|
||||
<li class="{{ page.url == '/blog' or '/blog/' in page.url ? 'active' }}">
|
||||
<a href="/blog">Blog</a>
|
||||
</li>
|
||||
|
||||
<li class="{{ page.url == '/contact' or '/contact/' in page.url ? 'active' }}">
|
||||
<a href="/contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>{# .nav-collapse #}
|
||||
<a class="navbar-item {{ page.url == '/contact' or '/contact/' in page.url }}" href="/contact">{% spaceless %}
|
||||
Contact
|
||||
{% endspaceless %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="about-author">
|
||||
<div class="about-author is-clearfix mt-2">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
{{ row.date.date|date(row.date.fuzzy_date ? 'F Y' : 'j F Y') }}
|
||||
|
||||
{% if row.date.time %}
|
||||
<small class="display-block">{{ row.date.time }}</small>
|
||||
<small class="is-block">{{ row.date.time }}</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<a href="{{ talk.url }}">{{ talk.title }}</a>
|
||||
{% endif %}
|
||||
|
||||
<small class="display-block">
|
||||
<small class="is-block">
|
||||
{{ row.date.talk.type ?: talk.type }}
|
||||
</small>
|
||||
</td>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
{{ row.event.name }}
|
||||
{% endif %}
|
||||
|
||||
<small class="display-block">
|
||||
<small class="is-block">
|
||||
{{ row.event.location }}
|
||||
</small>
|
||||
</td>
|
||||
|
|
@ -65,10 +65,10 @@
|
|||
{% if row.date.feedback %}
|
||||
<a
|
||||
href="{{ row.date.feedback }}"
|
||||
class="btn btn-primary"
|
||||
class="button is-primary"
|
||||
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>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -28,15 +28,15 @@
|
|||
{% include 'nav' %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<main class="content col-md-9">
|
||||
<div class="columns">
|
||||
<main class="content column is-9">
|
||||
{% block content_top %}{% endblock %}
|
||||
{% block content_wrapper %}{% block content %}{% endblock %}{% endblock %}
|
||||
{% block content_bottom %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block sidebar_wrapper %}
|
||||
<div class="col-md-3">
|
||||
<div class="column is-3">
|
||||
{% block sidebar %}
|
||||
{% include 'badges' %}
|
||||
{% include 'availability' %}
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</div>{# .row #}
|
||||
</div>{# .container #}
|
||||
|
||||
<footer class="container">
|
||||
<footer class="container content">
|
||||
<p class="copyright">
|
||||
© 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
|
||||
{% if page.slides.embed %}
|
||||
<div class="talk-slides">
|
||||
<div class="talk-slides mt-2">
|
||||
<h2>Slides</h2>
|
||||
<div class="presentation">
|
||||
{{ page.slides.embed|raw }}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
{% endif %}
|
||||
|
||||
{% if page.video.embed %}
|
||||
<div class="talk-video">
|
||||
<div class="talk-video mt-2">
|
||||
<h2>Video</h2>
|
||||
<div class="embed-container">
|
||||
{{ page.video.embed|raw }}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</div>{# .talk-video #}
|
||||
{% endif %}
|
||||
|
||||
<div class="talk-events">
|
||||
<div class="talk-events mt-3">
|
||||
<h2>Events</h2>
|
||||
|
||||
{% set events = [] %}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,13 @@ meta:
|
|||
width: 451
|
||||
---
|
||||
{% block excerpt %}
|
||||
<img
|
||||
src="/assets/images/blog/jackson-octocat.png"
|
||||
alt=""
|
||||
class="is-centered"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<div class="has-text-centered">
|
||||
<img
|
||||
src="/assets/images/blog/jackson-octocat.png"
|
||||
alt=""
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
</div>
|
||||
|
||||
Earlier this week I moved this site from my personal Linode server to [GitHub Pages][0].
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ redirect:
|
|||
{% for experience in site.experiences|reverse %}
|
||||
{% 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 %}
|
||||
<div class="experience-item-logo">
|
||||
<img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
|
||||
|
|
@ -23,7 +23,7 @@ redirect:
|
|||
<h2>{{ company.name }}</h2>
|
||||
|
||||
{% 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 -}}
|
||||
</a>
|
||||
{%- endif %}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ redirect:
|
|||
{% block content %}
|
||||
# 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ use: [posts]
|
|||
---
|
||||
{% block content %}
|
||||
{% for testimonial in site.testimonials|reverse %}
|
||||
<article class="testimonial">
|
||||
<h2 class="testimonial__name">{{ testimonial.name }}</h2>
|
||||
<article class="testimonial mb-3">
|
||||
<h2 class="testimonial__name is-marginless">{{ testimonial.name }}</h2>
|
||||
|
||||
{% if testimonial.image %}
|
||||
<img
|
||||
class="testimonial__image pull-right img-circle"
|
||||
class="testimonial__image is-pulled-right is-circle"
|
||||
src="{{ site.url }}/assets/images/testimonials/{{ testimonial.image }}"
|
||||
alt="{{ testimonial.name }}"
|
||||
/>
|
||||
|
|
@ -22,7 +22,9 @@ use: [posts]
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ testimonial.text|markdown }}
|
||||
<div class="mt-1">
|
||||
{{ testimonial.text|markdown }}
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue