jekyll-theme-opentoolbox 1.0.8 → 2.0.2

data/_includes/pagination.html

@@ -1,23 +1,21 @@
-<nav class="pagination is-centered">
-    {% if paginator.previous_page %}
-    <a href="{{ site.baseurl }}{{ paginator.previous_page_path }}" class="pagination-previous is-info">Previous</a>
-    {% else %}
-    <p class="pagination-previous" disabled>Previous</p>
-    {% endif %}
-    {% if paginator.next_page %}
-    <a href="{{ site.baseurl }}{{ paginator.next_page_path }}" class="pagination-next is-info">Next</a>
-    {% else %}
-    <p class="pagination-next" disabled >Next</p>
-    {% endif %}
-    <ul class="pagination-list">
-        {% for page in (1..paginator.total_pages) %}
-        {% if page == paginator.page %}
-        <li><a class="pagination-link is-current">{{ page }}</a></li>
-        {% elsif page == 1 %}
-        <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | split: '/' | pop | join: '/' }}" class="pagination-link">{{ page }}</a></li>
-        {% else %}
-        <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}" class="pagination-link">{{ page }}</a></li>
-        {% endif %}
-        {% endfor %}
-    </ul>
-</nav>
+<nav class="pagination is-centered">
+	<a class="is-block pagination-previous" {% if paginator.previous_page %} href="{{ site.baseurl }}{{ paginator.previous_page_path }}" {% else %} disabled {% endif %} >
+		{% include icon.html icon="arrow-left" size="lg" %}
+	</a>
+
+    <a class="is-block pagination-next" {% if paginator.next_page %} href="{{ site.baseurl }}{{ paginator.next_page_path }}" {% else %} disabled {% endif %} >
+		{% include icon.html icon="arrow-right" size="lg" %}
+	</a>
+
+    <ul class="pagination-list">
+        {% for page in (1..paginator.total_pages) %}
+        {% if page == paginator.page %}
+        <li><a class="pagination-link is-current">{{ page }}</a></li>
+        {% elsif page == 1 %}
+        <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | split: '/' | pop | join: '/' }}" class="pagination-link">{{ page }}</a></li>
+        {% else %}
+        <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}" class="pagination-link">{{ page }}</a></li>
+        {% endif %}
+        {% endfor %}
+    </ul>
+</nav>

data/_includes/post-card.html

@@ -1,4 +1,4 @@
-<div class="card is-rounded">
+<div class="card">
     {% if post.image %}
     <div class="card-image">
         <img src="{{ post.image }}" alt="{{ post.title }}">
@@ -24,6 +24,6 @@
         </div>
     </div>
     <footer class="card-footer">
-        <p class="card-footer-item">Published: {{ post.date | date: "%b %-d, %Y" }}</p>
+        <p class="card-footer-item">📅 {{ post.date | date: "%b %-d, %Y" }}</p>
     </footer>
 </div>

data/_includes/section-divider.html

@@ -0,0 +1,5 @@
+<div class="divider-container">
+	<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
+		<path d="M0.00,49.98 C207.95,169.23 334.36,-23.19 505.36,73.52 L509.31,-13.31 L0.00,0.00 Z"></path>
+	</svg>
+</div>

data/_includes/setup.html

@@ -0,0 +1,11 @@
+{% if page.menubar or page.menubar_toc %}
+{% assign has_left_sidebar = true %}
+{% endif %}
+
+{% if page.show_sidebar and has_left_sidebar  %}
+{% assign content_width = 'is-4' %}
+{% elsif page.show_sidebar or has_left_sidebar %}
+{% assign content_width = 'is-8' %}
+{% else %}
+{% assign content_width = 'is-12' %}
+{% endif %}

data/_includes/showcase.html

@@ -9,7 +9,7 @@
 		
 			<div {% if include.columns == true %} class="columns" {% endif %}>
 			{% for item in showcase.items %}
-				<div class="column">
+				<div class="column is-6">
 					<section class="showcase is-rounded">
 						<figure class="image {% if item.image_ratio %} {{ item.image_ratio }} {% else %} is-16by9 {% endif %}">
 							<img src="{{ item.image | relative_url }}" class="is-rounded" />

data/_includes/simple_banner.html

