Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history 
Signed-off-by: Lee Calcote <[email protected]>
  • Loading branch information
@leecalcote
leecalcote committed Nov 16, 2023
1 parent d8288a1 commit 36ad9ec
Show file tree
Hide file tree
Showing 9 changed files with 207 additions and 176 deletions.
124 changes: 124 additions & 0 deletions assets/scss/_landing_project.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
.product-section {
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
a {
color: $white;
}
@media (max-width: 1000px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
.grid-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 {
font-size: 1.5rem;
font-weight: 500;
color: $white;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.playground-section {
&.playground-logo {
background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/meshery-light-icon.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
}
display: flex;
flex-direction: column;
justify-content: top;
text-align: left;
align-content: space-between;
}

.catalog-section {
&.catalog-logo {
background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/catalog.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
}
display: flex;
flex-direction: column;
justify-content: top;
text-align: left;
align-content: space-between;
}
.handbook-section {
display: flex;
grid-column: span 2;
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{
width: 150%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
@media (max-width: 768px) {
width: 100%;

}
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: 8px;
width: 100%;
}

}
.handbook-text{
display: flex;
width: 90%;
flex-direction: column;
gap: 20px;
@media (max-width: 768px) {
width: 100%;
}
}

.forum-section {
grid-row: span 3;
overflow: hidden;
justify-content: baseline;
align-content: baseline;
justify-self: baseline;
align-self: baseline;
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: 8px;
width: 160%;
min-height: 26rem;

}
@media (max-width: 1000px) {
grid-column: span 2;
}
@media (max-width: 768px) {
grid-column: span 1;
}
}
117 changes: 1 addition & 116 deletions assets/scss/_styles_project.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import 'elements_project.scss';
@import 'footer_project.scss';
@import 'variables_project.scss';
@import 'landing_project.scss';

// Global Navigation Bar
.td-navbar{
Expand Down Expand Up @@ -459,119 +460,3 @@ td-sidebar {
background-color: $dark;
}

.landingPage {
display: flex;
gap: 40px;
flex-direction: column;
text-align: left;
}

.productSec {
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
@media (max-width: 1000px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}

.gridCard {
border-radius: 20px;
border: 1px solid #515151;
background: #000;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 20px;
display: flex;
align-items: baseline;
gap: 20px;
text-align: left;
flex-direction: column;
font-size: 16px;
// aspect-ratio: 3/2;
min-height: 300px;
}
.proHead {
font-size: 24px;
font-weight: 500;
color: $primary;
text-align: left;
text-transform: uppercase;
}
.playgroundSec {
position: relative;
img {
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.catalogSec {
position: relative;
img {
width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.handbookSec {
grid-column: span 2;
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;
}
}
.handbookImg{
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
@media (max-width: 768px) {
width: 100%;

}
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: 8px;
width: 100%;
}

}
.handbookText{
display: flex;
width: 50%;
flex-direction: column;
gap: 20px;
@media (max-width: 768px) {
width: 100%;

}
}

.forumSec {
grid-row: span 2;
// position: relative;
img{
// position: absolute;
box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50);
width: 100%;
border-radius: 8px;
}
@media (max-width: 1000px) {
grid-column: span 2;
}
@media (max-width: 768px) {
grid-column: span 1;
}
}
58 changes: 35 additions & 23 deletions content/en/_index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,32 +38,44 @@ title: Layer5
</a>
</div>

<div class= "product-section">

<a href="https://playground.meshery.io">
<div class="grid-card">
<div class= "playground-section playground-logo">
<span class="product-head">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 style="margin-top:35%;padding-top:35%"><a href="https://www.youtube.com/watch?v=034nVaQUyME&list=PL3A-A6hPO2IO_yzN83wSJJUNQActzCJvO&index=9" class="dash">Expect More from Your Infrastructure</a> </div> -->
<a href="https://meshery.layer5.io/catalog">
<div class="grid-card">
<div class= "catalog-section catalog-logo">
<span class="product-head">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 class= "productSec">
<div class= "playgroundSec gridCard">
<span class="proHead">Meshery playground</span>
<p>Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
<img src="images/mesheryO15.svg" />
</div>
<div class= "catalogSec gridCard">
<span class="proHead">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>
<img src="images/catalog.svg" />
</div>
<div class= "forumSec gridCard">
<span class="proHead">Discussion forum</span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
<img src="images/discuss.png" />
<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" />
</div>
</div>
<div class= "handbookSec gridCard">
<div class= "handbookText">
<span class="proHead">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= "handbookImg">
<img src="images/handbook.png" />

<a href="https://layer5.io/community/handbook">
<div class= "handbook-section grid-card">
<div class= "handbook-text">
<span class="product-head">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" />
</a>

</div>
</div>
</div>
Expand Down
11 changes: 0 additions & 11 deletions static/images/catalog.svg
View file

This file was deleted.

0 static/images/discuss.png → static/images/landing/discuss.png
View file
File renamed without changes
0 static/images/handbook.png → static/images/landing/handbook.png
View file
File renamed without changes
11 changes: 11 additions & 0 deletions static/images/logos/black-semi-opaque.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions static/images/logos/catalog.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 36ad9ec

Please sign in to comment.