Skip to content

Commit

Permalink
added responsiveness-css for developed designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@aditya-chaphekar
aditya-chaphekar committed Sep 6, 2024
1 parent ab181a3 commit 46bbd09
Show file tree
Hide file tree
Showing 5 changed files with 516 additions and 1 deletion.
97 changes: 97 additions & 0 deletions docs-website/src/pages/_components/CaseStudy/case-study.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,100 @@
}
}
}

@media (max-width: 480px) {
.case_study {
display: flex;
flex-direction: column;
width: 100%;
margin: 5rem auto;

.case_study_heading {
text-align: center;
font-family: "Manrope";

div {
width: 90%;
margin: auto;
font-size: 1.8rem;
line-height: normal;
font-weight: 500;
}
p {
width: 65%;
margin: auto;
font-size: 1.2rem;
line-height: 1.5rem;
margin-top: 10px;
}
}

.card_row {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 30px;

.card {
position: relative;
width: 100%;
border-radius: 20px;
background: white;
padding: 5px;
padding-bottom: 15px;

img {
width: 100%;
height: 70%;
object-fit: cover;
border-radius: 15px;
}
.card_tag {
position: absolute;
right: 0.8rem;
top: 0.8rem;
background: #edf2ff;
color: rgb(58, 57, 57);
font-size: 10px;
padding: 0.3rem;
border-radius: 0.5rem;
}
.card_heading_div {
padding: 0 10px 10px;
.card_heading {
font-size: 1.5rem;
font-weight: bold;
}
.card_para {
font-size: 1rem;
margin-top: 5px;
line-height: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}

.bottom_line {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #12b0fb;
font-size: 1.1rem;
font-weight: 500;
margin-top: 50px;
margin-bottom: 10px;

span {
line-height: 10px;
font-size: 1.5rem;
margin-left: 5px;
}
}
}
}
114 changes: 114 additions & 0 deletions docs-website/src/pages/_components/Community/community.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,117 @@
}
}
}

// Responsiveness
@media (max-width: 480px) {
.community_section {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: "Manrope";

&::before {
position: absolute;
content: "";
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 30px;
background-color: #ffffff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

&::after {
position: absolute;
content: "";
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 30px;
background-color: #ffffff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.community_section_left {
padding: 50px 0;
width: 100%;
background: #3e2644;
color: white;
display: flex;
align-items: center;
justify-content: center;

.community_section_left_content {
width: 80%;
margin: 2rem auto 5rem 2rem;
.community_section_heading {
color: rgba($color: #fff, $alpha: 0.4);
font-size: 1.7rem;
line-height: normal;
font-weight: bold;
}
p {
font-size: 0.8rem;
color: rgba($color: #fff, $alpha: 0.6);
font-weight: light;
margin-top: 10px;
}
a {
cursor: pointer;
display: inline-block;
font-size: 0.8rem;
background-color: transparent;
padding: 5px 20px;
border-radius: 50px;
margin: 0 10px 0 0;
outline: none;
border: 1px solid white;
color: white;
}
}
}
.community_section_right {
width: 100%;
background: #000000;
flex: 1;
color: white;
padding: 0px;
display: flex;
justify-content: center;
flex-direction: column;
font-family: "Manrope";

.community_section_heading {
width: 80%;
margin: 2rem auto 10rem 2rem;
div{
color: white;
font-size: 1.2rem;
line-height: normal;
font-weight: bold;
}

a {
margin-top: 10px;
font-weight: 300;
cursor: pointer;
display: inline-flex;
font-size: 0.8rem;
background-color: transparent;
padding: 5px 10px;
border-radius: 50px;
outline: none;
border: 1px solid white;
color: white;
align-items: center;
gap: 8px;
}
}
}
}
}
125 changes: 125 additions & 0 deletions docs-website/src/pages/_components/Ecosystem/ecosystem.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,3 +127,128 @@
}
}
}

// Responsiveness
@media (max-width: 480px) {
.ecosystem_section {
position: relative;
background: white;

.ecosystem_section_content {
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 0rem;

.ecosystem_section_upper_content {
width: 85%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 1rem;

.ecosystem_section_heading{
font-size: 1.6rem;
line-height: normal;
font-family: Manrope;
}
.ecosystem_section_subtitle {
width: 70%;
font-size: 0.8rem;
margin-top: 10px;
}
.bottom_line {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;

span {
color: #12b0fb;
font-size: 0.8rem;
font-weight: 500;
margin-top: 10px;
margin-bottom: 10px;
span {
line-height: 10px;
font-size: 1.5rem;
}
}
}
}
.ecosystem_section_lower_content {
width: 100%;
display: grid;
grid-template-areas:
"item-3 item-3"
"item-3 item-3 "
"item-1 item-2"
"item-4 item-5";
gap: 10px;
margin-top: 20px;
grid-template-columns: 1fr 1fr;
}

.item1,
.item2,
.item3,
.item4,
.item5 {
border-radius: 10px;
display: flex;
align-items: end;
justify-content: start;
padding: 10px;
overflow: hidden;
white-space: normal;
font-size: 1rem;
min-width: 150px;
}

.item1 {
grid-area: item-1;
background-color: rgb(238, 231, 243);
}

.item2 {
grid-area: item-2;
background-color: rgb(247, 226, 198);
}

.item3 {
grid-area: item-3;
aspect-ratio: 1;
background-color: #f6f8fb;
padding: 0;
}

.item4 {
grid-area: item-4;
background-color: rgb(241, 241, 191);
}

.item5 {
grid-area: item-5;
background-color: rgb(243, 206, 227);
}

/* Additional: Control image size */
.item_content img {
width: 20px;
height: 20px;
}

/* Additional: Limit text height with ellipsis */
.item_content span {
display: -webkit-box;
-webkit-line-clamp: 3; /* Show only 2 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
2 changes: 1 addition & 1 deletion docs-website/src/pages/_components/Trial/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Trial = () => {
<a>Book a Demo</a>
<a>Product Tour</a>
</div>
<div className={styles.start_arrow}>Get started with Core →</div>
<div className={styles.start_arrow}>Get started with Core <span>→</span></div>
</div>
</div>
<div className={styles.trial_right}>
Expand Down
Loading

0 comments on commit 46bbd09

Please sign in to comment.