Transition on Pandoc WIP

Gemfile

@@ -13,6 +13,7 @@ group :jekyll_plugins do
     gem 'jekyll-link-attributes'
     gem 'jekyll-twitter-plugin'
     gem 'jemoji'
+    gem 'jekyll-pandoc'
     gem 'mini_racer'
     gem 'unicode_utils'
     gem 'webrick'

_config.yml

@@ -170,17 +170,17 @@ news_limit: 5 # leave blank to include all the news in the `_news` folder
 # -----------------------------------------------------------------------------
 
 # Markdown and syntax highlight
-markdown: kramdown
+markdown: Pandoc
 highlighter: rouge
-kramdown:
+  #kramdown:
-  input: GFM
+  #  input: GFM
-  syntax_highlighter_opts:
+  #  syntax_highlighter_opts:
-    css_class: 'highlight'
+  #    css_class: 'highlight'
-    span:
+  #    span:
-      line_numbers: false
+  #      line_numbers: false
-    block:
+  #    block:
-      line_numbers: false
+  #      line_numbers: false
-      start_line: 1
+  #      start_line: 1
 
 # Includes & excludes
 include: ['_pages']
@@ -208,6 +208,7 @@ plugins:
   - jekyll-link-attributes
   - jekyll-twitter-plugin
   - jemoji
+  - jekyll-pandoc
 
 # Sitemap settings
 defaults:

_projects/spectra.md

@@ -0,0 +1,75 @@
+---
+layout: page
+title: Spectra
+description: a project with a background image
+img: assets/img/spectra.jpg
+importance: 1
+category: thesis
+---
+
+![Caption](/assets/img/spectra.png 'Spectra caption'){:class="img-fluid rounded z-depth-1"}
+
+::: {:class="caption"}
+My caption
+:::
+
+
+<div class="row">
+    <div class="col-sm mt-3 mt-md-0">
+        {% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+    <div class="col-sm mt-3 mt-md-0">
+        {% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+    <div class="col-sm mt-3 mt-md-0">
+        {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+</div>
+<div class="caption">
+    Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
+</div>
+<div class="row">
+    <div class="col-sm mt-3 mt-md-0">
+        {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+</div>
+<div class="caption">
+    This image can also have a caption. It's like magic.
+</div>
+
+You can also put regular text between your rows of images.
+Say you wanted to write a little bit about your project before you posted the rest of the images.
+You describe how you toiled, sweated, *bled* for your project, and then... you reveal its glory in the next row of images.
+
+
+<div class="row justify-content-sm-center">
+    <div class="col-sm-8 mt-3 mt-md-0">
+        {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+    <div class="col-sm-4 mt-3 mt-md-0">
+        {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+</div>
+<div class="caption">
+    You can also have artistically styled 2/3 + 1/3 images, like these.
+</div>
+
+
+The code is simple.
+Just wrap your images with `<div class="col-sm">` and place them inside `<div class="row">` (read more about the <a href="https://getbootstrap.com/docs/4.4/layout/grid/">Bootstrap Grid</a> system).
+To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
+Here's the code for the last row of images above:
+
+{% raw %}
+```html
+<div class="row justify-content-sm-center">
+    <div class="col-sm-8 mt-3 mt-md-0">
+        {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+    <div class="col-sm-4 mt-3 mt-md-0">
+        {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+</div>
+```
+{% endraw %}
+