sayalip
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

fix:change spacing around the gallery

staging
apurvab 2024-06-12 12:36:49 +05:30
parent 272e565fb7
commit 7c386b36be
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_dev/elegance.css
View File

@ -72,4 +72,9 @@ input[type="radio"],input[type="checkbox"] {
} }
} }
@media (max-width: 480px) {
.xxs {
font-size: xx-small;
}
}

19
assets/css/theme.css
View File

@ -1008,6 +1008,10 @@ select {
margin-top: 2rem; margin-top: 2rem;
} }
.mb-20 {
margin-bottom: 5rem;
}
.block { .block {
display: block; display: block;
} }
@ -1585,10 +1589,6 @@ select {
text-align: justify; text-align: justify;
} }
.text-end {
text-align: end;
}
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2rem; line-height: 2rem;
@ -1822,6 +1822,12 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
} }
} }
@media (max-width: 480px) {
.xxs {
font-size: xx-small;
}
}
.file\:mr-4::file-selector-button { .file\:mr-4::file-selector-button {
margin-right: 1rem; margin-right: 1rem;
} }
@ -2200,6 +2206,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
margin-bottom: 8rem; margin-bottom: 8rem;
} }
.lg\:mb-2 {
margin-bottom: 0.5rem;
}
.lg\:flex { .lg\:flex {
display: flex; display: flex;
} }
@ -2299,4 +2309,3 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
} }
} }

16
templates/layouts/layout-both-columns.tpl
View File

@ -87,7 +87,7 @@
{if $page.page_name == 'index'} {if $page.page_name == 'index'}
<div class="container"> <div class="container">
<h2 class="products-section-title text-2xl font-bold mb-16 mt-20 text-center"> Custom design by you</h2> <h2 class="products-section-title text-2xl font-bold mb-16 mt-20 text-center"> Custom design by you</h2>
<div class=" flex md:flex-row flex-col gap-8 lg:mb-32 mb-24"> <div class=" flex md:flex-row flex-col gap-8 lg:mb-32 mb-20">
<div href="https://brooksbingham.com/module/thob/configurator?id_product=74"> <div href="https://brooksbingham.com/module/thob/configurator?id_product=74">
<a href="https://brooksbingham.com/module/thob/configurator?id_product=74"> <a href="https://brooksbingham.com/module/thob/configurator?id_product=74">
<img class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/111-home_default/business-shirt.jpg"/> <img class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/111-home_default/business-shirt.jpg"/>
@ -120,7 +120,7 @@
</div> </div>
<div class="lg:mb-32 mb-24" > <div class="lg:mb-32 mb-20" >
<h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1> <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
<h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you </h3> <h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you </h3>
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/> <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/>
@ -128,18 +128,18 @@
<div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1"> <div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1">
<div class="row-span-3 col-start-1 row-end-2 relative"> <div class="row-span-3 col-start-1 row-end-2 relative">
<h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium lg:text-xl mb-2 pr-1.5 text-xs lg:p-4">Business Suits for Men</h3> <h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium lg:text-xl lg:mb-2 pr-1.5 xxs lg:p-4">Business Suits for Men</h3>
<h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Make a powerful impression and radiate confidence</h3> <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Make a powerful impression and radiate confidence</h3>
<img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-big%20img.jpg" alt="Tailored business Suits designed for you to make a <img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-big%20img.jpg" alt="Tailored business Suits designed for you to make a
powerful impression and radiate confidence." /> powerful impression and radiate confidence." />
</div> </div>
<div class="col-span-1 col-start-2 row-span-2 flex relative"> <div class="col-span-1 col-start-2 row-span-2 flex relative">
<h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 text-end lg:font-bold font-medium lg:text-xl text-xs mb-2 lg:w-full w-32 lg:p-4">Browse through our design</h3> <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Browse through our design</h3>
<h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Get inspired with our curated outfit ideas</h3> <h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Get inspired with our curated outfit ideas</h3>
<img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img1.png" /> <img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img1.png" />
</div> </div>
<div class="row-start-1 col-start-2 col-span-1 row-span-1 relative "> <div class="row-start-1 col-start-2 col-span-1 row-span-1 relative ">
<h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl mb-2 text-xs lg:p-4">Get the perfect fit</h3> <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Get the perfect fit</h3>
<h3 class="absolute bottom-0 right-0 text-lg p-4 hide-on-small">Get inspired with our curated outfit ideas</h3> <h3 class="absolute bottom-0 right-0 text-lg p-4 hide-on-small">Get inspired with our curated outfit ideas</h3>
<img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img2.jpg" <img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img2.jpg"
alt="The future of fashion with our innovative designs. Customization options tailored to your measurements and discover your perfect fit in minutes" /> alt="The future of fashion with our innovative designs. Customization options tailored to your measurements and discover your perfect fit in minutes" />
@ -149,18 +149,18 @@
<div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1"> <div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1">
<div class="row-span-3 col-start-2 row-end-2 relative"> <div class="row-span-3 col-start-2 row-end-2 relative">
<h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium pr-1.5 lg:text-xl mb-2 text-xs lg:p-4">Wear Your Identity</h3> <h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium pr-1.5 lg:text-xl lg:mb-2 xxs lg:p-4">Wear Your Identity</h3>
<h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Fashion that speaks volumes</h3> <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Fashion that speaks volumes</h3>
<img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-big%20img.jpg" /> <img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-big%20img.jpg" />
</div> </div>
<div class="col-span-1 col-start-1 row-span-2 flex relative"> <div class="col-span-1 col-start-1 row-span-2 flex relative">
<h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl mb-2 text-xs lg:p-4">Timeless Quality </h3> <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Timeless Quality </h3>
<h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Fashion that stands the test of time</h3> <h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Fashion that stands the test of time</h3>
<img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg" alt="Invest in enduring fashion with our commitment to quality and <img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg" alt="Invest in enduring fashion with our commitment to quality and
durability.From custom-made tuxedos to business suits, each piece stands the test of time." /> durability.From custom-made tuxedos to business suits, each piece stands the test of time." />
</div> </div>
<div class="row-start-1 col-start-1 col-span-1 row-span-1 relative "> <div class="row-start-1 col-start-1 col-span-1 row-span-1 relative ">
<h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 text-end pr-2 lg:font-bold font-medium lg:text-xl mb-2 text-xs lg:p-4">Tailored to your specifications </h3> <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Tailored to your specifications </h3>
<h3 class="absolute bottom-0 right-0 hide-on-small text-lg p-4">Tailor every detail to match your preferences</h3> <h3 class="absolute bottom-0 right-0 hide-on-small text-lg p-4">Tailor every detail to match your preferences</h3>
<img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img2.png" /> </div> <img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img2.png" /> </div>
</div> </div>