Replace bootstrap with Bulma

source/_includes/nav.html.twig

@@ -1,31 +1,41 @@
-<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="/">
-            About
-          </a>
+<nav class="nav has-shadow" id="top">
+  <div class="container">
+    <div class="nav-left">
+      <a class="nav-item">
+        <div class="nav-item">{{ site.title }}</div>
+      </a>
+    </div>
 
-          <a class="navbar-item {{ page.url == '/experience' ? 'is-active' }}" href="/experience">
-            Experience
-          </a>
+    <span class="nav-toggle">
+      <span></span>
+      <span></span>
+      <span></span>
+    </span>
 
-          <a class="navbar-item {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">
-            Testimonials
-          </a>
+    <div class="nav-right nav-menu">
+      <a class="nav-item is-tab {{ page.url == '/.' ? 'is-active' }}" href="/">
+          About
+        </a>
 
-          <a class="navbar-item {{ page.url == '/talks' or '/talks/' in page.url }}" href="/talks">
-            Talks
-          </a>
+        <a class="nav-item is-tab {{ page.url == '/experience' ? 'is-active' }}" href="/experience">
+          Experience
+        </a>
 
-          <a class="navbar-item {{ page.url == '/blog' or '/blog/' in page.url }}" href="/blog">
-            Blog
-          </a>
+        <a class="nav-item is-tab {{ page.url == '/testimonials' ? 'is-active' }}" href="/testimonials">
+          Testimonials
+        </a>
 
-          <a class="navbar-item {{ page.url == '/contact' or '/contact/' in page.url }}" href="/contact">
-            Contact
-          </a>
-        </div>
-      </div>
+        <a class="nav-item is-tab {{ page.url == '/talks' or '/talks/' in page.url ? 'is-active' }}" href="/talks">
+          Talks
+        </a>
+
+        <a class="nav-item is-tab {{ page.url == '/blog' or '/blog/' in page.url ? 'is-active' }}" href="/blog">
+          Blog
+        </a>
+
+        <a class="nav-item is-tab {{ page.url == '/contact' or '/contact/' in page.url ? 'is-active' }}" href="/contact">
+          Contact
+        </a>
+    </div>
   </div>
 </nav>

source/_includes/post/pager.html.twig

@@ -1,6 +1,6 @@
-<div class="post-pager is-flex">
+<div class="post-pager is-clearfix is-flex mt-2">
     {% if page.previous_post %}
-        <div class="is-half">
+        <div class="is-half flex">
            <a href="{{ page.previous_post.url }}">
                 &laquo; {{ page.previous_post.title }}
             </a>
@@ -8,7 +8,7 @@
     {% endif %}
 
     {% if page.next_post %}
-        <div class="is-half text-right">
+        <div class="is-half flex has-text-right">
             <a href="{{ page.next_post.url }}">
                 {{ page.next_post.title }} &raquo;
             </a>

source/_includes/post/tags.html.twig

@@ -1,8 +1,9 @@
 {% if page.tags %}
-    <p class="tags">
-        Tags:
+    <div class="tags">
         {% for tag in page.tags %}
-            <a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}">{{ tag }}</a>{% if not loop.last %}, {% endif %}
+            <a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}" class="tag is-light is-borderless">
+                {{- tag -}}
+            </a>
         {% endfor %}
-    </p>
+    </div>
 {% endif %}

source/_includes/talks-table.html.twig

@@ -1,5 +1,5 @@
 <div class="table-responsive">
-    <table class="table table-striped talks-table">
+    <table class="talks-table table is-striped">
         <thead>
             <tr>
                 <th style="width: 20%">Date</th>