111 lines
4.0 KiB
HTML
111 lines
4.0 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 row_class = "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 md:flex md:flex-row md:py-4 lg:py-8"%}
|
||
|
||
<!-- aligns columns depending on col number-->
|
||
{% if 2 < columns | length %}
|
||
{% set row_class = row_class ~ " lg:items-start" %}
|
||
{% else %}
|
||
{% set row_class = row_class ~ " lg:items-center" %}
|
||
{% endif %}
|
||
|
||
{% set col_class = "flex-1 mb-20 lg:mb-0 " %}
|
||
|
||
{% if style %}
|
||
|
||
{% if "center" in style %}
|
||
{% set row_class = row_class ~ " text-center items-center mx-auto justify-center " %}
|
||
{% set col_class = col_class ~ " flex-1 " %}
|
||
{% endif %}
|
||
|
||
<!-- makes row full screen width, strips margins -->
|
||
{% if "lean" in style %}
|
||
{% if "lean-left" in style %}
|
||
{% set col_class = col_class ~ " last:px-20 max-w-[50%] " %}
|
||
{% set row_class = row_class ~ " sm:gap-0 " %}
|
||
{% elif "lean-right" in style %}
|
||
{% set col_class = col_class ~ " first:px-20 max-w-[50%] " %}
|
||
{% set row_class = row_class ~ " sm:gap-0 " %}
|
||
{% else %}
|
||
{% set col_class = col_class ~ " lg:m-0 " %}
|
||
{% endif %}
|
||
{% else %}
|
||
{% set row_class = row_class ~ " mx-8 " %}
|
||
{% set col_class = col_class ~ " lg:mx-8 " %}
|
||
{% endif %}
|
||
|
||
<!-- makes row semi-full screen width, strips margins -->
|
||
{% if "between" in style %}
|
||
{% set row_class = row_class ~ " lg:max-w-6xl " %}
|
||
{% elif "moderate" in style %}
|
||
{% set row_class = row_class ~ " lg:mx-20 " %}
|
||
{% endif %}
|
||
|
||
<!-- makes row full screen width, strips margins -->
|
||
{% if "narrow" in style %}
|
||
{% set row_class = row_class ~ " lg:max-w-3xl " %}
|
||
{% elif "tight" in style %}
|
||
{% set row_class = row_class ~ " lg:max-w-sm " %}
|
||
{% elif "moderate" in style %}
|
||
{% set row_class = row_class ~ " lg:mx-20 " %}
|
||
{% endif %}
|
||
|
||
{% if "invert-color" in style %}
|
||
{% set row_class = row_class ~ " text-white " %}
|
||
{% endif %}
|
||
|
||
{% else %}
|
||
{% set row_class = row_class ~ " mx-12 " %}
|
||
{% endif %}
|
||
|
||
{% set anchor_link = ""%}
|
||
{% if anchor %}
|
||
{% set anchor_link = anchor %}
|
||
{% endif %}
|
||
|
||
|
||
<!-- makes row full screen width and adds background img -->
|
||
{% set styles = "" %}
|
||
{% if bgPath %}
|
||
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover" %}
|
||
{% endif %}
|
||
{% if bgColor %}
|
||
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
|
||
{% endif %}
|
||
|
||
<div id="{{anchor_link}}" class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 justify-center flex" style="{{styles}}">
|
||
<div class="{{row_class}}">
|
||
{% for column in columns%}
|
||
|
||
<!-- Hides empty columns if displayed vertically in small screen -->
|
||
{% if column | as_str | length < 10 %}
|
||
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
|
||
{{ column | safe }}
|
||
</div>
|
||
{% else %}
|
||
<div class="{{col_class}}">
|
||
<!-- handles mermaid markdown content display -->
|
||
{% 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 }}
|
||
</div>
|
||
{% else %}
|
||
{{ column | safe }}
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
</div> |