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

Compare commits

base: rschneider:c47ec66dff9fea03786ba621a0f660a99fddd481
Branches Tags
rschneider:main
rschneider:service-article
rschneider:yoga-6
rschneider:feature/yoga-4
..
compare: rschneider:27ca60215425140c92459c4f32104edcb7ff4459
Branches Tags
rschneider:main
rschneider:service-article
rschneider:yoga-6
rschneider:feature/yoga-4

No commits in common. "c47ec66dff9fea03786ba621a0f660a99fddd481" and "27ca60215425140c92459c4f32104edcb7ff4459" have entirely different histories.
c47ec66dff ... 27ca602154

4 changed files with 210 additions and 232 deletions
Show Stats Expand all files Collapse all files

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

@ -15,23 +15,16 @@ export default function BlockWithLeftImage ( {
return ( return (
<section className={clsx("block_with_left_image_section","block_with_image","block_with_left_image",styles.blockWithLeftImage)} id={id}> <section className={clsx("block_with_left_image_section","block_with_image","block_with_left_image",styles.blockWithLeftImage)} id={id}>
<div className="container"> <div className="container">
<div className="block_with_left_image_box"> <div className="block_with_image_box">
<div className="row"> <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="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)}> <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_left_image_image d-lg-block d-md-block d-sm-none d-xs-none d-none"> {url && <div className="block_with_image_image">
<figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure> <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
</div> </div>
} }
{title && <h5>{title}</h5> } <h5>{title}</h5>
{header && <h2>{header}</h2> } <h2>{header}</h2>
<NextBlocksRenderer content={ block } /> <NextBlocksRenderer content={ block } />
<div className="btn_wrapper"> <div className="btn_wrapper">
{button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>} {button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}

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

@ -1 +1,11 @@
/**
block with image components
*/
.block_with_image{
--y-block-with-right-image-spacing-image: 96px;
--y-block-with-image-spacing-main: 66px;
}

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

@ -1,50 +1,40 @@
.block_with_left_image {
--y-padding: 45px 0 130px;
--y-box-border-radius: 200px;
--y-content-padding-top: 150px;
--y-btn-font-size: 22px;
--y-btn-padding: 24px 44px;
--y-image-margin-top: -150px;
--y-block-with-right-image-spacing-image: 96px;
--y-block-with-image-spacing-main: 66px;
padding: var(--y-padding);
.block_with_left_image{
padding: 45px 0 130px;
position: relative; position: relative;
}
&_box { .block_with_left_image .block_with_image_box{
width: 100%; width: 100%;
background-color: var(--e-global-color-white); background-color: var(--e-global-color-white);
border-radius: var(--y-box-border-radius) 0 var(--y-box-border-radius) 0; border-radius: 200px 0 200px 0;
box-shadow: 1px 1px 50px rgb(0 0 0 / 7%); box-shadow: 1px 1px 50px rgb(0 0 0 / 7%);
} }
.block_with_left_image_content{
&_content { padding-top: 150px;
padding-top: var(--y-content-padding-top);
padding-left: 40px; padding-left: 40px;
}
h5 { .block_with_left_image_content h5{
text-transform: uppercase; text-transform: uppercase;
color: var(--e-global-color-secondary); color: var(--e-global-color-secondary);
letter-spacing: 3.1px; letter-spacing: 3.1px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.block_with_left_image_content h2{
h2 {
margin-bottom: 16px; margin-bottom: 16px;
color: var(--e-global-color-primary); color: var(--e-global-color-primary);
} }
.block_with_left_image_content p {
p {
margin-bottom: 32px; margin-bottom: 32px;
color: var(--e-global-color-text); color: var(--e-global-color-text);
padding-right: 60px; padding-right: 60px;
} }
.block_with_left_image_content .btn_wrapper .read_more_btn{
.btn_wrapper .read_more_btn { font-size: 22px;
font-size: var(--y-btn-font-size); line-height: 22px;
line-height: var(--y-btn-font-size);
font-weight: 500; font-weight: 500;
padding: var(--y-btn-padding); padding: 24px 44px;
text-align: center; text-align: center;
color: var(--e-global-color-white); color: var(--e-global-color-white);
display: inline-block; display: inline-block;
@ -53,20 +43,18 @@
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
}
&:hover { .block_with_left_image_content .btn_wrapper .read_more_btn:hover {
color: var(--e-global-color-accent); color: var(--e-global-color-accent);
background-color: var(--e-global-color-soft-orange); background-color: var(--e-global-color-soft-orange);
transform: translateY(-10px); transform: translateY(-10px);
}
&::before { .block_with_left_image_content .btn_wrapper .read_more_btn:hover:before {
left: 0%; left: 0%;
right: auto; right: auto;
width: 100%; width: 100%;
} }
} .block_with_left_image_content .btn_wrapper .read_more_btn:before {
&::before {
display: block; display: block;
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -78,132 +66,131 @@
color: var(--e-global-color-accent); color: var(--e-global-color-accent);
background-color: var(--e-global-color-soft-orange); background-color: var(--e-global-color-soft-orange);
transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s; transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
} }
} .block_with_left_image .block_with_image_left_shape {
p, h1, h2, h3, h4, h5 {
padding-right: var(--y-block-with-right-image-spacing-image);
padding-left: var(--y-block-with-image-spacing-main);
}
}
&_image img {
border-top-left-radius: var(--y-box-border-radius);
border-bottom-right-radius: var(--y-box-border-radius);
margin: var(--y-image-margin-top) 12px 12px -40px;
max-width: 50%;
}
&_left_shape {
position: absolute; position: absolute;
top: 140px; top: 140px;
left: 0; left: 0;
} }
@media screen and (max-width: 1440px) { .block_with_left_image_content{
&_left_shape { p, h1,h2,h3,h4,h5{
padding-right: var(--y-block-with-right-image-spacing-image);
padding-left: var(--y-block-with-image-spacing-main);
}
}
@media screen and (max-width: 1440px){
.block_with_left_image_section .block_with_image_left_shape {
top: unset; top: unset;
bottom: 15px; bottom: 15px;
img { }
.block_with_left_image_section .block_with_image_left_shape img{
width: 95px; width: 95px;
} }
}
@media screen and (max-width: 1199px){
.block_with_left_image_section {
padding: 50px 0 100px;
} }
} .block_with_left_image_content {
padding-top: 80px;
@media screen and (max-width: 1199px) {
--y-padding: 50px 0 100px;
--y-content-padding-top: 80px;
--y-btn-font-size: 20px;
--y-btn-padding: 22px 40px;
--y-image-margin-top: -80px;
&_content {
padding-left: 15px; padding-left: 15px;
p, h2, h3, h4, h5, h6{
padding-left: 55px;
padding-right: 70px;
} }
.block_with_left_image_content h5 {
h5 { margin-bottom: 8px; } margin-bottom: 8px;
h2 { margin-bottom: 12px; } }
p { .block_with_left_image_content h2 {
margin-bottom: 12px;
}
.block_with_left_image_content p {
margin-bottom: 28px; margin-bottom: 28px;
padding-right: 40px;
} }
.block_with_left_image_content .btn_wrapper .read_more_btn {
font-size: 20px;
line-height: 20px;
padding: 22px 40px;
} }
&_left_shape { .block_with_left_image_section .vision_left_shape {
display: none; display: none;
} }
}
.block_with_left_image_image img{ @media screen and (max-width: 991px){
margin-left: -15px; .block_with_left_image_section {
padding: 35px 0 70px;
} }
.block_with_left_image_section .vision_box {
border-radius: 120px 0 120px 0;
} }
.block_with_left_image_content {
@media screen and (max-width: 991px) { padding-top: 40px;
--y-padding: 35px 0 70px; padding-left: 0px;
--y-box-border-radius: 120px;
--y-content-padding-top: 40px;
--y-btn-font-size: 18px;
--y-btn-padding: 20px 35px;
--y-image-margin-top: -40px;
&_content {
padding-left: 0;
p, h2, h3, h4, h5, h6{
padding-right: 45px;
padding-left: 45px;
} }
h5 { margin-bottom: 5px; } .block_with_left_image_content h5 {
h2 { margin-bottom: 10px; } margin-bottom: 5px;
p { }
.block_with_left_image_content h2 {
margin-bottom: 10px;
}
.block_with_left_image_content p {
margin-bottom: 22px; margin-bottom: 22px;
padding-right: 30px;
} }
.block_with_left_image_content .btn_wrapper .read_more_btn {
font-size: 18px;
line-height: 18px;
padding: 20px 35px;
} }
.block_with_left_image_image img{ }
margin-left: 0;
}
}
@media screen and (max-width: 767px) { @media screen and (max-width: 767px){
--y-padding: 30px 0 60px; .block_with_left_image_section {
--y-box-border-radius: 185px; padding: 30px 0 60px;
--y-btn-font-size: 16px; }
--y-btn-padding: 18px 32px; .block_with_left_image_section .vision_box {
--y-image-margin-top: 0; border-radius: 185px 0 185px 0;
}
&_image { .block_with_left_image_section .vision_image{
margin-bottom: 30px; margin-bottom: 30px;
img {
max-width: 100%;
} }
} .block_with_left_image_content {
&_content {
padding-top: 0; padding-top: 0;
text-align: center; text-align: center;
padding-left: 0px; padding-left: 0px;
margin-bottom: 30px; margin-bottom: 30px;
h2 { margin-bottom: 8px; } }
p { .block_with_left_image_content h2 {
margin-bottom: 8px;
}
.block_with_left_image_content p {
margin-bottom: 18px; margin-bottom: 18px;
padding: 0 50px; padding: 0 50px;
} }
} .block_with_left_image_content .btn_wrapper .read_more_btn {
font-size: 16px;
line-height: 16px;
padding: 18px 32px;
} }
@media screen and (max-width: 575px) { }
--y-box-border-radius: 118px;
--y-btn-font-size: 14px;
--y-btn-padding: 16px 30px;
&_content p { @media screen and (max-width: 575px) {
.block_with_left_image_section .block_with_image_box {
border-radius: 118px 0 118px 0;
}
.block_with_left_image_content p {
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 10px; padding: 0 10px;
} }
&_image img { .block_with_left_image_content .btn_wrapper .read_more_btn {
max-width: 100%; font-size: 14px;
} line-height: 14px;
padding: 16px 30px;
} }
} }

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

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