improve margins

This commit is contained in:
Torsten 2022-12-06 12:17:51 +02:00
parent f11bf318a5
commit 3eeb03a10b
7 changed files with 12 additions and 12 deletions

View File

@ -67,13 +67,13 @@ module Merged
puts "Columns #{option}" puts "Columns #{option}"
case option case option
when "3" when "3"
columns = "grid-cols-1 md:grid-cols-3" columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
when "4" when "4"
columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4" columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
else # two else # two
columns = "grid-cols-1 md:grid-cols-2" columns = "grid-cols-1 md:grid-cols-2"
end end
{class: columns + " gap-6"} {class: columns }
end end
def button(text , url , color) def button(text , url , color)

View File

@ -1,9 +1,9 @@
.flex.flex-col.mx-5{ background_option(section)} .flex.flex-col.m-20{ background_option(section)}
.flex.items-center.justify-center.flex-1 .flex.items-center.justify-center.flex-1
.max-w-prose.px-4.py-8.mx-auto.text-center .max-w-prose.px-4.py-16.mx-auto.text-center
%h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
= section.header = section.header
%p.mt-4.text-gray-500 %p.mt-4.text-gray-700.pt-10
= section.text = section.text
- template = "merged/view/cards/" + section.card_template - template = "merged/view/cards/" + section.card_template
.grid{ column_option(section)} .grid{ column_option(section)}

View File

@ -1,4 +1,4 @@
.flex.flex-col.bg-white .flex.flex-col.m-20.bg-white
.flex.items-center.justify-center.flex-1 .flex.items-center.justify-center.flex-1
.max-w-xl.px-4.py-8.mx-auto.text-center .max-w-xl.px-4.py-8.mx-auto.text-center
%h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl

View File

@ -1,4 +1,4 @@
%section %section.m-20
.mx-auto.max-w-screen-xl.px-4.py-16.sm:px-6.sm:py-24.lg:px-8 .mx-auto.max-w-screen-xl.px-4.py-16.sm:px-6.sm:py-24.lg:px-8
.max-w-3xl .max-w-3xl
%h2.text-3xl.font-bold.sm:text-4xl %h2.text-3xl.font-bold.sm:text-4xl

View File

@ -1,7 +1,7 @@
%section.overflow-hidden.sm:grid.sm:grid-cols-2 %section.overflow-hidden.grid.grid-cols-2.m-20
%div{ order_option(section)} %div{ order_option(section)}
= image_for( section , "p-5 h-56 w-full object-cover sm:h-full") = image_for( section , "h-56 w-full object-cover sm:h-full")
.p-8.m-5.md:p-12.lg:px-16.lg:py-24{ background_option(section)} .p-8.md:p-12.lg:px-16.lg:py-24{ background_option(section)}
.mx-auto.max-w-xl.text-center.sm:text-left .mx-auto.max-w-xl.text-center.sm:text-left
%h2.text-2xl.font-bold.text-gray-900.md:text-3xl %h2.text-2xl.font-bold.text-gray-900.md:text-3xl
= section.header = section.header

View File

@ -1,4 +1,4 @@
.group.m-4.overflow-hidden.relative.flex.h-96.items-end.bg-black .group.m-8.overflow-hidden.relative.flex.h-96.items-end.bg-black
= image_for( card , "absolute inset-0 h-full w-full object-cover hover:scale-110 ease-in duration-700") = image_for( card , "absolute inset-0 h-full w-full object-cover hover:scale-110 ease-in duration-700")
.relative.w-full.bg-cyan-600.m-2.p-4.text-center.tracking-widest.text-white.transition-colors.group-hover:bg-cyan-700{:class => "sm:w-1/2"} .relative.w-full.bg-cyan-600.m-2.p-4.text-center.tracking-widest.text-white.transition-colors.group-hover:bg-cyan-700{:class => "sm:w-1/2"}
%h3.text-lg.uppercase %h3.text-lg.uppercase

View File

@ -1,4 +1,4 @@
%div{background_option(card)} %div.m-10{background_option(card)}
= image_for( card , "h-96 w-full object-cover") = image_for( card , "h-96 w-full object-cover")
%div.m-4{align_option(card)} %div.m-4{align_option(card)}
%h3.mt-4.p-4.text-xl.font-bold= card.header %h3.mt-4.p-4.text-xl.font-bold= card.header