From e4bf01fbe3349a68a9e993be71cc8b5411b592ba Mon Sep 17 00:00:00 2001 From: SamIsTheFBI Date: Wed, 17 Jan 2024 13:44:56 +0530 Subject: [PATCH 1/4] enhance: use flex layout for landing page cards Signed-off-by: Shivam Shekhar Soy --- assets/scss/_landing_project.scss | 116 ++++++++++++++++++------------ content/en/_index.md | 51 +++++++------ 2 files changed, 101 insertions(+), 66 deletions(-) diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss index 452c7531..af2bc447 100644 --- a/assets/scss/_landing_project.scss +++ b/assets/scss/_landing_project.scss @@ -1,48 +1,38 @@ .wrapper { box-sizing: border-box; } + .product-section { - display: grid; - //justify-content: space-between; + display: flex; + align-items: stretch; + justify-content: center; + flex-wrap: wrap; gap: 20px; - //grid-template-columns: 1fr 1fr 1fr; - //grid-template-columns: repeat(2, 1fr); - //grid-template-rows: auto auto; - grid-template-columns: repeat(3, 1fr); a { color: $white; } - @media (max-width: 1000px) { - grid-template-columns: 1fr 1fr; - } - @media (max-width: 768px) { - grid-template-columns: 1fr; - } } -// .box1, .box2 { -// grid-row: span 1; -// } -// .box3 { -// grid-column: span 2; -// grid-row: span 1; -// } +.flex-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} -// .box4 { -// grid-column: span 2; -// grid-row: span 2; -// } +.flex-col { + display: flex; + flex-direction: column; +} -.box3 { - grid-row: span 2; +.gap-20px { + gap: 20px; } -.box4 { - grid-column: span 2; - grid-row: span 1; +.grow-1 { + flex-grow: 1; } -.grid-card { +.landing-card { border-radius: 1rem; border: 2px solid #515151; background: #000; @@ -63,6 +53,7 @@ color: $primary; text-transform: uppercase; gap: 20px; + white-space: nowrap; } .playground-section { &.playground-logo { @@ -95,7 +86,6 @@ } .handbook-section { display: flex; - grid-column: span 2; // flex-basis: 100%; // flex: 2; background: linear-gradient(112deg, #000 34.88%, rgba(0, 110, 88, 0.82) 92.89%, #000 159.16%); @@ -104,7 +94,6 @@ @media (max-width: 768px) { flex-direction: column; - grid-column: span 1; } } .handbook-image{ @@ -119,7 +108,7 @@ } img{ - //box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50); + box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50); border-radius: 20px; width: 100%; } @@ -137,22 +126,61 @@ } } -.forum-section { - grid-row: span 3; - overflow: hidden; - +.forum-image { + padding: 1.25rem 1.5rem; img { box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50); - border-radius: 20px; - height: 18rem; - min-height: 70%; - + height: auto; + width: 100%; + object-fit: contain; } - @media (max-width: 1000px) { - grid-column: span 2; +} + +.forum-card { + border-radius: 1rem; + border: 2px solid #515151; + background: #000; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + padding: 20px; + text-align: left; + font-size: 1.25rem; + // aspect-ratio: 3/2; + height: 100%; + &:hover { + border: 2px solid $secondary; } - @media (max-width: 768px) { - grid-column: span 1; + + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.hidden { + display: none; +} + +.box1 { + max-width: 351.88px; +} + +.box2 { + max-width: 351.9px; +} + +.box3 { + max-width: 723.78px; +} + +.box4 { + // max-width: 552px; + max-width: 723.78px; + + overflow: hidden; +} + +@media (min-width: 1536px) { + .box4 { + max-width: 552px; } } diff --git a/content/en/_index.md b/content/en/_index.md index 3fb4ae45..4beab15f 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -39,12 +39,13 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou -
-
+
+
+
-
+
-
+
-
+
+
-
- -
-
- Discussion forum -

Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.

- Discussion Forum Image -
-
-
- -
+
-
+
Community Handbook

Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.

Community Handbook Image -
- -
+
+ +
+
+ +
+ +
+
+ Discussion forum +

Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.

+
+
+ Discussion Forum Image +
+
+ +
-
+
+
From 48a497d10f6b3ed70cec917038f41fd5af39da33 Mon Sep 17 00:00:00 2001 From: Shivam Shekhar Soy Date: Thu, 18 Jan 2024 20:10:15 +0530 Subject: [PATCH 2/4] fix: change forum card image position Signed-off-by: Shivam Shekhar Soy --- assets/scss/_landing_project.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss index af2bc447..9ecfa5d7 100644 --- a/assets/scss/_landing_project.scss +++ b/assets/scss/_landing_project.scss @@ -127,12 +127,12 @@ } .forum-image { - padding: 1.25rem 1.5rem; + padding: 3.85rem 0 0 1.5rem; img { box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50); border-radius: 20px; - height: auto; - width: 100%; + height: 25.5rem; + width: auto; object-fit: contain; } } @@ -154,6 +154,11 @@ display: flex; flex-direction: column; justify-content: space-between; + + padding-right: 0; + padding-bottom: 0; + max-height: 620px; + overflow: hidden; } .hidden { From 3456ad3fe7d0735c53613ddff4cda8302ae3392a Mon Sep 17 00:00:00 2001 From: Shivam Shekhar Soy Date: Thu, 18 Jan 2024 21:50:06 +0530 Subject: [PATCH 3/4] fix: better class names & font changes Signed-off-by: Shivam Shekhar Soy --- assets/scss/_landing_project.scss | 30 +++++++++++++----------------- content/en/_index.md | 22 +++++++++++----------- 2 files changed, 24 insertions(+), 28 deletions(-) diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss index 9ecfa5d7..8304ad08 100644 --- a/assets/scss/_landing_project.scss +++ b/assets/scss/_landing_project.scss @@ -3,6 +3,7 @@ } .product-section { + font-family: $font-qanelas; display: flex; align-items: stretch; justify-content: center; @@ -47,9 +48,9 @@ } } -.product-head { +.landing-card-title { font-size: 1.5rem; - font-weight: 500; + font-weight: 700; color: $primary; text-transform: uppercase; gap: 20px; @@ -86,18 +87,14 @@ } .handbook-section { display: flex; - // flex-basis: 100%; - // flex: 2; + align-items: center; background: linear-gradient(112deg, #000 34.88%, rgba(0, 110, 88, 0.82) 92.89%, #000 159.16%); - flex-direction: row; - align-items: start; @media (max-width: 768px) { flex-direction: column; } } .handbook-image{ - padding-top:40px; width: 110%; height: 100%; display: flex; @@ -114,8 +111,8 @@ } } -.handbook-text{ - padding-top:20px; +.landing-card-text{ + // padding-top:20px; display: flex; line-height: 30px; width: 90%; @@ -130,19 +127,18 @@ padding: 3.85rem 0 0 1.5rem; img { box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50); - border-radius: 20px; + border-radius: 20px 0 0 0; height: 25.5rem; width: auto; object-fit: contain; } } -.forum-card { +.forum-section { border-radius: 1rem; border: 2px solid #515151; background: #000; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - padding: 20px; text-align: left; font-size: 1.25rem; // aspect-ratio: 3/2; @@ -165,19 +161,19 @@ display: none; } -.box1 { +.playground-card { max-width: 351.88px; } -.box2 { +.catalog-card { max-width: 351.9px; } -.box3 { +.handbook-card { max-width: 723.78px; } -.box4 { +.forum-card { // max-width: 552px; max-width: 723.78px; @@ -185,7 +181,7 @@ } @media (min-width: 1536px) { - .box4 { + .forum-card { max-width: 552px; } } diff --git a/content/en/_index.md b/content/en/_index.md index 4beab15f..b369d07a 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -43,32 +43,32 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
-
+
-
+
-
+
-
- Community Handbook +
+ Community Handbook

Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.

@@ -79,11 +79,11 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
-
+
-
-
- Discussion forum +
+
+ Discussion forum

Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.

From 0a93c933290ce073ca052563f327122759471c4a Mon Sep 17 00:00:00 2001 From: Shivam Shekhar Soy Date: Mon, 22 Jan 2024 23:15:13 +0530 Subject: [PATCH 4/4] chore: clean up unnecessary css classes Signed-off-by: Shivam Shekhar Soy --- assets/scss/_landing_project.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss index 8304ad08..ab8054fd 100644 --- a/assets/scss/_landing_project.scss +++ b/assets/scss/_landing_project.scss @@ -41,7 +41,6 @@ padding: 20px; text-align: left; font-size: 1.25rem; - // aspect-ratio: 3/2; min-height: 300px; &:hover { border: 2px solid $secondary; @@ -112,7 +111,6 @@ } .landing-card-text{ - // padding-top:20px; display: flex; line-height: 30px; width: 90%; @@ -141,7 +139,6 @@ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); text-align: left; font-size: 1.25rem; - // aspect-ratio: 3/2; height: 100%; &:hover { border: 2px solid $secondary; @@ -157,10 +154,6 @@ overflow: hidden; } -.hidden { - display: none; -} - .playground-card { max-width: 351.88px; } @@ -174,7 +167,6 @@ } .forum-card { - // max-width: 552px; max-width: 723.78px; overflow: hidden;