make template more responsive

This commit is contained in:
timurgordon 2022-08-11 14:44:16 +03:00
parent df832173c0
commit 9533a4cba4
2 changed files with 11 additions and 9 deletions

View File

@ -99,7 +99,7 @@
{% set header_class = config.extra.header_class | default(value='') %}
<div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
<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>
<a href="/" class="flex">
<img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />

View File

@ -35,7 +35,7 @@ Parameters:
{% 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-->
{% if 2 < columns | length %}
@ -49,17 +49,20 @@ Parameters:
<!-- Margins -->
{% set margin_class = " mx-4 md:mx-16 lg:mx-24 " %}
{% if margin %}
{% if "none" in margin %}
{% set row_class = row_class ~ " mx-0 " %}
{% set margin_class = " mx-0 " %}
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
{% if "lean-left" in margin %}
{% 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 row_class = row_class ~ " !mr-0 sm:gap-0 " %}
{% endif %}
{% else %}
{% set row_class = row_class ~ " mx-4 md:mx-16 lg:mx-24 " %}
{% endif %}
{% set row_class = row_class ~ margin_class %}
{% if style %}