@@ -0,0 +1,11 @@
+<section class="hero {% if page.banner_height %} {{ page.banner_height }} {% else %} is-medium {% endif %} is-bold is-primary" {% if page.banner_image %} style="background: url('{{ page.banner_image }}') no-repeat center center; background-size: cover;" {% endif %}>
+    <div class="hero-body {% if page.banner_darken %} hero-darken {% endif %}">
+        <div class="container">
+            <h1 class="title is-1">{{ page.title }}</h1>
+            <p class="subtitle is-3">{{ page.subtitle }}</p>
+            {% if page.banner_link %}
+                <a href="{{ page.banner_link | relative_url }}" class="button {%if page.banner_link_style %} {{ page.banner_link_style }} {% else %} is-light {% endif %} is-outlined is-rounded is-medium">{{ page.banner_link_text }}</a>
+            {% endif %}
+        </div>
+    </div>
+</section>

data/_includes/sponsors.html

@@ -1,42 +1,44 @@
-{% if page.sponsors %}
-{% assign tiers=site.data.[page.sponsors] %}
-    <div class="columns is-multiline">
-        {% for tier in tiers %}
-        <div class="column is-12">
-            <p class="title is-3 has-text-centered">
-                <span>{{ tier.tier_name }}</span>
-            </p>
-            <p class="subtitle has-text-centered">
-                <span class="icon is-large gh-sponsor"><i class="fas fa-heart fa-2x"></i></span>
-            </p>
-            <div class="columns is-centered">
-                <div class="column is-6 content has-text-centered">
-                    <p>{{ tier.description | markdownify }}</p>
-                </div>
-            </div>
-
-            <div class="columns is-multiline is-centered">
-                {% for sponsor in tier.sponsors %}
-                <div class="column {% if tier.size == 'large' %} is-4-desktop is-6-tablet {% else %} is-3-desktop is-4-tablet {% endif %}">
-                    <div class="box has-text-centered">
-                        <p class="title {% if tier.size == 'large' %} is-4 {% elsif tier.size == 'small' %} is-6 {% else %} is-5 {% endif %}">
-                            {{ sponsor.name }}
-                        </p>
-                        <p class="subtitle is-6">
-                            {% if sponsor.profile %}
-                            <a href="{{ sponsor.profile }}" class="is-link is-small">View Profile</a>
-                            {% else %}
-                            &nbsp;
-                            {% endif %}
-                        </p>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-        <div class="column is-12">
-            <hr />
-        </div>
-        {% endfor %}
-    </div>
+{% if page.sponsors %}
+{% assign tiers=site.data.[page.sponsors] %}
+    <div class="columns is-multiline">
+        {% for tier in tiers %}
+        <div class="column is-12">
+            <p class="title is-3 has-text-centered">
+                <span>{{ tier.tier_name }}</span>
+            </p>
+            <p class="subtitle has-text-centered">
+				{% include icon.html class="is-large gh-sponsor" icon="heart" size="2x" %}
+            </p>
+            <div class="columns is-centered">
+                <div class="column is-6 content has-text-centered">
+                    <p>{{ tier.description | markdownify }}</p>
+                </div>
+            </div>
+
+            <div class="columns is-multiline is-centered">
+                {% for sponsor in tier.sponsors %}
+                <div class="column {% if tier.size == 'large' %} is-4-desktop is-6-tablet {% else %} is-3-desktop is-4-tablet {% endif %}">
+                    <div class="box has-text-centered">
+                        <p class="title {% if tier.size == 'large' %} is-4 {% elsif tier.size == 'small' %} is-6 {% else %} is-5 {% endif %}">
+                            {{ sponsor.name }}
+                        </p>
+                        <p class="subtitle is-6">
+                            {% if sponsor.profile %}
+                            <a href="{{ sponsor.profile }}" class="is-link is-small">
+								{% include icon.html icon="arrow-right" %}
+							</a>
+                            {% else %}
+                            &nbsp;
+                            {% endif %}
+                        </p>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        <div class="column is-12">
+            <hr />
+        </div>
+        {% endfor %}
+    </div>
 {% endif %}

data/_includes/subscribe.html

@@ -1,6 +1,16 @@
-<div class="has-text-centered">
-    <a href="{{ site.baseurl }}/feed.xml" class="button is-primary">
-        <span class="icon"><i class="fas fa-rss"></i></span>
-        <span>Subscribe</span>
-    </a>
+<div class="hero is-small is-dark is-rounded has-shadow">
+	<div class="hero-body">
+		<div class="columns is-vcentered">
+			<div class="column is-four-fifths">
+				<p class="title is-3">Never miss a post!</p>
+			</div>
+
+			<div class="column">
+				<a href="{{ site.baseurl }}/feed.xml" class="button is-primary is-large">
+					{% include icon.html icon="rss" %}
+					<span>Subscribe</span>
+				</a>
+			</div>
+		</div>
+	</div>
 </div>

