diff --git a/assets/js/main.js b/assets/js/main.js index f7f3515b..6f58817a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,4 +1,9 @@ (function ($) { - // Update the HTML classes. - $('html.no-js').removeClass('no-js').addClass('js'); + $('html.no-js').addClass('js').removeClass('no-js'); + + $('.nav-toggle').on('click', function (e) { + e.preventDefault(); + + $(this).siblings('.nav-right').toggleClass('is-active'); + }) })(jQuery); diff --git a/assets/sass/_base.sass b/assets/sass/_base.sass index 95a99723..9e86e4a7 100644 --- a/assets/sass/_base.sass +++ b/assets/sass/_base.sass @@ -1,18 +1,9 @@ -.bg-red - background: red - -body - padding-top: 60px - main a:link, a:hover border-bottom: 1px solid text-decoration: none - img - @extend .img-responsive - p img margin: 1.5em 0 diff --git a/assets/sass/_mixins.sass b/assets/sass/_mixins.sass index bad400ed..53f97ee0 100644 --- a/assets/sass/_mixins.sass +++ b/assets/sass/_mixins.sass @@ -1,35 +1,35 @@ -=from($device) - @media screen and (min-width: $device) - @content +// =from($device) +// @media screen and (min-width: $device) +// @content -=until($device) - @media screen and (max-width: $device - 1px) - @content +// =until($device) +// @media screen and (max-width: $device - 1px) +// @content -=mobile - @media screen and (max-width: $screen-tablet - 1px) - @content +// =mobile +// @media screen and (max-width: $screen-tablet - 1px) +// @content -=tablet - @media screen and (min-width: $screen-tablet) - @content +// =tablet +// @media screen and (min-width: $screen-tablet) +// @content -=tablet-only - @media screen and (min-width: $screen-tablet) and (max-width: $screen-desktop - 1px) - @content +// =tablet-only +// @media screen and (min-width: $screen-tablet) and (max-width: $screen-desktop - 1px) +// @content -=touch - @media screen and (max-width: $screen-desktop - 1px) - @content +// =touch +// @media screen and (max-width: $screen-desktop - 1px) +// @content -=desktop - @media screen and (min-width: $screen-desktop) - @content +// =desktop +// @media screen and (min-width: $screen-desktop) +// @content -=desktop-only - @media screen and (min-width: $screen-desktop) and (max-width: $screen-lg - 1px) - @content +// =desktop-only +// @media screen and (min-width: $screen-desktop) and (max-width: $screen-lg - 1px) +// @content -=widescreen - @media screen and (min-width: $screen-lg) - @content +// =widescreen +// @media screen and (min-width: $screen-lg) +// @content diff --git a/assets/sass/base/_layout.sass b/assets/sass/base/_layout.sass index c9d7040c..0587738e 100644 --- a/assets/sass/base/_layout.sass +++ b/assets/sass/base/_layout.sass @@ -11,15 +11,15 @@ flex-wrap: wrap .list-style-none - list-style: none + list-style: none !important .align-items-center align-items: center -@each $value in 'block', 'inline', 'inline-block', 'flex' - .display-#{$value}, - .is-#{$value}, - display: #{$value} +//@each $value in 'block', 'inline', 'inline-block', 'flex' +// .display-#{$value}, +// .is-#{$value}, +// display: #{$value} @each $value in 'top', 'middle', 'bottom' .table @@ -32,6 +32,8 @@ &.vertical-#{$value} vertical-align: #{$value} -@each $value in 2, 3, 4, 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' ) +@each $key, $property in $properties + @for $value from 1 through 5 + .#{$key}-#{$value} + #{$property}: #{$value}em !important diff --git a/assets/sass/base/_utilities.sass b/assets/sass/base/_utilities.sass new file mode 100644 index 00000000..90d897a6 --- /dev/null +++ b/assets/sass/base/_utilities.sass @@ -0,0 +1,5 @@ +.is-borderless + border: none !important + +.is-circle + border-radius: 50% diff --git a/assets/sass/main.sass b/assets/sass/main.sass index 3da967ee..dfbd5094 100644 --- a/assets/sass/main.sass +++ b/assets/sass/main.sass @@ -1,10 +1,20 @@ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap' +@import 'node_modules/bulma/sass/utilities/initial-variables' + +$family-sans-serif: "Helvetica Neue", Arial, sans-serif +$body-size: 14px + +$blue: #0678BE + +$primary: $blue + +@import 'node_modules/bulma/bulma' @import 'base' @import 'mixins' @import 'base/layout' @import 'base/typography' +@import 'base/utilities' @import 'components/availability' @import 'components/badges' diff --git a/assets/sass/pages/_blog.sass b/assets/sass/pages/_blog.sass index 74666913..671624e2 100644 --- a/assets/sass/pages/_blog.sass +++ b/assets/sass/pages/_blog.sass @@ -1,13 +1,10 @@ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix' - .page--blog__list ul.posts - list-style: none + //list-style: none margin-bottom: 2em - padding-left: 0 + margin-left: 0 + margin-top: 0 + //padding-left: 0 .post - +clearfix border-bottom: 1px solid #CCC - margin-bottom: 1em - padding-bottom: 2em diff --git a/assets/sass/pages/_experience.sass b/assets/sass/pages/_experience.sass index b0db7e99..9ee361fb 100644 --- a/assets/sass/pages/_experience.sass +++ b/assets/sass/pages/_experience.sass @@ -1,9 +1,7 @@ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix' -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables' @import '../mixins' .experience-item - margin-bottom: $padding-large-vertical * 3 + // margin-bottom: $padding-large-vertical * 3 +clearfix .experience-item-website diff --git a/assets/sass/pages/_post.sass b/assets/sass/pages/_post.sass index f8d082d1..80a7790c 100644 --- a/assets/sass/pages/_post.sass +++ b/assets/sass/pages/_post.sass @@ -1,12 +1,3 @@ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix' - -.post-pager - clear: both - margin-top: 2em - -.post-pager div - flex: 1 - pre display: block overflow: auto @@ -16,7 +7,6 @@ pre pre[class*="language-"] border: 0 border-radius: 0 - margin: 1.5em 0 pre code white-space: pre @@ -30,10 +20,5 @@ code[data-gist-id] background: transparent padding: 0 -.about-author - +clearfix - - img - float: left - margin: 0 1em 1em 0 - width: 50px +.about-author img + width: 50px diff --git a/assets/sass/pages/_project.sass b/assets/sass/pages/_project.sass index 6f9ec3be..4a92b125 100644 --- a/assets/sass/pages/_project.sass +++ b/assets/sass/pages/_project.sass @@ -1,4 +1,3 @@ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables' @import '../mixins' .project-company diff --git a/assets/sass/pages/_talk.sass b/assets/sass/pages/_talk.sass index 6e0cff5e..76aa2d22 100644 --- a/assets/sass/pages/_talk.sass +++ b/assets/sass/pages/_talk.sass @@ -1,10 +1,4 @@ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables' -@import '../mixins' - -.talk-full h1 - margin-bottom: 25px - -.presentation +.talk-slides background: url('../images/loading.gif') no-repeat center min-height: 275px width: 100% diff --git a/assets/sass/pages/_testimonials.sass b/assets/sass/pages/_testimonials.sass index af0be536..74c21553 100644 --- a/assets/sass/pages/_testimonials.sass +++ b/assets/sass/pages/_testimonials.sass @@ -1,16 +1,3 @@ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix' -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables' -@import '../mixins' - -.testimonial - +clearfix - margin-bottom: 10px - - &__image - height: 75px - margin: 0 0 10px 10px - width: 75px - - +until($screen-sm) - height: 90px - width: 90px +.testimonial-image + height: 75px + width: 75px diff --git a/gulpfile.js b/gulpfile.js index 0b09fa04..05d763f0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -31,10 +31,9 @@ gulp.task('styles', gulp.task('scripts', addScript([ 'node_modules/jquery/dist/jquery.js', - 'node_modules/bootstrap-sass/assets/javascripts/bootstrap.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', - config.js.sourceDir + config.js.pattern + 'node_modules/prismjs/components/prism-{apacheconf,bsash,css,diff,ini,json,nginx,php,sass,scss,sql,less,twig,xml,yaml}.js', + config.js.sourceDir + '/**/*.js' ], 'site.js') ); diff --git a/package.json b/package.json index aeb76ec3..a5a88a98 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "bootstrap-sass": "^3.3.7", + "bulma": "^0.5.0", "del": "^3.0.0", "font-awesome": "^4.7.0", "gulp": "^3.9.1", diff --git a/source/_includes/availability.html.twig b/source/_includes/availability.html.twig index bd8b4685..c76756e7 100644 --- a/source/_includes/availability.html.twig +++ b/source/_includes/availability.html.twig @@ -1,9 +1,11 @@
Availability
-
- {% for key, availability in site.availability %} - {% include 'availability/' ~ availability with { value: key } %} - {% endfor %} +
+
+ {% for key, availability in site.availability %} + {% include 'availability/' ~ availability with { value: key } %} + {% endfor %} +
diff --git a/source/_includes/availability/limited.html.twig b/source/_includes/availability/limited.html.twig index b27b555a..d6a6777a 100644 --- a/source/_includes/availability/limited.html.twig +++ b/source/_includes/availability/limited.html.twig @@ -1,5 +1,7 @@

- + + + {{ value == 'full' ? 'Currently have limited full-time capacity' }} {{ value == 'part' ? 'Currently have limited part-time capacity' }} diff --git a/source/_includes/availability/no.html.twig b/source/_includes/availability/no.html.twig index 71f5e283..edd96c9e 100644 --- a/source/_includes/availability/no.html.twig +++ b/source/_includes/availability/no.html.twig @@ -1,5 +1,7 @@

- + + + {{ value == 'full' ? 'Currently no spare full-time capacity.' }} {{ value == 'part' ? 'Currently no spare part-time capacity.' }} diff --git a/source/_includes/availability/yes.html.twig b/source/_includes/availability/yes.html.twig index 5087a3e9..da8cbc6b 100644 --- a/source/_includes/availability/yes.html.twig +++ b/source/_includes/availability/yes.html.twig @@ -1,5 +1,7 @@

- + + + {{ value == 'full' ? 'Currently have available full-time capacity' }} {{ value == 'part' ? 'Currently have available part-time capacity' }} diff --git a/source/_includes/nav.html.twig b/source/_includes/nav.html.twig index 1af15af2..ad18db08 100644 --- a/source/_includes/nav.html.twig +++ b/source/_includes/nav.html.twig @@ -1,41 +1,41 @@ -