ourworld_web/www_ourparadise
Archived
21
0
Fork 0
Code Issues 5 Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

update css and section size and fix mobile

Browse Source
This commit is contained in:
Ehab Hassan
2023-05-16 13:33:59 +03:00
parent 49ad09bbfa
commit f5687fbf32
13 changed files with 247 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/partials/header.html
View File

@@ -108,11 +108,11 @@
<div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg class="h-6 w-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<button id="close-hamburger-btn text-black" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

124
templates/shortcodes/row.html
View File

@@ -54,68 +54,17 @@ Parameters:
{% endif %}
<!-- Padding -->
{% set padding_class = " py-8 md:py-8 lg:py-28" %}
{% if padding %}
{% if "none" in padding %}
{% set padding_class = " py-0" %}
{% elif "top" in padding %}
{% set padding_class = " py-2 md:py-4 lg:pt-28" %}
{% elif "bottom" in padding %}
{% set padding_class = " py-2 md:py-4 lg:pb-28" %}
{% endif %}
{% endif %}
{% if css %}
{% set padding_class = padding_class ~ " " ~ css %}
{% endif %}
{% set row_class = row_class ~ padding_class %}
<!-- Margins -->
{% set margin_class = " mx-4 md:mx-16 lg:mx-24" %}
{% if margin %}
{% if "none" in margin %}
{% set margin_class = " mx-0" %}
{% elif "wide" in margin %}
{% set margin_class = " mx-4 sm:mx-8 md:mx-12 lg:mx-16 xl:mx-20" %}
{% elif "moderate" in margin %}
{% set margin_class = " mx-8 sm:mx-16 md:mx-20 lg:mx-28" %}
{% elif "narrow" in margin %}
{% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-40" %}
{% elif "tight" in margin %}
{% set margin_class = " mx-20 sm:mx-32 md:mx-40 lg:mx-80 xl:mx-96" %}
{% elif "header" in margin %}
{% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10" %}
{% endif %}
{% if "lean-left" in margin %}
{% set margin = margin_class | replace(from=" ", to=" first:")%}
{% set margin_left = margin | replace(from="mx", to="-ml") %}
{% set margin_right = margin | replace(from="mx", to="mr") %}
{% set col_class = col_class ~ " md:last:px-8 lg:last:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% elif "lean-right" in margin %}
{% set margin = margin_class | replace(from=" ", to=" last:")%}
{% set margin_left = margin | replace(from="mx", to="ml") %}
{% set margin_right = margin | replace(from="mx", to="-mr") %}
{% set col_class = col_class ~ " md:first:px-8 lg:first:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% endif %}
{% endif %}
{% if css %}
{% set margin_class = margin_class ~ " " ~ css %}
{% endif %}
{% set row_class = row_class ~ margin_class %}
{% if style %}
<!-- reverse col at mobile -->
{% if "reverse" in style %}
{% set row_class = "flex flex-col-reverse md:flex-row items-center" %}
{% endif %}
{% if "center" in style %}
{% set row_class = row_class ~ " text-center items-center mx-auto " %}
{% set col_class = col_class ~ " flex-1 " %}
@@ -156,6 +105,65 @@ Parameters:
{% set anchor_link = anchor %}
{% endif %}
<!-- Padding -->
{% set padding_class = " py-8 md:py-8 lg:py-28" %}
{% if padding %}
{% if "none" in padding %}
{% set padding_class = " py-0" %}
{% elif "top" in padding %}
{% set padding_class = " py-2 md:py-4 lg:pt-28" %}
{% elif "bottom" in padding %}
{% set padding_class = " py-2 md:py-4 lg:pb-28" %}
{% endif %}
{% endif %}
{% if css %}
{% set padding_class = padding_class ~ " " ~ css %}
{% endif %}
{% set row_class = row_class ~ padding_class %}
<!-- Margins -->
{% set margin_class = " mx-4 md:mx-16 lg:mx-24" %}
{% if margin %}
{% if "none" in margin %}
{% set margin_class = " mx-0" %}
{% elif "wide" in margin %}
{% set margin_class = " mx-4 md:mx-12 lg:mx-16 xl:mx-20" %}
{% elif "moderate" in margin %}
{% set margin_class = " mx-4 md:mx-20 lg:mx-28" %}
{% elif "narrow" in margin %}
{% set margin_class = " mx-4 md:mx-28 lg:mx-40" %}
{% elif "tight" in margin %}
{% set margin_class = " mx-4 md:mx-40 lg:mx-80 xl:mx-96" %}
{% elif "header" in margin %}
{% set margin_class = " mx-4 md:mx-28 lg:mx-40 my-10" %}
{% endif %}
{% if "lean-left" in margin %}
{% set margin = margin_class | replace(from=" ", to=" first:")%}
{% set margin_left = margin | replace(from="mx", to="-ml") %}
{% set margin_right = margin | replace(from="mx", to="mr") %}
{% set col_class = col_class ~ " md:last:px-8 lg:last:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% elif "lean-right" in margin %}
{% set margin = margin_class | replace(from=" ", to=" last:")%}
{% set margin_left = margin | replace(from="mx", to="ml") %}
{% set margin_right = margin | replace(from="mx", to="-mr") %}
{% set col_class = col_class ~ " md:first:px-8 lg:first:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% endif %}
{% endif %}
{% if css %}
{% set margin_class = margin_class ~ " " ~ css %}
{% endif %}
{% set row_class = row_class ~ margin_class %}
<!-- makes row full screen width and adds background img -->
{% set styles = "" %}
@@ -195,7 +203,7 @@ Parameters:
{% set no_margins = " -mx-8 md:-mx-12 lg:-mx-16 xl:-mx-20" %}
<div id="{{anchor_link}}" class="{{'relative justify-center flex overflow-hidden ' ~ div_class }}" style="{{styles}}">
<div id="{{anchor_link}}" class="{{'relative justify-center items-center flex overflow-hidden ' ~ div_class }}" style="{{styles}}">
<div id="{{row_id}}" class="{{row_class}}" style="min-width: -webkit-fill-available; min-width: -moz-available">
{% for column in columns%}