66 lines
1.7 KiB
HTML
66 lines
1.7 KiB
HTML
<!-- row shortcode
|
||
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
||
Divides markdown into columns by splitting content using column identifier "|||"
|
||
Creates equal width blocks in a flex row.
|
||
|
||
Parameters:
|
||
- style:
|
||
- lean: if style is lean, the row doesn't have outer margins
|
||
- bgPath: if bgPath is passed, the row has a full width background
|
||
-->
|
||
|
||
{% set columns = body | safe | markdown | split(pat="|||") %}
|
||
{% set classes = "relative pt-12 flex flex-col md:flex-row lg:flex-row p-8 sm:p-12 md:p-16 lg:p-20 lg:py-16"%}
|
||
|
||
{% if 2 < columns | length %}
|
||
{% set classes = classes ~ " lg:items-start" %}
|
||
{% else %}
|
||
{% set classes = classes ~ " lg:items-center" %}
|
||
{% endif %}
|
||
|
||
{% set column_classes = "flex-1 lg:mx-8" %}
|
||
|
||
{% if style %}
|
||
|
||
{% if "lean" in style %}
|
||
{% set classes = "relative flex flex-col lg:flex-row items-baseline w-full" %}
|
||
{% set column_classes = "flex-1" %}
|
||
{% endif %}
|
||
|
||
{% if "center" in style %}
|
||
{% set classes = classes ~ " text-center" %}
|
||
{% endif %}
|
||
|
||
{% endif %}
|
||
|
||
{% set styles = "" %}
|
||
|
||
{% if bgPath %}
|
||
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover" %}
|
||
{% set classes = classes ~ " lg:py-40" %}
|
||
{% endif %}
|
||
|
||
|
||
<div class="{{classes}}" style="{{styles}}">
|
||
{% for column in columns%}
|
||
|
||
<div class="{{column_classes}}">
|
||
{% if "{% mermaid() %}" in column %}
|
||
|
||
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
|
||
{% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
|
||
|
||
<div class="mermaid">
|
||
{{mermaid_content | safe }} yo
|
||
</div>
|
||
|
||
{% else %}
|
||
|
||
{{ column | safe }}
|
||
|
||
{% endif %}
|
||
|
||
|
||
</div>
|
||
{% endfor %}
|
||
</div> |