Skip to content

Commit

Permalink
Merge pull request layer5io#156 from SamIsTheFBI/landing-flex-layout
Browse files Browse the repository at this point in the history 
[Docs] enhance: use flex layout for landing page cards
  • Loading branch information
@iArchitSharma
iArchitSharma committed Jan 25, 2024
2 parents a39a64c + a371e18 commit e3e69f2
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 81 deletions.
131 changes: 76 additions & 55 deletions assets/scss/_landing_project.scss
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,59 @@
.wrapper {
box-sizing: border-box;
}

.product-section {
display: grid;
//justify-content: space-between;
font-family: $font-qanelas;
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;
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;
min-height: 300px;
&:hover {
border: 2px solid $secondary;

}
}
.product-head {
.landing-card-title {
font-size: 1.5rem;
font-weight: 500;
font-weight: 700;
color: $primary;
text-transform: uppercase;
gap: 20px;
white-space: nowrap;
}
.playground-section {
&.playground-logo {
Expand Down Expand Up @@ -95,20 +86,14 @@
}
.handbook-section {
display: flex;
grid-column: span 2;
// 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;
grid-column: span 1;
}
}
.handbook-image{
padding-top:40px;
width: 110%;
height: 100%;
display: flex;
Expand All @@ -119,14 +104,13 @@

}
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%;
}

}
.handbook-text{
padding-top:20px;
.landing-card-text{
display: flex;
line-height: 30px;
width: 90%;
Expand All @@ -137,22 +121,59 @@
}
}

.forum-section {
grid-row: span 3;
overflow: hidden;

.forum-image {
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: 18rem;
min-height: 70%;

border-radius: 20px 0 0 0;
height: 25.5rem;
width: auto;
object-fit: contain;
}
@media (max-width: 1000px) {
grid-column: span 2;
}

.forum-section {
border-radius: 1rem;
border: 2px solid #515151;
background: #000;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
text-align: left;
font-size: 1.25rem;
height: 100%;
&:hover {
border: 2px solid $secondary;
}
@media (max-width: 768px) {
grid-column: span 1;

display: flex;
flex-direction: column;
justify-content: space-between;

padding-right: 0;
padding-bottom: 0;
max-height: 620px;
overflow: hidden;
}

.playground-card {
max-width: 351.88px;
}

.catalog-card {
max-width: 351.9px;
}

.handbook-card {
max-width: 723.78px;
}

.forum-card {
max-width: 723.78px;

overflow: hidden;
}

@media (min-width: 1536px) {
.forum-card {
max-width: 552px;
}
}
59 changes: 33 additions & 26 deletions content/en/_index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,55 +39,62 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
</a>
</div>

<div class="wrapper">
<div class= "product-section">

<div class="box">
<div class="gap-20px flex-col">
<div class="flex-row gap-20px">
<div class="playground-card grow-1">
<a href="https://playground.meshery.io">
<div class="grid-card">
<div class="landing-card">
<div class= "playground-section playground-logo">
<span class="product-head">Meshery playground</span>
<span class="landing-card-title">Meshery playground</span>
<p>Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
</div>
</div>
</a></div>

<div class="box">
<div class="catalog-card">
<a href="https://meshery.layer5.io/catalog">
<div class="grid-card">
<div class="landing-card">
<div class= "catalog-section catalog-logo">
<span class="product-head">Meshery Catalog</span>
<span class="landing-card-title">Meshery Catalog</span>
<p>Discover top-quality cloud native services for your infrastructure with the Cloud Native Catalog. Discover best practices and upgrade your Kubernetes management practices.</p>
</div>
</div>
</a></div>
</div>

<div class="box box3">
<a href="https://discuss.layer5.io">
<div class= "forum-section">
<div class="grid-card">
<span class="product-head">Discussion forum</span>
<p>Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.</p>
<img src="images/landing/discuss.png" alt="Discussion Forum Image" />
</div>
</div>
</a></div>

<div class="box box4">
<div class="handbook-card">
<a href="https://layer5.io/community/handbook">
<div class= "handbook-section grid-card">
<div class= "handbook-text">
<span class="product-head">Community Handbook</span>
<div class= "handbook-section landing-card">
<div class= "landing-card-text">
<span class="landing-card-title">Community Handbook</span>
<p>Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
</div>
<div class= "handbook-image">
<img src="images/landing/handbook.png" alt="Community Handbook Image" />
</div></div>
</a>
</div>
</div>
</div>
</a>
</div>
</div>

<div class="forum-card">
<a href="https://discuss.layer5.io">
<div class="forum-section landing-card">
<div class="landing-card-text">
<span class="landing-card-title">Discussion forum</span>
<p>Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.</p>
</div>
<div class="forum-image">
<img src="images/landing/discuss.png" alt="Discussion Forum Image" />
</div>
</div>
</a>
</div>

</div> <!-- Wrapper close -->
</div>
<!-- Wrapper close -->

<div class="dash-tangle"></div>
<div class="dash-ircle-container">
Expand Down

0 comments on commit e3e69f2

Please sign in to comment.