data/_includes/tabs.html

@@ -1,18 +1,19 @@
-{% if page.tabs %}
-{% assign tabs = site.data.[page.tabs] %}
-
-<div class="tabs {% if tabs.size %}{{ tabs.size }}{% endif %} {% if tabs.alignment %}{{ tabs.alignment }}{% endif %} {% if tabs.style %}{{ tabs.style }}{% endif %}">
-    <ul>
-    {% for tab in tabs.items %}
-        <li {% if tab.link == page.url %} class="is-active" {% endif %}>
-            <a href="{{ tab.link | relative_url }}">
-                {% if tab.icon %}
-                <span class="icon is-small"><i class="fas {{ tab.icon }}" aria-hidden="true"></i></span>
-                {% endif %}
-                <span>{{ tab.name }}</span>
-            </a>
-        </li>
-    {% endfor %}
-    </ul>
-  </div>
+{% if page.tabs %}
+{% assign tabs = site.data.[page.tabs] %}
+
+<div class="tabs {% if tabs.size %}{{ tabs.size }}{% endif %} {% if tabs.alignment %}{{ tabs.alignment }}{% endif %} {% if tabs.style %}{{ tabs.style }}{% endif %}">
+    <ul>
+    {% for tab in tabs.items %}
+		{% assign icon = tab.icon %}
+        <li {% if tab.link == page.url %} class="is-active" {% endif %}>
+            <a href="{{ tab.link | relative_url }}">
+                {% if icon %}
+					{% include icon.html icon=icon class="is-small" %}
+                {% endif %}
+                <span>{{ tab.name }}</span>
+            </a>
+        </li>
+    {% endfor %}
+    </ul>
+  </div>
   {% endif %}

data/_includes/tag.html

@@ -1,3 +1,3 @@
-<span class="tag {% if include.style %} {{ include.style }} {% else %} is-primary {% endif %}">
-    {{ include.tag }}
+<span class="tag {% if include.style %} {{ include.style }} {% else %} is-primary {% endif %} is-rounded">
+    {{ include.tag }}
 </span>

data/_includes/toc.html

