Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix 'YOU ARE HERE' indicator in Kanvas, cloud documentation #458

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+25 −20
Open

Fix 'YOU ARE HERE' indicator in Kanvas, cloud documentation #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions content/en/cloud/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,18 @@ cascade:

## Understanding the Meshery Ecosystem

<div style="display:flex; gap: .5rem;">
<div
style="display:flex; align-items: center; margin-bottom:2rem; margin-top: 1rem;font-style:italic; white-space: nowrap;padding: 1rem; box-shadow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em 1em #ebc01733;">You are here</div>

<div style="min-width:50px;">{{< svg name="cloud" >}}</div>

<div style="padding:auto;margin:auto;">

**Layer5 Cloud** ([docs](/cloud)) is an identity provider and global console for Meshery deployments with an extensible and highly flexible authorization framework, tenant entitlement services, service provider-grade organizational hierarchy, team workspace management and a content catalog for public and private hosting of cloud native architectures. Layer5 Cloud is available as a service or self-hosted.
</div>
<div style="display:flex;flex-direction:column;margin-bottom:2rem;margin-top:1rem;padding:1rem;box-shadow:inset 0 0 4em #ebc01766,0 0 0 2px #ebc01766,.3em .3em 1em #ebc01733;position:relative;">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make all these repeated CSS, reusable.

<!-- "You are here" indicator -->
<div style="position:absolute;top:-10px;left:10px;background:#ebc017;color:#333;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:bold;">
YOU ARE HERE
</div>

<div style="display:flex;align-items:flex-start;gap:1rem;width:100%;">
<div style="min-width:50px;flex-shrink:0;">{{< svg name="cloud" >}}</div>
<div style="flex:1;word-wrap:break-word;">
<strong>Layer5 Cloud</strong> (<a href="/cloud">docs</a>) is an identity provider and global console for Meshery deployments with an extensible and highly flexible authorization framework, tenant entitlement services, service provider-grade organizational hierarchy, team workspace management and a content catalog for public and private hosting of cloud native architectures. Layer5 Cloud is available as a service or self-hosted.
</div>
</div>
</div>

<div style="display: flex; align-items: flex-start; margin-top:15px;"><div class="logo-container">{{< svg name="meshery" >}}</div>
Expand Down
23 changes: 13 additions & 10 deletions content/en/kanvas/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,19 @@ aliases:
**Meshery** ([docs](https://docs.meshery.io)) is a cloud native manager that enables the design and management of Kubernetes-based infrastructure and applications. It is an extensible developer platform that seamlessly integrates with all CNCF projects, and various monitoring, CI/CD, and security tools.
</div></div>

<div style="display:flex; gap: .5rem;">
<div
style="display:flex; align-items: center; margin-bottom:2rem; margin-top: 1rem;font-style:italic; white-space: nowrap;padding: 1rem; box-shadow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em 1em #ebc01733;">You are here</div>

<div style="min-width:50px;"><img src="/images/logos/kanvas-alt.svg" alt="kanvas logo" data-modal="false" style="border: none;"/></div>

<div>

**Kanvas** ([docs](/kanvas)) Kanvas delivers a collaborative experience similar to how Google Workplace transforms the digital work environment and how Figma democratizes UX design tooling. Kanvas simplifies the complexity of Kubernetes and multi-cloud infrastructure management accessible to all. Kanvas provides a visual, multi-player experience that allows you to create, configure, deploy, and manage modern infrastructure with confidence.
</div></div>
<div style="display:flex;flex-direction:column;margin-bottom:2rem;margin-top:1rem;padding:1rem;box-shadow:inset 0 0 4em #ebc01766,0 0 0 2px #ebc01766,.3em .3em 1em #ebc01733;position:relative;background-color:#1a1a1a;border:1px solid #ebc017;">
<!-- "You are here" indicator -->
<div style="position:absolute;top:-10px;left:10px;background:#ebc017;color:#333;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:bold;">
YOU ARE HERE
</div>

<div style="display:flex;align-items:flex-start;gap:1rem;width:100%;">
<div style="min-width:50px;flex-shrink:0;"><img src="/images/logos/kanvas-alt.svg" alt="kanvas logo" data-modal="false" style="border:none;"/></div>
<div style="flex:1;word-wrap:break-word;">
<strong>Kanvas</strong> (<a href="/kanvas">docs</a>) Kanvas delivers a collaborative experience similar to how Google Workplace transforms the digital work environment and how Figma democratizes UX design tooling. Kanvas simplifies the complexity of Kubernetes and multi-cloud infrastructure management accessible to all. Kanvas provides a visual, multi-player experience that allows you to create, configure, deploy, and manage modern infrastructure with confidence.
</div>
</div>
</div>
{{% /pageinfo %}}

## What is Kanvas?
Expand Down