Update existing elements to match Bulma

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">
-        {% for key, availability in site.availability %}
-            {% include 'availability/' ~ availability with { value: key } %}
-        {% endfor %}
+    <div class="panel-block">
+        <div>
+            {% for key, availability in site.availability %}
+                {% 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 class="navbar-start">
-      <a class="navbar-item {{ page.url == '/.' ? 'is-active' }}" href="/">{% spaceless %}
-        About
-      {% endspaceless %}</a>
+      <div id="navMenuExample" class="navbar-menu">
+        <div class="navbar-start">
+          <a class="navbar-item {{ page.url == '/.' ? 'is-active' }}" href="/">
+            About
+          </a>
 
-      <a class="navbar-item {{ page.url == '/experience' ? 'is-active' }}" href="/experience">{% spaceless %}
-        Experience
-      {% endspaceless %}</a>
+          <a class="navbar-item {{ page.url == '/experience' ? 'is-active' }}" href="/experience">
+            Experience
+          </a>
 
-      <a class="navbar-item {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">{% spaceless %}
-        Testimonials
-      {% endspaceless %}</a>
+          <a class="navbar-item {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">
+            Testimonials
+          </a>
 
-      <a class="navbar-item {{ page.url == '/talks' or '/talks/' in page.url }}" href="/talks">{% spaceless %}
-        Talks
-      {% endspaceless %}</a>
+          <a class="navbar-item {{ page.url == '/talks' or '/talks/' in page.url }}" href="/talks">
+            Talks
+          </a>
 
-      <a class="navbar-item {{ page.url == '/blog' or '/blog/' in page.url }}" href="/blog">{% spaceless %}
-        Blog
-      {% endspaceless %}</a>
+          <a class="navbar-item {{ page.url == '/blog' or '/blog/' in page.url }}" href="/blog">
+            Blog
+          </a>
 
-      <a class="navbar-item {{ page.url == '/contact' or '/contact/' in page.url }}" href="/contact">{% spaceless %}
-        Contact
-      {% endspaceless %}</a>
-    </div>
-  </div>
+          <a class="navbar-item {{ page.url == '/contact' or '/contact/' in page.url }}" href="/contact">
+            Contact
+          </a>
+        </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) %}
-                <li class="post list-group-item">
+        {% for post in data.posts|slice(0, site.latest_posts) %}
+            <div class="post panel-block">
+                <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>
-            {% endfor %}
-        </ul>
+                </div>
+            </div>
+        {% 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">
-            <label for="message">Message</label>
-            <textarea name="message" class="form-control" rows="5" required></textarea>
+        <div class="field">
+            <div class="control">
+                <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">
-                <i class="fa fa-send"></i>
+            <button class="button is-primary" type="submit">
+                <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 }}">