@@ -1,82 +1,82 @@
-{% capture tocWorkspace %}
-    {% comment %}
-        Version 1.0.8
-          https://github.com/allejo/jekyll-toc
-    {% endcomment %}
-
-    {% capture my_toc %}{% endcapture %}
-    {% assign orderedList = include.ordered | default: false %}
-    {% assign minHeader = include.h_min | default: 1 %}
-    {% assign maxHeader = include.h_max | default: 6 %}
-    {% assign nodes = include.html | split: '<h' %}
-    {% assign firstHeader = true %}
-
-    {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
-
-    {% for node in nodes %}
-        {% if node == "" %}
-            {% continue %}
-        {% endif %}
-
-        {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
-
-        {% if headerLevel < minHeader or headerLevel > maxHeader %}
-            {% continue %}
-        {% endif %}
-
-        {% if firstHeader %}
-            {% assign firstHeader = false %}
-            {% assign minHeader = headerLevel %}
-        {% endif %}
-
-        {% assign indentAmount = headerLevel | minus: minHeader %}
-        {% assign _workspace = node | split: '</h' %}
-
-        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
-        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
-        {% assign html_id = _idWorkspace[0] %}
-
-        {% assign _classWorkspace = _workspace[0] | split: 'class="' %}
-        {% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
-        {% assign html_class = _classWorkspace[0] %}
-
-        {% if html_class contains "no_toc" %}
-            {% continue %}
-        {% endif %}
-
-        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
-        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
-
-        {% assign space = '' %}
-        {% for i in (1..indentAmount) %}
-            {% assign space = space | prepend: '    ' %}
-        {% endfor %}
-
-        {% unless include.item_class == blank %}
-            {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
-        {% endunless %}
-
-        {% capture heading_body %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
-        {% capture my_toc %}{{ my_toc }}
-{{ space }}{{ listModifier }} {{ listItemClass }} [{{ heading_body | replace: "|", "\|" }}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
-    {% endfor %}
-
-    {% if include.class %}
-        {% capture my_toc %}{:.{{ include.class }}}
-{{ my_toc | lstrip }}{% endcapture %}
-    {% endif %}
-
-    {% if include.id %}
-        {% capture my_toc %}{: #{{ include.id }}}
-{{ my_toc | lstrip }}{% endcapture %}
-    {% endif %}
-{% endcapture %}{% assign tocWorkspace = '' %}
-
-<div class="contents">
-    <div class="menu">
-        <p class="menu-label">{{ include.contents_title }}</p>
-        {{ my_toc | markdownify | strip }}
-    </div>
-</div>
-
-
+{% capture tocWorkspace %}
+    {% comment %}
+        Version 1.0.8
+          https://github.com/allejo/jekyll-toc
+    {% endcomment %}
+
+    {% capture my_toc %}{% endcapture %}
+    {% assign orderedList = include.ordered | default: false %}
+    {% assign minHeader = include.h_min | default: 1 %}
+    {% assign maxHeader = include.h_max | default: 6 %}
+    {% assign nodes = include.html | split: '<h' %}
+    {% assign firstHeader = true %}
+
+    {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
+
+    {% for node in nodes %}
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+
+        {% if headerLevel < minHeader or headerLevel > maxHeader %}
+            {% continue %}
+        {% endif %}
+
+        {% if firstHeader %}
+            {% assign firstHeader = false %}
+            {% assign minHeader = headerLevel %}
+        {% endif %}
+
+        {% assign indentAmount = headerLevel | minus: minHeader %}
+        {% assign _workspace = node | split: '</h' %}
+
+        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+        {% assign html_id = _idWorkspace[0] %}
+
+        {% assign _classWorkspace = _workspace[0] | split: 'class="' %}
+        {% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
+        {% assign html_class = _classWorkspace[0] %}
+
+        {% if html_class contains "no_toc" %}
+            {% continue %}
+        {% endif %}
+
+        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+        {% assign space = '' %}
+        {% for i in (1..indentAmount) %}
+            {% assign space = space | prepend: '    ' %}
+        {% endfor %}
+
+        {% unless include.item_class == blank %}
+            {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
+        {% endunless %}
+
+        {% capture heading_body %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
+        {% capture my_toc %}{{ my_toc }}
+{{ space }}{{ listModifier }} {{ listItemClass }} [{{ heading_body | replace: "|", "\|" }}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
+    {% endfor %}
+
+    {% if include.class %}
+        {% capture my_toc %}{:.{{ include.class }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+
+    {% if include.id %}
+        {% capture my_toc %}{: #{{ include.id }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}
+
+<div class="contents">
+    <div class="menu">
+        <p class="menu-label">{{ include.contents_title }}</p>
+        {{ my_toc | markdownify | strip }}
+    </div>
+</div>
+
+

data/_includes/vimeo.html

@@ -1,3 +1,3 @@
-<figure class="image is-16by9">
-    <iframe src="https://player.vimeo.com/video/{{ include.video }}?color=ff9933&title=0&byline=0&portrait=0" class="has-ratio" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script>
+<figure class="image is-16by9">
+    <iframe src="https://player.vimeo.com/video/{{ include.video }}?color=ff9933&title=0&byline=0&portrait=0" class="has-ratio" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script>
 </figure>

data/_includes/youtube.html

@@ -1,8 +1,8 @@
-<figure class="image is-16by9"> 
-    <iframe class="has-ratio" 
-        src="https://www.youtube.com/embed/{{ include.video }}?start={{ include.time | default: 0 }}&showinfo=0" 
-        frameborder="0" 
-        allowfullscreen
-        >
-    </iframe>
+<figure class="image is-16by9"> 
+    <iframe class="has-ratio" 
+        src="https://www.youtube.com/embed/{{ include.video }}?start={{ include.time | default: 0 }}&showinfo=0" 
+        frameborder="0" 
+        allowfullscreen
+        >
+    </iframe>
 </figure>

data/_layouts/base.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+{% include setup.html %}
+<html
+	lang="{{ site.lang | default: 'en' }}"
+	{% if site.fixed_navbar %}
+		class="has-navbar-fixed-{{ site.fixed_navbar }}"
+	{% endif %}
+>
+	{% include head.html %}
+
+	<body>
+		{% include header.html %}
+
+		{% include important-message.html %}
+
+		{{content}}
+
+		{% unless page.hide_footer %}
+			{% include footer.html %}
+		{% endunless %}
+
+		<script src="{{ site.baseurl }}/assets/js/app.js" type="text/javascript"></script>
+		{%- include footer-scripts.html -%}
+	</body>
+</html>

data/_layouts/blog.html

@@ -4,10 +4,11 @@ layout: default
 
 {{ content }}
 
+<div class="section mb-medium">
+	{% include subscribe.html %}
+</div>
+
 <div class="columns is-multiline">
-    <div class="column is-12">
-        {% include subscribe.html %}
-    </div>
 
     {% for post in paginator.posts %}
     <div class="column is-4-desktop is-6-tablet">

data/_layouts/default.html

@@ -1,66 +1,39 @@
-<!DOCTYPE html>
-{% if page.menubar or page.menubar_toc %}
-{% assign has_left_sidebar = true %}
-{% endif %}
+---
+layout: base
+---
 
-{% if page.show_sidebar and has_left_sidebar  %}
-{% assign content_width = 'is-4' %}
-{% elsif page.show_sidebar or has_left_sidebar %}
-{% assign content_width = 'is-8' %}
-{% else %}
-{% assign content_width = 'is-12' %}
-{% endif %}
+{% unless page.hide_hero %}
+	{% if page.banner_with_image %}
+		{% include banner.html %}
+	{% else %}
+		{% include simple_banner.html %}
+	{% endif %}
+{% endunless %}
 
-<html
- lang="{{ site.lang | default: 'en' }}"
- {% if site.fixed_navbar %}class="has-navbar-fixed-{{ site.fixed_navbar }}"{% endif %}>
-  {% include head.html %}
-  <body>
-    {% include header.html %}
-    {% unless page.hide_hero %}
-        {% if page.banner_with_image %}
-            {% include banner.html %}
-        {% else %}
-            {% include hero.html %}
-        {% endif %}
-    {% endunless %}
+{% include callouts.html %}
 
-	{% include callouts.html %}
+{% include showcase.html columns=true %}
 
-    {% include showcase.html columns=true %}
+<section class="section">
+	<div class="container">
+		<div class="columns">
+			{% if page.menubar_toc %}
+			<div class="column is-4-desktop is-4-tablet">
+				{% assign contentsTitle = page.toc_title | default: 'Contents' %}
+				{% include toc.html html=content class='menu-list' h_min=2 h_max=3 contents_title=contentsTitle %}
+			</div>
+			{% elsif page.menubar %}
+			<div class="column is-4-desktop is-4-tablet">
+				{% include menubar.html %}
+			</div>
+			{% endif %}
+			<div class="column {{ content_width }}">
+				{% include tabs.html %}
+				{% include sponsors.html %}
+				{% include gallery.html %}
 
-    <section class="section">
-        <div class="container">
-            <div class="columns">
-                {% if page.menubar_toc %}
-                <div class="column is-4-desktop is-4-tablet">
-                    {% assign contentsTitle = page.toc_title | default: 'Contents' %}
-                    {% include toc.html html=content class='menu-list' h_min=2 h_max=3 contents_title=contentsTitle %}
-                </div>
-                {% elsif page.menubar %}
-                <div class="column is-4-desktop is-4-tablet">
-                    {% include menubar.html %}
-                </div>
-                {% endif %}
-                <div class="column {{ content_width }}">
-                    {% include tabs.html %}
-                    {% include sponsors.html %}
-                    {% include gallery.html %}
-                    {{ content }}
-                </div>
-                {% if site.posts and page.show_sidebar %}
-                <div class="column is-4-desktop is-12-tablet">
-                    {% include latest-posts.html %}
-                </div>
-                {% endif %}
-            </div>
-        </div>
-    </section>
-
-    {% unless page.hide_footer %}
-        {% include footer.html %}
-    {% endunless %}
-    <script src="{{ site.baseurl }}/assets/js/app.js" type="text/javascript"></script>
-    {%- include footer-scripts.html -%}
-  </body>
-</html>
+				{{ content }}
+			</div>
+		</div>
+	</div>
+</section>

data/_layouts/page.html

@@ -1,11 +1,11 @@
----
-layout: default
----
-
-{% if page.toc %}
-    {% assign contentsTitle = page.toc_title | default: 'Contents' %}
-    {% include toc.html html=content class='menu-list' h_min=2 h_max=3 contents_title=contentsTitle %}
-{% endif %}
-<div class="content">
-    {{ content }}
+---
+layout: default
+---
+
+{% if page.toc %}
+    {% assign contentsTitle = page.toc_title | default: 'Contents' %}
+    {% include toc.html html=content class='menu-list' h_min=2 h_max=3 contents_title=contentsTitle %}
+{% endif %}
+<div class="content">
+    {{ content }}
 </div>