make template more responsive
This commit is contained in:
		@@ -99,7 +99,7 @@
 | 
				
			|||||||
        {% set header_class = config.extra.header_class | default(value='') %}
 | 
					        {% set header_class = config.extra.header_class | default(value='') %}
 | 
				
			||||||
        <div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
 | 
					        <div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
 | 
				
			||||||
            <div class="relative z-50 shadow">
 | 
					            <div class="relative z-50 shadow">
 | 
				
			||||||
            <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
 | 
					            <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5  md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
 | 
				
			||||||
                <div>
 | 
					                <div>
 | 
				
			||||||
                    <a href="/" class="flex">
 | 
					                    <a href="/" class="flex">
 | 
				
			||||||
                        <img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
 | 
					                        <img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -35,7 +35,7 @@ Parameters:
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
{% set columns = body | safe | markdown | split(pat="<p>|||</p>") %}
 | 
					{% set columns = body | safe | markdown | split(pat="<p>|||</p>") %}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
{% 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 flex-wrap max-w-fit "%}
 | 
					{% set row_class =  "relative py-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 md:flex md:flex-row flex-wrap max-w-fit "%}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<!-- aligns columns depending on col number-->
 | 
					<!-- aligns columns depending on col number-->
 | 
				
			||||||
{% if 2 < columns | length %}
 | 
					{% if 2 < columns | length %}
 | 
				
			||||||
@@ -49,17 +49,20 @@ Parameters:
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<!-- Margins -->
 | 
					<!-- Margins -->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					{% set margin_class = " mx-4 md:mx-16 lg:mx-24 " %}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
{% if margin %}
 | 
					{% if margin %}
 | 
				
			||||||
    {% if "none" in margin %}
 | 
					    {% if "none" in margin %}
 | 
				
			||||||
        {% set row_class =  row_class ~ " mx-0 " %}
 | 
					        {% set margin_class = " mx-0 " %}
 | 
				
			||||||
    {% elif "wide" in margin %}
 | 
					    {% elif "wide" in margin %}
 | 
				
			||||||
        {% set row_class =  row_class ~ " mx-12 " %}
 | 
					        {% set margin_class = " mx-4 sm:mx-8 md:mx-12 lg:mx-16 xl:mx-20 " %}
 | 
				
			||||||
    {% elif "moderate" in margin %}
 | 
					    {% elif "moderate" in margin %}
 | 
				
			||||||
        {% set row_class = row_class ~ " mx-8 sm:mx-16 md:mx-24 lg:mx-28 " %}
 | 
					        {% set margin_class = " mx-8 sm:mx-16 md:mx-24 lg:mx-28 " %}
 | 
				
			||||||
    {% elif "narrow" in margin %}
 | 
					    {% elif "narrow" in margin %}
 | 
				
			||||||
        {% set row_class = row_class ~ " mx-12 sm:mx-20 md:mx-28 lg:mx-32 " %}
 | 
					        {% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-32 " %}
 | 
				
			||||||
    {% elif "tight" in margin %}
 | 
					    {% elif "tight" in margin %}
 | 
				
			||||||
        {% set row_class = row_class ~ " mx-20 sm:mx-32 md:mx-60 lg:mx-80 xl:mx-96 " %}
 | 
					        {% set margin_class = " mx-20 sm:mx-32 md:mx-60 lg:mx-80 xl:mx-96 " %}
 | 
				
			||||||
    {% endif %}
 | 
					    {% endif %}
 | 
				
			||||||
    {% if "lean-left" in margin %}
 | 
					    {% if "lean-left" in margin %}
 | 
				
			||||||
        {% set col_class = col_class ~ " lg:last:px-20 lg:max-w-[50%] lg:mx-0 " %}
 | 
					        {% set col_class = col_class ~ " lg:last:px-20 lg:max-w-[50%] lg:mx-0 " %}
 | 
				
			||||||
@@ -68,10 +71,9 @@ Parameters:
 | 
				
			|||||||
        {% set col_class = col_class ~ " lg:first:px-20 lg:max-w-[50%] lg:mx-0 " %}
 | 
					        {% set col_class = col_class ~ " lg:first:px-20 lg:max-w-[50%] lg:mx-0 " %}
 | 
				
			||||||
        {% set row_class = row_class ~ " !mr-0 sm:gap-0 " %}
 | 
					        {% set row_class = row_class ~ " !mr-0 sm:gap-0 " %}
 | 
				
			||||||
    {% endif %}
 | 
					    {% endif %}
 | 
				
			||||||
{% else %}
 | 
					 | 
				
			||||||
    {% set row_class =  row_class ~ " mx-4 md:mx-16 lg:mx-24 " %}
 | 
					 | 
				
			||||||
{% endif %}
 | 
					{% endif %}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					{% set row_class =  row_class ~ margin_class %}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
{% if style %}
 | 
					{% if style %}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user