rschneider/yogastic
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[yoga-12] serviceList page improvements - improve css

Browse Source
This commit is contained in:
Roland Schneider 2025-09-16 08:59:32 +02:00
parent 27ca602154
commit 70fbefd317
3 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
yoga-app/src/components/block.with.left.image.component.tsx
View File

@ -15,11 +15,18 @@ export default function BlockWithLeftImage ( {
return (
<section className={clsx("block_with_left_image_section","block_with_image","block_with_left_image",styles.blockWithLeftImage)} id={id}>
<div className="container">
<div className="block_with_image_box">
<div className="block_with_left_image_box">
<div className="row">
{ url && <div className="block_with_left_image_image d-lg-none d-md-none col-sm-12 col-xs-12">
<figure className="mb-0">
<YogaImageComponent src={url} alt=""
className={clsx("img-fluid", styles.leftImage)}/>
</figure>
</div>
}
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
<div className={ clsx("block_with_image_content","block_with_image_content","block_with_left_image_content",styles.blockLeftblock_with_imageContent)}>
{url && <div className="block_with_image_image">
{url && <div className="block_with_left_image_image d-lg-block d-md-block d-sm-none d-xs-none d-none">
<figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
</div>
}

32
yoga-app/src/styles/block-with-left-image.scss
View File

@ -5,7 +5,7 @@
padding: 45px 0 130px;
position: relative;
}
.block_with_left_image .block_with_image_box{
.block_with_left_image .block_with_left_image_box{
width: 100%;
background-color: var(--e-global-color-white);
border-radius: 200px 0 200px 0;
@ -80,6 +80,12 @@
}
}
.block_with_left_image_image img{
border-top-left-radius: 200px;
border-bottom-right-radius: 200px;
margin: -150px 12px 12px -40px;
max-width: 50%;
}
@ -120,6 +126,11 @@
.block_with_left_image_section .vision_left_shape {
display: none;
}
.block_with_left_image_image img{
margin-top: -80px;
}
}
@media screen and (max-width: 991px){
.block_with_left_image_section {
@ -147,6 +158,12 @@
line-height: 18px;
padding: 20px 35px;
}
.block_with_left_image_image img {
margin-top: -40;
margin-left: 0;
}
}
@media screen and (max-width: 767px){
@ -178,10 +195,15 @@
padding: 18px 32px;
}
.block_with_left_image_image img{
margin-top: 0;
max-width: 100%;
}
}
@media screen and (max-width: 575px) {
.block_with_left_image_section .block_with_image_box {
.block_with_left_image_section .block_with_left_image_box {
border-radius: 118px 0 118px 0;
}
.block_with_left_image_content p {
@ -193,4 +215,10 @@
line-height: 14px;
padding: 16px 30px;
}
.block_with_left_image_image img{
margin-top: 0;
max-width: 100%;
//border-top-left-radius: 200px;
//border-bottom-right-radius: 200px;
}
}

22
yoga-app/src/styles/block-with-right-image.scss
View File

@ -13,8 +13,8 @@
&_image img {
max-width: 50%;
border-top-left-radius: 200px;
border-bottom-right-radius: 200px;
border-top-left-radius: var(--y-box-border-radius);
border-bottom-right-radius: var(--y-box-border-radius);
margin: calc(-1 * var(--y-block-with-right-image-top-spacing)) 0 12px 12px;
}
@ -120,6 +120,9 @@
&_content {
padding-left: 70px;
p, h2, h3, h4, h5, h6{
padding-right: 70px;
}
h5 {
margin-bottom: 8px;
}
@ -128,7 +131,6 @@
}
p {
margin-bottom: 28px;
padding-right: 18px;
}
}
&_right_shape {
@ -147,6 +149,11 @@
padding: 70px 0 35px;
&_content {
p, h2, h3, h4, h5, h6{
padding-right: 45px;
}
padding-left: 45px;
h5 {
margin-bottom: 5px;
@ -156,7 +163,6 @@
}
p {
margin-bottom: 22px;
padding-right: 0px;
}
}
&_image img {
@ -175,7 +181,8 @@
padding-left: 0;
text-align: center;
margin-bottom: 30px;
h2 {
h2,h3,h4,h5,h6 {
padding-right: 0;
margin-bottom: 8px;
}
p {
@ -185,6 +192,7 @@
}
&_image img {
margin-top: 0;
margin-bottom: 0;
max-width: 100%;
}
}
@ -196,6 +204,9 @@
--y-btn-padding: 16px 30px;
&_content {
h2,h3,h4,h5,h6{
padding-right: 0;
}
p {
margin-bottom: 15px;
padding: 0 10px;
@ -203,6 +214,7 @@
}
&_image img {
margin-top: 0;
margin-bottom: 0;
max-width: 100%;
}
}