Update existing elements to match Bulma

assets/sass/base/_layout.sass

@@ -32,6 +32,12 @@
             &.vertical-#{$value}
                 vertical-align: #{$value}
 
-@each $value in 2, 3, 4, 5
+@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' )
+@each $key, $property in $properties
+    @for $value from 1 through 5
+        .#{$key}-#{$value}
+            #{$property}: #{$value}em !important

assets/sass/base/_utilities.sass

@@ -0,0 +1,2 @@
+.is-circle
+    border-radius: 50%

assets/sass/main.sass

@@ -7,15 +7,6 @@ $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'
@@ -23,6 +14,7 @@ $properties: ( mb: 'margin-bottom', ml: 'margin-left', mr: 'margin-right', mt: '
 
 @import 'base/layout'
 @import 'base/typography'
+@import 'base/utilities'
 
 @import 'components/availability'
 @import 'components/badges'

package.json

@@ -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:concat && npm run sass:$ENV:compile && npm run sass:$ENV:move",
+    "sass": "npm run sass:$ENV:compile && npm run sass:concat && 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",

source/_includes/availability.html.twig

@@ -1,9 +1,11 @@
 <div class="availability panel panel-default">
     <div class="panel-heading">Availability</div>
 
-    <div class="panel-body">
+    <div class="panel-block">
-        {% for key, availability in site.availability %}
+        <div>
-            {% include 'availability/' ~ availability with { value: key } %}
+            {% for key, availability in site.availability %}
-        {% endfor %}
+                {% include 'availability/' ~ availability with { value: key } %}
+            {% endfor %}
+        </div>
     </div>
 </div>

source/_includes/availability/limited.html.twig

@@ -1,5 +1,7 @@
 <p>
-    <i class="fa fa-thumbs-o-up text-warning"></i>
+    <span class="icon is-small">
+        <i class="fa fa-thumbs-o-up is-warning"></i>
+    </span>
 
     {{ value == 'full' ? 'Currently have limited full-time capacity' }}
     {{ value == 'part' ? 'Currently have limited part-time capacity' }}

source/_includes/availability/no.html.twig

@@ -1,5 +1,7 @@
 <p>
-    <i class="fa fa-thumbs-o-down text-danger"></i>
+    <span class="icon is-small">
+        <i class="fa fa-thumbs-o-down is-danger"></i>
+    </span>
 
     {{ value == 'full' ? 'Currently no spare full-time capacity.' }}
     {{ value == 'part' ? 'Currently no spare part-time capacity.' }}

source/_includes/availability/yes.html.twig

@@ -1,5 +1,7 @@
 <p>
-    <i class="fa fa-thumbs-o-up text-success"></i>
+    <span class="icon is-small">
+        <i class="fa fa-thumbs-o-up is-success"></i>
+    </span>
 
     {{ value == 'full' ? 'Currently have available full-time capacity' }}
     {{ value == 'part' ? 'Currently have available part-time capacity' }}

source/_includes/nav.html.twig

@@ -1,31 +1,31 @@
 <nav class="navbar">
     <div class="container">
-  <div id="navMenuExample" class="navbar-menu">
+      <div id="navMenuExample" class="navbar-menu">
-    <div class="navbar-start">
+        <div class="navbar-start">
-      <a class="navbar-item {{ page.url == '/.' ? 'is-active' }}" href="/">{% spaceless %}
+          <a class="navbar-item {{ page.url == '/.' ? 'is-active' }}" href="/">
-        About
+            About
-      {% endspaceless %}</a>
+          </a>
 
-      <a class="navbar-item {{ page.url == '/experience' ? 'is-active' }}" href="/experience">{% spaceless %}
+          <a class="navbar-item {{ page.url == '/experience' ? 'is-active' }}" href="/experience">
-        Experience
+            Experience
-      {% endspaceless %}</a>
+          </a>
 
-      <a class="navbar-item {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">{% spaceless %}
+          <a class="navbar-item {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">
-        Testimonials
+            Testimonials
-      {% endspaceless %}</a>
+          </a>
 
-      <a class="navbar-item {{ page.url == '/talks' or '/talks/' in page.url }}" href="/talks">{% spaceless %}
+          <a class="navbar-item {{ page.url == '/talks' or '/talks/' in page.url }}" href="/talks">
-        Talks
+            Talks
-      {% endspaceless %}</a>
+          </a>
 
-      <a class="navbar-item {{ page.url == '/blog' or '/blog/' in page.url }}" href="/blog">{% spaceless %}
+          <a class="navbar-item {{ page.url == '/blog' or '/blog/' in page.url }}" href="/blog">
-        Blog
+            Blog
-      {% endspaceless %}</a>
+          </a>
 
-      <a class="navbar-item {{ page.url == '/contact' or '/contact/' in page.url }}" href="/contact">{% spaceless %}
+          <a class="navbar-item {{ page.url == '/contact' or '/contact/' in page.url }}" href="/contact">
-        Contact
+            Contact
-      {% endspaceless %}</a>
+          </a>
-    </div>
+        </div>
-  </div>
+      </div>
   </div>
 </nav>

source/_includes/posts/latest.html.twig

@@ -2,17 +2,17 @@
     <div class="latest-posts panel panel-default">
         <div class="latest-posts__heading panel-heading">Latest blog posts</div>
 
-        <ul class="list-group">
+        {% for post in data.posts|slice(0, site.latest_posts) %}
-            {% for post in data.posts|slice(0, site.latest_posts) %}
+            <div class="post panel-block">
-                <li class="post list-group-item">
+                <div>
                     <span class="post__title">
                         <a href="{{ post.url }}">
                             {{ post.title }}
                         </a>
                     </span> -
                     <span class="post__date">{{ post.date|date(site.default_date_format) }}</span>
-                </li>
+                </div>
-            {% endfor %}
+            </div>
-        </ul>
+        {% endfor %}
     </div>
 {% endif %}

source/_includes/talks-table.html.twig

@@ -68,7 +68,10 @@
                                     class="button is-primary"
                                     title="Read or leave feedback for this talk"
                                 >
-                                    <i class="fa fa-comment-o" style="margin-right: 8px"></i> joind.in
+                                   <!--  <span class="icon is-small">
+                                        <i class="fa fa-comment-o" style="margin-right: 8px"></i>
+                                    </span> -->
+                                    joind.in
                                 </a>
                             {% endif %}
                         </td>

source/contact.html.twig

@@ -7,29 +7,39 @@ use: [posts]
     <p>To send me an email, complete the form below.</p>
 
     <form action="https://formspree.io/{{ site.email }}" method="POST">
-        <div class="form__name form-group">
+        <div class="form__name field">
             <label for="name">Name</label>
-            <input type="text" class="form-control" name="name" required>
+            <div class="control">
+                <input type="text" class="input" name="name" required>
+            </div>
         </div>
 
-        <div class="form__email form-group">
+        <div class="form__email field">
             <label for="email">Email</label>
-            <input type="email" class="form-control" name="email" required>
+            <div class="control">
+                <input type="email" class="input" name="email" required>
+            </div>
         </div>
 
-        <div class="form__subject form-group">
+        <div class="form__subject field">
             <label for="subject">Subject</label>
-            <input type="text" class="form-control" name="subject" required>
+            <div class="control">
+                <input type="text" class="input" name="subject" required>
+            </div>
         </div>
 
-        <div class="form__message form-group">
+        <div class="field">
-            <label for="message">Message</label>
+            <div class="control">
-            <textarea name="message" class="form-control" rows="5" required></textarea>
+                <label for="message">Message</label>
+                <textarea name="message" class="textarea" rows="5" required></textarea>
+            </div>
         </div>
 
         <div class="form__actions">
-            <button class="btn btn-primary" type="submit">
+            <button class="button is-primary" type="submit">
-                <i class="fa fa-send"></i>
+                <span class="icon is-small" style="margin-right: 5px">
+                    <i class="fa fa-send"></i>
+                </span>
                 Send email
             </button>
         </div>

source/experience.html.twig

@@ -20,7 +20,7 @@ redirect:
             {% endif %}
 
             <div class="experience-item-inner">
-                <h2>{{ company.name }}</h2>
+                <h2 class="is-marginless">{{ company.name }}</h2>
 
                 {% if company.url -%}
                     <a class="experience-item-website is-inline-block" href="{{ company.url }}">