desktop header design improvements

This commit is contained in:
timurgordon
2022-03-07 19:14:21 +03:00
parent af07618f66
commit 6875d6aea6
6 changed files with 60 additions and 31 deletions

View File

@@ -1,3 +1,3 @@
<button class="border-transparent flex flex-col border-2 w-80 items-start rounded h-24 transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2">
{{ body | trim_start_matches(pat="<p></p>") | safe}}
{{ body | trim_start_matches(pat="<p>") | safe}}
</button>

View File

@@ -14,18 +14,13 @@ Parameters:
<!-- aligns columns depending on col number-->
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% set column_classes = "flex-1 m-4 lg:m-4" %}
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-8" %}
{% set column_classes = "flex-1 m-8 lg:m-4" %}
<!-- makes row full screen width and adds background img -->
{% set styles = "" %}
{% if bgPath %}
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover" %}
{% set classes = classes ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
{% endif %}
<div class="{{classes}}" style="{{styles}}">
<div class="{{classes}}">
{% for column in columns%}
<!-- Hides empty columns if displayed vertically in small screen -->
{% if column | as_str | length < 10 %}
@@ -40,7 +35,7 @@ Parameters:
{% else %}
<div class="{{column_classes}}">
{{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
<hr>
<hr class="border-t-2 mt-2">
<br/>
<!-- handles mermaid markdown content display -->