mobile version improvements

This commit is contained in:
timurgordon
2022-05-27 11:22:03 +03:00
parent 72c18f6748
commit 0c6c761250
8 changed files with 98 additions and 40 deletions

View File

@@ -2,11 +2,9 @@
<html lang="en" charset="utf-8">
{% include "partials/head.html" %}
{% include "partials/header.html" %}
<body>
<div id="content" class="p-8 pt-12 sm:p-12 md:p-16 lg:p-20">
<div id="content">
{% block content %}{% endblock %}
</div>

View File

@@ -31,10 +31,10 @@ Parameters:
<!-- 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 col_class = col_class ~ " last:px-20 lg: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 col_class = col_class ~ " first:px-20 lg:max-w-[50%] " %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% else %}
{% set row_class = row_class ~ " md:py-0 " %}
@@ -74,32 +74,47 @@ Parameters:
{% set anchor_link = anchor %}
{% endif %}
<!-- makes row full screen width and adds background img -->
{% set styles = "" %}
{% set div_class = " " %}
{% if bgPath %}
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover;" %}
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover; background-position: center;" %}
{% if "#desktop" in bgPath %}
{% set div_class = " !bg-[length:0px_0px] !bg-no-repeat lg:!bg-cover " %}
{% set row_class = row_class | replace(from='text-white', to='') %}
{% endif %}
{% endif %}
{% if bgStyle %}
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover; height: -webkit-fill-available" %}
{% if "full" in bgStyle %}
{% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;" %}
{% endif %}
{% endif %}
{% if bgColor %}
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
{% set row_class = row_class ~ " py-0 " %}
{% 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 id="{{anchor_link}}" class="{{'w-screen justify-center flex ' ~ div_class}}" style="{{styles}}">
<div class="{{row_class}}" style="width: -webkit-fill-available">
{% 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">
<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 -->
{% set claim = "yo there is no img" %}
{% if "img" in column %}
{% set claim = "yo there iis img" %}
{% endif %}
{{claim}}
{% if "{% mermaid() %}" in column %}
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
{% set mermaid_content = mermaid_section[1] | striptags | replace(from="", to="--")%}